summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-11-14 16:49:28 +0100
committerVolpeon <git@volpeon.ink>2021-11-14 16:49:28 +0100
commit23deadd4773d2f36bfb1da2c5ceac0fac695c52a (patch)
tree49d6729e873b2f711df80229c6f050b7ebff6bef /assets/css
parentImproved semantic structure (diff)
downloadvolpeon.ink-23deadd4773d2f36bfb1da2c5ceac0fac695c52a.tar.gz
volpeon.ink-23deadd4773d2f36bfb1da2c5ceac0fac695c52a.tar.bz2
volpeon.ink-23deadd4773d2f36bfb1da2c5ceac0fac695c52a.zip
Fix small viewports
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss9
-rw-r--r--assets/css/components/_header.scss14
2 files changed, 12 insertions, 11 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 4d4ecc6..c332ff7 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -19,26 +19,27 @@ code {
19} 19}
20 20
21html { 21html {
22 height: 100%;
22 background-color: prop(--colors --bg); 23 background-color: prop(--colors --bg);
23 color: prop(--colors --fg); 24 color: prop(--colors --fg);
24 font-family: $font-fam--text; 25 font-family: $font-fam--text;
25 font-size: 1em / 16px * $font-size; 26 font-size: 1em / 16px * $font-size;
26 line-height: $line-height; 27 line-height: $line-height;
27 height: 100%;
28} 28}
29 29
30body { 30body {
31 display: flex; 31 display: flex;
32 box-sizing: border-box;
32 flex-direction: column; 33 flex-direction: column;
33 min-height: 100%; 34 min-height: 100%;
34 margin: 0; 35 margin: 0;
35 padding: 2px; 36 padding: 2px;
36 box-sizing: border-box;
37} 37}
38 38
39main { 39main {
40 width: 100%; 40 box-sizing: border-box;
41 41 width: 100%;
42
42 @include iro-responsive-env(('sm', 'md')) { 43 @include iro-responsive-env(('sm', 'md')) {
43 font-size: iro-responsive-set((1rem, 1 / 16 * 18rem)); 44 font-size: iro-responsive-set((1rem, 1 / 16 * 18rem));
44 } 45 }
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index a59c039..c1095b3 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -14,7 +14,7 @@
14 --dims: ( 14 --dims: (
15 --height: 4rem, 15 --height: 4rem,
16 --icon: 1.5rem, 16 --icon: 1.5rem,
17 --pad-x: calc(0.5 * (var(--header--dims--height) - var(--header--dims--icon))), 17 --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
18 ) 18 )
19 )); 19 ));
20 20
@@ -31,11 +31,11 @@
31 31
32 @include element('item') { 32 @include element('item') {
33 padding: 0 prop(--dims --pad-x); 33 padding: 0 prop(--dims --pad-x);
34 line-height: prop(--dims --height); 34 transition: background-color .2s, color .2s, border-left-color .2s;
35 color: prop(--colors --fg);
36 background-color: prop(--colors --bg); 35 background-color: prop(--colors --bg);
36 color: prop(--colors --fg);
37 line-height: prop(--dims --height);
37 text-decoration: none; 38 text-decoration: none;
38 transition: background-color .2s, color .2s, border-left-color .2s;
39 39
40 @include next-twin-element { 40 @include next-twin-element {
41 margin-left: 2px; 41 margin-left: 2px;
@@ -43,9 +43,9 @@
43 43
44 &:hover, 44 &:hover,
45 &:focus { 45 &:focus {
46 color: prop(--colors --hover --fg);
47 background-color: prop(--colors --hover --bg);
48 border-left-color: prop(--colors --hover --bg); 46 border-left-color: prop(--colors --hover --bg);
47 background-color: prop(--colors --hover --bg);
48 color: prop(--colors --hover --fg);
49 } 49 }
50 50
51 @include modifier('icon') { 51 @include modifier('icon') {
@@ -55,8 +55,8 @@
55 } 55 }
56 56
57 @include modifier('active') { 57 @include modifier('active') {
58 font-weight: bold;
59 color: prop(--colors --active --fg); 58 color: prop(--colors --active --fg);
59 font-weight: bold;
60 } 60 }
61 } 61 }
62 62