Update about page
[website] / global.css
1 /* VARIABLES */
2
3 :root {
4 --b : #000 ;
5 --g : #212121 ;
6 --w : #fff ;
7 --grey : #6b6b6b ;
8 --dpur : #aa2bd4 ;
9 --lpur : #d56ef7 ;
10 --pink : #ff297f ;
11 --cyan : #00ffff ;
12
13 --red : #f44336 ;
14 --grn : #66bb6a ;
15 --ylw : #fb8c00 ;
16 --blu : #3281ea ;
17 --mag : #ba68c8 ;
18 --cyn : #f06292 ;
19 }
20
21 /* FONTS */
22
23 @font-face {
24 font-family : Saviour ;
25 src : url( '/font/Savior4.ttf' ) ;
26 }
27
28 @font-face {
29 font-family : Hurmit ;
30 src : url( '/font/Hurmit-Nerd-Font-Mono.otf' ) ;
31 }
32
33 @font-face {
34 font-family : Atkinson ;
35 src : url( '/font/Atkinson-Hyperlegible-Regular.ttf' ) ;
36 }
37 @font-face {
38 font-family : Atkinson ;
39 src : url( '/font/Atkinson-Hyperlegible-Bold.ttf' ) ;
40 font-weight : bold ;
41 }
42 @font-face {
43 font-family : Atkinson ;
44 src : url( '/font/Atkinson-Hyperlegible-Italic.ttf' ) ;
45 font-style : italic ;
46 }
47 @font-face {
48 font-family : Atkinson ;
49 src : url( '/font/Atkinson-Hyperlegible-BoldItalic.ttf' ) ;
50 font-style : italic ;
51 font-weight : bold ;
52 }
53
54 /* ANIMATIONS */
55
56 @keyframes glitch {
57 0% { opacity : 0% ; }
58 33% {
59 opacity : 100% ;
60 transform : rotateX( 10deg ) skewX( 90deg ) translate( -2em , 2em ) ;
61 }
62 66% { transform : translate( 2em , -2em ) ; }
63 100% { transform : rotateX( 0deg ) skewX( 0deg ) translate( 0 , 0 ) ; }
64 }
65
66 /* STYLES */
67
68 html {
69 scrollbar-color : var(--pink) var(--w) ;
70 overflow-x : hidden ;
71 background-image : url( '/img/bgdark.png' ) ;
72 background-repeat : repeat-y ;
73 background-position : center top ;
74 background-color : var(--b) ;
75 }
76
77 @media all and ( max-width : 42em ) {
78 body { background-size : 47px , 47px ; }
79 #wrap { width : calc( 100% - 94px ) !important ; }
80 }
81
82 @media all and ( max-width : 70em ) {
83 body {
84 background-image : url( '/img/bgthinright2.png' ) ,
85 url( '/img/bgthinleft2.png' ) !important ;
86 }
87 #wrap { width : calc( 100% - 188px ) ; }
88 }
89
90 @media all and ( min-width : 70em ) {
91 body {
92 background-image : url( '/img/bgright.png' ) ,
93 url( '/img/bgleft.png' ) ;
94 }
95 #wrap { width : calc( 100% - 280px ) ; }
96 }
97
98 body {
99 margin : 0 auto ;
100 width : 100% ;
101 min-height : 100vh ;
102 overflow-x : hidden ;
103 font-family : Atkinson ;
104 background-repeat : repeat-y , repeat-y ;
105 background-position : left top , right top ;
106 }
107
108 #wrap {
109 margin : 0 auto ;
110 max-width : 52em ;
111 min-height : 100vh ;
112 display : grid ;
113 grid-template-rows : auto auto 1fr auto ;
114 color : var(--w) ;
115 }
116
117 #banner {
118 display : block ;
119 margin : 0 auto ;
120 animation : glitch 0.2s linear 1s 1 normal backwards ;
121 max-width : 100% ;
122 transition : transform 0.05s ;
123 transition-timing-function : ease-out ;
124 }
125
126 a:hover > #banner , a:focus > #banner {
127 transform : rotate( -1.5deg ) scale( 1.05 ) ;
128 }
129
130 #head {
131 text-align : center ;
132 font-family : Saviour ;
133 color : var(--lpur) ;
134 line-height : 0.7 ;
135 font-size : clamp( 1em , 8vw , 4em ) ;
136 }
137
138 p , ul , pre { font-size : clamp( 1em , 5vw , 2em ) ; }
139 ul { list-style-type : '- ' ; }
140 p {
141 text-align : justify ;
142 hyphens : auto ;
143 }
144
145 h1 {
146 font-family : Saviour ;
147 color : var(--lpur) ;
148 font-size : clamp( 1em , 8vw , 3em ) ;
149 margin : 0 0 0 1em ;
150 }
151
152 pre {
153 overflow-x : scroll ;
154 scrollbar-color : var(--pink) var(--g) ;
155 margin : 0 ;
156 }
157 pre code {
158 min-width : calc( 100% - 0.8em ) ;
159 padding : 0.8em 0.4em ;
160 font-size : clamp( 0.5em , 3.5vw , 0.6em ) ;
161 }
162
163 code {
164 font-family : Hurmit, monospace ;
165 text-align : left ;
166 font-size : clamp( 0.5em , 3.5vw , 0.8em ) ;
167 margin : 0 ;
168 padding : 0.25em 0.4em ;
169 border-radius : 0.2em ;
170 background-color : var(--g) ;
171 display : inline-block ;
172 }
173
174 code span.r { color : var(--red) ; }
175 code span.g { color : var(--grn) ; }
176 code span.y { color : var(--ylw) ; }
177 code span.b { color : var(--blu) ; }
178 code span.m { color : var(--mag) ; }
179 code span.c { color : var(--cyn) ; }
180
181 time {
182 color : var(--grey) ;
183 font-size : clamp( 0.01em , 4vw , 1.2em ) ;
184 text-align : right ;
185 }
186
187 img:not(#banner) , audio {
188 display : block ;
189 margin : 0 auto ;
190 max-width : calc( 100% - 4em ) ;
191 filter : drop-shadow( -0.5em -0.2em 0px var(--pink) )
192 drop-shadow( 0.5em 0.2em 0px var(--cyan) ) ;
193 }
194
195 img:not(#banner) { max-height : 50em ; }
196
197 audio {
198 width : 100% ;
199 background-color : var(--b) ;
200 }
201
202 footer {
203 max-width : 100% ;
204 margin : 1em auto ;
205 text-align : center ;
206 color : var(--grey) ;
207 font-size : min( 1em , 2.1vw ) ;
208 }
209
210 footer span {
211 display : inline-block ;
212 font-size : min( 1.5em , 3.1vw ) ;
213 padding-bottom : 1em ;
214 }
215
216 #webring-previous { float : left ; }
217 #webring-next { float : right ; }
218
219 a {
220 color : var(--lpur) ;
221 transition : text-shadow 0.03s ;
222 transition-timing-function : ease-out ;
223 }
224 a:hover , a:focus {
225 text-shadow : 0.2em 0 1px var(--cyan) , -0.2em 0 1px var(--pink) ;
226 }