Skip to content

Commit 55939fa

Browse files
author
Adam Argyle
committed
split css out
1 parent 805813c commit 55939fa

4 files changed

Lines changed: 193 additions & 187 deletions

File tree

‎app/css/features.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
nav {
2+
background: var(--surface);
3+
text-align: end;
4+
display: flex;
5+
gap: 1ch;
6+
padding: 3ch;
7+
box-sizing: border-box;
8+
9+
& > h3 {
10+
color: var(--brand);
11+
font-size: 2.5rem;
12+
font-weight: lighter;
13+
text-decoration: underline;
14+
text-decoration-color: var(--white);
15+
}
16+
17+
@media (max-width: 720px) {
18+
background: var(--brand);
19+
inline-size: 100%;
20+
place-content: center;
21+
22+
& > *:not(select) {
23+
display: none;
24+
}
25+
26+
& > select {
27+
font-size: 1.25rem;
28+
border: none;
29+
background: var(--white);
30+
}
31+
}
32+
33+
@media (min-width: 720px) {
34+
flex-direction: column;
35+
max-block-size: 100vh;
36+
overflow-y: auto;
37+
38+
& > select {
39+
display: none;
40+
}
41+
42+
& > h3:not(:first-of-type) {
43+
margin-block-start: 2ch;
44+
}
45+
}
46+
}
47+
48+
dl {
49+
margin: 0;
50+
padding: 0;
51+
display: grid;
52+
gap: 1ex;
53+
54+
& > dt {
55+
color: deeppink;
56+
font-weight: bold;
57+
text-transform: uppercase;
58+
59+
&:not(:first-of-type) {
60+
margin-block-start: 2ch;
61+
}
62+
}
63+
64+
& > dd {
65+
cursor: pointer;
66+
position: relative;
67+
font-size: 1.3rem;
68+
font-weight: 300;
69+
white-space: nowrap;
70+
margin: 0;
71+
72+
& > a {
73+
padding-block: .5ex;
74+
}
75+
76+
& > a:hover {
77+
color: var(--brand);
78+
}
79+
80+
& > a:focus {
81+
outline: 1px dotted deeppink;
82+
}
83+
84+
&:matches(:hover,:focus-within)::after {
85+
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='deeppink' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg>");
86+
position: absolute;
87+
inset: 1px 0 0 calc(100% + .5em);
88+
block-size: .75em;
89+
inline-size: .75em;
90+
}
91+
92+
&[selected] > a {
93+
text-decoration-color: deeppink;
94+
}
95+
96+
&:not([selected]) > a {
97+
text-decoration: none;
98+
}
99+
}
100+
}

‎app/css/generic.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
body {
2+
background: var(--surface);
3+
color: var(--text);
4+
font-family: system-ui;
5+
min-block-size: 100vh;
6+
display: flex;
7+
justify-content: space-between;
8+
9+
& > section {
10+
background: var(--brand);
11+
color: var(--white);
12+
flex: 2;
13+
inline-size: 100%;
14+
max-block-size: 100vh;
15+
overflow: hidden;
16+
17+
display: grid;
18+
place-content: center;
19+
}
20+
21+
@media (max-width: 720px) {
22+
flex-direction: column;
23+
}
24+
}
25+
26+
body,p,ul,figure,
27+
h1,h2,h3,h4,h5,h6,small {
28+
margin: 0;
29+
}
30+
31+
::selection {
32+
background-color: var(--brand);
33+
}
34+
35+
a {
36+
color: var(--text);
37+
38+
&:hover {
39+
color: var(--brand);
40+
}
41+
}
42+
43+
hr {
44+
inline-size: 100%;
45+
block-size: 1px;
46+
border-color: var(--surface);
47+
border-style: solid;
48+
margin-block-end: 2ch;
49+
}
50+
51+
svg {
52+
inline-size: 100%;
53+
max-block-size: 90vh;
54+
fill: var(--white);
55+
}

‎app/css/index.css‎

Lines changed: 4 additions & 187 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
/* @import "../../src/index.css"; */
22

