quartznet/quartznet-info
2
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Another CSS redesign attempt. Looks better, making progress one thing at a time. :)

Browse Source
This commit is contained in:
Gitea
2020-06-22 03:39:45 -04:00
parent 0db297d262
commit a9828e02f9
6 changed files with 120 additions and 740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
assets/css/themes.css
View File

@@ -1,138 +1,74 @@
/*Default theme*/
:root {
--background-color: #fdfdfd;
--headings-color: #111111;
--font-color: #333333;
/* Themes(light and dark) */
/* Light theme */
html {
--background-color: #383c4a;
--section-color: #2a2e3a;
--text-color: #C8C8C8;
--headings-color: #ffffff;
--header-color: #2e323e;
--site-name-color: #ffffff;;
--site-description-color: #ffffff;
--nav-link-color: #57cc8a;
--nav-link-hover-color: #ffffff;
--link-color: #8bb8df;
--link-color-hover: 8bb8df;
--border-color: #808080;
--footer-color: #2e323e;
}
@media (prefers-color-scheme:light) {
body {
background-color: var(--background-color);
color: var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
color: var(--headings-color);
}
header {
background-color: var(--header-color);
}
.menu {
color: white;
}
a {
color: #CC99FF;
}
a:hover {
color: white;
text-decoration: underline;
}
.content {
background-color: #ffffff;
}
main p {
color: black;
}
section {
background-color: #ffffff;
}
footer {
background-color: #182329;
color: #C8C8C8;
}
}
/* Dark theme */
html[data-theme='dark'] {
--background-color: #383c4a;
--section-color: #2a2e3a;
--text-color: #C8C8C8;
--background-color: #232629;
--headings-color: #ffffff;
--header-color: #2e323e;
--font-color: #ffffff;
--site-name-color: #ffffff;;
--site-description-color: #ffffff;
--nav-link-color: #57cc8a;
--nav-link-hover-color: #ffffff;
--link-color: #8bb8df;
--link-color-hover: 8bb8df;
--border-color: #808080;
--footer-color: #2e323e;
--border-color: #3d3d3d;
}
@media (prefers-color-scheme:dark) {
body {
background-color: #383c4a;
color: var(--text-color);
}
h1, h2, h3 {
color: white;
}
header {
/* background-color: #182329; */
background-color: #2e323e;
}
main {
color: #ffffff;
}
.title {
color: #ffffff;
}
.menu {
color: #ffffff;
}
a {
color: #CC99FF;
}
a:hover {
color: white;
}
.content {
background-color: #182329;
}
main p {
color: #C8C8C8;
}
section {
background-color: #2a2e3a;
}
footer {
background-color: #2e323e;
border-top: 1px solid var(--border-color);
color: #C8C8C8;
}
body {
background-color: var(--background-color);
color: var(--font-color);
}
h1, h2, h3, h4, h5 {
color: var(--headings-color);
}
hr {
background-color: #eeeeee;
}
header {
/* background-color: #4e5b69; */
border-bottom: 2px solid #eeeeee;
}
nav {
/* background-color: rgba(0, 0, 0, 10); */
/* background-color: #232629; */
/* background-color: #23262980; */
}
li a:hover {
border-bottom: 3px solid white;
text-decoration: none;
}
a {
color: #CC99FF;
}
a:hover {
color: white;
}
main p {
/* color: #C8C8C8; */
}
footer {
}