summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-19 22:10:55 +0100
committerVolpeon <git@volpeon.ink>2021-03-19 22:10:55 +0100
commitc7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd (patch)
tree4792d0f38463a15ca352118e8264a4813c05e15e /assets/css/components
parentAdded better font for text (Iosevka Aile) (diff)
downloadvolpeon.ink-c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd.tar.gz
volpeon.ink-c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd.tar.bz2
volpeon.ink-c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd.zip
WIP: Redesign
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_footer.scss21
-rw-r--r--assets/css/components/_hero.scss71
-rw-r--r--assets/css/components/_hlist.scss13
-rw-r--r--assets/css/components/_nav.scss132
-rw-r--r--assets/css/components/_page.scss134
-rw-r--r--assets/css/components/_spacer.scss5
6 files changed, 150 insertions, 226 deletions
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index a015d92..8fcbc98 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,6 +1,17 @@
1.c-footer { 1@include namespace('footer') {
2 padding-top: $footer--pad-v; 2 @include store((
3 padding-bottom: $footer--pad-v; 3 --dims: (
4 color: var(--obj); 4 --pad-y: .8em
5 text-align: right; 5 ),
6 --colors: (
7 --fg: prop(--colors --obj, $global: true)
8 )
9 ));
10
11 @include component(namespace()) {
12 padding-top: prop(--dims --pad-y);
13 padding-bottom: prop(--dims --pad-y);
14 color: prop(--colors --fg);
15 text-align: right;
16 }
6} 17}
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index bfcdc16..6c497a1 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -1,35 +1,50 @@
1.c-hero { 1@include namespace('hero') {
2 margin-bottom: $line-height * 2em; 2 @include store((
3 margin-left: -1 * $page--item-prefix--width; 3 --colors: (
4 padding-left: $page--item-prefix--width; 4 --back-fg: prop(--colors --bg-hi, $global: true)
5 overflow: hidden; 5 )
6 font-family: $font-fam--mono; 6 ));
7 7
8 &::after { 8 @include component(namespace()) {
9 content: str-repeat('░', 120); 9 display: flex;
10 display: block; 10 position: relative;
11 position: relative; 11 flex-direction: column;
12 z-index: -10; 12 align-items: center;
13 height: $line-height; 13 justify-content: center;
14 margin-top: px-to-em(2px); 14 text-align: center;
15 margin-left: -1 * $page--item-prefix--width;
16 padding-top: px-to-em(2px);
17 border-top: 1px solid var(--fg-hi);
18 color: var(--fg-hi);
19 line-height: $code-block--line-height;
20 }
21 15
22 &__pre { 16 @include element('title', 'backtitle') {
23 margin-top: 0; 17 margin: 0 auto;
24 overflow: hidden; 18 font-family: $font-fam--large;
25 } 19 text-transform: none;
20 }
21
22 @include element('emph') {
23 color: prop(--colors --accent, $global: true);
24 font-weight: 500;
25 }
26
27 @include element('title') {
28 max-width: 11em;
29 font-weight: 200;
30 }
31
32 @include element('backtitle') {
33 position: absolute;
34 z-index: -10;
35 transform: translateY(-.08em);
36 color: prop(--colors --back-fg);
37 }
26 38
27 @media (max-width: map-get($breakpoints, 'sm')) { 39 @include iro-responsive-env(('xs', 'sm', 'md')) {
28 margin-left: 0; 40 @include element('title') {
29 padding-left: 0; 41 padding: iro-responsive-set((7rem, 7rem, 10rem)) 0;
42 font-size: iro-responsive-set((1.8rem, 2.8rem, 3.3rem));
43 }
30 44
31 &::after { 45 @include element('backtitle') {
32 margin-left: 0; 46 font-size: iro-responsive-set((12rem, 14rem, 16rem));
47 }
33 } 48 }
34 } 49 }
35} 50}
diff --git a/assets/css/components/_hlist.scss b/assets/css/components/_hlist.scss
deleted file mode 100644
index a7cf665..0000000
--- a/assets/css/components/_hlist.scss
+++ /dev/null
@@ -1,13 +0,0 @@
1.c-hlist {
2 display: flex;
3
4 &__item {
5 display: block;
6 margin-right: 4ch;
7 padding-left: 0;
8
9 &::before {
10 display: none;
11 }
12 }
13}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index cd3ef14..2472706 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,57 +1,103 @@
1.c-nav { 1@include namespace('nav') {
2 position: sticky; 2 @include store((
3 z-index: 1000; 3 --dims: (
4 top: 0; 4 --font-size: 15px,
5 background-color: var(--nav--bg); 5 --pad-y: 1em,
6 font-size: $nav--font-size; 6 --pad-y-sm: .5em,
7 7 --item: (
8 &__items { 8 --pad-x: 1em,
9 --pad-x-sm: .75em,
10 --pad-y: 1em,
11 --pad-y-sm: .75em,
12 ),
13 ),
14 --colors: (
15 --logo: (
16 --idle: (
17 --fg: prop(--colors --fg-hi, $global: true),
18 ),
19 --hover: (
20 --fg: prop(--colors --fg-lo, $global: true),
21 )
22 ),
23 --item: (
24 --idle: (
25 --fg: prop(--colors --fg, $global: true),
26 ),
27 --hover: (
28 --fg: prop(--colors --fg-lo, $global: true),
29 ),
30 --active: (
31 --fg: prop(--colors --fg-lo, $global: true),
32 )
33 )
34 )
35 ));
36
37 @include component(namespace()) {
9 display: flex; 38 display: flex;
10 align-items: baseline; 39 align-items: center;
11 } 40 padding: prop(--dims --pad-y) 0;
41 font-size: prop(--dims --font-size);
42
43 @include element('logo') {
44 display: inline-block;
45 margin: 0;
46 padding: prop(--dims --item --pad-y) 0;
47 color: prop(--colors --logo --idle --fg);
48 font-family: $font-fam--mono;
49 text-decoration: none;
50
51 &:link,
52 &:visited {
53 &:hover {
54 background-color: transparent;
55 color: prop(--colors --logo --hover --fg);
56 }
57 }
58 }
59
60 @include element('logo-symbol') {
61 display: block;
62 width: $line-height * .9em;
63 height: $line-height * 1em;
64 }
12 65
13 &__logo { 66 @include element('item') {
14 display: inline-block; 67 display: inline-block;
15 margin: 0; 68 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
16 padding: $nav--item--pad-v 0; 69 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x);
17 color: var(--nav--logo--fg); 70 color: prop(--colors --item --idle --fg);
18 font-family: $font-fam--mono; 71 text-decoration: none;
19 text-decoration: none; 72 text-transform: uppercase;
20 73
21 &:link,
22 &:visited {
23 &:hover { 74 &:hover {
24 background-color: transparent; 75 background-color: transparent;
25 color: var(--nav--item--hover--fg); 76 color: prop(--colors --item --hover --fg);
77 text-decoration: underline;
78 }
79
80 @include modifier('active') {
81 border-color: prop(--colors --item --active --fg);
82 color: prop(--colors --item --active --fg);
26 font-weight: bold; 83 font-weight: bold;
27 } 84 }
28 } 85 }
29 }
30 86
31 &__item { 87 @include media('<=sm') {
32 display: inline-block; 88 padding: prop(--dims --pad-y-sm) 0;
33 margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
34 padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
35 border-bottom: 2px solid transparent;
36 color: var(--nav--item--idle--fg);
37 text-decoration: none;
38
39 &:hover {
40 background-color: transparent;
41 color: var(--nav--item--hover--fg);
42 font-weight: bold;
43 }
44 89
45 &--active { 90 @include element('logo', 'item') {
46 border-color: var(--nav--item--active--fg); 91 padding-top: prop(--dims --item --pad-y-sm);
47 color: var(--nav--item--active--fg); 92 padding-bottom: prop(--dims --item --pad-y-sm);
48 font-weight: bold; 93 }
49 }
50 }
51 94
52 @media (max-width: map-get($breakpoints, 'sm')) { 95 @include element('item') {
53 &__item { 96 margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)});
54 margin-left: $nav--item--spacing--sm - $nav--item--pad-h; 97 margin-left: prop(--dims --item --pad-x-sm);
98 padding-right: prop(--dims --item --pad-x-sm);
99 padding-left: prop(--dims --item --pad-x-sm);
100 }
55 } 101 }
56 } 102 }
57} 103}
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index 9d1e991..ef39061 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -1,133 +1,3 @@
1.c-page { 1@include component('page') {
2 &__prefixed { 2 //
3 position: relative;
4 margin-left: -1 * $page--item-prefix--width;
5 padding-left: $page--item-prefix--width;
6
7 &::before {
8 display: inline-block;
9 position: absolute;
10 box-sizing: border-box;
11 width: $page--item-prefix--width;
12 margin-left: -1 * $page--item-prefix--width;
13 padding-right: $page--item-prefix--pad;
14 color: var(--page--item-prefix--fg);
15 font-family: $font-fam--mono;
16 font-weight: normal;
17 text-align: right;
18 }
19
20 $h1-unscale-factor: px-to-em($font-size, $content--h1--font-size);
21
22 &--h1 {
23 margin-top: $line-height * $h1-unscale-factor;
24 font-size: px-to-em($content--h1--font-size);
25
26 &::before {
27 content: '#';
28 font-size: $h1-unscale-factor;
29 }
30 }
31
32 &--h2::before {
33 content: '##';
34 }
35
36 &--h3::before {
37 content: '###';
38 }
39
40 &--pre {
41 $scale-factor: $font-size / $code-block--font-size;
42
43 margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
44 padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
45 border-left: 0;
46 color: var(--code-block--fg);
47 font-size: $code-block--font-size;
48 line-height: $code-block--line-height;
49 text-overflow: '';
50
51 &::before {
52 content: str-repeat('``\A', 40);
53 height: 100%;
54 overflow: hidden;
55 color: var(--page--item-prefix--fg);
56 font-size: px-to-em($font-size, $code-block--font-size);
57 line-height: $code-block--line-height / $scale-factor;
58 }
59 }
60
61 &--ref::before {
62 content: '|>';
63 }
64
65 &--backref::before {
66 content: '<|';
67 }
68 }
69
70 &__header {
71 margin-bottom: $line-height * 1em;
72
73 &__title {
74 margin-top: 0;
75 }
76
77 &__backlink__link {
78 &:link,
79 &:visited {
80 color: var(--fg-hi);
81
82 &:hover {
83 color: var(--link--hover--fg);
84 }
85 }
86 }
87
88 &__backlink + &__title {
89 margin-top: $line-height * 1em;
90 }
91
92 &__meta {
93 margin-top: 0;
94 color: var(--fg-hi);
95 font-weight: normal;
96 }
97 }
98
99 &__content {
100 padding-left: $page--item-prefix--width;
101
102 > :first-child {
103 margin-top: 0;
104 }
105 }
106
107 @media (max-width: map-get($breakpoints, 'sm')) {
108 &__prefixed {
109 margin-left: 0;
110 padding-left: $page--item-prefix--width--sm;
111
112 &::before {
113 width: $page--item-prefix--width--sm;
114 margin-left: -1 * $page--item-prefix--width--sm;
115 }
116
117 &--h1,
118 &--h2,
119 &--h3,
120 &--pre {
121 padding-left: 0;
122
123 &::before {
124 display: none;
125 }
126 }
127 }
128
129 &__content {
130 padding-left: 0;
131 }
132 }
133} 3}
diff --git a/assets/css/components/_spacer.scss b/assets/css/components/_spacer.scss
deleted file mode 100644
index 692eb29..0000000
--- a/assets/css/components/_spacer.scss
+++ /dev/null
@@ -1,5 +0,0 @@
1.c-spacer {
2 display: block;
3 height: 0;
4 margin: ($line-height * 2em) 0 0;
5}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-26 18:00:19 +0000