adaptivity

This commit is contained in:
Kseninia Mikhaylova 2024-08-12 13:01:51 +03:00
parent e4a661a23f
commit fdc3cf626c
2 changed files with 22 additions and 8 deletions

View File

@ -21,6 +21,10 @@
box-shadow: 0 0 4px rgba(#000, 0.5); box-shadow: 0 0 4px rgba(#000, 0.5);
z-index: 100; z-index: 100;
@media(max-width: 768px) {
display: none;
}
} }
body { body {
padding-left: 2.5rem; padding-left: 2.5rem;

View File

@ -45,24 +45,26 @@ const sidebar_obj = ref()
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.sidebar { .sidebar {
width: 23vw; max-width: 23vw;
background-color: #fff; background-color: #fff;
position: fixed; position: fixed;
top: 0; top: 0;
right: -27vw; right: -50%;
bottom: 0; bottom: 0;
transition: all 300ms linear; transition: all 300ms linear;
line-height: 1.25; line-height: 1.25;
padding: 3rem 2rem 2rem; padding: 3rem 2rem 2rem;
@media(max-width:768px) { @media(max-width:768px) {
padding-left: 0.5rem; padding-top: 2rem;;
padding-right: 0.5rem; padding-left: 0.75rem;
padding-right: 0.75rem;
max-width: 48%;
} }
&.open { &.open {
right: 0 right: 0;
} }
&-close { &-close {
@ -73,7 +75,7 @@ const sidebar_obj = ref()
color: black; color: black;
@media(max-width:768px) { @media(max-width:768px) {
lefT: 0.5rem; left: 0.5rem;
} }
} }
@ -94,7 +96,11 @@ const sidebar_obj = ref()
h2 { h2 {
text-align: center; text-align: center;
font-size: 2rem; font-size: 2rem;
margin: 1rem margin: 1rem;
@media(max-width:768px) {
font-size: 1.5rem;
}
} }
p, p,
@ -104,6 +110,10 @@ const sidebar_obj = ref()
p { p {
font-size: 1.25rem; font-size: 1.25rem;
@media(max-width:768px) {
font-size: 1rem;
}
} }
h3 { h3 {