diff options
Diffstat (limited to 'themes/hugo-theme-stack/assets/scss/partials')
15 files changed, 2332 insertions, 0 deletions
diff --git a/themes/hugo-theme-stack/assets/scss/partials/article.scss b/themes/hugo-theme-stack/assets/scss/partials/article.scss new file mode 100644 index 0000000..6c2feb1 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/article.scss @@ -0,0 +1,278 @@ +/* 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-family: var(--article-font-family); + 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; + color: var(--card-text-color-tertiary); + gap: 15px; + + svg { + vertical-align: middle; + width: 20px; + height: 20px; + stroke-width: 1.33; + flex-shrink: 0; + } + + time, + a { + font-size: 1.4rem; + color: var(--card-text-color-tertiary); + } + + & > div { + display: inline-flex; + align-items: center; + gap: 15px; + } +} + +.article-time { + flex-wrap: wrap; +} + +.article-translations { + & > div { + flex-wrap: wrap; + } +} + +.article-category, +.article-tags { + display: flex; + gap: 10px; + flex-wrap: wrap; + + 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; + } + } + } +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/base.scss b/themes/hugo-theme-stack/assets/scss/partials/base.scss new file mode 100644 index 0000000..efb4b8f --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/base.scss @@ -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; +} +/**/
\ No newline at end of file diff --git a/themes/hugo-theme-stack/assets/scss/partials/comments/disqusjs.scss b/themes/hugo-theme-stack/assets/scss/partials/comments/disqusjs.scss new file mode 100644 index 0000000..eb270e3 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/comments/disqusjs.scss @@ -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) + } +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/footer.scss b/themes/hugo-theme-stack/assets/scss/partials/footer.scss new file mode 100644 index 0000000..ccb7394 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/footer.scss @@ -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); + } + } +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/highlight/common.scss b/themes/hugo-theme-stack/assets/scss/partials/highlight/common.scss new file mode 100644 index 0000000..c680fa4 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/highlight/common.scss @@ -0,0 +1,428 @@ +/* Background */ +.chroma { + color: $color; + background-color: $background-color; +} + +/* Other */ +.chroma .x { +} + +/* Error */ +.chroma .err { + color: $error-color; +} + +/* 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: 100%; + display: block; + + > tbody { + display: block; + width: 100%; + > tr { + display: flex; + width: 100%; + > td:last-child { + overflow-x: auto; + } + } + } +} + +/* 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; + display: block; +} + +/* LineNumbers */ +.chroma .ln { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; +} + +/* Keyword */ +.chroma .k { + color: $keyword-color; +} + +/* KeywordConstant */ +.chroma .kc { + color: $keyword-color; +} + +/* KeywordDeclaration */ +.chroma .kd { + color: $keyword-color; +} + +/* KeywordNamespace */ +.chroma .kn { + color: #f92672; +} + +/* KeywordPseudo */ +.chroma .kp { + color: $keyword-color; +} + +/* KeywordReserved */ +.chroma .kr { + color: $keyword-color; +} + +/* KeywordType */ +.chroma .kt { + color: $keyword-color; +} + +/* Name */ +.chroma .n { + color: $text-color; +} + +/* NameAttribute */ +.chroma .na { + color: $name-color; +} + +/* NameBuiltin */ +.chroma .nb { + color: $text-color; +} + +/* NameBuiltinPseudo */ +.chroma .bp { + color: $text-color; +} + +/* NameClass */ +.chroma .nc { + color: $name-color; +} + +/* NameConstant */ +.chroma .no { + color: $keyword-color; +} + +/* NameDecorator */ +.chroma .nd { + color: $name-color; +} + +/* NameEntity */ +.chroma .ni { + color: $text-color; +} + +/* NameException */ +.chroma .ne { + color: $name-color; +} + +/* NameFunction */ +.chroma .nf { + color: $name-color; +} + +/* NameFunctionMagic */ +.chroma .fm { + color: $text-color; +} + +/* NameLabel */ +.chroma .nl { + color: $text-color; +} + +/* NameNamespace */ +.chroma .nn { + color: $text-color; +} + +/* NameOther */ +.chroma .nx { + color: $name-color; +} + +/* NameProperty */ +.chroma .py { + color: $text-color; +} + +/* NameTag */ +.chroma .nt { + color: #f92672; +} + +/* NameVariable */ +.chroma .nv { + color: $text-color; +} + +/* NameVariableClass */ +.chroma .vc { + color: $text-color; +} + +/* NameVariableGlobal */ +.chroma .vg { + color: $text-color; +} + +/* NameVariableInstance */ +.chroma .vi { + color: $text-color; +} + +/* NameVariableMagic */ +.chroma .vm { + color: $text-color; +} + +/* Literal */ +.chroma .l { + color: #ae81ff; +} + +/* LiteralDate */ +.chroma .ld { + color: $literal-color; +} + +/* LiteralString */ +.chroma .s { + color: $literal-color; +} + +/* LiteralStringAffix */ +.chroma .sa { + color: $literal-color; +} + +/* LiteralStringBacktick */ +.chroma .sb { + color: $literal-color; +} + +/* LiteralStringChar */ +.chroma .sc { + color: $literal-color; +} + +/* LiteralStringDelimiter */ +.chroma .dl { + color: $literal-color; +} + +/* LiteralStringDoc */ +.chroma .sd { + color: $literal-color; +} + +/* LiteralStringDouble */ +.chroma .s2 { + color: $literal-color; +} + +/* LiteralStringEscape */ +.chroma .se { + color: #ae81ff; +} + +/* LiteralStringHeredoc */ +.chroma .sh { + color: $literal-color; +} + +/* LiteralStringInterpol */ +.chroma .si { + color: $literal-color; +} + +/* LiteralStringOther */ +.chroma .sx { + color: $literal-color; +} + +/* LiteralStringRegex */ +.chroma .sr { + color: $literal-color; +} + +/* LiteralStringSingle */ +.chroma .s1 { + color: $literal-color; +} + +/* LiteralStringSymbol */ +.chroma .ss { + color: $literal-color; +} + +/* 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: $text-color; +} + +/* 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: $name-color; +} + +/* 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 { +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/highlight/dark.scss b/themes/hugo-theme-stack/assets/scss/partials/highlight/dark.scss new file mode 100644 index 0000000..0d3f330 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/highlight/dark.scss @@ -0,0 +1,14 @@ +/* +* Style: monokai +* https://xyproto.github.io/splash/docs/monokai.html +*/ + +$color: #f8f8f2; +$background-color: #272822; +$error-color: #bb0064; +$keyword-color: #66d9ef; +$text-color: $color; +$name-color: #a6e22e; +$literal-color: #e6db74; + +@import "common.scss"; diff --git a/themes/hugo-theme-stack/assets/scss/partials/highlight/light.scss b/themes/hugo-theme-stack/assets/scss/partials/highlight/light.scss new file mode 100644 index 0000000..174b649 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/highlight/light.scss @@ -0,0 +1,14 @@ +/* +* Style: monokailight +* https://xyproto.github.io/splash/docs/monokailight.html +*/ + +$color: #272822; +$background-color: #fafafa; +$error-color: #960050; +$keyword-color: #00a8c8; +$text-color: #111111; +$name-color: #75af00; +$literal-color: #d88200; + +@import "common.scss"; diff --git a/themes/hugo-theme-stack/assets/scss/partials/layout/404.scss b/themes/hugo-theme-stack/assets/scss/partials/layout/404.scss new file mode 100644 index 0000000..d9d8752 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/layout/404.scss @@ -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); +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/layout/article.scss b/themes/hugo-theme-stack/assets/scss/partials/layout/article.scss new file mode 100644 index 0000000..10e2706 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/layout/article.scss @@ -0,0 +1,461 @@ +.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); + + .footnotes { + font-family: var(--base-font-family); + } + + 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 { + 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); + position: relative; + + a.header-anchor { + transition: opacity 0.3s ease; + opacity: 0; + position: absolute; + left: 0; + width: var(--card-padding); + text-align: center; + color: var(--accent-color); + + &:before { + content: "#"; + } + } + + &:hover, + &:focus { + a.header-anchor { + opacity: 1; + } + } + } + + 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); + } + + a, + code { + word-break: break-word; + } + + .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); + } + + /// Make long KaTeX equations scrollable in the x-axis + .katex-display > .katex { + overflow-x: auto; + overflow-y: hidden; + } + + kbd { + border: 1px solid var(--kbd-border-color); + font-weight: bold; + font-size: 0.9em; + line-height: 1; + padding: 2px 4px; + border-radius: 4px; + display: inline-block; + } +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/layout/list.scss b/themes/hugo-theme-stack/assets/scss/partials/layout/list.scss new file mode 100644 index 0000000..d7815ca --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/layout/list.scss @@ -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; + } + } + } +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/layout/search.scss b/themes/hugo-theme-stack/assets/scss/partials/layout/search.scss new file mode 100644 index 0000000..89cdcef --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/layout/search.scss @@ -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; + } + } + +}
\ No newline at end of file diff --git a/themes/hugo-theme-stack/assets/scss/partials/menu.scss b/themes/hugo-theme-stack/assets/scss/partials/menu.scss new file mode 100644 index 0000000..5b6be17 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/menu.scss @@ -0,0 +1,229 @@ +/*! + * 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 */ +#main-menu { + list-style: none; + 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 ol { + flex-direction: column; + 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: currentColor; + 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; + + ol { + display: flex; + padding-left: 0; + } + } + } +} + +.menu-social { + 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; + } +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/pagination.scss b/themes/hugo-theme-stack/assets/scss/partials/pagination.scss new file mode 100644 index 0000000..ca46780 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/pagination.scss @@ -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); + } +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/sidebar.scss b/themes/hugo-theme-stack/assets/scss/partials/sidebar.scss new file mode 100644 index 0000000..a6a77c5 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/sidebar.scss @@ -0,0 +1,199 @@ +.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); + padding-bottom: 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); + } + } +} diff --git a/themes/hugo-theme-stack/assets/scss/partials/widgets.scss b/themes/hugo-theme-stack/assets/scss/partials/widgets.scss new file mode 100644 index 0000000..42cfcc2 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/widgets.scss @@ -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); + } + } + } +} |