revuo-weekly/css/main.scss

194 lines
3.6 KiB
SCSS
Raw Normal View History

---
# Front matter comment to ensure Jekyll properly reads file.
---
//Import
@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss";
2022-03-30 15:21:26 +00:00
2022-04-02 09:34:14 +00:00
// Default Style (Dark)
2022-03-30 15:21:26 +00:00
:root {
2024-01-21 21:19:22 +00: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 15:21:26 +00:00
}
.nojs-toggle {
display: none;
}
// BEGIN theme switcher
#main-theme-switcher {
left: 25px;
top: 35px;
z-index: 999;
display: block !important;
position: absolute !important;
transition: all .3s ease;
}
2024-01-21 21:19:22 +00:00
#theme-switcher:checked~* {
--primary-color: #666666;
--secondary-color: #555555;
--font-color: #555555;
--link-color: #444444;
--bg-color: #f0f0f0;
--heading-color: #666666;
--block-bg-color: #d7d7d7;
--block-bg-color-secondary: #c0c0c0;
--block-bg-color-heading: #a5a5a5;
2024-01-21 21:19:22 +00:00
--table-color: #000000;
--head-nav-bg-color: transparent;
--head-nav-text-color: #d56f2a;
--menu-color: #202225;
--license-color: #666666;
2022-03-30 15:21:26 +00:00
}
2024-01-21 21:19:22 +00:00
#theme-switcher:checked~.switch .slider {
background-color: #d56f2a;
}
2024-01-21 21:19:22 +00:00
#theme-switcher:checked~.switch .slider::before {
-webkit-transform: translateX(26px);
-moz-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
@media (max-width: 480px) {
#main-theme-switcher {
top: 19px;
right: 10px;
}
}
2024-01-21 21:19:22 +00:00
// END theme switcher
// BEGIN menu toggle
2024-01-21 21:19:22 +00:00
#menu-toggle:checked~#nav {
-webkit-transform: translateX(-14rem);
-moz-transform: translateX(-14rem);
-ms-transform: translateX(-14rem);
transform: translateX(-14rem);
width: 100%;
}
2024-01-21 21:19:22 +00:00
#menu-toggle:checked~.menu-toggle #menu {
background: none;
transition: all 0.1s ease-in;
}
2024-01-21 21:19:22 +00:00
#menu-toggle:checked~.menu-toggle #menu::before {
top: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #0F0F0F;
}
2024-01-21 21:19:22 +00:00
#menu-toggle:checked~.menu-toggle #menu::after {
top: -4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #0F0F0F;
}
@media (min-width: 940px) {
2024-01-21 21:19:22 +00:00
#menu-toggle:checked~#nav {
width: 30%;
}
/* Sets burger menu for small screens */
#header {
.action-container {
display: flex !important;
}
}
#nav-list {
.nav-actions-flex {
display: none !important;
}
}
2022-03-30 15:21:26 +00:00
}
2024-01-21 21:19:22 +00:00
// END menu toggle
2022-03-30 15:21:26 +00:00
#wrap {
background-color: var(--bg-color);
color: var(--font-color);
2022-03-30 15:21:26 +00:00
}
h1 {
2024-01-21 21:19:22 +00:00
color: var(--secondary-color);
2022-03-30 15:21:26 +00:00
}
a {
2024-01-21 21:19:22 +00:00
color: var(--link-color);
2022-03-30 15:21:26 +00:00
}
2022-04-02 09:21:09 +00:00
2022-03-31 18:03:38 +00:00
.moneroversary-table,
2022-04-02 09:21:09 +00:00
.price-table {
2024-01-21 21:19:22 +00:00
color: var(--table-color);
2022-03-31 18:03:38 +00:00
}
2022-04-01 18:53:24 +00:00
2022-04-02 09:21:09 +00: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 {
2024-01-21 21:19:22 +00:00
background-color: var(--head-nav-bg-color);
color: var(--head-nav-text-color);
2022-04-01 18:53:24 +00:00
}
2022-04-02 13:10:04 +00:00
time.by-line,
p.by-line-post {
2024-01-21 21:19:22 +00:00
color: var(--table-color);
2022-04-02 13:10:04 +00:00
}
2022-04-02 17:23:12 +00:00
#menu,
#menu::after,
2022-04-02 19:11:46 +00:00
#menu::before {
2024-01-21 21:19:22 +00:00
background-color: var(--menu-color);
2022-04-02 18:35:49 +00:00
}
2022-04-11 15:09:33 +00:00
#header .action-container {
2022-04-12 13:59:37 +00:00
&--left {
left: 25px;
top: 35px;
}
&--right {
right: 80px;
top: 35px;
}
2022-04-11 15:09:33 +00:00
align-items: center;
display: none;
2022-04-11 15:09:33 +00:00
flex-direction: row;
gap: 12px;
height: 36px;
position: absolute;
2022-04-02 18:35:49 +00:00
}
2022-04-02 20:40:29 +00:00
2022-04-12 14:10:50 +00:00
#header {
2024-01-21 21:19:22 +00:00
a.rss,
a.donate {
2022-04-12 14:10:50 +00:00
display: block;
padding-bottom: 0;
}
}