adaptivity
This commit is contained in:
parent
e4a661a23f
commit
fdc3cf626c
|
@ -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;
|
||||||
|
|
|
@ -45,11 +45,11 @@ 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;
|
||||||
|
@ -57,12 +57,14 @@ const sidebar_obj = ref()
|
||||||
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 {
|
||||||
|
|
Loading…
Reference in New Issue