Skip to content

Commit cdffc6a

Browse files
sylvestresylvestre
committed
remove the css into a file so that we can reuse it
1 parent 383ccd7 commit cdffc6a

File tree

2 files changed

+251
-252
lines changed

2 files changed

+251
-252
lines changed

‎homepage/index.html

+1-252
Original file line numberDiff line numberDiff line change
@@ -4,258 +4,7 @@
44
<title>uutils</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<style>
8-
/* All these styles are adapted from oranda to match their look */
9-
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700;900&display=swap");
10-
:root {
11-
--dark-fg-color: #fff;
12-
--light-fg-color: #141414;
13-
--light-bg-color: var(--dark-fg-color);
14-
--dark-bg-color: var(--light-fg-color);
15-
--fg-color: var(--light-fg-color);
16-
--bg-color: var(--light-bg-color);
17-
--light-link-color: #0284c7;
18-
--dark-link-color: #8bb9fe;
19-
--link-color: var(--light-link-color);
20-
--light-highlight-bg-color: #ededed;
21-
--light-highlight-fg-color: #595959;
22-
--dark-highlight-bg-color: #27272a;
23-
--dark-highlight-fg-color: #ededed;
24-
--highlight-fg-color: var(--light-highlight-fg-color);
25-
--highlight-bg-color: var(--light-highlight-bg-color);
26-
--font-face: "Fira Sans", sans-serif;
27-
}
28-
29-
*,
30-
::after,
31-
::before {
32-
border: 0 solid #e5e7eb;
33-
box-sizing: border-box;
34-
}
35-
36-
html {
37-
font-feature-settings: normal;
38-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
39-
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
40-
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
41-
font-variation-settings: normal;
42-
line-height: 1.5;
43-
tab-size: 4;
44-
}
45-
46-
blockquote,
47-
dd,
48-
dl,
49-
figure,
50-
h1,
51-
h2,
52-
h3,
53-
h4,
54-
h5,
55-
h6,
56-
hr,
57-
p,
58-
pre {
59-
margin: 0;
60-
}
61-
62-
a {
63-
color: var(--link-color);
64-
text-decoration: inherit;
65-
}
66-
67-
/* PAGE LAYOUT */
68-
html,
69-
body {
70-
font-family: var(--font-face);
71-
height: 100%;
72-
scroll-behavior: smooth;
73-
}
74-
75-
body {
76-
line-height: inherit;
77-
margin: 0;
78-
}
79-
80-
.container {
81-
display: flex;
82-
flex-direction: column;
83-
min-height: 100%;
84-
}
85-
86-
.page-body {
87-
flex-grow: 1;
88-
}
89-
90-
/* REPO BANNER */
91-
.repo_banner {
92-
background-color: var(--fg-color);
93-
color: var(--bg-color);
94-
padding-bottom: 0.375rem;
95-
padding-top: 0.375rem;
96-
}
97-
98-
.repo_banner > a {
99-
align-items: flex-start;
100-
display: flex;
101-
gap: 0.5rem;
102-
height: 20px;
103-
justify-content: center;
104-
}
105-
.repo_banner > a,
106-
.repo_banner > a:hover {
107-
color: rgb(248 250 252);
108-
}
109-
.repo_banner > a:hover {
110-
text-decoration-color: #f8fafc;
111-
text-decoration-line: underline;
112-
text-underline-offset: 1px;
113-
}
114-
115-
/* HEADER */
116-
.logo {
117-
display: block;
118-
height: 170px;
119-
margin: auto;
120-
}
121-
.title {
122-
font-size: 3.75rem;
123-
line-height: 1;
124-
text-align: center;
125-
padding-bottom: 0.5rem;
126-
}
127-
@media (min-width: 640px) {
128-
.title {
129-
font-size: 6rem;
130-
line-height: 1;
131-
}
132-
}
133-
134-
/* MAIN */
135-
main {
136-
margin: 6rem auto;
137-
max-width: 80%;
138-
}
139-
140-
@media (min-width: 1024px) {
141-
main {
142-
max-width: 56rem;
143-
}
144-
}
145-
146-
h1 {
147-
font-size: 1.875rem;
148-
font-weight: 900;
149-
line-height: 2.25rem;
150-
line-height: 1.25;
151-
margin-bottom: 2rem;
152-
}
153-
154-
p {
155-
font-size: 1rem;
156-
line-height: 1.5rem;
157-
line-height: 1.625;
158-
margin-bottom: 2rem;
159-
}
160-
161-
@media (min-width: 640px) {
162-
h1 {
163-
font-size: 3.75rem;
164-
line-height: 1;
165-
}
166-
167-
p {
168-
font-size: 1.125rem;
169-
line-height: 1.75rem;
170-
}
171-
}
172-
173-
h2 {
174-
font-size: 1.5rem;
175-
font-weight: 700;
176-
line-height: 2rem;
177-
line-height: 1.25;
178-
margin-bottom: 1.5rem;
179-
}
180-
181-
@media (min-width: 640px) {
182-
h2 {
183-
font-size: 3rem;
184-
line-height: 1;
185-
}
186-
}
187-
188-
h2,
189-
h3 {
190-
margin-top: 3rem;
191-
}
192-
193-
@media (min-width: 640px) {
194-
li {
195-
font-size: 1.125rem;
196-
line-height: 1.75rem;
197-
}
198-
}
199-
200-
ul {
201-
margin-top: 0;
202-
margin-bottom: 2rem;
203-
}
204-
205-
/* FOOTER */
206-
footer {
207-
align-items: center;
208-
background-color: var(--fg-color);
209-
color: var(--bg-color);
210-
display: flex;
211-
flex-grow: 0;
212-
flex-shrink: 1;
213-
font-size: 0.75rem;
214-
justify-content: space-between;
215-
line-height: 1rem;
216-
padding: 0.5rem 1rem;
217-
width: 100%;
218-
}
219-
220-
.github-icon {
221-
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
222-
height: 1.25rem;
223-
width: 1.25rem;
224-
}
225-
226-
.projects {
227-
display: flex;
228-
flex-direction: row;
229-
flex-wrap: wrap;
230-
justify-content: space-between;
231-
width: 100%;
232-
gap: 1rem;
233-
}
234-
235-
.project {
236-
flex-basis: 20rem;
237-
flex-grow: 1;
238-
border: 3px solid #888;
239-
border-radius: 6px;
240-
padding: 2rem;
241-
text-decoration: none;
242-
color: var(--fg-color);
243-
font-size: 2rem;
244-
font-weight: 700;
245-
transition: text-decoration 0.3s;
246-
transition: border-color 0.3s;
247-
}
248-
.project > span {
249-
color: transparent;
250-
transition: color 0.3s;
251-
}
252-
.project:hover > span {
253-
color: black;
254-
}
255-
.project:hover {
256-
border-color: black;
257-
}
258-
</style>
7+
<link href="style.css" rel="stylesheet">
2598
</head>
2609
<body>
26110
<div class="container">

0 commit comments

Comments
 (0)