quaso.engineering
the only good website on the internet
quaso.engineering
1*,
2::before,
3::after {
4 box-sizing: border-box;
5}
6
7body {
8 margin: 0;
9 font-family: Signifier, Georgia, 'Times New Roman', Times, serif;
10 font-size: 1.2rem;
11 font-weight: 300;
12 line-height: 1.4;
13 color: #ccc;
14 background-color: #191919;
15}
16
17h1,
18h2,
19h3,
20h4,
21h5,
22h6 {
23 margin: 0 0 0.5em;
24 font-style: normal;
25 letter-spacing: 0.1em;
26 font-weight: 400;
27 text-transform: lowercase;
28}
29
30a {
31 color: inherit;
32 font-weight: 100;
33 text-decoration: none;
34 transition: color 0.1s;
35}
36
37a:hover {
38 color: #ec53dd;
39}
40
41strong {
42 font-weight: bold;
43}
44
45pre,
46code {
47 font-size: 0.9rem !important;
48}
49
50.space-yo {
51 display: flex;
52 justify-content: space-between;
53 width: 100%;
54 align-items: center;
55}
56
57.retour {
58 font-weight: 300 !important;
59}
60
61.readtime::before {
62 color: #d5d8dc;
63 content: '\2022';
64 padding: 0 0.4rem 0 0.3rem;
65 display: inline-block;
66 line-height: 1;
67}
68
69.post-info {
70 font-weight: 100;
71}
72
73.no-after:after {
74 content: none !important;
75}
76
77button {
78 all: unset;
79 cursor: pointer;
80}
81
82sup {
83 font-size: 0.9rem;
84 font-weight: 100;
85}
86
87.footnote-container {
88 position: relative;
89 display: inline;
90}
91
92.footnote-content {
93 float: right;
94 clear: right;
95 margin-right: -36em;
96 width: 32em;
97 font-size: smaller;
98 background-color: #282828;
99 padding: 0.5em 1em;
100 display: flex;
101 gap: 6px;
102 white-space: normal;
103}
104
105.content {
106 text-align: justify;
107 hyphens: auto;
108 -webkit-hyphens: auto;
109 word-spacing: -0.02em;
110}
111
112.sub-status-line {
113 font-size: 10px;
114 position: fixed;
115 bottom: 4px;
116 right: 8px;
117 font-family: Menlo, Monaco, Consolas, monospace;
118 opacity: 0.4;
119}
120
121@media screen and (max-width: 648px) {
122 .space-yo {
123 flex-direction: column;
124 align-items: start;
125 }
126
127 .space-yo > h1 {
128 margin-bottom: 0;
129 }
130
131 .sub-status-line {
132 display: none;
133 }
134}
135
136@media screen and (max-width: 1250px) {
137 .footnote-content {
138 position: static;
139 display: block !important;
140 width: auto;
141 max-height: none;
142 transform: none;
143 margin: 0.5em 0;
144 right: auto;
145 top: auto;
146 }
147
148 .footnote-container:hover .footnote-content {
149 display: block !important;
150 }
151}