remove git modules
This commit is contained in:
FlintyLemming
267
themes/hugo-theme-stack/assets/scss/partials/article.scss
Normal file
267
themes/hugo-theme-stack/assets/scss/partials/article.scss
Normal file
@@ -0,0 +1,267 @@
|
||||
/* Default article style */
|
||||
.article-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--section-separation);
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--card-background);
|
||||
box-shadow: var(--shadow-l1);
|
||||
border-radius: var(--card-border-radius);
|
||||
overflow: hidden;
|
||||
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-l2);
|
||||
}
|
||||
|
||||
.article-image {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
|
||||
@include respond(md) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@include respond(xl) {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through length($defaultTagBackgrounds) {
|
||||
&:nth-child(#{length($defaultTagBackgrounds)}n + #{$i}) {
|
||||
.article-category a {
|
||||
background: nth($defaultTagBackgrounds, $i);
|
||||
color: nth($defaultTagColors, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: var(--card-padding);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--card-text-color-main);
|
||||
font-size: 2.2rem;
|
||||
|
||||
@include respond(xl) {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--card-text-color-main);
|
||||
|
||||
&:hover {
|
||||
color: var(--card-text-color-main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-subtitle {
|
||||
font-weight: normal;
|
||||
color: var(--card-text-color-secondary);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
@include respond(xl) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.article-title-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.article-time,
|
||||
.article-translations {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--card-text-color-tertiary);
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 1.33;
|
||||
}
|
||||
|
||||
time,
|
||||
a {
|
||||
font-size: 1.4rem;
|
||||
color: var(--card-text-color-tertiary);
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-category,
|
||||
.article-tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
a {
|
||||
color: var(--accent-color-text);
|
||||
background-color: var(--accent-color);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--tag-border-radius);
|
||||
display: inline-block;
|
||||
font-size: 1.4rem;
|
||||
transition: background-color 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color-text);
|
||||
background-color: var(--accent-color-darker);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Compact style article list */
|
||||
.article-list--compact {
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
background-color: var(--card-background);
|
||||
--image-size: 50px;
|
||||
|
||||
@include respond(md) {
|
||||
--image-size: 60px;
|
||||
}
|
||||
|
||||
article {
|
||||
& > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--small-card-padding);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1.5px solid var(--card-separator-color);
|
||||
}
|
||||
|
||||
.article-details {
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
min-height: var(--image-size);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
|
||||
@include respond(md) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.article-image {
|
||||
img {
|
||||
width: var(--image-size);
|
||||
height: var(--image-size);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.article-time {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.article-preview {
|
||||
font-size: 1.4rem;
|
||||
color: var(--card-text-color-tertiary);
|
||||
margin-top: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tile style article list */
|
||||
.article-list--tile {
|
||||
article {
|
||||
border-radius: var(--card-border-radius);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 350px;
|
||||
width: 250px;
|
||||
box-shadow: var(--shadow-l1);
|
||||
transition: box-shadow 0.3s ease;
|
||||
background-color: var(--card-background);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-l2);
|
||||
}
|
||||
|
||||
&.has-image {
|
||||
.article-details {
|
||||
background-color: rgba(#000, 0.25);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.article-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.article-details {
|
||||
border-radius: var(--card-border-radius);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
z-index: 2;
|
||||
padding: 15px;
|
||||
|
||||
@include respond(sm) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
color: var(--card-text-color-main);
|
||||
|
||||
@include respond(sm) {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
themes/hugo-theme-stack/assets/scss/partials/base.scss
Normal file
38
themes/hugo-theme-stack/assets/scss/partials/base.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--body-background);
|
||||
margin: 0;
|
||||
font-family: var(--base-font-family);
|
||||
font-size: 1.6rem;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* scrollbar styles for Firefox */
|
||||
* {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--scrollbar-thumb) transparent;
|
||||
}
|
||||
/**/
|
||||
|
||||
/* scrollbar styles for Chromium */
|
||||
::-webkit-scrollbar {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
/**/
|
||||
@@ -0,0 +1,394 @@
|
||||
.disqus-container {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
|
||||
#dsqjs * {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
#dsqjs a {
|
||||
text-decoration: none;
|
||||
color: #076dd0
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-hide {
|
||||
display: none!important
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .5
|
||||
}
|
||||
|
||||
#dsqjs #dsqjs-msg {
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
#dsqjs #dsqjs-msg .dsqjs-msg-btn {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-bullet {
|
||||
line-height: 1.4;
|
||||
margin: 0 2px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-bullet:after {
|
||||
color: #c2c6cc;
|
||||
content: "·";
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-clearfix:after,#dsqjs .dsqjs-clearfix:before {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
clear: both
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-nav {
|
||||
position: relative;
|
||||
margin: 0 0 20px;
|
||||
border-bottom: 2px solid #e7e9ee
|
||||
}
|
||||
|
||||
#dsqjs ol,#dsqjs ul {
|
||||
list-style: none;
|
||||
list-style-type: none
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-no-comment {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
color: #2a2e2e;
|
||||
margin-bottom: 6px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-nav-tab {
|
||||
float: left;
|
||||
text-transform: capitalize;
|
||||
font-size: 15px;
|
||||
padding: 12px 8px;
|
||||
color: #656c7a;
|
||||
display: block;
|
||||
margin: 0 15px 0 0;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
transition: all .2s ease-in-out
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-nav-tab:last-child {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-tab-active {
|
||||
color: #2a2e2e
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-tab-active>span:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 2px;
|
||||
background-color: #076dd0!important;
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
right: 0
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list .dsqjs-post-item {
|
||||
position: relative;
|
||||
margin-bottom: 16px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list .dsqjs-post-avatar {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
background: #dbdfe4;
|
||||
padding: 0;
|
||||
display: block;
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list .dsqjs-post-avatar img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: block;
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list .dsqjs-post-header {
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
margin-bottom: 3px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list .dsqjs-post-header .dsqjs-post-author {
|
||||
color: #656c7a;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list .dsqjs-post-header .dsqjs-admin-badge {
|
||||
color: #fff;
|
||||
background: #687a86;
|
||||
padding: 1px 3px;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
left: 1px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list .dsqjs-post-header .dsqjs-meta {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #656c7a
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-body {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
color: #2a2e2e
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-body code {
|
||||
padding: .2em .4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background: #f5f5f5;
|
||||
color: inherit;
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-body pre {
|
||||
padding: .5em;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
border-radius: 3px;
|
||||
background: #f5f5f5;
|
||||
margin: .5em 0
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-body blockquote {
|
||||
padding: 0 .8em;
|
||||
margin: .5em 0;
|
||||
color: #6a737d;
|
||||
border-left: .25em solid #dfe2e5
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-body p:last-child {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list.dsqjs-children>li {
|
||||
margin-left: 30px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list.dsqjs-children .dsqjs-post-avatar img {
|
||||
width: 38px;
|
||||
height: 38px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-load-more {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 11px 14px;
|
||||
margin: 0 0 24px;
|
||||
background: #687a86;
|
||||
color: #fff;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-load-more:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
#dsqjs footer {
|
||||
text-align: right;
|
||||
line-height: 1.5;
|
||||
padding-top: 10px;
|
||||
padding-right: 10px;
|
||||
border-top: 2px solid #e7e9ee;
|
||||
margin-top: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #555
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-disqus-logo {
|
||||
background-image: url(https://c.disquscdn.com/next/embed/assets/img/sprite.654110a9206fd22f08cca0798e34a65e.png);
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
background-size: 86px 40.5px;
|
||||
height: 16.5px;
|
||||
width: 86px;
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-order {
|
||||
display: flex;
|
||||
float: right;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 12px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-order-radio {
|
||||
display: none
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
|
||||
color: #fff;
|
||||
background-color: #888
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-order-label {
|
||||
display: block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-right: 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
padding: 0 5px;
|
||||
background-color: #dcdcdc;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#dsqjs p.dsqjs-has-more {
|
||||
margin-bottom: 24px;
|
||||
margin-left: 48px;
|
||||
font-size: 13px;
|
||||
line-height: 15px
|
||||
}
|
||||
|
||||
#dsqjs p.dsqjs-has-more a.dsqjs-has-more-btn {
|
||||
color: #656c7a;
|
||||
text-decoration: underline;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#dsqjs .dsqjs-post-list.dsqjs-children>li {
|
||||
margin-left:48px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list .dsqjs-post-avatar {
|
||||
margin-right: 12px
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-list .dsqjs-post-item {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#dsqjs .dsqjs-post-list.dsqjs-children>li {
|
||||
margin-left:60px
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-scheme="light"] {
|
||||
#dsqjs .dsqjs-disqus-logo {
|
||||
background-position: 0 -7px;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-scheme="dark"] {
|
||||
#dsqjs {
|
||||
--t-s: rgba(255,255,255,0.9);
|
||||
--alt: #3e4b5e;
|
||||
--link-hover: #47a2e0;
|
||||
--hover-bg: #3e4b5e;
|
||||
--tag: #3e4b5e;
|
||||
--border: #435266;
|
||||
--pre: #3c495b;
|
||||
--c-bg: #2f3947;
|
||||
--code: #c3c7cb;
|
||||
--kbd: #4e5f77;
|
||||
--hl: #abb2bf;
|
||||
--hlc: #808895;
|
||||
--hlk: #c678dd;
|
||||
--hln: #e06c75;
|
||||
--hll: #56b6c2;
|
||||
--hls: #98c379;
|
||||
--hlt: #e6c07b;
|
||||
--hlv: #d19a66;
|
||||
--bg: #181c27;
|
||||
--main: #252d38;
|
||||
--t: rgba(255,255,255,0.86);
|
||||
--t-l: rgba(255,255,255,0.66);
|
||||
--logo: #fff;
|
||||
--link: #38a3fd;
|
||||
--title: rgba(255,255,255,0.92);
|
||||
--fab: #364151;
|
||||
--shadow: none;
|
||||
}
|
||||
|
||||
#disqus_thread {
|
||||
color: var(--body-text-color)
|
||||
}
|
||||
|
||||
#dsqjs #dsqjs-msg {
|
||||
color: var(--t)
|
||||
}
|
||||
|
||||
#dsqjs a {
|
||||
color:var(--link)
|
||||
}
|
||||
|
||||
#dsqjs a:focus,#dsqjs a:hover {
|
||||
color: var(--link-hover)
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-disqus-logo {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-nav,#dsqjs footer {
|
||||
border-color: var(--hlc)
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-load-more,#dsqjs .dsqjs-load-more:hover,#dsqjs .dsqjs-nav-tab,#dsqjs .dsqjs-no-comment,#dsqjs .dsqjs-post-content {
|
||||
color: var(--t)
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-order-label {
|
||||
background-color: var(--hlc)
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
|
||||
background-color: var(--kbd)
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-tab-active>span:after {
|
||||
background-color: #2e9fff
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-footer,#dsqjs .dsqjs-meta {
|
||||
color: var(--t-l)
|
||||
}
|
||||
|
||||
#dsqjs .dsqjs-post-body blockquote {
|
||||
border-color: var(--border)
|
||||
}
|
||||
}
|
||||
30
themes/hugo-theme-stack/assets/scss/partials/footer.scss
Normal file
30
themes/hugo-theme-stack/assets/scss/partials/footer.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
footer.site-footer {
|
||||
padding: 20px 0 var(--section-separation) 0;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.75;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 50px;
|
||||
background: var(--body-text-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.powerby {
|
||||
color: var(--body-text-color);
|
||||
font-weight: normal;
|
||||
font-size: 1.2rem;
|
||||
|
||||
a {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
384
themes/hugo-theme-stack/assets/scss/partials/highlight/dark.scss
Normal file
384
themes/hugo-theme-stack/assets/scss/partials/highlight/dark.scss
Normal file
@@ -0,0 +1,384 @@
|
||||
/*
|
||||
* Style: monokai
|
||||
* https://xyproto.github.io/splash/docs/monokai.html
|
||||
*/
|
||||
|
||||
/* Background */
|
||||
.chroma {
|
||||
color: #f8f8f2;
|
||||
background-color: #272822
|
||||
}
|
||||
|
||||
/* Other */
|
||||
.chroma .x {}
|
||||
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
color: #bb0064;
|
||||
}
|
||||
|
||||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: auto;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #ffffcc
|
||||
}
|
||||
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f
|
||||
}
|
||||
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f
|
||||
}
|
||||
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #66d9ef
|
||||
}
|
||||
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #66d9ef
|
||||
}
|
||||
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #66d9ef
|
||||
}
|
||||
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #f92672
|
||||
}
|
||||
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #66d9ef
|
||||
}
|
||||
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #66d9ef
|
||||
}
|
||||
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #66d9ef
|
||||
}
|
||||
|
||||
/* Name */
|
||||
.chroma .n {}
|
||||
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #a6e22e
|
||||
}
|
||||
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {}
|
||||
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {}
|
||||
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #a6e22e
|
||||
}
|
||||
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: #66d9ef
|
||||
}
|
||||
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: #a6e22e
|
||||
}
|
||||
|
||||
/* NameEntity */
|
||||
.chroma .ni {}
|
||||
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: #a6e22e
|
||||
}
|
||||
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #a6e22e
|
||||
}
|
||||
|
||||
/* NameFunctionMagic */
|
||||
.chroma .fm {}
|
||||
|
||||
/* NameLabel */
|
||||
.chroma .nl {}
|
||||
|
||||
/* NameNamespace */
|
||||
.chroma .nn {}
|
||||
|
||||
/* NameOther */
|
||||
.chroma .nx {
|
||||
color: #a6e22e
|
||||
}
|
||||
|
||||
/* NameProperty */
|
||||
.chroma .py {}
|
||||
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #f92672
|
||||
}
|
||||
|
||||
/* NameVariable */
|
||||
.chroma .nv {}
|
||||
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {}
|
||||
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {}
|
||||
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {}
|
||||
|
||||
/* NameVariableMagic */
|
||||
.chroma .vm {}
|
||||
|
||||
/* Literal */
|
||||
.chroma .l {
|
||||
color: #ae81ff
|
||||
}
|
||||
|
||||
/* LiteralDate */
|
||||
.chroma .ld {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #ae81ff
|
||||
}
|
||||
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #e6db74
|
||||
}
|
||||
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #ae81ff
|
||||
}
|
||||
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #ae81ff
|
||||
}
|
||||
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #ae81ff
|
||||
}
|
||||
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #ae81ff
|
||||
}
|
||||
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #ae81ff
|
||||
}
|
||||
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #ae81ff
|
||||
}
|
||||
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #ae81ff
|
||||
}
|
||||
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #f92672
|
||||
}
|
||||
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #f92672
|
||||
}
|
||||
|
||||
/* Punctuation */
|
||||
.chroma .p {}
|
||||
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #75715e
|
||||
}
|
||||
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #75715e
|
||||
}
|
||||
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #75715e
|
||||
}
|
||||
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #75715e
|
||||
}
|
||||
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #75715e
|
||||
}
|
||||
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #75715e
|
||||
}
|
||||
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #75715e
|
||||
}
|
||||
|
||||
/* Generic */
|
||||
.chroma .g {}
|
||||
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #f92672
|
||||
}
|
||||
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
/* GenericError */
|
||||
.chroma .gr {}
|
||||
|
||||
/* GenericHeading */
|
||||
.chroma .gh {}
|
||||
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: #a6e22e
|
||||
}
|
||||
|
||||
/* GenericOutput */
|
||||
.chroma .go {}
|
||||
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {}
|
||||
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: #75715e
|
||||
}
|
||||
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {}
|
||||
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {}
|
||||
|
||||
/* TextWhitespace */
|
||||
.chroma .w {}
|
||||
@@ -0,0 +1,409 @@
|
||||
/*
|
||||
* Style: monokailight
|
||||
* https://xyproto.github.io/splash/docs/monokailight.html
|
||||
*/
|
||||
|
||||
/* Background */
|
||||
.chroma {
|
||||
color: #272822;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
color: #960050;
|
||||
}
|
||||
|
||||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: auto;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #ffffcc;
|
||||
}
|
||||
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #00a8c8;
|
||||
}
|
||||
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #00a8c8;
|
||||
}
|
||||
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #00a8c8;
|
||||
}
|
||||
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #00a8c8;
|
||||
}
|
||||
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #00a8c8;
|
||||
}
|
||||
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #00a8c8;
|
||||
}
|
||||
|
||||
/* Name */
|
||||
.chroma .n {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #75af00;
|
||||
}
|
||||
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #75af00;
|
||||
}
|
||||
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: #00a8c8;
|
||||
}
|
||||
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: #75af00;
|
||||
}
|
||||
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: #75af00;
|
||||
}
|
||||
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #75af00;
|
||||
}
|
||||
|
||||
/* NameFunctionMagic */
|
||||
.chroma .fm {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameOther */
|
||||
.chroma .nx {
|
||||
color: #75af00;
|
||||
}
|
||||
|
||||
/* NameProperty */
|
||||
.chroma .py {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* NameVariableMagic */
|
||||
.chroma .vm {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* Literal */
|
||||
.chroma .l {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
/* LiteralDate */
|
||||
.chroma .ld {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #8045ff;
|
||||
}
|
||||
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #d88200;
|
||||
}
|
||||
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
/* Punctuation */
|
||||
.chroma .p {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
/* Generic */
|
||||
.chroma .g {
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #f92672;
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: #7ca727;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: #75715e;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.not-found-card {
|
||||
background-color: var(--card-background);
|
||||
box-shadow: var(--shadow-l1);
|
||||
border-radius: var(--card-border-radius);
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
415
themes/hugo-theme-stack/assets/scss/partials/layout/article.scss
Normal file
415
themes/hugo-theme-stack/assets/scss/partials/layout/article.scss
Normal file
@@ -0,0 +1,415 @@
|
||||
.article-page {
|
||||
&.hide-sidebar-sm .left-sidebar {
|
||||
display: none;
|
||||
|
||||
@include respond(md) {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.main-article {
|
||||
background: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
overflow: hidden;
|
||||
|
||||
.article-header {
|
||||
.article-image {
|
||||
img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.article-details {
|
||||
padding: var(--card-padding);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.article-content {
|
||||
margin: var(--card-padding) 0;
|
||||
color: var(--card-text-color-main);
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.article-footer {
|
||||
margin: var(--card-padding);
|
||||
margin-top: 0;
|
||||
|
||||
section:not(:first-child) {
|
||||
margin-top: var(--card-padding);
|
||||
}
|
||||
|
||||
section {
|
||||
color: var(--card-text-color-tertiary);
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
gap: 15px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 1.33;
|
||||
}
|
||||
}
|
||||
|
||||
.article-tags {
|
||||
flex-wrap: wrap;
|
||||
text-transform: unset;
|
||||
}
|
||||
|
||||
.article-copyright,
|
||||
.article-lastmod {
|
||||
a {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
|
||||
a.link {
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget--toc {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--card-text-color-main);
|
||||
overflow: hidden;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--card-separator-color);
|
||||
}
|
||||
|
||||
#TableOfContents {
|
||||
overflow-x: auto;
|
||||
max-height: 75vh;
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: item;
|
||||
|
||||
li a:first-of-type::before {
|
||||
counter-increment: item;
|
||||
content: counters(item, ".") ". ";
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
& > ul {
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 15px 0 15px 20px;
|
||||
padding: 5px;
|
||||
|
||||
& > ol,
|
||||
& > ul {
|
||||
margin-top: 10px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: -5px;
|
||||
|
||||
& > li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
li.active-class > a {
|
||||
border-left: var(--heading-border-size) solid var(--accent-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul li.active-class > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@function repeat($str, $n) {
|
||||
$result: "";
|
||||
@for $_ from 0 to $n {
|
||||
$result: $result + $str;
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// Support up to 6 levels of indentation for lists in ToCs
|
||||
@for $i from 0 to 5 {
|
||||
& > ul #{repeat("> li > ul", $i)} > li.active-class > a {
|
||||
$n: 25 + $i * 35;
|
||||
margin-left: calc(-#{$n}px - 1em);
|
||||
padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
|
||||
}
|
||||
|
||||
& > ol #{repeat("> li > ol", $i)} > li.active-class > a {
|
||||
$n: 9 + $i * 35;
|
||||
margin-left: calc(-#{$n}px - 1em);
|
||||
padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.related-content {
|
||||
overflow-x: auto;
|
||||
padding-bottom: 15px;
|
||||
|
||||
& > .flex {
|
||||
float: left;
|
||||
}
|
||||
|
||||
article {
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
|
||||
.article-title {
|
||||
font-size: 1.8rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.has-image {
|
||||
.article-details {
|
||||
padding: 20px;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-content {
|
||||
font-family: var(--article-font-family);
|
||||
font-size: var(--article-font-size);
|
||||
padding: 0 var(--card-padding);
|
||||
line-height: var(--article-line-height);
|
||||
|
||||
& > p {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-inline-start: calc((var(--card-padding)) * -1);
|
||||
padding-inline-start: calc(var(--card-padding) - var(--heading-border-size));
|
||||
border-inline-start: var(--heading-border-size) solid var(--accent-color);
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
|
||||
figcaption {
|
||||
font-size: 1.4rem;
|
||||
color: var(--card-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
margin: 1.5em 0;
|
||||
border-inline-start: var(--blockquote-border-size) solid var(--card-separator-color);
|
||||
padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
|
||||
background-color: var(--blockquote-background-color);
|
||||
|
||||
.cite {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 0.75em;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100px;
|
||||
margin: 40px auto;
|
||||
background: var(--card-text-color-tertiary);
|
||||
height: 2px;
|
||||
border: 0;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--code-text-color);
|
||||
background-color: var(--code-background-color);
|
||||
padding: 2px 4px;
|
||||
border-radius: var(--tag-border-radius);
|
||||
font-family: var(--code-font-family);
|
||||
}
|
||||
|
||||
.gallery {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 1.5em 0;
|
||||
gap: 10px;
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
background-color: var(--pre-background-color);
|
||||
color: var(--pre-text-color);
|
||||
font-family: var(--code-font-family);
|
||||
line-height: 1.428571429;
|
||||
word-break: break-all;
|
||||
padding: var(--card-padding);
|
||||
// keep Codeblocks LTR
|
||||
[dir="rtl"] & {
|
||||
direction: ltr;
|
||||
}
|
||||
code {
|
||||
color: unset;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: var(--pre-background-color);
|
||||
padding: var(--card-padding);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.copyCodeButton {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// keep Codeblocks LTR
|
||||
[dir="rtl"] & {
|
||||
direction: ltr;
|
||||
}
|
||||
pre {
|
||||
margin: initial;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.copyCodeButton {
|
||||
position: absolute;
|
||||
top: calc(var(--card-padding));
|
||||
right: calc(var(--card-padding));
|
||||
background: var(--card-background);
|
||||
border: none;
|
||||
box-shadow: var(--shadow-l2);
|
||||
border-radius: var(--tag-border-radius);
|
||||
padding: 8px 16px;
|
||||
color: var(--card-text-color-main);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
padding: 0 var(--card-padding);
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1.5em;
|
||||
font-size: 0.96em;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 4px 8px 4px 10px;
|
||||
border: 1px solid var(--table-border-color);
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: var(--tr-even-background-color);
|
||||
}
|
||||
|
||||
.twitter-tweet {
|
||||
color: var(--card-text-color-main);
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
overflow: hidden;
|
||||
|
||||
& > iframe,
|
||||
& > video {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gitlab-embed-snippets {
|
||||
margin: 0 !important;
|
||||
|
||||
.file-holder.snippet-file-content {
|
||||
margin-block-end: 0 !important;
|
||||
margin-block-start: 0 !important;
|
||||
margin-left: calc((var(--card-padding)) * -1) !important;
|
||||
margin-right: calc((var(--card-padding)) * -1) !important;
|
||||
padding: 0 var(--card-padding) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/// Negative margins
|
||||
blockquote,
|
||||
figure,
|
||||
.highlight,
|
||||
pre,
|
||||
.gallery,
|
||||
.video-wrapper,
|
||||
.table-wrapper,
|
||||
.s_video_simple {
|
||||
margin-left: calc((var(--card-padding)) * -1);
|
||||
margin-right: calc((var(--card-padding)) * -1);
|
||||
width: calc(100% + var(--card-padding) * 2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
.section-card {
|
||||
border-radius: var(--card-border-radius);
|
||||
background-color: var(--card-background);
|
||||
padding: var(--small-card-padding);
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
--separation: 15px;
|
||||
|
||||
.section-term {
|
||||
font-size: 2.2rem;
|
||||
margin: 0;
|
||||
color: var(--card-text-color-main);
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-weight: normal;
|
||||
color: var(--card-text-color-secondary);
|
||||
font-size: 1.6rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-details {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-image {
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-count {
|
||||
color: var(--card-text-color-tertiary);
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.subsection-list {
|
||||
overflow-x: auto;
|
||||
|
||||
.article-list--tile {
|
||||
display: flex;
|
||||
padding-bottom: 15px;
|
||||
|
||||
article {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
margin-right: 20px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.article-title {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.article-details {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
.search-form {
|
||||
position: relative;
|
||||
--button-size: 80px;
|
||||
|
||||
&.widget {
|
||||
--button-size: 60px;
|
||||
|
||||
label {
|
||||
font-size: 1.3rem;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1.5rem;
|
||||
padding: 30px 20px 15px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
inset-inline-start: 20px;
|
||||
font-size: 1.4rem;
|
||||
color: var(--card-text-color-tertiary);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 40px 20px 20px;
|
||||
border-radius: var(--card-border-radius);
|
||||
background-color: var(--card-background);
|
||||
box-shadow: var(--shadow-l1);
|
||||
color: var(--card-text-color-main);
|
||||
width: 100%;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
font-size: 1.8rem;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: var(--shadow-l2);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: var(--button-size);
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
padding: 0 10px;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
||||
svg {
|
||||
stroke-width: 2;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--card-text-color-secondary);
|
||||
stroke-width: 1.33;
|
||||
transition: all 0.3s ease;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
227
themes/hugo-theme-stack/assets/scss/partials/menu.scss
Normal file
227
themes/hugo-theme-stack/assets/scss/partials/menu.scss
Normal file
@@ -0,0 +1,227 @@
|
||||
/*!
|
||||
* Hamburgers
|
||||
* @description Tasty CSS-animated hamburgers
|
||||
* @author Jonathan Suh @jonsuh
|
||||
* @site https://jonsuh.com/hamburgers
|
||||
* @link https://github.com/jonsuh/hamburgers
|
||||
*/
|
||||
|
||||
.hamburger {
|
||||
padding-top: 10px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition-property: opacity, filter;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: linear;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
.hamburger:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.hamburger.is-active:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.hamburger.is-active .hamburger-inner,
|
||||
.hamburger.is-active .hamburger-inner::before,
|
||||
.hamburger.is-active .hamburger-inner::after {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.hamburger-box {
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
display: block;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background-color: var(--card-text-color-main);
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.hamburger-inner::before {
|
||||
top: -10px;
|
||||
}
|
||||
.hamburger-inner::after {
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
.hamburger--spin .hamburger-inner {
|
||||
transition-duration: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--spin .hamburger-inner::before {
|
||||
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
|
||||
}
|
||||
.hamburger--spin .hamburger-inner::after {
|
||||
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--spin.is-active .hamburger-inner {
|
||||
transform: rotate(225deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--spin.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
|
||||
}
|
||||
.hamburger--spin.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
#toggle-menu {
|
||||
background: none;
|
||||
border: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@include respond(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
outline: none;
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu style */
|
||||
.menu {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
font-size: 1.4rem;
|
||||
background-color: var(--card-background);
|
||||
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: none;
|
||||
margin: 0 calc(var(--container-padding) * -1);
|
||||
|
||||
padding: 30px 30px;
|
||||
@include respond(xl) {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
&,
|
||||
.menu-bottom-section {
|
||||
gap: 30px;
|
||||
@include respond(xl) {
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@include respond(md) {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
|
||||
@include respond(md) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke-width: 1.33;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--body-text-color);
|
||||
gap: var(--menu-icon-separation);
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.current {
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bottom-section {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.social-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: var(--body-text-color);
|
||||
stroke-width: 1.33;
|
||||
}
|
||||
}
|
||||
21
themes/hugo-theme-stack/assets/scss/partials/pagination.scss
Normal file
21
themes/hugo-theme-stack/assets/scss/partials/pagination.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
.pagination {
|
||||
display: flex;
|
||||
background-color: var(--card-background);
|
||||
box-shadow: var(--shadow-l1);
|
||||
border-radius: var(--card-border-radius);
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.page-link {
|
||||
padding: 16px 32px;
|
||||
display: inline-flex;
|
||||
|
||||
&.current {
|
||||
font-weight: bold;
|
||||
background-color: var(--card-background-selected);
|
||||
color: var(--card-text-color-main);
|
||||
}
|
||||
|
||||
color: var(--card-text-color-secondary);
|
||||
}
|
||||
}
|
||||
198
themes/hugo-theme-stack/assets/scss/partials/sidebar.scss
Normal file
198
themes/hugo-theme-stack/assets/scss/partials/sidebar.scss
Normal file
@@ -0,0 +1,198 @@
|
||||
.sidebar {
|
||||
&.sticky {
|
||||
@include respond(md) {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
gap: var(--sidebar-element-separation);
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
--sidebar-avatar-size: 100px;
|
||||
--sidebar-element-separation: 20px;
|
||||
--emoji-size: 40px;
|
||||
--emoji-font-size: 20px;
|
||||
|
||||
@include respond(md) {
|
||||
width: auto;
|
||||
padding-top: var(--main-top-padding);
|
||||
padding-bottom: var(--main-top-padding);
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
@include respond(2xl) {
|
||||
--sidebar-avatar-size: 120px;
|
||||
--sidebar-element-separation: 25px;
|
||||
--emoji-size: 40px;
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.compact {
|
||||
--sidebar-avatar-size: 80px;
|
||||
--emoji-size: 30px;
|
||||
--emoji-font-size: 15px;
|
||||
|
||||
header {
|
||||
@include respond(lg) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.site-meta {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-size: 1.4rem;
|
||||
|
||||
@include respond(2xl) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-description {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
width: 100%;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: var(--widget-separation);
|
||||
|
||||
&.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@include respond(lg) {
|
||||
padding-top: var(--main-top-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar header {
|
||||
z-index: 1;
|
||||
transition: box-shadow 0.5s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sidebar-element-separation);
|
||||
|
||||
@include respond(md) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.site-avatar {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: var(--sidebar-avatar-size);
|
||||
height: var(--sidebar-avatar-size);
|
||||
flex-shrink: 0;
|
||||
|
||||
.site-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
box-shadow: var(--shadow-l1);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
position: absolute;
|
||||
width: var(--emoji-size);
|
||||
height: var(--emoji-size);
|
||||
line-height: var(--emoji-size);
|
||||
border-radius: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: var(--emoji-font-size);
|
||||
background-color: var(--card-background);
|
||||
box-shadow: var(--shadow-l2);
|
||||
}
|
||||
}
|
||||
|
||||
.site-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
color: var(--accent-color);
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
|
||||
@include respond(2xl) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-description {
|
||||
color: var(--body-text-color);
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
|
||||
@include respond(2xl) {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-scheme="dark"] {
|
||||
#dark-mode-toggle {
|
||||
color: var(--accent-color);
|
||||
font-weight: 700;
|
||||
|
||||
.icon-tabler-toggle-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-tabler-toggle-right {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#dark-mode-toggle {
|
||||
margin-top: auto;
|
||||
color: var(--body-text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
gap: var(--menu-icon-separation);
|
||||
|
||||
.icon-tabler-toggle-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#i18n-switch {
|
||||
color: var(--body-text-color);
|
||||
display: inline-flex;
|
||||
align-content: center;
|
||||
gap: var(--menu-icon-separation);
|
||||
|
||||
select {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: var(--body-text-color);
|
||||
|
||||
option {
|
||||
color: var(--card-text-color-main);
|
||||
background-color: var(--card-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
67
themes/hugo-theme-stack/assets/scss/partials/widgets.scss
Normal file
67
themes/hugo-theme-stack/assets/scss/partials/widgets.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
.widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.widget-icon {
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
stroke-width: 1.6;
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag cloud widget */
|
||||
.tagCloud {
|
||||
.tagCloud-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
a {
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--shadow-l1);
|
||||
border-radius: var(--tag-border-radius);
|
||||
padding: 8px 20px;
|
||||
color: var(--card-text-color-main);
|
||||
font-size: 1.4rem;
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-l2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Archives widget */
|
||||
.widget.archives {
|
||||
.widget-archive--list {
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
background-color: var(--card-background);
|
||||
}
|
||||
|
||||
.archives-year {
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1.5px solid var(--card-separator-color);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.4rem;
|
||||
padding: 18px 25px;
|
||||
display: flex;
|
||||
|
||||
span.year {
|
||||
flex: 1;
|
||||
color: var(--card-text-color-main);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span.count {
|
||||
color: var(--card-text-color-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user