sjs/samhuri.net
1
0
Fork 0
mirror of https://github.com/samsonjs/samhuri.net.git synced 2026-04-27 14:57:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Layout tweaks for notches

Browse source
This commit is contained in:
Sami Samhuri 2019-10-11 14:13:30 -07:00
parent 27c07523e1
commit 005819d7d7
1 changed files with 12 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
public/css/style.css.less
View file

@ -32,6 +32,7 @@ body {
margin: 0 auto; margin: 0 auto;
max-width: 48rem; max-width: 48rem;
width: 90%; width: 90%;
padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
} }
@media (min-width: @screen-medium) { @media (min-width: @screen-medium) {
@ -102,6 +103,7 @@ body {
background-color: @light-background; background-color: @light-background;
color: @light-text; color: @light-text;
font-family: 'museo-sans', 'Helvetica Neue', 'Verdana', 'Roboto', sans-serif; font-family: 'museo-sans', 'Helvetica Neue', 'Verdana', 'Roboto', sans-serif;
padding-bottom: constant(safe-area-inset-bottom);
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -131,7 +133,7 @@ hr {
header.primary { header.primary {
background-color: darken(@light-text, 5%); background-color: darken(@light-text, 5%);
color: @light-background; color: @light-background;
padding: 0.4rem 0.8rem; padding: 0.4rem 2.5rem;
border-bottom: solid 1px lighten(@light-text, 40%); border-bottom: solid 1px lighten(@light-text, 40%);
box-shadow: 0 0 12px 2px @light-text; box-shadow: 0 0 12px 2px @light-text;
@ -182,7 +184,7 @@ header.primary {
float: right; float: right;
clear: none; clear: none;
padding: 0.65rem 0; padding-top: 0.65rem;
height: 1rem; height: 1rem;
} }
@ -201,15 +203,17 @@ header.primary {
font-size: 1.3rem; font-size: 1.3rem;
} }
li:first-child {
padding-left: 0;
}
li:last-child {
padding-right: 0;
}
li i.fa { li i.fa {
font-size: 1.4rem; font-size: 1.4rem;
padding: 0.2rem; padding: 0.2rem;
-o-transition: 0.2s;
-ms-transition: 0.2s;
-moz-transition: 0.2s;
-webkit-transition: 0.2s;
transition: 0.2s;
} }
li.email i.fa { li.email i.fa {
@ -243,21 +247,6 @@ footer {
} }
} }
/* iPhone X */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
body {
padding-bottom: constant(safe-area-inset-bottom);
}
}
@media only screen and (orientation: landscape) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.container {
padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
}
header.primary {
padding: 0.4rem constant(safe-area-inset-right) 0.4rem constant(safe-area-inset-left);
}
}
// dark mode // dark mode
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {