ipng/ipng.ch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accommodate 100% width for 'mini' screens -- like iPhone
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Pim van Pelt
2024-08-05 20:54:04 +02:00
parent 4210f97c9d
commit 4aa6f0bf10
1 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
themes/hugo-theme-ipng/assets/styles.scss
View File

@ -58,11 +58,15 @@ body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
overflow-y: scroll; overflow-y: scroll;
font-size: $base-font-size * 1.0;
line-height: $base-line-height * 1.0; line-height: $base-line-height * 1.0;
font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@media #{$mq-medium} { line-height: $base-line-height*1.0; } @media #{$mq-mini} { font-size: $base-font-size * 0.8; }
@media #{$mq-small} { font-size: $base-font-size * 0.9; }
@media #{$mq-medium} { font-size: $base-font-size * 1.0; }
@media #{$mq-large} { font-size: $base-font-size * 1.0; }
@media #{$mq-xlarge} { font-size: $base-font-size * 1.1; }
@media #{$mq-xxlarge} { font-size: $base-font-size * 1.1; }
} }
/*largest screens*/ /*largest screens*/
@ -71,6 +75,7 @@ main {
margin: 0; margin: 0;
padding: 1em 1em; padding: 1em 1em;
@media #{$mq-mini} { margin: 0 2%; }
@media #{$mq-small} { margin: 0 15%; } @media #{$mq-small} { margin: 0 15%; }
@media #{$mq-medium} { margin: 0 17%; } @media #{$mq-medium} { margin: 0 17%; }
@media #{$mq-large} { margin: 0 21%; } @media #{$mq-large} { margin: 0 21%; }
@ -325,11 +330,12 @@ nav li:hover {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@media #{$mq-small} { margin: 0 15%; } @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
@media #{$mq-medium} { margin: 0 17%; } @media #{$mq-small} { margin: 0 15%; width: 70%; font-size: $base-font-size * 0.9; }
@media #{$mq-large} { margin: 0 21%; } @media #{$mq-medium} { margin: 0 17%; width: 66%; font-size: $base-font-size * 1.0; }
@media #{$mq-xlarge} { margin: 0 24%; } @media #{$mq-large} { margin: 0 21%; width: 58%; font-size: $base-font-size * 1.0; }
@media #{$mq-xxlarge} { margin: 0 27%; } @media #{$mq-xlarge} { margin: 0 24%; width: 52%; font-size: $base-font-size * 1.1; }
@media #{$mq-xxlarge} { margin: 0 27%; width: 48%; font-size: $base-font-size * 1.1; }
a:hover { a:hover {
color: $ipng-lightorange; color: $ipng-lightorange;
@ -350,17 +356,18 @@ nav li:hover {
color: $text-light; color: $text-light;
background-color: #f7f7f7; background-color: #f7f7f7;
@media #{$mq-small} { margin: 0 15%; width: 70%; } @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
@media #{$mq-medium} { margin: 0 17%; width: 66%; } @media #{$mq-small} { margin: 0 15%; width: 70%; font-size: $base-font-size * 0.9; }
@media #{$mq-large} { margin: 0 21%; width: 58%; } @media #{$mq-medium} { margin: 0 17%; width: 66%; font-size: $base-font-size * 1.0; }
@media #{$mq-xlarge} { margin: 0 24%; width: 52%; } @media #{$mq-large} { margin: 0 21%; width: 58%; font-size: $base-font-size * 1.0; }
@media #{$mq-xxlarge} { margin: 0 27%; width: 48%; } @media #{$mq-xlarge} { margin: 0 24%; width: 52%; font-size: $base-font-size * 1.1; }
@media #{$mq-xxlarge} { margin: 0 27%; width: 48%; font-size: $base-font-size * 1.1; }
} }
.myname { .myname {
margin: 0 auto 0 0; margin: 0 auto 0 0;
padding-left: .5em; padding-left: .5em;
font-size: 1em; font-size: $base-font-size * 1.2;
color: $ipng-orange; color: $ipng-orange;
} }