diff options
Diffstat (limited to 'assets/css/_basics.scss')
-rw-r--r-- | assets/css/_basics.scss | 194 |
1 files changed, 0 insertions, 194 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss deleted file mode 100644 index 7689379..0000000 --- a/assets/css/_basics.scss +++ /dev/null | |||
@@ -1,194 +0,0 @@ | |||
1 | ::selection { | ||
2 | background-color: prop(--colors --select --bg); | ||
3 | color: prop(--colors --select --fg); | ||
4 | } | ||
5 | |||
6 | img::selection { | ||
7 | background-color: prop(--colors --select --img-bg); | ||
8 | } | ||
9 | |||
10 | :focus { | ||
11 | outline: 2px solid prop(--colors --focus-ring); | ||
12 | outline-offset: 3px; | ||
13 | } | ||
14 | |||
15 | html, | ||
16 | pre, | ||
17 | code { | ||
18 | font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; | ||
19 | } | ||
20 | |||
21 | html { | ||
22 | height: 100%; | ||
23 | background-color: prop(--colors --bg); | ||
24 | color: prop(--colors --fg); | ||
25 | font-family: $font-fam--text; | ||
26 | font-size: px-to-em($font-size); | ||
27 | line-height: $line-height; | ||
28 | } | ||
29 | |||
30 | body { | ||
31 | box-sizing: border-box; | ||
32 | min-height: 100%; | ||
33 | margin: 0; | ||
34 | padding: 0; | ||
35 | } | ||
36 | |||
37 | main { | ||
38 | @include iro-responsive-env(('sm', 'md')) { | ||
39 | font-size: iro-responsive-set((1rem, iro-px-to-rem(18px))); | ||
40 | } | ||
41 | } | ||
42 | |||
43 | pre, | ||
44 | code { | ||
45 | font-family: $font-fam--mono; | ||
46 | } | ||
47 | |||
48 | code { | ||
49 | color: prop(--colors --code --fg); | ||
50 | font-size: px-to-em(15px); | ||
51 | } | ||
52 | |||
53 | pre { | ||
54 | margin: 0; | ||
55 | overflow-x: auto; | ||
56 | font-size: px-to-em(15px); | ||
57 | line-height: 1.4; | ||
58 | |||
59 | code { | ||
60 | color: currentColor; | ||
61 | font-size: 1em; | ||
62 | } | ||
63 | |||
64 | strong { | ||
65 | //font-weight: normal; | ||
66 | } | ||
67 | } | ||
68 | |||
69 | strong { | ||
70 | color: prop(--colors --fg-lo); | ||
71 | font-weight: bold; | ||
72 | } | ||
73 | |||
74 | small { | ||
75 | color: prop(--colors --fg-hi); | ||
76 | font-size: px-to-em(14px); | ||
77 | } | ||
78 | |||
79 | ul, | ||
80 | ol { | ||
81 | margin: ($line-height * 1rem) 0 0; | ||
82 | padding: 0; | ||
83 | list-style: none; | ||
84 | } | ||
85 | |||
86 | li { | ||
87 | position: relative; | ||
88 | padding-left: prop(--dims --indent); | ||
89 | |||
90 | &::before { | ||
91 | display: inline-block; | ||
92 | position: absolute; | ||
93 | width: prop(--dims --indent); | ||
94 | margin-left: calc(-1 * #{prop(--dims --indent)}); | ||
95 | color: prop(--colors --fg-hi); | ||
96 | } | ||
97 | } | ||
98 | |||
99 | ul > li::before { | ||
100 | content: '-'; | ||
101 | } | ||
102 | |||
103 | ol { | ||
104 | counter-reset: cnt; | ||
105 | |||
106 | > li { | ||
107 | counter-increment: cnt; | ||
108 | |||
109 | &::before { | ||
110 | content: counter(cnt) '.'; | ||
111 | } | ||
112 | } | ||
113 | } | ||
114 | |||
115 | ul ul { | ||
116 | margin-top: 0; | ||
117 | } | ||
118 | |||
119 | dl { | ||
120 | margin: ($line-height * 1rem) 0 0; | ||
121 | padding: 0; | ||
122 | } | ||
123 | |||
124 | dt, | ||
125 | dd { | ||
126 | display: inline-block; | ||
127 | } | ||
128 | |||
129 | dt { | ||
130 | color: prop(--colors --fg-lo); | ||
131 | font-weight: bold; | ||
132 | |||
133 | &::after { | ||
134 | content: ':'; | ||
135 | color: prop(--colors --fg); | ||
136 | font-weight: normal; | ||
137 | } | ||
138 | } | ||
139 | |||
140 | dd { | ||
141 | margin: 0 3ch 0 0; | ||
142 | } | ||
143 | |||
144 | h1, | ||
145 | h2, | ||
146 | h3, | ||
147 | h4, | ||
148 | h5, | ||
149 | h6 { | ||
150 | @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale); | ||
151 | |||
152 | margin: ($line-height * 2rem) 0 0; | ||
153 | color: prop(--colors --fg-lo); | ||
154 | font-weight: 700; | ||
155 | letter-spacing: 1px; | ||
156 | text-transform: uppercase; | ||
157 | |||
158 | & + & { | ||
159 | margin-top: $line-height * 1rem; | ||
160 | } | ||
161 | |||
162 | strong { | ||
163 | color: prop(--colors --accent --color, $global: true); | ||
164 | font-weight: 550; | ||
165 | } | ||
166 | } | ||
167 | |||
168 | p { | ||
169 | margin: ($line-height * 1rem) 0 0; | ||
170 | } | ||
171 | |||
172 | figure { | ||
173 | margin: ($line-height * 1rem) 0 0; | ||
174 | padding: 0; | ||
175 | |||
176 | img { | ||
177 | display: block; | ||
178 | max-width: 100%; | ||
179 | max-height: 70vh; | ||
180 | object-fit: contain; | ||
181 | } | ||
182 | } | ||
183 | |||
184 | :link, | ||
185 | :visited { | ||
186 | color: prop(--colors --link --default); | ||
187 | } | ||
188 | |||
189 | hr { | ||
190 | height: 1px; | ||
191 | margin: ($line-height * 2rem) 0; | ||
192 | border: 0; | ||
193 | background-color: prop(--colors --obj-hi); | ||
194 | } | ||