3+
@import "generic.css";
4+
@import "logo.css";
5+
@import "features.css";
6+
37
:root {
48
--surface: lch(5 0 0);
59
--text: lch(80 0 0);
@@ -13,190 +17,3 @@
1317
--brand: lch(65 64 250)
1418
}
1519
}
16-
17-
body {
18-
background: var(--surface);
19-
color: var(--text);
20-
font-family: system-ui;
21-
min-block-size: 100vh;
22-
display: flex;
23-
justify-content: space-between;
24-
25-
& > section {
26-
background: var(--brand);
27-
color: var(--white);
28-
flex: 2;
29-
inline-size: 100%;
30-
max-block-size: 100vh;
31-
overflow: hidden;
32-
33-
display: grid;
34-
place-content: center;
35-
}
36-
37-
@media (max-width: 720px) {
38-
flex-direction: column;
39-
}
40-
}
41-
42-
header {
43-
@media (max-width: 720px) {
44-
text-align: center;
45-
}
46-
47-
@media (min-width: 720px) {
48-
padding-inline-start: 5ch;
49-
padding-block-start: 2ch;
50-
}
51-
}
52-
53-
nav {
54-
background: var(--surface);
55-
text-align: end;
56-
display: flex;
57-
gap: 1ch;
58-
padding: 3ch;
59-
box-sizing: border-box;
60-
61-
& > h3 {
62-
color: var(--brand);
63-
font-size: 2.5rem;
64-
font-weight: lighter;
65-
text-decoration: underline;
66-
text-decoration-color: var(--white);
67-
}
68-
69-
@media (max-width: 720px) {
70-
background: var(--brand);
71-
inline-size: 100%;
72-
place-content: center;
73-
74-
& > *:not(select) {
75-
display: none;
76-
}
77-
78-
& > select {
79-
font-size: 1.25rem;
80-
border: none;
81-
background: var(--white);
82-
}
83-
}
84-
85-
@media (min-width: 720px) {
86-
flex-direction: column;
87-
max-block-size: 100vh;
88-
overflow-y: auto;
89-
90-
& > select {
91-
display: none;
92-
}
93-
94-
& > h3:not(:first-of-type) {
95-
margin-block-start: 2ch;
96-
}
97-
}
98-
}
99-
100-
dl {
101-
margin: 0;
102-
padding: 0;
103-
display: grid;
104-
gap: 1ex;
105-
106-
& > dt {
107-
color: deeppink;
108-
font-weight: bold;
109-
text-transform: uppercase;
110-
111-
&:not(:first-of-type) {
112-
margin-block-start: 2ch;
113-
}
114-
}
115-
116-
& > dd {
117-
cursor: pointer;
118-
position: relative;
119-
font-size: 1.3rem;
120-
font-weight: 300;
121-
white-space: nowrap;
122-
margin: 0;
123-
124-
& > a {
125-
padding-block: .5ex;
126-
}
127-
128-
& > a:hover {
129-
color: var(--brand);
130-
}
131-
132-
& > a:focus {
133-
outline: 1px dotted deeppink;
134-
}
135-
136-
&:matches(:hover,:focus-within)::after {
137-
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='deeppink' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg>");
138-
position: absolute;
139-
inset: 1px 0 0 calc(100% + .5em);
140-
block-size: .75em;
141-
inline-size: .75em;
142-
}
143-
144-
&[selected] > a {
145-
text-decoration-color: deeppink;
146-
}
147-
148-
&:not([selected]) > a {
149-
text-decoration: none;
150-
}
151-
}
152-
}
153-
154-
body,p,ul,figure,
155-
h1,h2,h3,h4,h5,h6,small {
156-
margin: 0;
157-
}
158-
159-
h1 {
160-
font-size: min(15vmin, 5rem);
161-
font-weight: 100;
162-
display: flex;
163-
164-
@media (max-width: 720px) {
165-
justify-content: center;
166-
}
167-
168-
& > span {
169-
&:nth-child(2) {
170-
color: deeppink;
171-
}
172-
&:nth-child(3) {
173-
font-weight: bold;
174-
}
175-
}
176-
}
177-
178-
::selection {
179-
background-color: var(--brand);
180-
}
181-
182-
a {
183-
color: var(--text);
184-
185-
&:hover {
186-
color: var(--brand);
187-
}
188-
}
189-
190-
hr {
191-
inline-size: 100%;
192-
block-size: 1px;
193-
border-color: var(--surface);
194-
border-style: solid;
195-
margin-block-end: 2ch;
196-
}
197-
198-
svg {
199-
inline-size: 100%;
200-
max-block-size: 90vh;
201-
fill: var(--white);
202-
}

‎app/css/logo.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
h1 {
2+
font-size: min(15vmin, 5rem);
3+
font-weight: 100;
4+
display: flex;
5+
6+
@media (max-width: 720px) {
7+
justify-content: center;
8+
}
9+
10+
& > span {
11+
&:nth-child(2) {
12+
color: cyan;
13+
}
14+
&:nth-child(1) {
15+
font-weight: bold;
16+
}
17+
}
18+
}
19+
20+
header {
21+
@media (max-width: 720px) {
22+
text-align: center;
23+
}
24+
25+
@media (min-width: 720px) {
26+
padding-inline-start: 5ch;
27+
padding-block-start: 2ch;
28+
}
29+
30+
& > small {
31+
font-size: 1rem;
32+
font-weight: 300;
33+
}
34+
}

0 commit comments

Comments
 (0)