Skip to content

Commit ed27b48

Browse files
amarkamark
authored
alpha kit
1 parent 97c1c5e commit ed27b48

1 file changed

Lines changed: 241 additions & 0 deletions

File tree

‎kit/web.css‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
:root {
2+
--cs: 18pt;
3+
--mood: white;
4+
--fill: white;
5+
--blur: 5px;
6+
--drip: center;
7+
--font: system-ui, sans-serif;
8+
--time: 0.3s;
9+
--oval: 2em;
10+
--pop: #BF00FF;
11+
}
12+
html, body /*, main, .page*/ {
13+
margin: 0;
14+
padding: 0;
15+
gap: 0.5em;
16+
line-height: 1.5;
17+
min-height: 100vh;
18+
color: black;
19+
color: var(--pop);
20+
position: relative;
21+
font-family: var(--font);
22+
font-size: max(18pt, 2vw);
23+
font-size: 18pt;
24+
font-size: var(--cs);
25+
transition: all 0.3s;
26+
transition: all var(--time);
27+
background-color: transparent;
28+
background-attachment: fixed;
29+
background-position: center;
30+
background-size: cover;
31+
scrollbar-width: thin;
32+
scrollbar-color: var(--pop) transparent;
33+
} body, main, .page { display: grid; place-items: var(--drip); }
34+
@media (prefers-color-scheme: dark) {
35+
:root { --mood: black; }
36+
} /*.page { dis-play:none } .page:target { display:grid; }*/
37+
main, .page {
38+
position: absolute; inset: 0;
39+
width: 100%; min-height: 100vh;
40+
}
41+
frame, iframe, body, html {
42+
overflow-x: hidden;
43+
}
44+
div, ul, ol, li, p, span, form, button, input, textarea, img, frame, iframe {
45+
border: 0;
46+
margin: 0;
47+
padding: 0;
48+
gap: 0.5em;
49+
position: relative;
50+
vertical-align: inherit;
51+
display: grid; place-items: var(--drip);
52+
-webkit-transition: all var(--time);
53+
transition: all 0.3s;
54+
transition: all var(--time);
55+
background-attachment: fixed;
56+
background-position: center;
57+
background-size: cover;
58+
box-sizing: border-box;
59+
max-width: 100%;
60+
font: inherit;
61+
}
62+
button, input, textarea { padding: 0.5em 1em; }
63+
a, button, input, textarea {
64+
display: grid; place-items: var(--drip);
65+
background-color: inherit;
66+
border: inherit;
67+
color: inherit;
68+
outline: none;
69+
text-decoration: inherit;
70+
}
71+
input:not([type=button]):not([type=submit]), textarea {
72+
width: 100%;
73+
}
74+
input:-internal-autofill-selected { background-color: transparent !important; }
75+
76+
a:focus, button:focus, input[type=button]:focus, input[type=submit]:focus, input[type=password]:focus {
77+
animation: pulse 2s infinite;
78+
}
79+
80+
ul, li {
81+
list-style: none;
82+
}
83+
84+
p {
85+
padding: 0;
86+
}
87+
p + p {
88+
padding-top: 0;
89+
}
90+
91+
[contenteditable=true]:empty:before {
92+
content: attr(placeholder);
93+
}
94+
::placeholder, .hint {
95+
color: inherit;
96+
opacity: 0.3;
97+
}
98+
99+
.model, .none { display: none }
100+
.hide {
101+
opacity: 0;
102+
visibility: hidden;
103+
transition: all 2s;
104+
}
105+
106+
.full {
107+
width: 100%;
108+
min-height: 100vh;
109+
}
110+
.max {
111+
max-width: 48em;
112+
}
113+
.min {
114+
min-width: 12em;
115+
}
116+
.pad {
117+
width: 95%;
118+
margin: 5% auto;
119+
max-width: 48em;
120+
min-width: 12em;
121+
}
122+
123+
.row {
124+
width: 100%;
125+
}
126+
.row::after {
127+
content: "";
128+
display: block;
129+
clear: both;
130+
}
131+
.col {
132+
max-width: 24em;
133+
min-width: 12em;
134+
}
135+
136+
.center {
137+
text-align: center;
138+
vertical-align: middle;
139+
margin-left: auto;
140+
margin-right: auto;
141+
}
142+
.right {
143+
float: right;
144+
text-align: right;
145+
}
146+
.left {
147+
float: left;
148+
text-align: left;
149+
}
150+
.mid {
151+
margin-left: auto;
152+
margin-right: auto;
153+
}
154+
.top {
155+
vertical-align: top;
156+
}
157+
.low {
158+
vertical-align: bottom;
159+
}
160+
161+
.sap { border-radius: var(--oval); }
162+
.lip { border: 0.01em solid var(--pop); }
163+
.rim { margin: 1%; }
164+
.gap {
165+
padding: 3%;
166+
padding: clamp(0.5em, 3%, 1.5em);
167+
}
168+
.sit { margin-bottom: 0; }
169+
.stack { line-height: 0; }
170+
.crack { margin-bottom: 1%; }
171+
172+
.fog {
173+
backdrop-filter: blur(var(--blur));
174+
}
175+
176+
.focus {
177+
margin-left: auto;
178+
margin-right: auto;
179+
float: none;
180+
clear: both;
181+
}
182+
183+
.leak { overflow: visible; }
184+
.hold { overflow: hidden; }
185+
186+
.sky {
187+
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 2em, black calc(100% - 2em), transparent 100%);
188+
mask-image: linear-gradient(to bottom, transparent 0%, black 2em, black calc(100% - 2em), transparent 100%);
189+
}
190+
191+
.act {
192+
/*display: block;*/
193+
font-weight: normal;
194+
text-decoration: none;
195+
-webkit-transition: all var(--time);
196+
transition: all var(--time);
197+
cursor: pointer;
198+
}
199+
200+
.unit, .symbol {
201+
display: inline-block;
202+
vertical-align: inherit;
203+
}
204+
.jot { border-bottom: 1px dashed #95B2CA; }
205+
206+
.loud {
207+
font-size: 150%;
208+
}
209+
.shout {
210+
font-size: 36pt;
211+
font-size: 6.5vmax;
212+
}
213+
214+
.ink { color: black; background-color: rgba(100%,100%,100%,0.5); }
215+
@media (prefers-color-scheme: dark) { .ink { color: white; background-color: rgba(0,0,0,0.5); } }
216+
217+
.dim { background-color: rgba(0,0,0,0.5); }
218+
.red { background: #ea3224; }
219+
.green { background: #33cc33; }
220+
.blue { background: #4D79D8; }
221+
.yellow { background: #d3a438; }
222+
.black { background: black; }
223+
.white { background: white; }
224+
225+
.shade { background: rgba(0%, 0%, 0%, 0.1); }
226+
.tint { background: rgba(100%, 100%, 100%, 0.1); }
227+
228+
.redt { color: #ea3224; }
229+
.greent { color: #33cc33; }
230+
.bluet { color: #4D79D8; }
231+
.yellowt { color: #d3a438; }
232+
.blackt { color: black; }
233+
.whitet { color: white; }
234+
235+
.pulse {
236+
animation: pulse 2s infinite;
237+
} @keyframes pulse {
238+
0% {opacity: 1;}
239+
50% {opacity: 0.5;}
240+
100% {opacity: 1;}
241+
}

0 commit comments

Comments
 (0)