hugo-geekblog/src/sass/_base.scss

599 lines
9.2 KiB
SCSS

:root,
:root[color-mode="light"] {
--code-max-height: auto;
@include light_mode;
}
@media (prefers-color-scheme: light) {
:root {
@include light_mode;
}
}
:root[color-mode="dark"] {
@include dark_mode;
}
@media (prefers-color-scheme: dark) {
:root {
@include dark_mode;
}
}
html {
font-size: $font-size-base;
letter-spacing: 0.33px;
scroll-behavior: smooth;
&.color-toggle-hidden {
#gblog-dark-mode {
.gblog_brightness_auto,
.gblog_brightness_dark,
.gblog_brightness_light {
display: none;
}
}
}
&.color-toggle-light {
#gblog-dark-mode {
.gblog_brightness_light {
display: inline-block;
}
.gblog_brightness_auto,
.gblog_brightness_dark {
display: none;
}
}
}
&.color-toggle-dark {
#gblog-dark-mode {
.gblog_brightness_dark {
display: inline-block;
}
.gblog_brightness_auto,
.gblog_brightness_light {
display: none;
}
}
}
&.color-toggle-auto {
#gblog-dark-mode {
.gblog_brightness_light {
display: none;
}
.gblog_brightness_dark {
display: none;
}
.gblog_brightness_auto {
display: inline-block;
}
}
}
}
html,
body {
min-width: $body-min-width;
overflow-x: hidden;
}
body {
color: var(--body-font-color);
background: var(--body-background);
font-weight: $body-font-weight;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
* {
box-sizing: inherit;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}
h4,
h5,
h6 {
font-size: 1rem !important;
}
a {
text-decoration: underline;
color: var(--link-color);
&:hover {
background: var(--link-color);
color: $gray-100;
text-decoration: none;
}
&:visited {
color: var(--link-color-visited);
&:hover {
background: var(--link-color-visited);
color: $gray-100;
}
}
}
i.gblog-icon {
font-family: "GeekblogIcons";
font-style: normal;
}
img {
vertical-align: middle;
}
#gblog-dark-mode {
cursor: pointer;
.icon {
width: 2.5rem;
height: 2.5rem;
}
}
.fake-link {
background-image: linear-gradient(var(--link-color), var(--link-color));
background-position: 0 100%;
background-size: 100% 1px;
background-repeat: no-repeat;
text-decoration: none;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
width: 100%;
max-width: $container-max-width;
margin: 0 auto;
padding: $padding-16;
}
.icon {
display: inline-block;
width: 1.3em;
height: 1.3em;
vertical-align: middle;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
position: relative;
}
.gblog-header {
background: var(--header-background);
color: var(--header-font-color);
padding: $padding-16 0;
&__col-1,
&__col-3 {
flex: 1 1 15%;
}
&__col-2 {
flex: 1 1 70%;
}
&__link,
&__link:visited {
color: inherit;
text-decoration: none;
}
&__link:hover {
background: none;
}
}
.gblog-brand {
font-size: $font-size-32;
&__subtitle {
margin-top: $padding-16;
font-size: $font-size-20;
font-weight: bolder;
}
&__img {
margin-right: $padding-16;
width: 60px;
height: 60px;
}
}
.gblog-nav {
background: $second-color;
color: $gray-100;
min-height: $padding-4;
.container {
padding-top: $padding-8;
padding-bottom: $padding-8;
}
li {
display: inline-block;
}
&__entry {
line-height: 1.3em;
color: $gray-100;
text-decoration: none;
padding: $padding-4 $padding-8;
border: $border-1 solid;
border-radius: $border-radius;
display: inline-block;
margin: $padding-4;
&:hover,
&.is-active,
&:visited:hover {
background: lighten($second-color, 10%);
}
&:visited {
color: inherit;
}
}
&__control {
display: none;
label {
&:hover {
cursor: pointer;
}
}
.icon {
margin-right: $padding-4;
}
.icon.gblog_menu {
display: inline-block;
}
.icon.gblog_clear {
display: none;
}
}
}
.gblog-page {
min-width: $body-min-width;
flex-grow: 1;
}
.gblog-post {
word-wrap: break-word;
border-top: $border-2 dashed var(--accent-color-dark);
padding: $padding-32 0;
&__title {
margin-top: 0;
a,
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
background: none;
text-decoration: underline;
color: var(--body-font-color) !important;
}
}
&:first-child {
border-top: 0;
}
&__readmore {
margin: $padding-32 0;
a:visited {
color: var(--link-color);
}
a:hover,
a:visited:hover {
background: var(--link-color);
color: $gray-100;
}
}
&__anchorwrap {
&:hover .gblog-post__anchor .icon {
color: var(--control-icons);
}
}
&__anchor {
min-width: 30px;
&--left {
position: absolute;
margin-left: -25px;
text-align: left;
}
&--right {
text-align: right;
}
.icon {
font-size: $font-size-20;
color: transparent;
}
&:hover,
&:visited:hover {
color: var(--control-icons);
background: none;
}
}
&__feature {
position: relative;
margin-bottom: $padding-32;
img {
width: 100%;
min-height: 180px;
object-fit: cover;
overflow: hidden;
border-radius: $border-radius;
}
span {
background: $gray-800;
position: absolute;
bottom: 0;
right: 0;
padding: $padding-4 $padding-8;
font-size: 0.8em;
color: $gray-100;
border-radius: $border-radius 0;
}
a {
text-decoration: none;
color: $link-color-dark;
}
a:hover {
text-decoration: underline;
background: none;
}
a:visited,
a:visited:hover {
color: $link-color-dark;
}
}
&__meta {
span .icon {
margin-left: -5px;
}
> span {
margin: $padding-4 0;
&:not(:last-child) {
margin-right: $padding-8;
}
}
.icon {
font-size: 1.2em;
}
.gblog-button {
margin: 0 $padding-2 0 0;
}
&--head {
margin-bottom: $padding-32;
}
}
&__figure {
padding: $padding-4;
margin: $padding-16 0;
background-color: var(--accent-color);
display: table;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
figcaption {
display: table-caption;
caption-side: bottom;
background-color: var(--accent-color);
padding: 0 $padding-4 $padding-4;
text-align: center;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
img {
max-width: 100%;
height: auto;
}
}
&__codecontainer {
position: relative;
&:hover > .gblog-post__codecopy {
visibility: visible;
}
}
&__codecopy {
visibility: hidden;
position: absolute;
top: 0.5rem;
right: 0.5rem;
border: $border-2 solid var(--code-copy-border-color);
border-radius: $border-radius;
background: var(--code-background);
width: 2.2rem;
height: 2.2rem;
.icon {
top: 0;
width: $font-size-20;
height: $font-size-20;
color: var(--code-copy-font-color);
}
&:hover {
cursor: pointer;
}
&--success {
border-color: var(--code-copy-success-color);
.icon {
color: var(--code-copy-success-color);
}
}
}
}
.gblog-footer {
background: $second-color;
color: $gray-100;
.fake-link {
background-image: linear-gradient(var(--footer-link-color), var(--footer-link-color));
}
&__item {
line-height: 2em;
&--row {
margin-right: $padding-16;
}
}
&__link {
color: var(--link-color-footer);
&:hover,
&:visited:hover {
background: var(--link-color-footer);
color: $body-font-color;
}
&:visited {
color: var(--link-color-footer);
}
}
}
.gblog-paging {
padding: $padding-16 0;
&__item {
flex: 1 1 0;
a:visited {
color: var(--link-color);
}
a:hover,
a:visited:hover {
background: var(--link-color);
color: $gray-100;
}
&--next {
text-align: right;
}
&--prev {
text-align: left;
}
}
}
.gblog-error {
padding: $padding-16 * 6 $padding-16;
margin: 0 auto;
max-width: 45em;
.icon {
font-size: $font-size-128;
color: var(--body-font-color);
}
&__link,
&__link:visited {
color: var(--link-color);
}
&__message {
padding-left: $padding-16 * 4;
}
&__line {
padding: $padding-8 0;
}
&__title {
font-size: $font-size-64;
}
&__code {
font-weight: bolder;
}
}
.gblog-toc {
// Classes to hide nested levels of ToC/Menu
&__level--1 ul ul,
&__level--2 ul ul ul,
&__level--3 ul ul ul ul,
&__level--4 ul ul ul ul ul,
&__level--5 ul ul ul ul ul ul,
&__level--6 ul ul ul ul ul ul ul {
display: none;
}
a:hover,
a:visited:hover {
background: var(--link-color);
color: $gray-100;
}
a,
a:visited {
color: var(--link-color);
text-decoration: none;
}
}