Skip to content

Commit 94ab1ed

Browse files
kylereddochkylereddoch
authored
Create landing-page.css
1 parent 3e71bc5 commit 94ab1ed

File tree

1 file changed

+299
-0
lines changed

1 file changed

+299
-0
lines changed

‎assets/kylestechkorner/landing-page.css

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
@import url('https://cdn.cache.lol/profiles/themes/css/dracula.css');
2+
3+
:root {
4+
--foreground: #d8dee9;
5+
--background: #2E3440;
6+
--link: #5e81ac;
7+
--accent: #868e96;
8+
}
9+
10+
/* Extra small devices (phones, 600px and down) */
11+
@media only screen and (max-width: 600px) {
12+
.latest-status {
13+
/* display: inline-block; */
14+
padding: 0 1em 1em;
15+
border: 1px solid var(--accent);
16+
width: 200px;
17+
margin: 1.25em auto;
18+
text-align: center;
19+
border-radius: 5px;
20+
/* justify-content: center; */
21+
/* flex-wrap: nowrap; */
22+
/* align-items: center; */
23+
}
24+
25+
.weather-icon {
26+
width: 40px;
27+
/* Adjust the width as needed */
28+
height: 40px;
29+
/* Adjust the height as needed */
30+
vertical-align: middle;
31+
margin-bottom: 5px;
32+
}
33+
34+
.current-weather,
35+
.current-song {
36+
text-align: center;
37+
margin-bottom: 10px;
38+
}
39+
40+
footer {
41+
max-width: 60em;
42+
margin: 1em auto;
43+
padding: 0 1em;
44+
}
45+
46+
.recent-posts {
47+
display: inline-grid;
48+
padding: 1em;
49+
border: 1px solid var(--accent);
50+
width: 100%;
51+
margin: 0 0 1rem 0;
52+
border-radius: 5px;
53+
}
54+
}
55+
56+
/* Small devices (portrait tablets and large phones, 600px and up) */
57+
@media only screen and (min-width: 600px) {}
58+
59+
60+
/* Medium devices (landscape tablets, 768px and up) */
61+
@media only screen and (min-width: 768px) {}
62+
63+
/* Large devices (laptops/desktops, 992px and up) */
64+
@media only screen and (min-width: 992px) {}
65+
66+
/* Extra large devices (large laptops and desktops, 1200px and up) */
67+
@media only screen and (min-width: 1200px) {}
68+
69+
70+
71+
* {
72+
box-sizing: border-box;
73+
}
74+
75+
body {
76+
font-family: 'Mint Grotesk', sans-serif;
77+
font-size: 120%;
78+
color: var(--foreground);
79+
background: var(--background);
80+
}
81+
82+
header nav ul {
83+
list-style-type: none;
84+
margin: 0;
85+
padding: 0;
86+
}
87+
88+
header nav li {
89+
display: inline-block;
90+
}
91+
92+
header nav li a {
93+
display: block;
94+
text-decoration: none;
95+
margin-right: 1em;
96+
}
97+
98+
h1,
99+
h2,
100+
h3,
101+
h4,
102+
h5,
103+
h6 {
104+
font-family: 'Mint Grotesk', sans-serif;
105+
margin: 1rem 0;
106+
}
107+
108+
p,
109+
li {
110+
line-height: 160%;
111+
}
112+
113+
.profile-picture {
114+
border-radius: 100%;
115+
height: 8.7em;
116+
}
117+
118+
header {
119+
max-width: 60em;
120+
margin: 2em auto;
121+
padding: 0 1em;
122+
}
123+
124+
footer {
125+
max-width: 100%;
126+
}
127+
128+
footer ul {
129+
list-style: none;
130+
margin: 0;
131+
}
132+
133+
footer li {
134+
display: inline;
135+
}
136+
137+
.center {
138+
text-align: center;
139+
}
140+
141+
header {
142+
margin-top: 4em;
143+
text-align: center;
144+
}
145+
146+
footer p {
147+
font-size: 90%;
148+
text-align: center;
149+
}
150+
151+
a:link {
152+
color: var(--link);
153+
}
154+
155+
a:visited {
156+
color: var(--link);
157+
}
158+
159+
a:hover {
160+
color: var(--link);
161+
}
162+
163+
a:active {
164+
color: var(--link);
165+
}
166+
167+
.show-more {
168+
display: block;
169+
padding: .5em;
170+
border: 1px solid var(--link);
171+
width: 135px;
172+
margin: 0 auto 1rem auto;
173+
border-radius: 5px;
174+
text-align: center;
175+
}
176+
177+
.post-info,
178+
.post-tags {
179+
font-size: 85%;
180+
color: var(--accent);
181+
text-align: left;
182+
}
183+
184+
.post-info i:nth-child(2) {
185+
margin-left: .75em;
186+
}
187+
188+
.tag {
189+
background: var(--accent);
190+
color: var(--background) !important;
191+
padding: .3em .4em;
192+
margin: .8em 0 0 .4em;
193+
border-radius: .5em;
194+
text-decoration: none;
195+
display: inline-block;
196+
}
197+
198+
.recent-posts {
199+
display: inline-grid;
200+
padding: 1em;
201+
border: 1px solid var(--accent);
202+
width: 100%;
203+
margin: 0 0 1rem 0;
204+
border-radius: 5px;
205+
}
206+
207+
.latest-status {
208+
/* display: inline-block; */
209+
padding: 0 1em 1em;
210+
border: 1px solid var(--accent);
211+
width: 450px;
212+
margin: 1.25em auto;
213+
text-align: center;
214+
border-radius: 5px;
215+
/* justify-content: center; */
216+
/* flex-wrap: nowrap; */
217+
/* align-items: center; */
218+
}
219+
220+
hr {
221+
height: 1px;
222+
border-width: 0;
223+
color: var(--accent);
224+
background-color: var(--accent);
225+
margin: 2em 0;
226+
}
227+
228+
code {
229+
padding: .2em .3em;
230+
border: 1px solid var(--accent);
231+
white-space: pre-wrap;
232+
word-wrap: break-word;
233+
}
234+
235+
pre,
236+
code {
237+
font-family: 'MD IO 0.4', serif;
238+
font-size: 90%;
239+
}
240+
241+
pre code {
242+
background: #000;
243+
color: #eee;
244+
display: inline-block;
245+
padding: 1em;
246+
white-space: pre-wrap;
247+
word-wrap: break-word;
248+
}
249+
250+
img {
251+
max-width: 100%;
252+
}
253+
254+
table {
255+
border-collapse: collapse;
256+
}
257+
258+
td,
259+
th {
260+
padding: .75em;
261+
text-align: left;
262+
border: 1px solid var(--accent);
263+
}
264+
265+
.weblog-title a {
266+
text-decoration: none !important;
267+
color: var(--foreground);
268+
}
269+
270+
.weather-icon {
271+
width: 40px;
272+
/* Adjust the width as needed */
273+
height: 40px;
274+
/* Adjust the height as needed */
275+
vertical-align: middle;
276+
margin-bottom: 10px;
277+
}
278+
279+
.current-weather,
280+
.current-song {
281+
text-align: center;
282+
}
283+
284+
.omglol-status-header {
285+
margin-top: 1.6em;
286+
margin-bottom: .5em;
287+
text-align: center;
288+
}
289+
290+
.previous-page+.next-page::before {
291+
content: "\2022";
292+
color: #ccc;
293+
margin: 0 0.75em;
294+
}
295+
296+
.divider::after {
297+
content: "\2022 \2022 \2022";
298+
color: #ccc;
299+
}

0 commit comments

Comments
 (0)