wowana.me
website source; use git clone git://wowana.me/wowana.me.git to clone this repository.
opal.css (3498B)
1 :root {
2 --bg: #ffe2f7;
3 --fg: #2a0217;
4 --sidebar-bg: #fff;
5 --sidebar-border: #000;
6 --sidebar-separator: var(--bg);
7 --a: #680285;
8 --a-hover: #d16dc1;
9 --quote: #832917;
10 --table-th: #d178ed;
11 --table-odd: #e7e2ff;
12 --table-border: var(--table-th);
13 }
14 .mono-image {
15 mix-blend-mode: darken;
16 }
17 @media (prefers-color-scheme: dark) {
18 :root {
19 --bg: #2a0217;
20 --fg: #ffe2f7;
21 --sidebar-bg: #4b1017;
22 --a: #ea9ebc;
23 --quote: #f6d08a;
24 --table-th: #832917;
25 --table-odd: #4c1f3e;
26 }
27 .mono-image {
28 mix-blend-mode: lighten;
29 filter:
30 invert(100%)
31 brightness(78%)
32 sepia(100%)
33 hue-rotate(225deg);
34 }
35 }
36 html {
37 background-color: var(--bg);
38 color: var(--fg);
39 font: 1em Georgia, serif;
40 }
41 body {
42 width: 1200px;
43 margin: auto;
44 max-width: 100%;
45 display: flex;
46 }
47 .avatar {
48 background: var(--bg);
49 }
50 .avatar,
51 .avatar > img {
52 border-radius: .3em .3em 0 0;
53 height: 290px;
54 width: 290px;
55 }
56 .sidebar-holder {
57 display: inline-block;
58 font: .9em Arial, sans-serif;
59 padding: 1em;
60 }
61 .sidebar {
62 background: var(--sidebar-bg);
63 width: 290px;
64 border: .1em solid var(--sidebar-border);
65 border-radius: .3em;
66 }
67 .sidebar p,
68 .sidebar h1 {
69 margin: .1em;
70 padding: 0em .4em;
71 text-align: center;
72 }
73 .topnav ul {
74 list-style: none;
75 padding: 0;
76 }
77 .topnav ul li {
78 border-top: .1em solid var(--sidebar-separator);
79 padding: .2em .4em;
80 }
81 @media only screen and (max-width: 768px), (orientation: portrait) {
82 body {
83 display: initial;
84 }
85 .sidebar {
86 width: 100%;
87 text-align: center;
88 }
89 .topnav ul {
90 border-top: .1em solid var(--bg);
91 padding: 1em;
92 }
93 .topnav ul li {
94 border-top: none;
95 display: inline;
96 line-height: 1.5em;
97 padding: 0;
98 }
99 .topnav ul li:not(:last-child):after {
100 content: ' - '
101 }
102 .avatar {
103 border-radius: 100%;
104 display: block;
105 margin: 10px auto;
106 padding: 0;
107 height: 4em;
108 width: 4em;
109 }
110 .avatar img {
111 border-radius: 100%;
112 height: 100%;
113 width: 100%;
114 }
115 .sidebar h1,
116 .sidebar .subheader {
117 display: inline;
118 margin: 0;
119 padding: 0;
120 }
121 .sidebar .subheader:before {
122 content: '/ '
123 }
124 }
125 hr {
126 border-width: .2em 0 0;
127 border-style: dashed;
128 border-color: var(--fg);
129 max-width: 3em;
130 }
131
132 main {
133 display: inline-block;
134 max-width: 50em;
135 padding: 1em;
136 }
137 main header {
138 font-family: Arial, sans-serif;
139 }
140 main p {
141 hyphens: auto;
142 text-align: justify;
143 text-indent: 1em;
144 }
145 main pre {
146 text-indent: 0;
147 white-space: pre-wrap;
148 }
149 main li {
150 margin-bottom: 0.2em;
151 }
152 main li > p:first-child {
153 margin-top: 0;
154 text-indent: 0;
155 }
156 blockquote {
157 color: var(--quote);
158 border-left: .2em solid;
159 margin: 1em 0;
160 padding-left: 2em;
161 }
162 dt {
163 font-weight: bold;
164 }
165 summary, main a {
166 color: var(--a);
167 text-decoration: underline;
168 }
169 summary:hover, main a:hover {
170 color: var(--a-hover);
171 text-decoration: none;
172 }
173 kbd {
174 quotes: "`" "`";
175 }
176 kbd::before {
177 content: open-quote;
178 }
179 kbd::after {
180 content: close-quote;
181 }
182 .sidebar a:not(.nolink) {
183 color: var(--fg);
184 text-decoration: underline;
185 }
186 .nolink,
187 .sidebar a:hover {
188 color: var(--fg);
189 text-decoration: none;
190 }
191 summary {
192 cursor: pointer;
193 display: block;
194 }
195 table {
196 border: .1em solid var(--table-border);
197 border-collapse: collapse;
198 border-spacing: 0;
199 }
200 table tr {
201 border: .1em solid var(--table-border);
202 }
203 table tr:nth-child(2n+1) {
204 background-color: var(--table-odd);
205 }
206 table th, table td {
207 padding: .1em .3em;
208 }
209 table th {
210 background-color: var(--table-th);
211 }
212 table ol,
213 table ul {
214 padding-left: 1em;
215 }
216 thead th {
217 position: sticky;
218 top: 0;
219 }
220 .altnet-permalinks {
221 font-size: smaller;
222 opacity: .5;
223 }