Skip to content

Commit ac63590

Browse files
CavenfishCavenfish
committed
Deploying to gh-pages from @ e67a991 🚀
1 parent 3ca5e1b commit ac63590

16 files changed

Lines changed: 281 additions & 50 deletions

File tree

‎404.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" data-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -35,6 +35,11 @@
3535
<div class="author-name-nav">
3636
<li><a href="/">Brian C. Ferrari</a></li>
3737
</div>
38+
<div class="theme-switch">
39+
<button id="theme-toggle" onclick="toggleTheme()">
40+
<i class="fas fa-moon"></i>
41+
</button>
42+
</div>
3843
<a class="burger-nav" onclick="myFunction()">
3944
<i class="fa-2x fa fa-bars"></i>
4045
</a>
@@ -139,6 +144,7 @@ <h3>Brian C. Ferrari</h3>
139144
</div><!-- CONTENT ENDS HERE -->
140145

141146

142-
<script src="/assets/scripts/js/nav.js"></script>
147+
<script src="/libs/buttons/nav.js"></script>
148+
<script src="/libs/buttons/theme.js"></script>
143149
</body>
144150
</html>

‎assets/theme.scss‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,24 @@
22
Set your website theme here.
33
*/
44

5-
// Background
6-
$primary-background: #cebada;
7-
$secondary-background: #048594;
8-
$tertiary-background: #DB3069;
9-
10-
// Foreground
11-
$primary-foreground: #000000;
12-
$secondary-foreground: #b81149;
13-
$tertiary-foreground: #462749;
5+
$themes: (
6+
"light": (
7+
"primary-bg": #ffffff,
8+
"secondary-bg": #7dd4db,
9+
"tertiary-bg": #4fb9c1,
10+
"primary-fg": #000000,
11+
"secondary-fg": #9b4d5f,
12+
"tertiary-fg": #b85b74,
13+
),
14+
"dark": (
15+
"primary-bg": #2e2c2c,
16+
"secondary-bg": #10555a,
17+
"tertiary-bg": #1c8991,
18+
"primary-fg": #ffffff,
19+
"secondary-fg": #df6dc2,
20+
"tertiary-fg": #b925b2,
21+
),
22+
);
1423

1524
// Font
1625
$font-stack: Helvetica, Arial, sans-serif;

‎css/cards.css‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,30 @@ Variables to be used throughout site
44
/*
55
Set your website theme here.
66
*/
7+
[data-theme=light] {
8+
--primary-bg: #ffffff;
9+
--secondary-bg: #7dd4db;
10+
--tertiary-bg: #4fb9c1;
11+
--primary-fg: #000000;
12+
--secondary-fg: #9b4d5f;
13+
--tertiary-fg: #b85b74;
14+
}
15+
16+
[data-theme=dark] {
17+
--primary-bg: #2e2c2c;
18+
--secondary-bg: #10555a;
19+
--tertiary-bg: #1c8991;
20+
--primary-fg: #ffffff;
21+
--secondary-fg: #df6dc2;
22+
--tertiary-fg: #b925b2;
23+
}
24+
725
.card {
826
width: 100%;
927
height: 35%;
1028
padding: 5px;
11-
box-shadow: 0 0 8px 4px #DB3069;
12-
border: 2px solid #000000;
29+
box-shadow: 0 0 8px 4px var(--tertiary-bg);
30+
border: 2px solid var(--primary-fg);
1331
display: flex;
1432
}
1533
.card .card-img {
@@ -31,7 +49,7 @@ Set your website theme here.
3149
text-align: left;
3250
}
3351
.card .card-info .title {
34-
color: #b81149;
52+
color: var(--secondary-fg);
3553
}
3654

