aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/index.css54
-rw-r--r--vnext/src/index.html2
-rw-r--r--vnext/src/ui/Message.css16
-rw-r--r--vnext/src/ui/NavigationIcon.css2
4 files changed, 45 insertions, 29 deletions
diff --git a/vnext/src/index.css b/vnext/src/index.css
index 7bbc0a22..1ae327ab 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -1,4 +1,6 @@
@custom-media --viewport-desktop (width >=62.5rem);
+@custom-media --viewport-mobile (width < 62.5rem);
+
:root {
--main-width: 1000px;
--main-background-color: #fdfdfe;
@@ -7,6 +9,18 @@
--text-background-color: #fff;
--text-color: #363636;
--link-color: #3c77aa;
+ --dimmed-link-color: #88958d;
+}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --main-background-color: #222;
+ --background-color: #333;
+ --text-background-color: #383838;
+ --border-color: #4c4c4c;
+ --text-color: #ccc;
+ --link-color: #c38855;
+ --dimmed-link-color: #88958d;
+ }
}
* {
@@ -70,7 +84,7 @@ ul {
}
legend {
- color: #88958d;
+ color: var(--dimmed-link-color);
margin: 0;
padding: 12px;
width: 100%;
@@ -131,7 +145,6 @@ hr {
display: flex;
flex-direction: row;
justify-content: space-around;
- background: var(--background-color);
border-top: 1px solid var(--border-color);
}
@@ -166,7 +179,6 @@ hr {
#logo {
height: 36px;
width: 110px;
- padding: 4px;
}
#logo a {
@@ -209,14 +221,13 @@ hr {
}
#global a {
- color: #88958d;
+ color: var(--dimmed-link-color);
padding: 14px 16px;
}
#sidebar > a,
.l > a {
- color: #88958d;
- border-right: 2px solid transparent;
+ color: var(--link-color);
display: flex;
padding: 14px;
align-items: center;
@@ -237,7 +248,7 @@ hr {
#ctitle a,
.l a,
.msg-button {
- border-bottom: 2px solid var(--main-background-color);
+ border-bottom: 2px solid transparent;
}
#global a:hover,
@@ -307,7 +318,7 @@ hr {
}
.page a {
- color: #88958d;
+ color: var(--dimmed-link-color);
}
::-webkit-scrollbar {
@@ -329,6 +340,15 @@ hr {
background-color: black;
}
+@media (--viewport-mobile) {
+ #content {
+ margin-bottom: 12px;
+ }
+ #sidebar {
+ background: var(--text-background-color);
+ }
+}
+
@media (--viewport-desktop) {
#app {
grid-template-areas: "header header header header"". footer content .";
@@ -346,6 +366,9 @@ hr {
.mobile {
display: none;
}
+ #content {
+ margin-bottom: 12px;
+ }
#sidebar {
flex-direction: column;
justify-content: initial;
@@ -353,19 +376,12 @@ hr {
margin: 12px;
border: 1px solid var(--border-color);
}
+ #sidebar a,
+ .l a {
+ border-right: 2px solid transparent;
+ }
#sidebar > a:hover {
border-top: initial;
border-right: 2px solid #ff339a;
}
}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --main-background-color: #222;
- --background-color: #333;
- --text-background-color: #383838;
- --border-color: #4c4c4c;
- --text-color: #ccc;
- --link-color: #c38855;
- }
-}
diff --git a/vnext/src/index.html b/vnext/src/index.html
index d3e185b5..84c4d681 100644
--- a/vnext/src/index.html
+++ b/vnext/src/index.html
@@ -32,7 +32,7 @@
<div id="app">
<div id="header">
<div id="header_wrapper">
- <div id="logo"><a href="/">Juick</a></div>
+ <div id="logo"><a href="/"/></div>
<nav id="global">
<a href="/">Loading...</a>
</nav>
diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css
index d66352a4..4f2d966f 100644
--- a/vnext/src/ui/Message.css
+++ b/vnext/src/ui/Message.css
@@ -17,18 +17,18 @@
background: var(--main-background-color);
}
.msg-cont > .l a {
- color: #88958d;
+ color: var(--dimmed-link-color);
margin-right: 15px;
font-size: small;
}
.msg-tags {
- color: #88958d;
+ color: var(--dimmed-link-color);
margin-top: 12px;
min-height: 1px;
}
.badge,
.msg-tags > a {
- color: #88958d;
+ color: var(--dimmed-link-color);
display: inline-block;
font-size: small;
}
@@ -50,7 +50,7 @@
}
.msg-ts,
.msg-ts > a {
- color: #88958d;
+ color: var(--dimmed-link-color);
}
.msg-txt {
margin: 0 0 12px;
@@ -79,13 +79,13 @@ blockquote {
height: auto;
}
.msg-links {
- color: #88958d;
+ color: var(--dimmed-link-color);
font-size: small;
margin: 5px 0 0 0;
padding: 12px;
}
.msg-comments {
- color: #88958d;
+ color: var(--dimmed-link-color);
font-size: small;
margin-top: 10px;
overflow: hidden;
@@ -129,7 +129,7 @@ blockquote {
width: 50px;
}
.msg-recomms {
- color: #88958d;
+ color: var(--dimmed-link-color);
background: var(--main-background-color);
font-size: small;
margin-bottom: 10px;
@@ -140,7 +140,7 @@ blockquote {
}
.msg-summary,
.msg-summary a {
- color: #88958d;
+ color: var(--dimmed-link-color);
font-size: small;
padding: 12px;
text-align: right;
diff --git a/vnext/src/ui/NavigationIcon.css b/vnext/src/ui/NavigationIcon.css
index caff6195..9cbff965 100644
--- a/vnext/src/ui/NavigationIcon.css
+++ b/vnext/src/ui/NavigationIcon.css
@@ -1,4 +1,4 @@
#navicon {
padding: 12px;
- color: #88958d;
+ color: var(--dimmed-link-color);
}