summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2020-12-28 18:23:37 +0100
committerVolpeon <git@volpeon.ink>2020-12-28 18:23:37 +0100
commit598b5e44aa2f949ac470a46a9c850d62211cec42 (patch)
tree33308c365aff0f4b129d6d73d9c4521d870cfbe7 /assets
parentVarious small fixes, exclude raw ASCII fox from output (diff)
downloadvolpeon.ink-598b5e44aa2f949ac470a46a9c850d62211cec42.tar.gz
volpeon.ink-598b5e44aa2f949ac470a46a9c850d62211cec42.tar.bz2
volpeon.ink-598b5e44aa2f949ac470a46a9c850d62211cec42.zip
Improved CSS vars and scopes
Diffstat (limited to 'assets')
-rw-r--r--assets/css/_basics.scss12
-rw-r--r--assets/css/_vars.scss54
-rw-r--r--assets/css/components/_page-header.scss4
-rw-r--r--assets/css/components/_refs.scss7
-rw-r--r--assets/css/scopes/_page.scss22
-rw-r--r--assets/css/scopes/_refs.scss9
-rw-r--r--assets/css/style.scss2
7 files changed, 67 insertions, 43 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 560ec94..a8ed013 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -55,7 +55,7 @@ pre {
55} 55}
56 56
57strong { 57strong {
58 color: var(--fg-plus-2); 58 color: var(--fg-lo);
59 font-weight: bold; 59 font-weight: bold;
60} 60}
61 61
@@ -75,7 +75,7 @@ li {
75 position: absolute; 75 position: absolute;
76 width: $subcontent--indent; 76 width: $subcontent--indent;
77 margin-left: -1 * $subcontent--indent; 77 margin-left: -1 * $subcontent--indent;
78 color: var(--fg-minus); 78 color: var(--fg-hi);
79 } 79 }
80} 80}
81 81
@@ -142,20 +142,16 @@ p {
142 } 142 }
143} 143}
144 144
145:visited {
146 color: var(--link--visited--fg);
147}
148
149hr { 145hr {
150 height: 1px; 146 height: 1px;
151 margin: ($line-height * 2em) 0 ($line-height * 2em); 147 margin: ($line-height * 2em) 0 ($line-height * 2em);
152 border: 0; 148 border: 0;
153 background-color: var(--bg-plus); 149 background-color: var(--obj);
154} 150}
155 151
156blockquote { 152blockquote {
157 position: relative; 153 position: relative;
158 margin: ($line-height * 1em) 0 0; 154 margin: ($line-height * 1em) 0 0;
159 padding-left: calc(#{$subcontent--indent} - 2px); 155 padding-left: calc(#{$subcontent--indent} - 2px);
160 border-left: 2px solid var(--bg-plus); 156 border-left: 2px solid var(--obj);
161} 157}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 9cd4b24..2242f09 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -34,35 +34,45 @@ $breakpoints: (
34 --gray2: hsl(270, 1%, 29%); 34 --gray2: hsl(270, 1%, 29%);
35 --gray3: hsl(270, 2%, 54%); 35 --gray3: hsl(270, 2%, 54%);
36 --gray4: hsl(270, 2%, 73%); 36 --gray4: hsl(270, 2%, 73%);
37 --gray5: hsl(270, 2%, 83%); 37 --gray5: hsl(270, 2%, 86%);
38 --gray6: hsl(270, 2%, 100%); 38 --gray5: hsl(270, 2%, 100%);
39 39
40 --bg-minus: var(--gray0); 40 //
41 --bg: var(--gray1);
42 --bg-plus: var(--gray2);
43 --fg-minus: var(--gray3);
44 --fg: var(--gray4);
45 --fg-plus: var(--gray5);
46 --fg-plus-2: var(--gray6);
47 41
48 --heading--fg: var(--fg-plus-2); 42 --bg-hi: var(--gray0); // Lighter background
43 --bg: var(--gray1); // Background
44
45 --obj: var(--gray2);
46
47 --fg-hi: var(--gray3); // Faint text
48 --fg: var(--gray4); // Text
49 --fg-lo: var(--gray5); // Strong text
50
51 //
52
53 --heading--fg: var(--fg-lo);
49 54
50 --select--bg: hsla(270, 2%, 100%, .996); 55 --select--bg: hsla(270, 2%, 100%, .996);
51 --select--fg: var(--bg-minus); 56 --select--fg: var(--bg-hi);
52 57
53 --code--fg: var(--fg-minus); 58 --code--fg: var(--fg-hi);
54 --code-block--fg: var(--fg-minus);
55 59
56 --page--item-prefix--fg: var(--fg-minus); 60 --code-block--fg: var(--fg-hi);
57 61
58 --link--idle--fg: var(--fg-plus-2); //#90acf2; 62 --link--idle--fg: var(--fg-lo);
59 --link--visited--fg: var(--fg-plus); //#bc9df2; 63 --link--hover--bg: var(--link--idle--fg);
60 --link--hover--bg: var(--fg-plus-2); 64 --link--hover--fg: #000;
61 --link--hover--fg: var(--bg-minus);
62 65
63 --nav--bg: var(--bg-minus); 66 --nav--bg: var(--bg-hi);
64 --nav--logo--fg: var(--fg-minus); 67 --nav--logo--fg: var(--fg-hi);
65 --nav--item--idle--fg: var(--fg); 68 --nav--item--idle--fg: var(--fg);
66 --nav--item--hover--fg: var(--fg-plus-2); 69 --nav--item--hover--fg: var(--fg-lo);
67 --nav--item--active--fg: var(--fg-plus-2); 70 --nav--item--active--fg: var(--fg-lo);
71
72 --page--item-prefix--fg: var(--fg-hi);
73
74 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
75 --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458;
76 --page--link--hover--bg: var(--page--link--idle--fg);
77 --page--link--hover--fg: #000;
68} 78}
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
index e15be1c..ee86daf 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -10,8 +10,8 @@
10 height: $line-height; 10 height: $line-height;
11 margin-top: px-to-em(2px); 11 margin-top: px-to-em(2px);
12 padding-top: px-to-em(2px); 12 padding-top: px-to-em(2px);
13 border-top: 1px solid var(--fg-minus); 13 border-top: 1px solid var(--fg-hi);
14 color: var(--fg-minus); 14 color: var(--fg-hi);
15 line-height: $code-block--line-height; 15 line-height: $code-block--line-height;
16 } 16 }
17 17
diff --git a/assets/css/components/_refs.scss b/assets/css/components/_refs.scss
deleted file mode 100644
index 51524bd..0000000
--- a/assets/css/components/_refs.scss
+++ /dev/null
@@ -1,7 +0,0 @@
1.c-refs__item {
2 padding-left: 0;
3
4 &::before {
5 display: none;
6 }
7}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index ba61b5f..6448d08 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -10,7 +10,7 @@
10 h1, 10 h1,
11 h2, 11 h2,
12 h3, 12 h3,
13 .c-refs__item, 13 .s-refs li,
14 pre { 14 pre {
15 position: relative; 15 position: relative;
16 margin-left: -1 * $page--item-prefix--width; 16 margin-left: -1 * $page--item-prefix--width;
@@ -46,7 +46,7 @@
46 content: '###'; 46 content: '###';
47 } 47 }
48 48
49 .c-refs__item::before { 49 .s-refs li::before {
50 content: '->'; 50 content: '->';
51 } 51 }
52 52
@@ -65,6 +65,22 @@
65 margin-left: -1 * $page--item-prefix--width; 65 margin-left: -1 * $page--item-prefix--width;
66 } 66 }
67 67
68 :link {
69 color: var(--page--link--idle--fg);
70 }
71
72 :visited {
73 color: var(--page--link--visited--fg);
74 }
75
76 :link,
77 :visited {
78 &:hover {
79 background-color: var(--page--link--hover--bg);
80 color: var(--page--link--hover--fg);
81 }
82 }
83
68 .c-page-header { 84 .c-page-header {
69 margin-left: -1 * $page--item-prefix--width; 85 margin-left: -1 * $page--item-prefix--width;
70 padding-left: $page--item-prefix--width; 86 padding-left: $page--item-prefix--width;
@@ -82,7 +98,7 @@
82 h1, 98 h1,
83 h2, 99 h2,
84 h3, 100 h3,
85 .c-refs__item, 101 .s-refs li,
86 pre { 102 pre {
87 margin-left: 0; 103 margin-left: 0;
88 padding-left: 0; 104 padding-left: 0;
diff --git a/assets/css/scopes/_refs.scss b/assets/css/scopes/_refs.scss
new file mode 100644
index 0000000..79434ff
--- /dev/null
+++ b/assets/css/scopes/_refs.scss
@@ -0,0 +1,9 @@
1.s-refs {
2 li {
3 padding-left: 0;
4
5 &::before {
6 display: none;
7 }
8 }
9}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 0473689..8d9a87f 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -2,12 +2,12 @@
2@import 'functions'; 2@import 'functions';
3@import 'basics'; 3@import 'basics';
4 4
5@import 'components/refs';
6@import 'components/nav'; 5@import 'components/nav';
7@import 'components/page-header'; 6@import 'components/page-header';
8 7
9@import 'layouts/container'; 8@import 'layouts/container';
10 9
10@import 'scopes/refs';
11@import 'scopes/page'; 11@import 'scopes/page';
12 12
13@import 'utils'; 13@import 'utils';