Skip to content

Commit 0e271a1

Browse files
JulianPrieberJulianPrieber
committed
Updated CSS
Updated CSS used for styling on virtually all pages.  - Fixed dead link  - Changed background color of dark mode to gradient  - Added automatic dark mode with CSS (not implemented on any page yet)
1 parent c6d71b0 commit 0e271a1

File tree

3 files changed

+263
-7
lines changed

3 files changed

+263
-7
lines changed

‎littlelink/css/skeleton-auto.css‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
/*
2+
* LittleLink Custom
3+
* https://littlelink-custom.com
4+
* Free to use under the GPL-3.0 License.
5+
* https://www.gnu.org/licenses/gpl-3.0.en.html
6+
* 05/12/2022
7+
*
8+
* Built using:
9+
*
10+
* littlelink V1
11+
* https://littlelink.io
12+
* Free to use under the MIT license.
13+
* http://www.opensource.org/licenses/mit-license.php
14+
* 12/21/2019
15+
*
16+
* Skeleton V2.0.4
17+
* Copyright 2014, Dave Gamache
18+
* www.getskeleton.com
19+
* Free to use under the MIT license.
20+
* http://www.opensource.org/licenses/mit-license.php
21+
* 12/29/2014
22+
*/
23+
24+
25+
/* Table of contents
26+
––––––––––––––––––––––––––––––––––––––––––––––––––
27+
- Grid
28+
- Base Styles
29+
- Typography
30+
- Links
31+
- Code
32+
- Spacing
33+
- Utilities
34+
*
35+
* You'll find the button css in css/brands.css.
36+
*
37+
*/
38+
39+
40+
/* Grid
41+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
42+
.container {
43+
position: relative;
44+
width: 100%;
45+
max-width: 600px;
46+
text-align: center;
47+
margin: 0 auto;
48+
box-sizing: border-box; }
49+
.column {
50+
position: center;
51+
width: 100%;
52+
float: center;
53+
box-sizing: border-box; }
54+
55+
/* For devices larger than 400px */
56+
@media (min-width: 400px) {
57+
.container {
58+
width: 85%;
59+
padding: 0; }
60+
}
61+
62+
/* For devices larger than 550px */
63+
@media (min-width: 550px) {
64+
.container {
65+
width: 80%; }
66+
.column,
67+
.columns {
68+
margin-left: 0; }
69+
.column:first-child,
70+
.columns:first-child {
71+
margin-left: 0; }
72+
73+
}
74+
75+
76+
/* Base Styles
77+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
78+
/* NOTE
79+
html is set to 62.5% so that all the REM measurements throughout Skeleton
80+
are based on 10px sizing. So basically 1.5rem = 15px :) */
81+
82+
html {
83+
font-size: 100%; }
84+
85+
@media (prefers-color-scheme: dark) {
86+
body {
87+
font-size: 18px;
88+
line-height: 24px;
89+
font-weight: 400;
90+
background: #292929;
91+
background: radial-gradient(circle, #292929 28%, #1b1b1b 100%);
92+
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
93+
color: #FFFFFF; }
94+
}
95+
96+
@media (prefers-color-scheme: light) {
97+
body {
98+
font-size: 18px;
99+
line-height: 24px;
100+
font-weight: 400;
101+
background: #F1F1F1;
102+
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
103+
color: #222; }
104+
105+
}
106+
107+
108+
/* Typography
109+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
110+
h1 {
111+
margin-top: 0;
112+
margin-bottom: 16px;
113+
font-weight: 800; }
114+
h1 { font-size:24px; line-height: 64px; letter-spacing: 0;}
115+
116+
117+
/* Larger than phablet */
118+
@media (min-width: 550px) {
119+
h1 { font-size: 48px; line-height: 96px;}
120+
}
121+
122+
p {
123+
margin-top: 0; }
124+
125+
126+
/* Links
127+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
128+
a {
129+
color: #0085FF;
130+
text-decoration: none;
131+
}
132+
a:hover {
133+
color: #0085FF; }
134+
135+
.spacing {
136+
padding: 0 10px;
137+
}
138+
139+
/* Code
140+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
141+
code {
142+
padding: .2rem .5rem;
143+
margin: 0 .2rem;
144+
font-size: 90%;
145+
white-space: nowrap;
146+
background: #F1F1F1;
147+
border: 1px solid #E1E1E1;
148+
border-radius: 4px; }
149+
pre > code {
150+
display: block;
151+
padding: 1rem 1.5rem;
152+
white-space: pre; }
153+
154+
/* Spacing
155+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
156+
button,
157+
.button {
158+
margin-bottom: 1rem; }
159+
input,
160+
textarea,
161+
select,
162+
fieldset {
163+
margin-bottom: 1.5rem; }
164+
pre,
165+
blockquote,
166+
dl,
167+
figure,
168+
p,
169+
ol {
170+
margin-bottom: 2.5rem; }
171+
172+
173+
/* Utilities
174+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
175+
.u-full-width {
176+
width: 100%;
177+
box-sizing: border-box; }
178+
.u-max-full-width {
179+
max-width: 100%;
180+
box-sizing: border-box; }
181+
.u-pull-right {
182+
float: right; }
183+
.u-pull-left {
184+
float: left; }
185+
186+
187+
/* Misc
188+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
189+
hr {
190+
margin-top: 3rem;
191+
margin-bottom: 3.5rem;
192+
border-width: 0;
193+
border-top: 1px solid #E1E1E1; }
194+
195+
@media (prefers-color-scheme: dark) {
196+
/* ===== Scrollbar CSS ===== */
197+
/* Firefox */
198+
* {
199+
scrollbar-width: thin;
200+
scrollbar-color: #171a1d #31363b;
201+
}
202+
203+
/* Chrome, Edge, and Safari */
204+
*::-webkit-scrollbar {
205+
width: 8px;
206+
}
207+
208+
*::-webkit-scrollbar-track {
209+
background: #31363b;
210+
}
211+
212+
*::-webkit-scrollbar-thumb {
213+
background-color: #171a1d;
214+
border-radius: 30px;
215+
border: 3px none #ffffff;
216+
}
217+
218+
}
219+
220+
@media (prefers-color-scheme: light) {
221+
/* ===== Scrollbar CSS ===== */
222+
/* Firefox */
223+
* {
224+
scrollbar-width: thin;
225+
scrollbar-color: #323232 #dbdbdb;
226+
}
227+
228+
/* Chrome, Edge, and Safari */
229+
*::-webkit-scrollbar {
230+
width: 8px;
231+
}
232+
233+
*::-webkit-scrollbar-track {
234+
background: #dbdbdb;
235+
}
236+
237+
*::-webkit-scrollbar-thumb {
238+
background-color: #323232;
239+
border-radius: 30px;
240+
border: 3px none #ffffff;
241+
}
242+
243+
}

‎littlelink/css/skeleton-dark.css‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
/*
2+
* LittleLink Custom
3+
* https://littlelink-custom.com
4+
* Free to use under the GPL-3.0 License.
5+
* https://www.gnu.org/licenses/gpl-3.0.en.html
6+
* 05/12/2022
7+
*
8+
* Built using:
9+
*
210
* littlelink V1
3-
* https://littlelink.com
11+
* https://littlelink.io
412
* Free to use under the MIT license.
513
* http://www.opensource.org/licenses/mit-license.php
614
* 12/21/2019
715
*
8-
* Built using:
9-
*
1016
* Skeleton V2.0.4
1117
* Copyright 2014, Dave Gamache
1218
* www.getskeleton.com
@@ -76,7 +82,8 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */
7682
html {
7783
font-size: 100%; }
7884
body {
79-
background-color: #292929;
85+
background: #292929;
86+
background: radial-gradient(circle, #292929 28%, #1b1b1b 100%);
8087
font-size: 18px;
8188
line-height: 24px;
8289
font-weight: 400;

‎littlelink/css/skeleton-light.css‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
/*
2+
* LittleLink Custom
3+
* https://littlelink-custom.com
4+
* Free to use under the GPL-3.0 License.
5+
* https://www.gnu.org/licenses/gpl-3.0.en.html
6+
* 05/12/2022
7+
*
8+
* Built using:
9+
*
210
* littlelink V1
3-
* https://littlelink.com
11+
* https://littlelink.io
412
* Free to use under the MIT license.
513
* http://www.opensource.org/licenses/mit-license.php
614
* 12/21/2019
715
*
8-
* Built using:
9-
*
1016
* Skeleton V2.0.4
1117
* Copyright 2014, Dave Gamache
1218
* www.getskeleton.com

0 commit comments

Comments
 (0)