ngn/anonymous_overflow
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Activity

feat: import theme icons, set color vars, option cookie

Browse Source
This commit is contained in:
httpjamesm
2022-12-28 11:49:14 -05:00
parent 26c7a5f5ee
commit 3d53fd5806
11 changed files with 68 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
public/globals.css
View File

@ -1,3 +1,25 @@
:root {
--main-bg: #1b1f26;
--text-color: #fff;
--muted-text-color: #b3b3b3;
--code-bg: #36383d;
--input-bg: #2b303b;
--input-bg-hover: #3b404b;
--meta-bg: rgb(82, 82, 98);
--divider-color: #42464e;
}
[data-theme="light"] {
--main-bg: rgb(219, 219, 219);
--text-color: #000;
--muted-text-color: #636363;
--code-bg: #b5b5b5;
--input-bg: rgb(188, 188, 188);
--input-bg-hover: rgb(168, 168, 168);
--meta-bg: rgb(170, 168, 168);
--divider-color: #b5b5b5;
}
a {
color: #92adff;
}

14
public/home.css
View File

@ -1,5 +1,5 @@
body {
background-color: #1b1f26;
background-color: var(--main-bg);
font-family: sans-serif;
display: flex;
@ -11,7 +11,7 @@ body {
margin: 0;
color: white;
color: var(--text-color);
}
.container {
@ -35,9 +35,9 @@ body {
border: 2px solid transparent;
border-radius: 3px;
background-color: #2b303b;
background-color: var(--input-bg);
color: white;
color: var(--text-color);
transition-duration: 200ms;
}
@ -52,9 +52,9 @@ body {
border: 2px solid transparent;
border-radius: 3px;
background-color: #2b303b;
background-color: var(-input-bg);
color: white;
color: var(--text-color);
transition-duration: 200ms;
@ -62,7 +62,7 @@ body {
}
.view-button:hover {
background-color: #3b404b;
background-color: var(--input-bg-hover);
}
.error {

3
public/icons/moon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 376 B

3
public/icons/sun.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 393 B

22
public/question.css
View File

@ -1,7 +1,3 @@
:root {
--code-bg: #36383d;
}
body {
margin: 0;
width: 100vw;
@ -9,8 +5,8 @@ body {
overflow-x: hidden;
background-color: #1b1f26;
color: white;
background-color: var(--main-bg);
color: var(--text-color);
font-family: sans-serif;
display: flex;
@ -32,21 +28,21 @@ code {
background-color: var(--code-bg);
padding: .15rem;
border-radius: 5px;
color: white;
color: var(--text-color);
}
pre {
background-color: var(--code-bg);
padding: 1rem;
border-radius: 5px;
color: white;
color: var(--text-color);
overflow-x: auto;
line-height: 1.35;
}
.timestamp {
color: #b3b3b3;
color: var(--muted-text-color);
font-size: 0.8rem;
}
@ -55,7 +51,7 @@ pre {
margin-bottom: 3rem;
border: 0;
height: 1px;
background-color: #42464e;
background-color: var(--divider-color);
}
img {
@ -67,8 +63,8 @@ img {
padding: 1rem;
color: black;
margin-bottom: 1rem;
background-color: rgb(82, 82, 98);
color: white;
background-color: var(--meta-bg);
color: var(--text-color);
}
.answer-meta.accepted {
@ -83,7 +79,7 @@ img {
.answer-author {
width: fit-content;
background-color: rgb(82, 82, 98);
background-color: var(--meta-bg);
padding: .5rem;
border-radius: 5px;
text-align: right;