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

38
_sass/_layout.scss
View File

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