diff --git a/blog/static/css/admin.css b/blog/static/css/admin.css
index 21e0cf9..2eddc7d 100644
--- a/blog/static/css/admin.css
+++ b/blog/static/css/admin.css
@@ -1,4 +1,58 @@
#content {
- width: 100%;
- height: 500px;
-}
\ No newline at end of file
+ width: 100%;
+ height: 500px;
+}
+
+/* Force navbar to use dark theme */
+.navbar,
+.navbar-default,
+.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a {
+ background-color: #2c3e50 !important;
+ border-color: #2c3e50 !important;
+ background-image: none !important;
+}
+
+.form-control,
+.select2-container .select2-choices,
+.select2-search input,
+.select2-drop-mask,
+.select2-container .select2-choice,
+.select2-container .select2-choices,
+.select2-container .select2-choices .select2-search-field input,
+.md-editor>.md-header,
+.select2-drop {
+ color: rgb(188, 182, 174) !important;
+ background-image: none !important;
+ background: #3a3e41 !important;
+}
+
+.navbar-brand {
+ color: #fff !important;
+}
+
+.navbar-nav .nav-link {
+ color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.navbar-nav .nav-link:hover {
+ color: #fff !important;
+}
+
+/* Fix dropdown menus */
+.dropdown-menu {
+ background-color: #2c3e50 !important;
+ border-color: #444 !important;
+}
+
+.dropdown-item {
+ color: #fff !important;
+}
+
+.dropdown-item:hover {
+ background-color: #34495e !important;
+}
+
+/* Fix the hamburger menu icon */
+.navbar-toggler-icon {
+ filter: invert(1);
+}
diff --git a/blog/static/src/components/header.css b/blog/static/src/components/header.css
index e4790c9..8984409 100644
--- a/blog/static/src/components/header.css
+++ b/blog/static/src/components/header.css
@@ -1,28 +1,27 @@
.header {
- text-align: center;
- font-size: 1.55rem;
- padding: 1rem 0 5rem 0;
+ text-align: center;
+ font-size: calc(var(--fontSizeBase) * 1.55);
+ padding: 1rem 0 5rem 0;
}
.header__logo {
- font-weight: bold;
- text-decoration: none;
- color: #333;
- float: left;
+ font-weight: bold;
+ text-decoration: none;
+ color: var(--color-text-light);
+ float: left;
}
.header__logo:hover {
- color: #000;
+ color: var(--color-text);
}
.header__nav {
- float: right;
+ float: right;
}
-@media (max-width:767px) {
- .header {
- padding-left: 1rem;
- padding-right: 1rem;
- }
+@media (max-width: 767px) {
+ .header {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
}
-
\ No newline at end of file
diff --git a/blog/static/src/components/minipost.css b/blog/static/src/components/minipost.css
index 9e18124..fd59d96 100644
--- a/blog/static/src/components/minipost.css
+++ b/blog/static/src/components/minipost.css
@@ -1,39 +1,39 @@
.minipost {
- padding: 0.5rem 0;
+ padding: 0.5rem 0;
}
-@media (max-width:767px) {
- .minipost__date {
- display: block;
- float: none;
- }
- .minipost__title {
- clear: both;
- text-align: left;
- }
+@media (max-width: 767px) {
+ .minipost__date {
+ display: block;
+ float: none;
+ }
+ .minipost__title {
+ clear: both;
+ text-align: left;
+ }
}
.minipost__title {
- transition: all 0.2s ease-in-out;
- color: #333;
- text-align: center;
- text-decoration: none;
- border-bottom: 1px solid #ccc;
+ transition: all 0.2s ease-in-out;
+ color: var(--color-text-light);
+ text-align: center;
+ text-decoration: none;
+ border-bottom: 1px solid var(--color-text-lighter);
}
.minipost__title:hover {
- border-color: #000;
- color: #000;
+ border-color: var(--color-text);
+ color: var(--color-text);
}
.minipost__date {
- color: #ccc;
- float: right;
+ color: var(--color-text-lighter);
+ float: right;
}
.minipost__position {
- color: #ccc;
- float: right;
+ color: var(--color-text-lighter);
+ float: right;
}
.minipost__content {
diff --git a/blog/static/src/components/nav.css b/blog/static/src/components/nav.css
index 3cb6720..7c6723d 100644
--- a/blog/static/src/components/nav.css
+++ b/blog/static/src/components/nav.css
@@ -1,35 +1,36 @@
.nav__link {
- color: #444;
- transition: all 0.2s ease-in-out;
- text-decoration: none;
- margin-left: 1rem;
- position: relative;
- display: inline-block;
+ color: var(--color-text-light);
+ transition: all 0.2s ease-in-out;
+ font-size: 0.8em;
+ text-decoration: none;
+ margin-left: 1rem;
+ position: relative;
+ display: inline-block;
}
.nav__link:hover {
- color: #000;
- text-decoration: none;
+ color: var(--color-text);
+ text-decoration: none;
}
.nav__link:hover:after {
- width: 100%;
- filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
- opacity: 1;
- transition-delay: 0s;
+ width: 100%;
+ filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
+ opacity: 1;
+ transition-delay: 0s;
}
.nav__link:after {
- display: block;
- position: absolute;
- bottom: 0;
- left: 0;
- width: 1px;
- height: 1px;
- background: #000;
- content: '';
- filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
- transition-delay: 0s, 0.3s;
+ display: block;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 1px;
+ height: 1px;
+ background: var(--color-text);
+ content: '';
+ filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+ opacity: 0;
+ transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
+ transition-delay: 0s, 0.3s;
}
diff --git a/blog/static/src/components/page.css b/blog/static/src/components/page.css
index 0b8e0d8..94a6e2b 100644
--- a/blog/static/src/components/page.css
+++ b/blog/static/src/components/page.css
@@ -1,6 +1,6 @@
.page {
min-width: 768px;
- max-width: 768px;
+ max-width: 895px;
margin: auto;
padding: 0.5rem 0 2rem 0;
}
diff --git a/blog/static/src/components/post.css b/blog/static/src/components/post.css
index e4861a5..351bdfc 100644
--- a/blog/static/src/components/post.css
+++ b/blog/static/src/components/post.css
@@ -1,31 +1,31 @@
.post__title {
- text-align: center;
- line-height: 1.1;
- letter-spacing: 0.15rem;
- color: #000;
- font-size: 3rem;
- font-weight: 700;
- margin: 0.5rem 0;
+ text-align: center;
+ line-height: 1.1;
+ letter-spacing: 0.15rem;
+ color: var(--color-text);
+ font-size: calc(var(--fontSizeBase) * 1.8);
+ font-weight: 700;
+ margin: 0.5rem 0;
}
.post__date {
- color: #ccc;
- font-weight: 300;
- text-align: center;
+ color: var(--color-text-lighter);
+ font-weight: 300;
+ text-align: center;
}
.post__body {
- padding: 2rem 1rem;
- color: #444;
- line-height: 1.4;
+ padding: 2rem 1rem;
+ color: var(--color-text-light);
+ line-height: 1.4;
}
.post__body .embed-responsive {
- position: relative;
- display: block;
- height: 0;
- padding: 0;
- overflow: hidden
+ position: relative;
+ display: block;
+ height: 0;
+ padding: 0;
+ overflow: hidden;
}
.embed-responsive .embed-responsive-item,
@@ -33,21 +33,21 @@
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
}
.embed-responsive-16by9 {
- padding-bottom: 56.25%;
+ padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
- padding-bottom: 75%;
+ padding-bottom: 75%;
}
.post__body h1,
@@ -56,37 +56,37 @@
.post__body h4,
.post__body h5,
.post__body h6 {
- line-height: 1.3;
- margin: 3rem 0 2rem 0;
+ line-height: 1.3;
+ margin: 3rem 0 2rem 0;
}
.post__body h1 {
- font-size: 2rem;
+ font-size: calc(var(--fontSizeBase) * 1.4);
}
.post__body h2 {
- font-size: 1.7rem;
+ font-size: calc(var(--fontSizeBase) * 1.3);
}
.post__body h3 {
- font-size: 1.4rem;
+ font-size: calc(var(--fontSizeBase) * 1.2);
}
.post__body h4 {
- font-size: 1.1rem;
+ font-size: calc(var(--fontSizeBase) * 1.1);
}
.post__body h5 {
- font-size: 1rem;
- text-transform: uppercase;
+ font-size: var(--fontSizeBase);
+ text-transform: uppercase;
}
.post__body a {
- color: #474747;
- transition: color 0.3s ease;
+ color: var(--color-text-link);
+ transition: color 0.3s ease;
}
.post__body a:hover {
- color: #000;
- text-decoration: none;
+ color: var(--color-text-link-hover);
+ text-decoration: none;
}
diff --git a/blog/static/src/components/postGroup.css b/blog/static/src/components/postGroup.css
index 1097ffd..0598b6a 100644
--- a/blog/static/src/components/postGroup.css
+++ b/blog/static/src/components/postGroup.css
@@ -1,13 +1,13 @@
.postGroup {
- margin-bottom: 3rem;
+ margin-bottom: 3rem;
}
.postGroup__title {
- font-weight: bold;
+ font-weight: bold;
}
@media (max-width:767px) {
- .postGroup {
- padding: 0 1rem;
- }
+ .postGroup {
+ padding: 0 1rem;
+ }
}
diff --git a/blog/static/src/components/refs.css b/blog/static/src/components/refs.css
index f62c8f5..b0a51a0 100644
--- a/blog/static/src/components/refs.css
+++ b/blog/static/src/components/refs.css
@@ -1,34 +1,17 @@
.refs {
- padding: 0.5rem 0;
-}
-
-.refs__links {
-
-}
-
-.refs__links_desc {
-
+ padding: 0.5rem 0;
}
.refs__link_itemlink {
transition: all 0.2s ease-in-out;
- color: #333;
+ color: var(--color-text-light);
text-align: center;
text-decoration: none;
- border-bottom: 1px solid #ccc;
- font-size: 1.3em;
+ border-bottom: 1px solid var(--color-text-lighter);
+ font-size: calc(var(--fontSizeBase) * 1.3);
}
.refs__link_itemlink:hover {
- border-color: #000;
- color: #000;
-}
-
-
-
-}
-
-.refs__link_itemlink {
-
-}
-
+ border-color: var(--color-text);
+ color: var(--color-text);
+}
diff --git a/blog/static/src/components/tags.css b/blog/static/src/components/tags.css
index 58eddf5..d5af4fe 100644
--- a/blog/static/src/components/tags.css
+++ b/blog/static/src/components/tags.css
@@ -1,21 +1,21 @@
.tags {
- text-align: center;
- line-height: 1.1;
- letter-spacing: 0.15rem;
- color: #000;
- font-size: 3rem;
- font-weight: 700;
- margin: 0.5rem 0;
- display: flex;
- justify-content: center;
+ text-align: center;
+ line-height: 1.1;
+ letter-spacing: 0.15rem;
+ color: #000;
+ font-size: 3rem;
+ font-weight: 700;
+ margin: 0.5rem 0;
+ display: flex;
+ justify-content: center;
}
.tags__item {
- margin: 0.5em;
- font-size: 1.5rem;
+ margin: 0.5em;
+ font-size: 1.5rem;
}
.tags__item:visited {
- color: #ccc;
+ color: #ccc;
}
diff --git a/blog/static/src/global/reboot.css b/blog/static/src/global/reboot.css
index a278d7d..fcb1e8d 100644
--- a/blog/static/src/global/reboot.css
+++ b/blog/static/src/global/reboot.css
@@ -10,7 +10,7 @@ html {
}
ol, ul {
- list-style: none;
+ list-style: none;
padding:0;
margin: 0;
}
diff --git a/blog/static/src/global/vars.css b/blog/static/src/global/vars.css
index e20e024..2e43d28 100644
--- a/blog/static/src/global/vars.css
+++ b/blog/static/src/global/vars.css
@@ -1,5 +1,37 @@
:root {
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
--fontSizeBase: 1rem;
- --widthMain: 1180px;
+ --widthMain: 1380px;
+ /* Base Colors */
+ --color-text: #000;
+ --color-text-light: #444;
+ --color-text-lighter: #ccc;
+ --color-text-link: #474747;
+ --color-text-link-hover: #000;
+}
+
+[data-theme="dark"] {
+ /* Dark theme color overrides */
+ --color-text: #f0f0f0;
+ --color-text-light: #b0b0b0;
+ --color-text-lighter: #606060;
+ --color-text-link: #a0a0a0;
+ --color-text-link-hover: #ffffff;
+
+ /* Optional dark theme additions */
+ background-color: #121212;
+ color-scheme: dark;
+}
+
+/* System preference fallback */
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --color-text: #f0f0f0;
+ --color-text-light: #b0b0b0;
+ --color-text-lighter: #606060;
+ --color-text-link: #a0a0a0;
+ --color-text-link-hover: #ffffff;
+ background-color: #121212;
+ color-scheme: dark;
+ }
}
diff --git a/blog/templates/about.html b/blog/templates/about.html
index 479b8b2..df938cf 100644
--- a/blog/templates/about.html
+++ b/blog/templates/about.html
@@ -125,8 +125,8 @@ 2011–2014
2006–2011
-
-
-
diff --git a/blog/templates/admin/index.html b/blog/templates/admin/index.html
index b39793d..c20e04c 100644
--- a/blog/templates/admin/index.html
+++ b/blog/templates/admin/index.html
@@ -1,7 +1,9 @@
{% extends 'admin/base.html' %}
{% block head_css %}
{{super()}}
-
+
+
+
{% endblock %}
{% block page_body %}
diff --git a/blog/templates/layout.html b/blog/templates/layout.html
index 2d2309d..1a022d6 100644
--- a/blog/templates/layout.html
+++ b/blog/templates/layout.html
@@ -1,5 +1,5 @@
-
+