revuo-weekly/css/main.scss

185 lines
3.5 KiB
SCSS
Raw Normal View History

---
# Front matter comment to ensure Jekyll properly reads file.
---
//Import
2022-04-11 17:09:33 +02:00
@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss", "responsive.scss";
2022-03-30 17:21:26 +02:00
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
//////////// LIGHT THEME ////////////////
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
//html {
2023-03-11 11:30:38 +01:00
//background-color: #0f0f0f;
////background-color: #f0f0f0;
2022-03-30 17:21:26 +02:00
//html {
2023-03-11 11:30:38 +01:00
//[>background-color: #0f0f0f;<]
////background-color: #f0f0f0;
//background-color: lightblue;
2022-03-30 17:21:26 +02:00
//}
////body {
2023-03-11 11:30:38 +01:00
//////background-color: #f0f0f0;
////background-color: #0f0f0f;
2022-03-30 17:21:26 +02:00
//body {
2023-03-11 11:30:38 +01:00
//[>background-color: #0f0f0f;<]
////background-color: #f0f0f0;
//background-color: lightblue;
2022-03-30 17:21:26 +02:00
//}
2022-04-02 11:34:14 +02:00
// Default Style (Dark)
2022-03-30 17:21:26 +02:00
:root {
2023-03-11 11:30:38 +01:00
--primary-color: #888888;
--secondary-color: #666666;
--font-color: #cecece;
--link-color: #e6e6e6;
--bg-color: #0f0f0f;
--heading-color: #454545;
--block-bg-color: #2f3234;
--block-bg-color-secondary: #444444;
--block-bg-color-heading: #333333;
--table-color: #cecece;
--head-nav-bg-color: transparent;
--head-nav-text-color: #d56f2a;
--menu-color: #e1e1e1;
--license-color: #666666;
2022-03-30 17:21:26 +02:00
}
2022-04-02 11:34:14 +02:00
// Was entered incorrectly.. Dark = Light
2022-03-30 17:21:26 +02:00
[data-theme="dark"] {
2023-03-11 11:30:38 +01:00
--primary-color: #666666;
--secondary-color: #555555;
--font-color: #555555;
--link-color: #444444;
--bg-color: #2f3136;
--heading-color: #666666;
--block-bg-color: #d7d7d7;
--block-bg-color-secondary: #c0c0c0;
--block-bg-color-heading: #a5a5a5;
--table-color: #000000;
--nav-bg-color: #353637;
--nav-bg-hover-color: #d56f2a;
--nav-text-color: #d9dcde;
--head-nav-bg-color: transparent;
--head-nav-text-color: #d56f2a;
--menu-color: #d56f2a;
--license-color: #666666;
--footer-bg-color: #202225;
2022-03-30 17:21:26 +02:00
}
body {
2023-03-11 11:30:38 +01:00
background-color: var(--bg-color);
color: var(--font-color);
2022-03-30 17:21:26 +02:00
}
html {
2023-03-11 11:30:38 +01:00
background-color: var(--bg-color);
color: var(--font-color);
2022-03-30 17:21:26 +02:00
}
h1 {
2023-03-11 11:30:38 +01:00
color: var(--secondary-color);
2022-03-30 17:21:26 +02:00
}
a {
2023-03-11 11:30:38 +01:00
color: var(--link-color);
2022-03-30 17:21:26 +02:00
}
2022-04-02 11:21:09 +02:00
2022-03-31 20:03:38 +02:00
.moneroversary-table,
2022-04-02 11:21:09 +02:00
.price-table {
2023-03-11 11:30:38 +01:00
color: var(--table-color);
2022-03-31 20:03:38 +02:00
}
2022-04-01 20:53:24 +02:00
2022-04-02 11:21:09 +02:00
#weekly .revuo-classes a.wk,
#periodical .revuo-classes a.pd,
#wrap.periodical .revuo-classes a.pd:active,
#wrap.periodical .revuo-classes a.pd:focus {
2023-03-11 11:30:38 +01:00
background-color: var(--head-nav-bg-color);
color: var(--head-nav-text-color);
2022-04-01 20:53:24 +02:00
}
2022-04-02 15:10:04 +02:00
time.by-line,
p.by-line-post {
2023-03-11 11:30:38 +01:00
color: var(--table-color);
2022-04-02 15:10:04 +02:00
}
2022-04-02 19:23:12 +02:00
2023-03-11 10:42:32 +01:00
#nav-menu {
2023-03-11 11:30:38 +01:00
background-color: var(--head-nav-bg-color);
2023-03-11 10:42:32 +01:00
}
2022-04-02 19:23:12 +02:00
#menu,
#menu::after,
2022-04-02 21:11:46 +02:00
#menu::before {
2023-03-11 11:30:38 +01:00
background-color: var(--menu-color);
2022-04-02 20:35:49 +02:00
}
2023-03-11 10:42:32 +01:00
#nav {
2023-03-11 11:30:38 +01:00
background-color: var(--nav-bg-color);
2023-03-11 10:42:32 +01:00
}
2023-03-11 11:30:38 +01:00
#nav a,
#nav-left a {
color: var(--nav-text-color);
2023-03-11 10:42:32 +01:00
}
2023-03-11 11:30:38 +01:00
#nav a:hover,
#nav-left a:hover {
background-color: var(--nav-bg-hover-color);
color: var(--nav-bg-color);
2023-03-11 10:42:32 +01:00
}
#nav-list::after {
2023-03-11 11:30:38 +01:00
background-color: var(--nav-bg-hover-color);
2023-03-11 10:42:32 +01:00
}
#menu.btn-close::before,
#menu.btn-close::after {
2023-03-11 11:30:38 +01:00
background-color: var(--nav-bg-hover-color);
2023-03-11 10:42:32 +01:00
}
2023-03-11 11:22:35 +01:00
.page-item {
2023-03-11 11:30:38 +01:00
background-color: var(--license-color);
color: var(--footer-bg-color);
2023-03-11 11:22:35 +01:00
}
.pagination a:hover {
2023-03-11 11:30:38 +01:00
background-color: var(--nav-bg-color);
2023-03-11 11:22:35 +01:00
}
2023-03-11 10:52:06 +01:00
.footer {
2023-03-11 11:30:38 +01:00
background-color: var(--footer-bg-color);
color: var(--nav-text-color);
2023-03-11 10:52:06 +01:00
}
2022-04-11 17:09:33 +02:00
#header .action-container {
2022-04-12 15:59:37 +02:00
&--left {
left: 25px;
top: 35px;
}
&--right {
right: 80px;
top: 35px;
}
2022-04-11 17:09:33 +02:00
align-items: center;
display: flex;
flex-direction: row;
gap: 12px;
height: 36px;
position: absolute;
2022-04-02 20:35:49 +02:00
}
2022-04-02 22:40:29 +02:00
2022-04-12 16:10:50 +02:00
#header {
2023-03-11 11:30:38 +01:00
a.rss,
a.donate {
2022-04-12 16:10:50 +02:00
display: block;
padding-bottom: 0;
}
2022-05-17 20:51:18 +02:00
}