skylab/MasterPassword
2
0
Fork 0
Code Releases Activity

Improvements for small screens.

Browse Source
This commit is contained in:
Maarten Billemont 2018-04-25 16:17:24 -04:00
parent 0545fc7999
commit e886da7af0
1 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
_sass/_layout.scss
View File

@ -12,13 +12,13 @@ body * {
/*outline: 1px solid rgba(255, 0, 0, 0.5);/**/
}
img, video {
margin: 1ex 1em;
margin: 1ex 2%;
width: 96%;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
object-fit: contain;
box-sizing: border-box;
max-width: 100%;
}
h1 {
margin: 0;
@ -66,10 +66,13 @@ q {
nav {
display: flex;
font-size: 1.8em;
font-weight: 400;
text-align: center;
@media screen and (min-width: 1024px) {
font-size: 1.8em;
}
&>* {
flex: 1;
border: 0 solid transparent;
@ -130,7 +133,7 @@ header {
}
nav:first-child {
position: fixed;
padding: 0 2em;
padding: 0 20px;
margin: 0;
left: 0;
right: 0;
@ -138,6 +141,10 @@ header {
background: rgba(0, 0, 0, 0.8);
color: white;
@media screen and (min-width: 1024px) {
padding: 0 100px;
}
&>*:first-child {
text-align: left;
font-variant: small-caps;
@ -176,15 +183,23 @@ header.large, section {
}
section {
box-sizing: border-box;
padding: 2em 100px;
padding: 2em 20px;
font-size: 1.2em;
@media screen and (min-width: 1024px) {
padding: 2em 100px;
}
}
footer {
padding: 2em 100px;
padding: 2em 20px;
background: rgba(240, 240, 240, 1);
@media screen and (min-width: 1024px) {
padding: 2em 100px;
}
& > div {
display: flex;
@ -315,6 +330,8 @@ input[type=checkbox] {
}
}
.widget_test ul {
margin: 0 8px;
list-style: none;
li {
@ -330,10 +347,15 @@ input[type=checkbox] {
& + label + div {
display:none;
margin: 1ex 0;
padding: 1ex 2em;
padding: 1ex;
background: rgba(240, 240, 240, 1);
font-weight: 100;
@media screen and (min-width: 1024px) {
padding: 1ex 2em;
}
}
&:checked + label + div {
display:block;