--c-bg-dark: #3a4346;
--c-bg-light: #4c5456;
--c-light: #ecf7fa;
- --c-off-white: #f9f9f9;
--c-hl-dark: #008499;
--c-hl-light: #3baec4;
--c-shadow: #dae5e2;
--jumbotron-text-color: var(--c-light);
--art-date-color: color(var(--c-dark) tint(50%));
+ /* background colors */
+ --background-color: var(--c-light);
+
/* box colors */
- --border-color: var(--c-dark);
- --box-color: var(--c-bg-light);
- --box-hover-color: var(--c-dark);
- --box-round: 10px;
+ --border-color: var(--c-dark);
+ --box-color: var(--c-bg-light);
+ --box-hover-color: var(--c-dark);
+ --box-round: 10px;
+ --navbar-border-color: var(--border-color);
+ --footer-shadow-color: rgba(150,150,150,.36);
/* other */
--max-width: 600px;
--max-width-box: 800px;
--margin-box-fa: 5px;
}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text-color: var(--c-light);
+ --background-color: var(--c-dark);
+ --link-color: #00c8e8;
+ --link-hover-color: #21a9c1;
+ --c-shadow: var(--c-bg-light);
+ --border-color: #000000;
+ --navbar-border-color: var(--c-dark);
+ --footer-shadow-color: rgba(70, 70, 70, 0.5);
+ }
+}
+
@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);
+@custom-media --sm-md (max-width: 850px) and (min-width: 600px);
/* reset css for browser compat */
* {
font-feature-settings: "lnum";
font-variant-numeric: lining-nums;
color: var(--text-color);
+ background-color: var(--background-color);
font-size: 14px;
min-height: 100vh;
height: auto;
a:hover {
color: var(--link-hover-color);
}
+
img {
max-width: 100%;
}
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
- border-bottom: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--navbar-border-color);
z-index: 100;
padding-right: 5px;
}
* pia = Private Internet access
*/
#nav-logo { order: 10; }
-#nav-pia { order: 30; }
#nav-jump { order: 1000; }
margin: 0 .5em;
}
- #nav-pia {
- margin-left: auto;
- }
-
#nav-label {
width: auto;
margin: 0 .5em;
margin-right: -10px;
}
+@media (--max-md) {
+ margin-left: -5px;
+ margin-right: -5px;
+}
+
/* main */
.container {
width: 100%;
.main pre {
padding: .5em .75em;
- border: 1px solid var(--c-border);
+ border: 1px solid var(--border-color);
overflow-x: auto;
}
}
table {
- border: 1px solid var(--c-dark);
+ border: 1px solid var(--border-color);
border-collapse: collapse;
}
}
td:not(:first-child), th:not(:first-child) {
- border-left: 1px solid var(--c-dark);
+ border-left: 1px solid var(--border-color);
}
-tr:nth-child(odd) {
+tr:nth-child(even) {
background-color: var(--c-shadow);
}
background: var(--jumbotron-bg);
color: var(--footer-text-color);
width: 100%;
- box-shadow: 0 -3px 5px rgba(150,150,150,.36);
+ box-shadow: 0 -3px 5px var(--footer-shadow-color);
min-height: 15.4rem;
padding: 3em 0;
}
}
}
+@media (--sm-md) {
+ .footer-container {
+ flex-flow: row wrap;
+ position: relative;
+ width: 95vw;
+ }
+
+ .footerchild {
+ flex-basis: 40%;
+ margin-bottom: 1em;
+ }
+
+ .footer-push {
+ margin-left: 0;
+ }
+}
+
.footer h2, .footer h3 {
margin-left: 10px;
margin-right: 10px;