- --navbar-bg: #292f2f;
- --jumbotron-bg: #3a4346;
- --copyright-bg: #292f2f;
- --link-color: #2fa6bc;
- --footer-link-color: #ecf7fa;
- --nlink-col: #000;
- --text-color: #292f2f;
- --footer-text-color: #ecf7fa;
- --copyright-text-color: #ecf7fa;
- --jumbotron-text-color: #ecf7fa;
- --border-color: #292f2f;
- --box-color: #4c5456;
- --box-hover-color: #292f2f;
- --box-round: 10px;
- --max-width: 600px;
-}
+ --c-dark: #292f2f;
+ --c-bg-dark: #3a4346;
+ --c-bg-light: #4c5456;
+ --c-light: #ecf7fa;
+ --c-hl-dark: #008499;
+ --c-hl-light: #3baec4;
+ --c-shadow: #dae5e2;
+
+ /* backgrounds */
+ --navbar-bg: var(--c-dark);
+ --jumbotron-bg: var(--c-bg-dark);
+ --copyright-bg: var(--c-dark);
+
+ /* link colors */
+ --link-color: var(--c-hl-dark);
+ --link-hover-color: var(--c-hl-light);
+ --footer-link-color: var(--c-light);
+ --footer-hover-color: #fff;
+
+ /* text colors */
+ --text-color: var(--c-dark);
+ --footer-text-color: var(--c-light);
+ --copyright-text-color: var(--c-light);
+ --jumbotron-text-color: var(--c-light);
+ --art-date-color: color(var(--c-dark) tint(50%));
+
+ /* box colors */
+ --border-color: var(--c-dark);
+ --box-color: var(--c-bg-light);
+ --box-hover-color: var(--c-dark);;
+ --box-round: 10px;
+
+ /* other */
+ --max-width: 600px;
+ --max-width-box: 800px;
+ --margin-box-fa: 5px;
+}
+@custom-media --max-sm all and (max-width: 600px);
+@custom-media --max-md all and (max-width: 800px);
+@custom-media --max-rem all and (max-width: 60rem);