summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.stylelintrc.json2
-rw-r--r--assets/css/_vars.scss141
-rw-r--r--assets/css/components/_card.scss7
-rw-r--r--assets/css/components/_header.scss1
-rw-r--r--assets/css/components/_outer-button.scss6
-rw-r--r--assets/css/components/_project.scss18
-rw-r--r--assets/css/layouts/_section.scss3
-rw-r--r--assets/css/scopes/_body.scss36
-rw-r--r--assets/css/style.scss4
-rw-r--r--templates/layouts/ascii_fox.html6
10 files changed, 158 insertions, 66 deletions
diff --git a/.stylelintrc.json b/.stylelintrc.json
index f15e9b6..82a61ce 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -5,7 +5,7 @@
5 "number-leading-zero": "never", 5 "number-leading-zero": "never",
6 "max-nesting-depth": 4, 6 "max-nesting-depth": 4,
7 "selector-class-pattern": [ 7 "selector-class-pattern": [
8 "^[closu](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", 8 "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$",
9 { "resolveNestedSelectors": true } 9 { "resolveNestedSelectors": true }
10 ], 10 ],
11 "declaration-colon-space-after": null, 11 "declaration-colon-space-after": null,
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ab3d9e5..388db0e 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -24,56 +24,109 @@ $font-size: 16px;
24$line-height: 1.7; 24$line-height: 1.7;
25$content--width: 42rem; 25$content--width: 42rem;
26 26
27$gray0: hsl(220, 7%, 7%); 27@include iro-execute {
28$gray1: hsl(220, 7%, 11%); 28 $gray0: hsl(220, 7%, 7%);
29$gray2: hsl(220, 7%, 18%); 29 $gray1: hsl(220, 7%, 11%);
30$gray3: hsl(220, 7%, 23%); 30 $gray2: hsl(220, 7%, 18%);
31$gray4: hsl(220, 7%, 38%); 31 $gray3: hsl(220, 7%, 23%);
32$gray5: hsl(220, 7%, 60%); 32 $gray4: hsl(220, 7%, 38%);
33$gray6: hsl(220, 7%, 76%); 33 $gray5: hsl(220, 7%, 60%);
34$gray7: hsl(220, 7%, 100%); 34 $gray6: hsl(220, 7%, 76%);
35 $gray7: hsl(220, 7%, 100%);
35 36
36@include store(( 37 @include store((
37 --dims: ( 38 --dims: (
38 --outer: 4rem, 39 --outer: 4rem,
39 --indent: 2rem, 40 --indent: 2rem,
40 ), 41
41 --colors: ( 42 --obj-shadow: 0 .4em 3.5em,
42 --bg-hi: $gray0, // Darker background
43 --bg: $gray1, // Background
44 --bg-lo: $gray2, // Lighter background
45
46 --obj-hi: $gray3,
47 --obj: $gray4,
48
49 --fg-hi: $gray5, // Faint text
50 --fg: $gray6, // Text
51 --fg-lo: $gray7, // Strong text
52
53 --accent: (
54 --h: 354,
55 --s: 84%,
56 --l: 55%,
57 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
58 ), 43 ),
44 --colors: (
45 --bg-hi: $gray0, // Darker background
46 --bg: $gray1, // Background
47 --bg-lo: $gray2, // Lighter background
48
49 --obj-hi: $gray3,
50 --obj: $gray4,
51
52 --fg-hi: $gray5, // Faint text
53 --fg: $gray6, // Text
54 --fg-lo: $gray7, // Strong text
59 55
60 --focus-ring: var(--colors--fg-lo), 56 --obj-shadow: transparent,
61 57
62 --select: ( 58 --accent: (
63 --bg: rgba($gray7, .996), 59 --h: 354,
64 --img-bg: rgba($gray7, .5), 60 --s: 84%,
65 --fg: $gray0, 61 --l: 55%,
66 ), 62 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
63 ),
64
65 --focus-ring: var(--colors--fg-lo),
67 66
68 --link: ( 67 --select: (
69 --idle: var(--colors--fg-lo), 68 --bg: rgba($gray7, .996),
70 --colored: ( 69 --img-bg: rgba($gray7, .5),
71 --idle: hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), // 70 --fg: var(--colors--bg-hi),
72 --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), // 71 ),
73 ) 72
73 --link: (
74 --idle: var(--colors--fg-lo),
75 --colored: (
76 --idle: hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), //
77 --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), //
78 )
79 ),
80 )
81 ));
82}
83
84@include iro-execute {
85 $gray0: hsl(220, 7%, 100%);
86 $gray1: hsl(220, 7%, 97%);
87 $gray2: hsl(220, 7%, 88%);
88 $gray3: hsl(220, 7%, 83%);
89 $gray4: hsl(220, 7%, 68%);
90 $gray5: hsl(220, 7%, 40%);
91 $gray6: hsl(220, 7%, 16%);
92 $gray7: hsl(220, 7%, 0%);
93
94 @include store((
95 --colors: (
96 --bg-hi: $gray0, // Darker background
97 --bg: $gray1, // Background
98 --bg-lo: $gray2, // Lighter background
99
100 --obj-hi: $gray3,
101 --obj: $gray4,
102
103 --fg-hi: $gray5, // Faint text
104 --fg: $gray6, // Text
105 --fg-lo: $gray7, // Strong text
106
107 --obj-shadow: rgba(#000, .05),
108
109 --accent: (
110 --h: 354,
111 --s: 74%,
112 --l: 48%,
113 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
114 ),
115
116 --select: (
117 --bg: rgba($gray7, .996),
118 --img-bg: rgba($gray7, .5),
119 ),
120
121 --link: (
122 --colored: (
123 --idle: hsl(210, 80%, 45%), //hsl(var(--colors--accent--h), 100%, 66%), //
124 --visited: hsl(270, 40%, 45%), //hsl(var(--colors--accent--h), 50%, 66%), //
125 )
126 ),
74 ), 127 ),
75 ) 128 ), 'light');
76)); 129}
77 130
78@each $breakpoint in map-keys($breakpoints) { 131@each $breakpoint in map-keys($breakpoints) {
79 @include media('<=#{$breakpoint}') { 132 @include media('<=#{$breakpoint}') {
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index fd897a7..eeaa7c1 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -15,6 +15,12 @@
15 ) 15 )
16 )); 16 ));
17 17
18 @include store((
19 --colors: (
20 --bg: prop(--colors --bg-hi, $global: true),
21 )
22 ), 'light');
23
18 @include component(namespace()) { 24 @include component(namespace()) {
19 display: flex; 25 display: flex;
20 position: relative; 26 position: relative;
@@ -22,6 +28,7 @@
22 transform: translateY(0); 28 transform: translateY(0);
23 transition: transform .2s, background-color .2s, color .2s; 29 transition: transform .2s, background-color .2s, color .2s;
24 background-color: prop(--colors --bg); 30 background-color: prop(--colors --bg);
31 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
25 color: prop(--colors --fg); 32 color: prop(--colors --fg);
26 line-height: 1.4; 33 line-height: 1.4;
27 34
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 61f6f4a..e74780b 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -18,5 +18,6 @@
18 left: 0; 18 left: 0;
19 flex-direction: row; 19 flex-direction: row;
20 justify-content: flex-start; 20 justify-content: flex-start;
21 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
21 } 22 }
22} 23}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 2b7775e..f3d3276 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -18,6 +18,12 @@
18 ) 18 )
19 )); 19 ));
20 20
21 @include store((
22 --colors: (
23 --border: rgba(#fff, .1),
24 )
25 ), 'light');
26
21 @include component(namespace()) { 27 @include component(namespace()) {
22 display: flex; 28 display: flex;
23 height: prop(--dims --outer, $global: true); 29 height: prop(--dims --outer, $global: true);
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 76cc68b..5248e32 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -6,8 +6,9 @@
6 )); 6 ));
7 7
8 @include component(namespace()) { 8 @include component(namespace()) {
9 position: relative; 9 position: relative;
10 overflow: hidden; 10 overflow: hidden;
11 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
11 12
12 &::before { 13 &::before {
13 content: ''; 14 content: '';
@@ -56,13 +57,12 @@
56 } 57 }
57 58
58 @include element('card') { 59 @include element('card') {
59 position: absolute; 60 position: absolute;
60 z-index: 20; 61 z-index: 20;
61 right: 1em; 62 right: 1em;
62 bottom: 1em; 63 bottom: 1em;
63 min-width: 15em; 64 min-width: 15em;
64 max-width: calc(100% - 2em); 65 max-width: calc(100% - 2em);
65 box-shadow: 0 .8em 2.5em rgba(#000, .25);
66 } 66 }
67 } 67 }
68} 68}
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 9dbe2be..36c84a7 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -2,9 +2,6 @@
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --border: prop(--colors --obj-hi, $global: true), 4 --border: prop(--colors --obj-hi, $global: true),
5 ),
6 --dims: (
7 --banner-blur: .5rem,
8 ) 5 )
9 )); 6 ));
10 7
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index b44e083..a27b30f 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,17 +1,29 @@
1@include namespace('body') { 1@include namespace('body') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --meta: ( 4 --meta: prop(--colors --fg-hi, $global: true),
5 --fg: prop(--colors --fg-hi, $global: true), 5 --code: (
6 ) 6 --fg: hsl(prop(--colors --accent --h, $global: true), 90%, 64%),
7 --bg: prop(--colors --bg-hi, $global: true),
8 ),
9 --obj-border: prop(--colors --obj, $global: true),
7 ) 10 )
8 )); 11 ));
9 12
13 @include store((
14 --colors: (
15 --code: (
16 --fg: hsl(prop(--colors --accent --h, $global: true), 74%, 52%),
17 ),
18 --obj-border: prop(--colors --obj-hi, $global: true),
19 )
20 ), 'light');
21
10 @include scope(namespace()) { 22 @include scope(namespace()) {
11 font-size: 1 / 16 * 19em; 23 font-size: 1 / 16 * 19em;
12 24
13 @include element('meta') { 25 @include element('meta') {
14 color: prop(--colors --meta --fg); 26 color: prop(--colors --meta);
15 font-size: 1 / 16 * 15rem; 27 font-size: 1 / 16 * 15rem;
16 28
17 + h1 { 29 + h1 {
@@ -23,11 +35,23 @@
23 max-width: 100%; 35 max-width: 100%;
24 } 36 }
25 37
38 code {
39 padding: .2em .4em;
40 background-color: prop(--colors --code --bg);
41 color: prop(--colors --code --fg);
42 }
43
26 blockquote, 44 blockquote,
27 pre { 45 pre {
28 margin: ($line-height * 1rem) 0 0; 46 margin: ($line-height * 1rem) 0 0 1px;
29 padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px); 47 padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px);
30 border-left: 3px solid prop(--colors --obj, $global: true); 48 border-left: 3px solid prop(--colors --obj-border);
49 }
50
51 pre code {
52 padding: 0;
53 background-color: transparent;
54 color: currentColor;
31 } 55 }
32 56
33 @include media('<=sm') { 57 @include media('<=sm') {
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 30878fe..5ba15b8 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -40,3 +40,7 @@
40 } 40 }
41 } 41 }
42} 42}
43
44.t-light {
45 @include assign('light');
46}
diff --git a/templates/layouts/ascii_fox.html b/templates/layouts/ascii_fox.html
index ce8597e..9ae3b29 100644
--- a/templates/layouts/ascii_fox.html
+++ b/templates/layouts/ascii_fox.html
@@ -7,6 +7,6 @@
7 ' ' |__ ,( |' |_ ' ' ' <strong>//\_</strong> ' | ' . | ' ' | ' ' 7 ' ' |__ ,( |' |_ ' ' ' <strong>//\_</strong> ' | ' . | ' ' | ' '
8 ' | )~._ _( . ) .| ) ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | . ( ' ' | ' 8 ' | )~._ _( . ) .| ) ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | . ( ' ' | '
9 ' |, __´ ) ( | | | ` <strong>_,~´"' , . ,~--´</strong> ' _| | . |~~.__ ´ ' '__,. | ' ' 9 ' |, __´ ) ( | | | ` <strong>_,~´"' , . ,~--´</strong> ' _| | . |~~.__ ´ ' '__,. | ' '
10 ' | | _.~( _ | ' ~( <strong>,-" _.-|~/ |..,____,) ,/,,"'</strong> '_( | ' |) ) . ' ( )~-_ | ' ' 10 ' | | ..( _ | ' ~( <strong>,-" _.-|~/ |..,____,) ,/,,"'</strong> '_( | ' |) ) . ' ( )~-_ | ' '
11 ' | (_ ) ´- | ( ' <strong>\__,~"´ /:) / |:\ \</strong> ,~( ) . | | ) `, ' _/- .. , _) | ' 11 ' | )- ´- | ( ' <strong>\__,~"´ /:) / |:\ \</strong> ,~( ) . | | ) `, ' _/- .. , _) | '
12´ . ( ` ( . : / : . : <strong>(:/\_-, \:.\_-,</strong> . \ .\ . : \ . ) . ' ,( . : / . ` 12´ . ( ` : ´. : / : . : <strong>(:/\_-, \:.\_-,</strong> . \ .\ . : \ . ) . ' ,( . : / . `
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 19:14:45 +0000