summaryrefslogtreecommitdiff
path: root/themes/conspiracy/assets
diff options
context:
space:
mode:
Diffstat (limited to 'themes/conspiracy/assets')
-rw-r--r--themes/conspiracy/assets/css/style.css66
1 files changed, 40 insertions, 26 deletions
diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css
index 96dc56b..d365591 100644
--- a/themes/conspiracy/assets/css/style.css
+++ b/themes/conspiracy/assets/css/style.css
@@ -16,6 +16,8 @@ html {
--c-bg-secondary: #ff9449;
--shadow-opacity: 0.8;
+
+ --default-border: 0.5px dotted rgba(255, 255, 255, 0.3);
}
@font-face {
@@ -72,16 +74,6 @@ strong {
font-style: italic;
}
-nav {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- overflow-x: scroll;
- background-color: var(--c-bg-front);
- box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity));
- padding: 0 10px 0 10px;
-}
-
a:hover, a:visited, a:active, a:link {
color: var(--c-fg-secondary);
text-decoration: none;
@@ -92,20 +84,36 @@ a:hover {
color: var(--c-text);
}
-nav > a:link, nav > a:active, nav > a:visited, nav > a:hover {
+nav {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ background-color: var(--c-bg-front);
+ box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity));
+ padding: 0 10px 0 10px;
+ justify-content: space-between;
+}
+
+nav > div {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ border-top: var(--default-border);
+ margin-top: -1px;
+}
+
+nav a:link, nav a:active, nav a:visited, nav a:hover {
flex-grow: 1;
+ text-align: center;
color: inherit;
padding: 10px 10px 10px 10px;
}
-nav > a:hover {
+nav a:hover {
background: var(--c-bg-primary);
}
-nav > .spacer {
- flex-grow: 100;
-}
-
.breadcrumbs {
max-width: 40em;
text-align: center;
@@ -136,13 +144,6 @@ main {
hyphens: auto;
}
-@media (max-width: 30em) {
- main {
- padding-left: 20px;
- padding-right: 20px;
- }
-}
-
main > .intro {
margin-top: 40px;
}
@@ -238,7 +239,7 @@ main.cards {
.card > .links {
margin-left: -20px;
margin-bottom: -30px;
- border-top: 0.5px dotted rgba(255, 255, 255, 0.3);
+ border-top: var(--default-border);
margin-top: 20px;
width: calc(100% + 40px);
display: flex;
@@ -254,7 +255,7 @@ main.cards {
main > .links {
margin: 20px 0px 40px 0px;
- border: 0.5px dotted rgba(255, 255, 255, 0.3);
+ border: var(--default-border);
border-left: none;
border-right: none;
width: calc(100%);
@@ -475,6 +476,17 @@ body .s1 { color: var(--c-text); font-weight: 600 } /* Literal.String.Single */
body .ss { color: var(--c-text); font-weight: 600 } /* Literal.String.Symbol */
body .il { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.Long */
+@media (max-width: 40em) {
+ nav > div {
+ flex-grow: 1;
+ }
+
+ main {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+}
+
@media print, (prefers-color-scheme: light) {
html {
--c-bg-backdrop: hsl(220, 10%, 90%);
@@ -493,13 +505,15 @@ body .il { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
--c-bg-secondary: hsl(319, 98%, 52%);
--shadow-opacity: 0.2;
+
+ --default-border: 0.5px dotted hsla(220, 10%, 30%, 50%);
}
body > header > h1 {
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
}
- a:hover, nav > a:hover {
+ a:hover, nav a:hover {
color: var(--c-text-inverted);
}