fix: inline stack theme
This commit is contained in:
@@ -0,0 +1,400 @@
|
||||
/* Default article style */
|
||||
.article-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--section-separation);
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include card-style;
|
||||
overflow: hidden;
|
||||
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-l2);
|
||||
}
|
||||
|
||||
.article-image {
|
||||
img {
|
||||
width: 100%;
|
||||
height: var(--article-image-height);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: var(--card-padding);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.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 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
font-size: 1.4rem;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 1.33;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&,
|
||||
time,
|
||||
a,
|
||||
span {
|
||||
font-size: 1.4rem;
|
||||
color: var(--card-text-color-tertiary);
|
||||
}
|
||||
|
||||
& > .inline-meta {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
.article-category,
|
||||
.article-tags {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
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 {
|
||||
@include card-style;
|
||||
--image-size: var(--article-compact-image-size);
|
||||
|
||||
article {
|
||||
& > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--small-card-padding);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
&: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: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.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-preview {
|
||||
font-size: 1.4rem;
|
||||
color: var(--card-text-color-tertiary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tile style article list */
|
||||
.article-list--tile {
|
||||
article {
|
||||
position: relative;
|
||||
width: var(--article-tile-width);
|
||||
height: var(--article-tile-height);
|
||||
@include card-style;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-l2);
|
||||
}
|
||||
|
||||
&.has-image {
|
||||
.article-details {
|
||||
background-color: var(--article-tile-overlay-bg);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
color: var(--article-tile-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mermaid:not([data-processed]) {
|
||||
background: var(--card-background);
|
||||
min-height: 150px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 0 !important;
|
||||
line-height: 0;
|
||||
color: transparent;
|
||||
|
||||
&::after {
|
||||
visibility: visible;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: -14px 0 0 -14px;
|
||||
border: 3px solid var(--card-background);
|
||||
border-top-color: var(--accent-color, #3273dc);
|
||||
border-radius: 50%;
|
||||
animation: mermaid-spinner 0.8s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mermaid-spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Mermaid diagram wrapper with expand toolbar
|
||||
.mermaid-wrapper {
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
|
||||
.mermaid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mermaid-toolbar {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
z-index: 10;
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--mermaid-toolbar-btn-bg);
|
||||
border: 2px solid var(--mermaid-toolbar-btn-text);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--mermaid-toolbar-btn-text);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--mermaid-toolbar-btn-text);
|
||||
color: var(--card-background);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mermaid fullscreen modal
|
||||
.mermaid-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: var(--mermaid-modal-bg);
|
||||
z-index: 9999;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.mermaid-modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.mermaid-modal-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.mermaid-modal-controls button,
|
||||
.mermaid-modal-close {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--mermaid-modal-btn-bg);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
color: var(--card-text-color-main);
|
||||
|
||||
&:hover {
|
||||
background: var(--mermaid-modal-btn-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.mermaid-modal-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mermaid-modal-content {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--mermaid-modal-content-bg);
|
||||
}
|
||||
|
||||
.mermaid-panzoom-container {
|
||||
display: inline-block;
|
||||
transform-origin: 0 0;
|
||||
visibility: hidden;
|
||||
|
||||
&.ready {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Off-screen container for pre-rendering alternate theme
|
||||
.mermaid-offscreen {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
width: 800px;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--body-background);
|
||||
margin: 0;
|
||||
font-family: var(--base-font-family);
|
||||
font-size: 1.6rem;
|
||||
text-autospace: ideograph-alpha ideograph-numeric punctuation insert;
|
||||
text-spacing-trim: trim-start allow-end;
|
||||
-ms-text-autospace: ideograph-alpha;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
@import "../../breakpoints";
|
||||
@import "../../mixins";
|
||||
|
||||
.artalk-container {
|
||||
@include card-style;
|
||||
padding: 5px;
|
||||
|
||||
@include respond(md) {
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.artalk {
|
||||
--at-color-bg: var(--card-background);
|
||||
--at-color-font: var(--card-text-color-main);
|
||||
--at-color-sub: var(--card-text-color-secondary);
|
||||
--at-color-main: var(--accent-color);
|
||||
--at-color-border: var(--card-separator-color);
|
||||
--at-border-radius: var(--card-border-radius);
|
||||
--at-color-link: var(--accent-color);
|
||||
}
|
||||
|
||||
.artalk a {
|
||||
color: var(--at-color-link);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color-darker);
|
||||
}
|
||||
}
|
||||
|
||||
.artalk .atk-content a,
|
||||
.artalk .atk-editor-plug-preview a {
|
||||
color: var(--accent-color);
|
||||
box-shadow: 0px -2px 0px rgba(var(--link-background-color), var(--link-background-opacity)) inset;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color-darker);
|
||||
box-shadow: 0px calc(-1rem * var(--article-line-height)) 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
|
||||
}
|
||||
}
|
||||
|
||||
[data-scheme="dark"] .artalk {
|
||||
--at-color-main: var(--accent-color);
|
||||
--at-color-link: var(--accent-color);
|
||||
--at-color-bg: var(--card-background);
|
||||
--at-color-bg-transl: rgba(66, 66, 66, 0.95);
|
||||
--at-color-bg-grey: rgba(255, 255, 255, 0.08);
|
||||
--at-color-bg-grey-transl: rgba(255, 255, 255, 0.06);
|
||||
--at-color-bg-light: rgba(255, 255, 255, 0.08);
|
||||
--at-color-border: var(--card-separator-color);
|
||||
--at-color-font: var(--card-text-color-main);
|
||||
--at-color-deep: var(--card-text-color-main);
|
||||
--at-color-sub: var(--card-text-color-secondary);
|
||||
--at-color-meta: var(--card-text-color-secondary);
|
||||
--at-color-grey: var(--card-text-color-secondary);
|
||||
--at-color-gradient: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
var(--card-background)
|
||||
);
|
||||
}
|
||||
|
||||
.artalk code {
|
||||
font-family: var(--code-font-family);
|
||||
}
|
||||
|
||||
.artalk .atk-avatar img {
|
||||
border-radius: var(--card-border-radius);
|
||||
}
|
||||
|
||||
[data-scheme="dark"] .artalk .atk-avatar img {
|
||||
filter: brightness(0.75);
|
||||
}
|
||||
|
||||
[data-scheme="dark"] .artalk .atk-send-btn {
|
||||
color: var(--accent-color-text);
|
||||
}
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
.cookie-banner {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
padding: var(--container-padding);
|
||||
pointer-events: none;
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-banner__content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l2);
|
||||
padding: var(--card-padding);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
pointer-events: auto;
|
||||
|
||||
@include respond(md) {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-banner__text {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
color: var(--card-text-color-main);
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--card-text-color-secondary);
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-banner__actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cookie-banner__settings-link {
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent-color);
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include respond(md) {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--tag-border-radius);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
|
||||
&--primary {
|
||||
background: var(--accent-color);
|
||||
color: var(--accent-color-text);
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-color-darker);
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background: transparent;
|
||||
color: var(--card-text-color-main);
|
||||
border: 1.5px solid var(--card-separator-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--card-background-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cookie settings panel
|
||||
.cookie-settings {
|
||||
padding-top: 20px;
|
||||
border-top: 1.5px solid var(--card-separator-color);
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--card-text-color-main);
|
||||
font-size: 1.6rem;
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-category {
|
||||
padding: var(--spacing-md) 0;
|
||||
border-bottom: 1px solid var(--card-separator-color);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
cursor: pointer;
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--accent-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--card-text-color-main);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--card-text-color-secondary);
|
||||
font-size: 1.3rem;
|
||||
margin: 8px 0 0 28px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer link for reopening settings
|
||||
.cookie-settings-link {
|
||||
display: inline-block;
|
||||
color: var(--body-text-color);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Comments placeholder when consent not given
|
||||
.consent-placeholder {
|
||||
@include card-style;
|
||||
padding: var(--card-padding);
|
||||
text-align: center;
|
||||
color: var(--card-text-color-secondary);
|
||||
font-size: 1.4rem;
|
||||
|
||||
p {
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
footer.site-footer {
|
||||
padding: var(--spacing-lg) 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: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.powerby {
|
||||
color: var(--body-text-color);
|
||||
font-weight: normal;
|
||||
font-size: 1.2rem;
|
||||
|
||||
a {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,434 @@
|
||||
/* 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;
|
||||
user-select: none;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Optimise code block selection experience */
|
||||
span.line {
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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";
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,486 @@
|
||||
.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);
|
||||
gap: var(--spacing-2xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toc-nav {
|
||||
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: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
|
||||
padding: var(--spacing-xs);
|
||||
|
||||
&>ol,
|
||||
&>ul {
|
||||
margin-top: var(--spacing-sm);
|
||||
padding-left: var(--spacing-sm);
|
||||
margin-bottom: calc(var(--spacing-xs) * -1);
|
||||
|
||||
&>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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget--toc,
|
||||
.article-toc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--card-text-color-main);
|
||||
}
|
||||
|
||||
.widget--toc {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-toc {
|
||||
padding: 0 var(--card-padding);
|
||||
margin-top: var(--spacing-lg);
|
||||
|
||||
@include respond(lg) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
details {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l2);
|
||||
|
||||
&[open] {
|
||||
.article-toc-title {
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
list-style: none;
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article-toc-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
text-transform: uppercase;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: var(--card-text-color-tertiary);
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 1.33;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: var(--spacing-md) 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote.alert {
|
||||
.alert-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.alert-body {
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
$alert-types: note, tip, important, warning, caution;
|
||||
|
||||
@each $type in $alert-types {
|
||||
&.alert-#{$type} {
|
||||
border-color: var(--alert-#{$type}-color);
|
||||
background-color: var(--alert-#{$type}-background);
|
||||
|
||||
.alert-title {
|
||||
color: var(--alert-#{$type}-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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: var(--spacing-sm);
|
||||
|
||||
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;
|
||||
|
||||
pre {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.copyCodeButton {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// keep Codeblocks LTR
|
||||
[dir="rtl"] & {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
pre {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
.section-card {
|
||||
@include card-style;
|
||||
padding: var(--small-card-padding);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
|
||||
--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;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.section-count {
|
||||
color: var(--card-text-color-tertiary);
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@property --left-edge-fade-size {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 0px;
|
||||
}
|
||||
|
||||
@property --right-edge-fade-size {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 64px;
|
||||
}
|
||||
|
||||
.subsection-list {
|
||||
--shadow-overlap-x: calc(var(--shadow-l2-blur) + 4px);
|
||||
--shadow-overlap-y: calc(var(--shadow-l2-blur) + var(--shadow-l2-y) + 4px);
|
||||
--edge-fade-size: 64px;
|
||||
--left-edge-fade-size: 0px;
|
||||
--right-edge-fade-size: var(--edge-fade-size);
|
||||
|
||||
overflow-x: auto;
|
||||
|
||||
/// Limit the horizontal overlap to the container padding to prevent page overflow on mobile.
|
||||
/// On desktop, it still allows the full shadow to be visible.
|
||||
--overlap-x: min(var(--shadow-overlap-x), var(--container-padding));
|
||||
|
||||
/// These values are computed from the shadow of the article-list--tile (which uses shadow-l1 and shadow-l2)
|
||||
/// so that the shadow is not cut off, while staying within the viewport on small screens.
|
||||
/// Clamp both sides to prevent page-level horizontal overflow.
|
||||
margin-left: calc(var(--overlap-x) * -1);
|
||||
margin-right: calc(var(--overlap-x) * -1);
|
||||
margin-bottom: calc(var(--shadow-overlap-y) * -1);
|
||||
|
||||
/// Smooth fade on both horizontal edges to avoid hard cuts where shadows are clamped.
|
||||
--subsection-mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
rgb(0 0 0 / 0.06) calc(var(--left-edge-fade-size) * 0.12),
|
||||
rgb(0 0 0 / 0.2) calc(var(--left-edge-fade-size) * 0.3),
|
||||
rgb(0 0 0 / 0.45) calc(var(--left-edge-fade-size) * 0.52),
|
||||
rgb(0 0 0 / 0.72) calc(var(--left-edge-fade-size) * 0.76),
|
||||
black var(--left-edge-fade-size),
|
||||
black calc(100% - var(--right-edge-fade-size)),
|
||||
rgb(0 0 0 / 0.72) calc(100% - (var(--right-edge-fade-size) * 0.76)),
|
||||
rgb(0 0 0 / 0.45) calc(100% - (var(--right-edge-fade-size) * 0.52)),
|
||||
rgb(0 0 0 / 0.2) calc(100% - (var(--right-edge-fade-size) * 0.3)),
|
||||
rgb(0 0 0 / 0.06) calc(100% - (var(--right-edge-fade-size) * 0.12)),
|
||||
transparent 100%
|
||||
);
|
||||
-webkit-mask-image: var(--subsection-mask-image);
|
||||
mask-image: var(--subsection-mask-image);
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: calc(var(--overlap-x) * -1);
|
||||
margin-right: calc(var(--overlap-x) * -1);
|
||||
}
|
||||
|
||||
.article-list--tile {
|
||||
display: flex;
|
||||
padding: var(--spacing-xs) var(--overlap-x) var(--shadow-overlap-y) var(--overlap-x);
|
||||
width: max-content;
|
||||
gap: var(--spacing-lg);
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: var(--spacing-xs) var(--overlap-x) var(--shadow-overlap-y) var(--overlap-x);
|
||||
}
|
||||
|
||||
article {
|
||||
flex-shrink: 0;
|
||||
|
||||
.article-title {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.article-details {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only apply scroll-driven edge fades in browsers that support scroll timelines.
|
||||
// Browsers without support (e.g. Firefox) fall back to the static right-edge fade
|
||||
// defined by the explicit CSS variable declarations above.
|
||||
@supports (animation-timeline: scroll(self inline)) {
|
||||
.subsection-list {
|
||||
animation: subsection-left-fade linear both, subsection-right-fade linear both;
|
||||
animation-timeline: scroll(self inline);
|
||||
animation-range: 1px 24px, 0% 100%;
|
||||
animation-timing-function: ease-out, linear;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes subsection-left-fade {
|
||||
from {
|
||||
--left-edge-fade-size: 0px;
|
||||
}
|
||||
to {
|
||||
--left-edge-fade-size: var(--edge-fade-size);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes subsection-right-fade {
|
||||
0%,
|
||||
92% {
|
||||
--right-edge-fade-size: var(--edge-fade-size);
|
||||
}
|
||||
100% {
|
||||
--right-edge-fade-size: 0px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
.search-form {
|
||||
position: relative;
|
||||
--button-size: 80px;
|
||||
|
||||
&.widget {
|
||||
--button-size: 60px;
|
||||
|
||||
label {
|
||||
font-size: 1.3rem;
|
||||
top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1.5rem;
|
||||
padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: var(--spacing-md);
|
||||
inset-inline-start: var(--spacing-lg);
|
||||
font-size: 1.4rem;
|
||||
color: var(--card-text-color-tertiary);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 40px 20px 20px;
|
||||
@include card-style;
|
||||
color: var(--card-text-color-main);
|
||||
width: 100%;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search-result {
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,231 @@
|
||||
/*!
|
||||
* Hamburgers
|
||||
* @description Tasty CSS-animated hamburgers
|
||||
* @author Jonathan Suh @jonsuh
|
||||
* @site https://jonsuh.com/hamburgers
|
||||
* @link https://github.com/jonsuh/hamburgers
|
||||
*/
|
||||
|
||||
.hamburger {
|
||||
padding-top: var(--spacing-sm);
|
||||
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-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: var(--spacing-2xl);
|
||||
|
||||
@include respond(xl) {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
&,
|
||||
.menu-bottom-section ol {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2xl);
|
||||
|
||||
@include respond(xl) {
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
&.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: var(--spacing-sm);
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: var(--body-text-color);
|
||||
stroke-width: 1.33;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,259 @@
|
||||
.pagination {
|
||||
display: flex;
|
||||
@include card-style;
|
||||
overflow: hidden;
|
||||
|
||||
.hide-on-mobile,
|
||||
.pagination-link {
|
||||
display: none;
|
||||
|
||||
@include respond(md) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
padding: var(--spacing-sm) 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font: inherit;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 1 auto;
|
||||
min-width: 36px;
|
||||
color: var(--card-text-color-secondary);
|
||||
text-decoration: none;
|
||||
|
||||
@include respond(md) {
|
||||
min-width: 48px;
|
||||
padding: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
flex: 0 0 var(--spacing-3xl);
|
||||
padding: var(--spacing-sm);
|
||||
|
||||
@include respond(md) {
|
||||
flex: 0 0 48px;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.current):not(.disabled) {
|
||||
background-color: var(--card-background-selected);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: var(--card-background-selected);
|
||||
color: var(--card-text-color-main);
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
color: var(--card-text-color-secondary);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.pagination-jump-trigger {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pagination-jump-dialog {
|
||||
border: none;
|
||||
@include card-style;
|
||||
box-shadow: var(--shadow-l2);
|
||||
color: var(--body-text-color);
|
||||
margin: auto; // Center dialog
|
||||
width: calc(100% - (var(--container-padding) * 2));
|
||||
max-width: 320px;
|
||||
padding: var(--card-padding);
|
||||
|
||||
&::backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
animation: backdrop-fade-in 0.3s ease forwards;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
animation: scale-up 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
||||
}
|
||||
|
||||
&.closing {
|
||||
animation: scale-down 0.2s ease forwards;
|
||||
|
||||
&::backdrop {
|
||||
animation: backdrop-fade-out 0.2s ease forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-jump-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--card-text-color-main);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.3rem;
|
||||
color: var(--card-text-color-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-jump-input-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
align-items: stretch;
|
||||
|
||||
input[type="number"] {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0 var(--spacing-md);
|
||||
height: 44px; // Explicit height for perfect alignment
|
||||
border: 1.5px solid var(--card-separator-color);
|
||||
border-radius: 6px;
|
||||
background-color: var(--body-background);
|
||||
color: var(--card-text-color-main);
|
||||
font-size: 1.6rem;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
/* Hide spinner */
|
||||
-moz-appearance: textfield;
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 var(--spacing-xl);
|
||||
height: 44px; // Match input height
|
||||
background-color: var(--accent-color);
|
||||
color: var(--accent-color-text);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color-darker);
|
||||
box-shadow: var(--shadow-l1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-jump-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--spacing-sm);
|
||||
font-size: 1.3rem;
|
||||
color: var(--card-text-color-tertiary);
|
||||
margin-top: calc(var(--spacing-xs) * -1);
|
||||
|
||||
kbd {
|
||||
background-color: var(--body-background);
|
||||
border: 1px solid var(--card-separator-color);
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
font-family: var(--base-font-family);
|
||||
font-size: 1.1rem;
|
||||
box-shadow: 0 2px 0 var(--card-separator-color);
|
||||
color: var(--card-text-color-main);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-down {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes backdrop-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes backdrop-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
.sidebar {
|
||||
&.sticky {
|
||||
@include respond(md) {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
|
||||
@include respond(md) {
|
||||
gap: var(--sidebar-element-separation);
|
||||
}
|
||||
|
||||
margin-bottom: calc(-1 * var(--sidebar-element-separation));
|
||||
|
||||
@include respond(md) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&> :not(:last-child) {
|
||||
margin-bottom: var(--sidebar-element-separation);
|
||||
|
||||
@include respond(md) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
--sidebar-avatar-size: 100px;
|
||||
--sidebar-element-separation: var(--spacing-lg);
|
||||
--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: var(--spacing-xl);
|
||||
--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: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.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: var(--spacing-sm);
|
||||
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: none !important;
|
||||
color: var(--body-text-color);
|
||||
padding: 0 !important;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
option {
|
||||
color: var(--card-text-color-main);
|
||||
background-color: var(--card-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.widget-icon {
|
||||
svg {
|
||||
width: var(--widget-icon-size);
|
||||
height: var(--widget-icon-size);
|
||||
stroke-width: 1.6;
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag cloud widget */
|
||||
.tagCloud {
|
||||
.tagCloud-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
a {
|
||||
@include card-style;
|
||||
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 {
|
||||
@include card-style;
|
||||
}
|
||||
|
||||
.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