3755
@media (max-width: 480px) {

‎css/cover.css‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,24 @@ Variables to be used throughout site
44
/*
55
Set your website theme here.
66
*/
7+
[data-theme=light] {
8+
--primary-bg: #ffffff;
9+
--secondary-bg: #7dd4db;
10+
--tertiary-bg: #4fb9c1;
11+
--primary-fg: #000000;
12+
--secondary-fg: #9b4d5f;
13+
--tertiary-fg: #b85b74;
14+
}
15+
16+
[data-theme=dark] {
17+
--primary-bg: #2e2c2c;
18+
--secondary-bg: #10555a;
19+
--tertiary-bg: #1c8991;
20+
--primary-fg: #ffffff;
21+
--secondary-fg: #df6dc2;
22+
--tertiary-fg: #b925b2;
23+
}
24+
725
body {
826
overflow: hidden;
927
}
@@ -64,13 +82,13 @@ body {
6482
width: auto;
6583
padding: 10px;
6684
display: inline;
67-
color: #000000;
68-
background-color: #cebada;
85+
color: var(--primary-fg);
86+
background-color: var(--primary-bg);
6987
border: none;
7088
align-content: center;
7189
}
7290
.cover .cover-body .cover-button a {
73-
color: #000000;
91+
color: var(--primary-fg);
7492
font-size: 24px;
7593
text-decoration: none;
7694
}
@@ -84,13 +102,13 @@ body {
84102
width: auto;
85103
padding: 10px;
86104
display: inline;
87-
color: #000000;
88-
background-color: #cebada;
105+
color: var(--primary-fg);
106+
background-color: var(--primary-bg);
89107
border: none;
90108
align-content: center;
91109
}
92110
.cover .cover-nav .cover-button a {
93-
color: #000000;
111+
color: var(--primary-fg);
94112
font-size: 24px;
95113
text-decoration: none;
96114
}

‎css/franklin.css‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,33 @@ Variables to be used throughout site
44
/*
55
Set your website theme here.
66
*/
7+
[data-theme=light] {
8+
--primary-bg: #ffffff;
9+
--secondary-bg: #7dd4db;
10+
--tertiary-bg: #4fb9c1;
11+
--primary-fg: #000000;
12+
--secondary-fg: #9b4d5f;
13+
--tertiary-fg: #b85b74;
14+
}
15+
16+
[data-theme=dark] {
17+
--primary-bg: #2e2c2c;
18+
--secondary-bg: #10555a;
19+
--tertiary-bg: #1c8991;
20+
--primary-fg: #ffffff;
21+
--secondary-fg: #df6dc2;
22+
--tertiary-fg: #b925b2;
23+
}
24+
725
body {
826
overflow-x: hidden;
9-
background-color: #cebada;
27+
background-color: var(--primary-bg);
1028
}
1129

1230
html {
1331
font-family: Helvetica, Arial, sans-serif;
1432
font-size: 20px;
15-
color: #000000;
33+
color: var(--primary-fg);
1634
}
1735

1836
.franklin-content {
@@ -122,12 +140,12 @@ html {
122140
text-align: center;
123141
align-content: center;
124142
font-size: 17px;
125-
color: #462749;
143+
color: var(--tertiary-fg);
126144
}
127145

128146
.short-bio {
129147
font-size: 20px;
130-
color: #000000;
148+
color: var(--primary-fg);
131149
}
132150

133151
.page-foot {

‎css/nav.css‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,27 @@ Variables to be used throughout site
44
/*
55
Set your website theme here.
66
*/
7+
[data-theme=light] {
8+
--primary-bg: #ffffff;
9+
--secondary-bg: #7dd4db;
10+
--tertiary-bg: #4fb9c1;
11+
--primary-fg: #000000;
12+
--secondary-fg: #9b4d5f;
13+
--tertiary-fg: #b85b74;
14+
}
15+
16+
[data-theme=dark] {
17+
--primary-bg: #2e2c2c;
18+
--secondary-bg: #10555a;
19+
--tertiary-bg: #1c8991;
20+
--primary-fg: #ffffff;
21+
--secondary-fg: #df6dc2;
22+
--tertiary-fg: #b925b2;
23+
}
24+
725
.masthead {
826
position: relative;
9-
border-bottom: 2px solid #048594;
27+
border-bottom: 2px solid var(--secondary-bg);
1028
padding-left: 6%;
1129
}
1230
.masthead nav {
@@ -24,7 +42,7 @@ Set your website theme here.
2442
display: inline-block;
2543
}
2644
.masthead nav .author-name-nav li a {
27-
color: #b81149;
45+
color: var(--secondary-fg);
2846
text-decoration: none;
2947
font-size: 20px;
3048
font-weight: bold;
@@ -44,7 +62,7 @@ Set your website theme here.
4462
display: inline-block;
4563
}
4664
.masthead nav .desktop-nav li a {
47-
color: #000000;
65+
color: var(--primary-fg);
4866
text-decoration: none;
4967
font-size: 20px;
5068
font-weight: bold;
@@ -57,6 +75,23 @@ Set your website theme here.
5775
margin-right: 7px;
5876
transition: color 0.3s ease;
5977
}
78+
.masthead nav .theme-switch {
79+
margin-left: auto;
80+
margin-right: 1rem;
81+
display: block;
82+
float: right;
83+
}
84+
.masthead nav .theme-switch .theme-toggle {
85+
background: none;
86+
border: none;
87+
color: var(--text-color);
88+
cursor: pointer;
89+
font-size: 1.2rem;
90+
padding: 0.5rem;
91+
}
92+
.masthead nav .theme-switch .theme-toggle .hover {
93+
opacity: 0.8;
94+
}
6095
.masthead nav .mobile-nav {
6196
display: none;
6297
}
@@ -80,7 +115,7 @@ Set your website theme here.
80115
display: block;
81116
}
82117
.masthead nav .mobile-nav li a {
83-
color: #000000;
118+
color: var(--primary-fg);
84119
text-decoration: none;
85120
font-size: 20px;
86121
font-weight: bold;

‎css/posts.css‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,37 @@ Variables to be used throughout site
44
/*
55
Set your website theme here.
66
*/
7+
[data-theme=light] {
8+
--primary-bg: #ffffff;
9+
--secondary-bg: #7dd4db;
10+
--tertiary-bg: #4fb9c1;
11+
--primary-fg: #000000;
12+
--secondary-fg: #9b4d5f;
13+
--tertiary-fg: #b85b74;
14+
}
15+
16+
[data-theme=dark] {
17+
--primary-bg: #2e2c2c;
18+
--secondary-bg: #10555a;
19+
--tertiary-bg: #1c8991;
20+
--primary-fg: #ffffff;
21+
--secondary-fg: #df6dc2;
22+
--tertiary-fg: #b925b2;
23+
}
24+
725
.post {
826
width: 100%;
927
height: 100%;
1028
}
1129
.post .title {
12-
color: #b81149;
30+
color: var(--secondary-fg);
1331
}
1432
.post .title h1 {
1533
margin-bottom: 5px;
1634
}
1735
.post .title h1 a {
1836
text-decoration: none;
19-
color: #b81149;
37+
color: var(--secondary-fg);
2038
}
2139
.post .blurb {
2240
margin-left: 15px;
@@ -25,6 +43,6 @@ Set your website theme here.
2543
padding-top: 0;
2644
padding-bottom: 5px;
2745
margin-top: 5px;
28-
color: #000000;
46+
color: var(--primary-fg);
2947
font-size: 20px;
3048
}

‎css/showcase.css‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,38 @@ Variables to be used throughout site
44
/*
55
Set your website theme here.
66
*/
7+
[data-theme=light] {
8+
--primary-bg: #ffffff;
9+
--secondary-bg: #7dd4db;
10+
--tertiary-bg: #4fb9c1;
11+
--primary-fg: #000000;
12+
--secondary-fg: #9b4d5f;
13+
--tertiary-fg: #b85b74;
14+
}
15+
16+
[data-theme=dark] {
17+
--primary-bg: #2e2c2c;
18+
--secondary-bg: #10555a;
19+
--tertiary-bg: #1c8991;
20+
--primary-fg: #ffffff;
21+
--secondary-fg: #df6dc2;
22+
--tertiary-fg: #b925b2;
23+
}
24+
725
.showcase {
826
width: 100%;
927
height: 100%;
1028
}
1129
.showcase .year-heading h2 {
1230
border-bottom: none;
13-
color: #000000;
31+
color: var(--primary-fg);
1432
}
1533
.showcase .showcase-title {
16-
color: #b81149;
34+
color: var(--secondary-fg);
1735
}
1836
.showcase .showcase-title a {
1937
text-decoration: none;
20-
color: #b81149;
38+
color: var(--secondary-fg);
2139
}
2240
.showcase ul {
2341
padding-left: 50px;

0 commit comments

Comments
 (0)