Stack/css/mod.css

3266 lines
59 KiB
CSS

@charset "UTF-8";
/*!* Hugo Theme Stack
*
* @author: Jimmy Cai
* @website: https://jimmycai.com
* @link: https://github.com/CaiJimmy/hugo-theme-stack*/
:root {
--main-top-padding: 35px;
--body-background: #f5f5fa;
--accent-color: #34495e;
--accent-color-darker: #2c3e50;
--accent-color-text: #fff;
--body-text-color: #707070;
--tag-border-radius: 4px;
--section-separation: 40px;
--scrollbar-thumb: hsl(0, 0%, 85%);
--scrollbar-track: var(--body-background)
}
@media(min-width:1280px) {
:root {
--main-top-padding: 50px
}
}
:root[data-scheme=dark] {
--body-background: #303030;
--accent-color: #ecf0f1;
--accent-color-darker: #bdc3c7;
--accent-color-text: #000;
--body-text-color: rgba(255, 255, 255, 0.7);
--scrollbar-thumb: hsl(0, 0%, 40%);
--scrollbar-track: var(--body-background)
}
:root {
--sys-font-family: -apple-system, BlinkMacSystemFont,"LXGWWenKai", "Segoe UI", "Droid Sans", "Helvetica Neue";
--zh-font-family: "LXGWWenKai", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
--base-font-family: "LXGWWenKai", "Lato", var(--sys-font-family), var(--zh-font-family), sans-serif;
--code-font-family: Menlo, Monaco, Consolas,"LXGWWenKaiMono", "Courier New", var(--zh-font-family), monospace
}
:root {
--card-background: #fff;
--card-background-selected: #eaeaea;
--card-text-color-main: #000;
--card-text-color-secondary: #747474;
--card-text-color-tertiary: #767676;
--card-separator-color: rgba(218, 218, 218, 0.5);
--card-border-radius: 10px;
--card-padding: 20px;
--small-card-padding: 25px 20px
}
@media(min-width:768px) {
:root {
--card-padding: 25px
}
}
@media(min-width:1280px) {
:root {
--card-padding: 30px
}
}
@media(min-width:768px) {
:root {
--small-card-padding: 25px
}
}
:root[data-scheme=dark] {
--card-background: #424242;
--card-background-selected: rgba(255, 255, 255, 0.16);
--card-text-color-main: rgba(255, 255, 255, 0.9);
--card-text-color-secondary: rgba(255, 255, 255, 0.7);
--card-text-color-tertiary: rgba(255, 255, 255, 0.5);
--card-separator-color: rgba(255, 255, 255, 0.12)
}
:root {
--article-font-family: var(--base-font-family);
--article-font-size: 1.6rem;
--article-line-height: 1.85
}
@media(min-width:768px) {
:root {
--article-font-size: 1.7rem
}
}
:root {
--blockquote-border-size: 4px;
--blockquote-background-color: rgb(248 248 248);
--heading-border-size: 4px;
--link-background-color: 189, 195, 199;
--link-background-opacity: 0.5;
--link-background-opacity-hover: 0.7;
--pre-background-color: #272822;
--pre-text-color: #f8f8f2;
--code-background-color: rgba(0, 0, 0, 0.12);
--code-text-color: #808080;
--table-border-color: #dadada;
--tr-even-background-color: #efefee;
--kbd-border-color: #dadada
}
:root[data-scheme=dark] {
--code-background-color: #272822;
--code-text-color: rgba(255, 255, 255, 0.9);
--table-border-color: #717171;
--tr-even-background-color: #545454;
--blockquote-background-color: rgb(75 75 75)
}
:root {
--shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
--shadow-l2: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
--shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
--shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
0px 0px 1px rgba(0, 0, 0, 0.04)
}
[data-scheme=light] {
--pre-text-color: #272822;
--pre-background-color: #fafafa
}
[data-scheme=light] .chroma {
color: #272822;
background-color: #fafafa
}
[data-scheme=light] .chroma .err {
color: #960050
}
[data-scheme=light] .chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0
}
[data-scheme=light] .chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: 100%;
display: block
}
[data-scheme=light] .chroma .lntable>tbody {
display: block;
width: 100%
}
[data-scheme=light] .chroma .lntable>tbody>tr {
display: flex;
width: 100%
}
[data-scheme=light] .chroma .lntable>tbody>tr>td:last-child {
overflow-x: auto
}
[data-scheme=light] .chroma .hl {
display: block;
width: 100%;
background-color: #ffc
}
[data-scheme=light] .chroma .lnt {
margin-right: .4em;
padding: 0 .4em;
color: #7f7f7f;
display: block
}
[data-scheme=light] .chroma .ln {
margin-right: .4em;
padding: 0 .4em;
color: #7f7f7f
}
[data-scheme=light] .chroma .k {
color: #00a8c8
}
[data-scheme=light] .chroma .kc {
color: #00a8c8
}
[data-scheme=light] .chroma .kd {
color: #00a8c8
}
[data-scheme=light] .chroma .kn {
color: #f92672
}
[data-scheme=light] .chroma .kp {
color: #00a8c8
}
[data-scheme=light] .chroma .kr {
color: #00a8c8
}
[data-scheme=light] .chroma .kt {
color: #00a8c8
}
[data-scheme=light] .chroma .n {
color: #111
}
[data-scheme=light] .chroma .na {
color: #75af00
}
[data-scheme=light] .chroma .nb {
color: #111
}
[data-scheme=light] .chroma .bp {
color: #111
}
[data-scheme=light] .chroma .nc {
color: #75af00
}
[data-scheme=light] .chroma .no {
color: #00a8c8
}
[data-scheme=light] .chroma .nd {
color: #75af00
}
[data-scheme=light] .chroma .ni {
color: #111
}
[data-scheme=light] .chroma .ne {
color: #75af00
}
[data-scheme=light] .chroma .nf {
color: #75af00
}
[data-scheme=light] .chroma .fm {
color: #111
}
[data-scheme=light] .chroma .nl {
color: #111
}
[data-scheme=light] .chroma .nn {
color: #111
}
[data-scheme=light] .chroma .nx {
color: #75af00
}
[data-scheme=light] .chroma .py {
color: #111
}
[data-scheme=light] .chroma .nt {
color: #f92672
}
[data-scheme=light] .chroma .nv {
color: #111
}
[data-scheme=light] .chroma .vc {
color: #111
}
[data-scheme=light] .chroma .vg {
color: #111
}
[data-scheme=light] .chroma .vi {
color: #111
}
[data-scheme=light] .chroma .vm {
color: #111
}
[data-scheme=light] .chroma .l {
color: #ae81ff
}
[data-scheme=light] .chroma .ld {
color: #d88200
}
[data-scheme=light] .chroma .s {
color: #d88200
}
[data-scheme=light] .chroma .sa {
color: #d88200
}
[data-scheme=light] .chroma .sb {
color: #d88200
}
[data-scheme=light] .chroma .sc {
color: #d88200
}
[data-scheme=light] .chroma .dl {
color: #d88200
}
[data-scheme=light] .chroma .sd {
color: #d88200
}
[data-scheme=light] .chroma .s2 {
color: #d88200
}
[data-scheme=light] .chroma .se {
color: #ae81ff
}
[data-scheme=light] .chroma .sh {
color: #d88200
}
[data-scheme=light] .chroma .si {
color: #d88200
}
[data-scheme=light] .chroma .sx {
color: #d88200
}
[data-scheme=light] .chroma .sr {
color: #d88200
}
[data-scheme=light] .chroma .s1 {
color: #d88200
}
[data-scheme=light] .chroma .ss {
color: #d88200
}
[data-scheme=light] .chroma .m {
color: #ae81ff
}
[data-scheme=light] .chroma .mb {
color: #ae81ff
}
[data-scheme=light] .chroma .mf {
color: #ae81ff
}
[data-scheme=light] .chroma .mh {
color: #ae81ff
}
[data-scheme=light] .chroma .mi {
color: #ae81ff
}
[data-scheme=light] .chroma .il {
color: #ae81ff
}
[data-scheme=light] .chroma .mo {
color: #ae81ff
}
[data-scheme=light] .chroma .o {
color: #f92672
}
[data-scheme=light] .chroma .ow {
color: #f92672
}
[data-scheme=light] .chroma .p {
color: #111
}
[data-scheme=light] .chroma .c {
color: #75715e
}
[data-scheme=light] .chroma .ch {
color: #75715e
}
[data-scheme=light] .chroma .cm {
color: #75715e
}
[data-scheme=light] .chroma .c1 {
color: #75715e
}
[data-scheme=light] .chroma .cs {
color: #75715e
}
[data-scheme=light] .chroma .cp {
color: #75715e
}
[data-scheme=light] .chroma .cpf {
color: #75715e
}
[data-scheme=light] .chroma .gd {
color: #f92672
}
[data-scheme=light] .chroma .ge {
font-style: italic
}
[data-scheme=light] .chroma .gi {
color: #75af00
}
[data-scheme=light] .chroma .gs {
font-weight: 700
}
[data-scheme=light] .chroma .gu {
color: #75715e
}
[data-scheme=dark] {
--pre-text-color: #f8f8f2;
--pre-background-color: #272822
}
[data-scheme=dark] .chroma {
color: #f8f8f2;
background-color: #272822
}
[data-scheme=dark] .chroma .err {
color: #bb0064
}
[data-scheme=dark] .chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0
}
[data-scheme=dark] .chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: 100%;
display: block
}
[data-scheme=dark] .chroma .lntable>tbody {
display: block;
width: 100%
}
[data-scheme=dark] .chroma .lntable>tbody>tr {
display: flex;
width: 100%
}
[data-scheme=dark] .chroma .lntable>tbody>tr>td:last-child {
overflow-x: auto
}
[data-scheme=dark] .chroma .hl {
display: block;
width: 100%;
background-color: #ffc
}
[data-scheme=dark] .chroma .lnt {
margin-right: .4em;
padding: 0 .4em;
color: #7f7f7f;
display: block
}
[data-scheme=dark] .chroma .ln {
margin-right: .4em;
padding: 0 .4em;
color: #7f7f7f
}
[data-scheme=dark] .chroma .k {
color: #66d9ef
}
[data-scheme=dark] .chroma .kc {
color: #66d9ef
}
[data-scheme=dark] .chroma .kd {
color: #66d9ef
}
[data-scheme=dark] .chroma .kn {
color: #f92672
}
[data-scheme=dark] .chroma .kp {
color: #66d9ef
}
[data-scheme=dark] .chroma .kr {
color: #66d9ef
}
[data-scheme=dark] .chroma .kt {
color: #66d9ef
}
[data-scheme=dark] .chroma .n {
color: #f8f8f2
}
[data-scheme=dark] .chroma .na {
color: #a6e22e
}
[data-scheme=dark] .chroma .nb {
color: #f8f8f2
}
[data-scheme=dark] .chroma .bp {
color: #f8f8f2
}
[data-scheme=dark] .chroma .nc {
color: #a6e22e
}
[data-scheme=dark] .chroma .no {
color: #66d9ef
}
[data-scheme=dark] .chroma .nd {
color: #a6e22e
}
[data-scheme=dark] .chroma .ni {
color: #f8f8f2
}
[data-scheme=dark] .chroma .ne {
color: #a6e22e
}
[data-scheme=dark] .chroma .nf {
color: #a6e22e
}
[data-scheme=dark] .chroma .fm {
color: #f8f8f2
}
[data-scheme=dark] .chroma .nl {
color: #f8f8f2
}
[data-scheme=dark] .chroma .nn {
color: #f8f8f2
}
[data-scheme=dark] .chroma .nx {
color: #a6e22e
}
[data-scheme=dark] .chroma .py {
color: #f8f8f2
}
[data-scheme=dark] .chroma .nt {
color: #f92672
}
[data-scheme=dark] .chroma .nv {
color: #f8f8f2
}
[data-scheme=dark] .chroma .vc {
color: #f8f8f2
}
[data-scheme=dark] .chroma .vg {
color: #f8f8f2
}
[data-scheme=dark] .chroma .vi {
color: #f8f8f2
}
[data-scheme=dark] .chroma .vm {
color: #f8f8f2
}
[data-scheme=dark] .chroma .l {
color: #ae81ff
}
[data-scheme=dark] .chroma .ld {
color: #e6db74
}
[data-scheme=dark] .chroma .s {
color: #e6db74
}
[data-scheme=dark] .chroma .sa {
color: #e6db74
}
[data-scheme=dark] .chroma .sb {
color: #e6db74
}
[data-scheme=dark] .chroma .sc {
color: #e6db74
}
[data-scheme=dark] .chroma .dl {
color: #e6db74
}
[data-scheme=dark] .chroma .sd {
color: #e6db74
}
[data-scheme=dark] .chroma .s2 {
color: #e6db74
}
[data-scheme=dark] .chroma .se {
color: #ae81ff
}
[data-scheme=dark] .chroma .sh {
color: #e6db74
}
[data-scheme=dark] .chroma .si {
color: #e6db74
}
[data-scheme=dark] .chroma .sx {
color: #e6db74
}
[data-scheme=dark] .chroma .sr {
color: #e6db74
}
[data-scheme=dark] .chroma .s1 {
color: #e6db74
}
[data-scheme=dark] .chroma .ss {
color: #e6db74
}
[data-scheme=dark] .chroma .m {
color: #ae81ff
}
[data-scheme=dark] .chroma .mb {
color: #ae81ff
}
[data-scheme=dark] .chroma .mf {
color: #ae81ff
}
[data-scheme=dark] .chroma .mh {
color: #ae81ff
}
[data-scheme=dark] .chroma .mi {
color: #ae81ff
}
[data-scheme=dark] .chroma .il {
color: #ae81ff
}
[data-scheme=dark] .chroma .mo {
color: #ae81ff
}
[data-scheme=dark] .chroma .o {
color: #f92672
}
[data-scheme=dark] .chroma .ow {
color: #f92672
}
[data-scheme=dark] .chroma .p {
color: #f8f8f2
}
[data-scheme=dark] .chroma .c {
color: #75715e
}
[data-scheme=dark] .chroma .ch {
color: #75715e
}
[data-scheme=dark] .chroma .cm {
color: #75715e
}
[data-scheme=dark] .chroma .c1 {
color: #75715e
}
[data-scheme=dark] .chroma .cs {
color: #75715e
}
[data-scheme=dark] .chroma .cp {
color: #75715e
}
[data-scheme=dark] .chroma .cpf {
color: #75715e
}
[data-scheme=dark] .chroma .gd {
color: #f92672
}
[data-scheme=dark] .chroma .ge {
font-style: italic
}
[data-scheme=dark] .chroma .gi {
color: #a6e22e
}
[data-scheme=dark] .chroma .gs {
font-weight: 700
}
[data-scheme=dark] .chroma .gu {
color: #75715e
}
:root {
--menu-icon-separation: 40px;
--container-padding: 15px;
--widget-separation: var(--section-separation)
}
.container {
margin-left: auto;
margin-right: auto
}
.container .left-sidebar {
order: -3;
max-width: 10%
}
.container .right-sidebar {
order: -1;
max-width: 20%
}
@media(min-width:1024px) {
.container .right-sidebar {
display: flex
}
}
@media(min-width:768px) {
.container.extended {
max-width: 1024px;
--left-sidebar-max-width: 25%;
--right-sidebar-max-width: 30%
}
}
@media(min-width:1024px) {
.container.extended {
max-width: 1280px;
--left-sidebar-max-width: 20%;
--right-sidebar-max-width: 30%
}
}
@media(min-width:1280px) {
.container.extended {
max-width: 1536px;
--left-sidebar-max-width: 15%;
--right-sidebar-max-width: 25%
}
}
@media(min-width:768px) {
.container.compact {
--left-sidebar-max-width: 25%;
max-width: 768px
}
}
@media(min-width:1024px) {
.container.compact {
max-width: 1024px;
--left-sidebar-max-width: 20%
}
}
@media(min-width:1280px) {
.container.compact {
max-width: 1280px
}
}
.flex {
display: flex;
flex-direction: row
}
.flex.column {
flex-direction: column
}
.flex.on-phone--column {
flex-direction: column
}
@media(min-width:768px) {
.flex.on-phone--column {
flex-direction: unset
}
}
.flex .full-width {
width: 100%
}
main.main {
order: -2;
min-width: 0;
max-width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: var(--section-separation)
}
@media(min-width:768px) {
main.main {
padding-top: var(--main-top-padding)
}
}
.main-container {
min-height: 100vh;
align-items: flex-start;
padding: 0 15px;
gap: var(--section-separation);
padding-top: var(--main-top-padding)
}
@media(min-width:768px) {
.main-container {
padding: 0 20px
}
}
/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
img {
border-style: none
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
template {
display: none
}
[hidden] {
display: none
}
/*!* 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: .15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible
}
.hamburger:hover {
opacity: .7
}
.hamburger.is-active:hover {
opacity: .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: .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: .22s;
transition-timing-function: cubic-bezier(.55, .055, .675, .19)
}
.hamburger--spin .hamburger-inner::before {
transition: top .1s .25s ease-in, opacity .1s ease-in
}
.hamburger--spin .hamburger-inner::after {
transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19)
}
.hamburger--spin.is-active .hamburger-inner {
transform: rotate(225deg);
transition-delay: .12s;
transition-timing-function: cubic-bezier(.215, .61, .355, 1)
}
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top .1s ease-out, opacity .1s .12s ease-out
}
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1)
}
#toggle-menu {
background: 0 0;
border: none;
position: absolute;
right: 0;
top: 0;
z-index: 2;
cursor: pointer;
outline: none
}
[dir=rtl] #toggle-menu {
left: 0;
right: auto
}
@media(min-width:768px) {
#toggle-menu {
display: none
}
}
#toggle-menu.is-active .hamburger-inner,
#toggle-menu.is-active .hamburger-inner::before,
#toggle-menu.is-active .hamburger-inner::after {
background-color: var(--accent-color)
}
.menu {
padding-left: 0;
list-style: none;
flex-direction: column;
overflow-y: auto;
flex-grow: 1;
font-size: 1.4rem;
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
display: none;
margin: 0 calc(var(--container-padding) * -1);
padding: 30px
}
@media(min-width:1280px) {
.menu {
padding: 15px 0
}
}
.menu,
.menu .menu-bottom-section {
gap: 30px
}
@media(min-width:1280px) {
.menu,
.menu .menu-bottom-section {
gap: 25px
}
}
.menu.show {
display: flex
}
@media(min-width:768px) {
.menu {
align-items: flex-end;
display: flex;
background-color: transparent;
padding: 0;
box-shadow: none;
margin: 0
}
}
.menu li {
position: relative;
vertical-align: middle;
padding: 0
}
@media(min-width:768px) {
.menu li {
width: 100%
}
}
.menu li svg {
stroke: currentColor;
stroke-width: 1.33;
width: 20px;
height: 20px
}
.menu li a {
height: 100%;
display: inline-flex;
align-items: center;
color: var(--body-text-color);
gap: var(--menu-icon-separation)
}
.menu li span {
flex: 1
}
.menu li.current a {
color: var(--accent-color);
font-weight: 700
}
.menu .menu-bottom-section {
margin-top: auto;
display: flex;
flex-direction: column;
width: 100%
}
.menu-social {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
gap: 10px
}
.menu-social svg {
width: 24px;
height: 24px;
stroke: var(--body-text-color);
stroke-width: 1.33
}
.article-list {
display: flex;
flex-direction: column;
gap: var(--section-separation)
}
.article-list 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 .3s ease
}
.article-list article:hover {
box-shadow: var(--shadow-l2)
}
.article-list article .article-image img {
width: 100%;
height: 150px;
object-fit: cover
}
@media(min-width:768px) {
.article-list article .article-image img {
height: 200px
}
}
@media(min-width:1280px) {
.article-list article .article-image img {
height: 250px
}
}
.article-list article:nth-child(5n+1) .article-category a {
background: #8ea885;
color: #fff
}
.article-list article:nth-child(5n+2) .article-category a {
background: #df7988;
color: #fff
}
.article-list article:nth-child(5n+3) .article-category a {
background: #0177b8;
color: #fff
}
.article-list article:nth-child(5n+4) .article-category a {
background: #ffb900;
color: #fff
}
.article-list article:nth-child(5n+5) .article-category a {
background: #6b69d6;
color: #fff
}
.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
}
@media(min-width:1280px) {
.article-title {
font-size: 2.4rem
}
}
.article-title a {
color: var(--card-text-color-main)
}
.article-title a:hover {
color: var(--card-text-color-main)
}
.article-subtitle {
font-weight: 400;
color: var(--card-text-color-secondary);
line-height: 1.5;
margin: 0;
font-size: 1.75rem
}
@media(min-width:1280px) {
.article-subtitle {
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
}
.article-time svg,
.article-translations svg {
vertical-align: middle;
width: 20px;
height: 20px;
stroke-width: 1.33;
flex-shrink: 0
}
.article-time time,
.article-time a,
.article-translations time,
.article-translations a {
font-size: 1.4rem;
color: var(--card-text-color-tertiary)
}
.article-time>div,
.article-translations>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
}
.article-category a,
.article-tags 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 .5s ease
}
.article-category a:hover,
.article-tags a:hover {
color: var(--accent-color-text);
background-color: var(--accent-color-darker)
}
.article-list--compact {
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
background-color: var(--card-background);
--image-size: 50px
}
@media(min-width:768px) {
.article-list--compact {
--image-size: 60px
}
}
.article-list--compact article>a {
display: flex;
align-items: center;
padding: var(--small-card-padding);
gap: 15px
}
.article-list--compact article:not(:last-of-type) {
border-bottom: 1.5px solid var(--card-separator-color)
}
.article-list--compact article .article-details {
flex-grow: 1;
padding: 0;
min-height: var(--image-size);
gap: 10px
}
.article-list--compact article .article-title {
margin: 0;
font-size: 1.6rem
}
@media(min-width:768px) {
.article-list--compact article .article-title {
font-size: 1.8rem
}
}
.article-list--compact article .article-image img {
width: var(--image-size);
height: var(--image-size);
object-fit: cover
}
.article-list--compact article .article-time {
font-size: 1.4rem
}
.article-list--compact article .article-preview {
font-size: 1.4rem;
color: var(--card-text-color-tertiary);
margin-top: 10px;
line-height: 1.5
}
.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 .3s ease;
background-color: var(--card-background)
}
.article-list--tile article:hover {
box-shadow: var(--shadow-l2)
}
.article-list--tile article.has-image .article-details {
background-color: rgba(0, 0, 0, .25)
}
.article-list--tile article.has-image .article-title {
color: #fff
}
.article-list--tile article .article-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.article-list--tile article .article-image img {
width: 100%;
height: 100%;
object-fit: cover
}
.article-list--tile article .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
}
@media(min-width:640px) {
.article-list--tile article .article-details {
padding: 20px
}
}
.article-list--tile article .article-title {
font-size: 2rem;
font-weight: 500;
color: var(--card-text-color-main)
}
@media(min-width:640px) {
.article-list--tile article .article-title {
font-size: 2.2rem
}
}
.article-content .highlight pre {
margin: initial;
padding: 0;
margin: 0;
width: auto;
max-height: 20em;
scrollbar-width: none
}
.article-content .highlight pre::-webkit-scrollbar {
display: none
}
.widget {
display: flex;
flex-direction: column
}
.widget .widget-icon svg {
width: 32px;
height: 32px;
stroke-width: 1.6;
color: var(--body-text-color)
}
.tagCloud .tagCloud-tags {
display: flex;
flex-wrap: wrap;
gap: 10px
}
.tagCloud .tagCloud-tags 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 .3s ease
}
.tagCloud .tagCloud-tags a:hover {
box-shadow: var(--shadow-l2)
}
.widget.archives .widget-archive--list {
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
background-color: var(--card-background)
}
.widget.archives .archives-year:not(:last-of-type) {
border-bottom: 1.5px solid var(--card-separator-color)
}
.widget.archives .archives-year a {
font-size: 1.4rem;
padding: 18px 25px;
display: flex
}
.widget.archives .archives-year a span.year {
flex: 1;
color: var(--card-text-color-main);
font-weight: 700
}
.widget.archives .archives-year a span.count {
color: var(--card-text-color-tertiary)
}
footer.site-footer {
padding: 20px 0 var(--section-separation);
font-size: 1.4rem;
line-height: 1.75
}
footer.site-footer:before {
content: "";
display: block;
height: 3px;
width: 50px;
background: var(--body-text-color);
margin-bottom: 20px
}
footer.site-footer .copyright {
color: var(--accent-color);
font-weight: 700;
margin-bottom: 5px
}
footer.site-footer .powerby {
color: var(--body-text-color);
font-weight: 400;
font-size: 1.2rem
}
footer.site-footer .powerby a {
color: var(--body-text-color)
}
.pagination {
display: flex;
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius);
overflow: hidden;
flex-wrap: wrap
}
.pagination a {
padding: 16px 32px;
display: inline-flex;
color: var(--card-text-color-secondary)
}
.pagination .page-link {
padding: 16px 32px;
display: inline-flex;
color: var(--card-text-color-secondary)
}
.pagination .page-link.current {
font-weight: 700;
background-color: var(--card-background-selected);
color: var(--card-text-color-main)
}
@media(min-width:768px) {
.sidebar.sticky {
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
}
@media(min-width:768px) {
.left-sidebar {
width: auto;
padding-top: var(--main-top-padding);
padding-bottom: var(--main-top-padding);
max-height: 100vh
}
}
@media(min-width:1536px) {
.left-sidebar {
--sidebar-avatar-size: 120px;
--sidebar-element-separation: 25px;
--emoji-size: 40px
}
}
.left-sidebar.sticky {
top: 0
}
.left-sidebar.compact {
--sidebar-avatar-size: 80px;
--emoji-size: 30px;
--emoji-font-size: 15px
}
@media(min-width:1024px) {
.left-sidebar.compact header {
flex-direction: row
}
}
.left-sidebar.compact header .site-meta {
gap: 5px
}
.left-sidebar.compact header .site-name {
font-size: 1.4rem
}
@media(min-width:1536px) {
.left-sidebar.compact header .site-name {
font-size: 1.75rem
}
}
.left-sidebar.compact header .site-description {
font-size: 1.4rem
}
.right-sidebar {
width: 100%;
display: none;
flex-direction: column;
gap: var(--widget-separation)
}
.right-sidebar.sticky {
top: 0
}
@media(min-width:1024px) {
.right-sidebar {
padding-top: var(--main-top-padding);
padding-bottom: var(--main-top-padding)
}
}
.sidebar header {
z-index: 1;
transition: box-shadow .5s ease;
display: flex;
flex-direction: column;
gap: var(--sidebar-element-separation)
}
@media(min-width:768px) {
.sidebar header {
padding: 0
}
}
.sidebar header .site-avatar {
position: relative;
margin: 0;
width: var(--sidebar-avatar-size);
height: var(--sidebar-avatar-size);
flex-shrink: 0
}
.sidebar header .site-avatar .site-logo {
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: var(--shadow-l1)
}
.sidebar header .site-avatar .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)
}
.sidebar header .site-meta {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center
}
.sidebar header .site-name {
color: var(--accent-color);
margin: 0;
font-size: 1.6rem
}
@media(min-width:1536px) {
.sidebar header .site-name {
font-size: 1.8rem
}
}
.sidebar header .site-description {
color: var(--body-text-color);
font-weight: 400;
margin: 0;
font-size: 1.4rem
}
@media(min-width:1536px) {
.sidebar header .site-description {
font-size: 1.6rem
}
}
[data-scheme=dark] #dark-mode-toggle {
color: var(--accent-color);
font-weight: 700
}
[data-scheme=dark] #dark-mode-toggle .icon-tabler-toggle-left {
display: none
}
[data-scheme=dark] #dark-mode-toggle .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)
}
#dark-mode-toggle .icon-tabler-toggle-right {
display: none
}
#i18n-switch {
color: var(--body-text-color);
display: inline-flex;
align-content: center;
gap: var(--menu-icon-separation)
}
#i18n-switch select {
border: 0;
background-color: transparent;
color: var(--body-text-color)
}
#i18n-switch select option {
color: var(--card-text-color-main);
background-color: var(--card-background)
}
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-width: auto;
scrollbar-color: var(--scrollbar-thumb)transparent
}
::-webkit-scrollbar {
height: auto
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb)
}
::-webkit-scrollbar-track {
background-color: transparent
}
.article-page.hide-sidebar-sm .left-sidebar {
display: none
}
@media(min-width:768px) {
.article-page.hide-sidebar-sm .left-sidebar {
display: inherit
}
}
.article-page .main-article {
background: var(--card-background);
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
overflow: hidden
}
.article-page .main-article .article-header .article-image img {
height: auto;
width: 100%;
max-height: 50vh;
object-fit: cover
}
.article-page .main-article .article-header .article-details {
padding: var(--card-padding);
padding-bottom: 0
}
.article-page .main-article .article-content {
margin: var(--card-padding)0;
color: var(--card-text-color-main)
}
.article-page .main-article .article-content .footnotes {
font-family: var(--base-font-family)
}
.article-page .main-article .article-content img {
max-width: 100%;
height: auto
}
.article-page .main-article .article-footer {
margin: var(--card-padding);
margin-top: 0
}
.article-page .main-article .article-footer section:not(:first-child) {
margin-top: var(--card-padding)
}
.article-page .main-article .article-footer section {
color: var(--card-text-color-tertiary);
text-transform: uppercase;
display: flex;
align-items: center;
font-size: 1.4rem;
gap: 15px
}
.article-page .main-article .article-footer section svg {
width: 20px;
height: 20px;
stroke-width: 1.33
}
.article-page .main-article .article-footer .article-tags {
flex-wrap: wrap;
text-transform: unset
}
.article-page .main-article .article-footer .article-copyright a,
.article-page .main-article .article-footer .article-lastmod a {
color: var(--body-text-color)
}
.article-page .main-article .article-footer .article-copyright a.link,
.article-page .main-article .article-footer .article-lastmod 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
}
.widget--toc ::-webkit-scrollbar-thumb {
background-color: var(--card-separator-color)
}
.widget--toc #TableOfContents {
overflow-x: auto;
max-height: 75vh
}
.widget--toc #TableOfContents ol,
.widget--toc #TableOfContents ul {
margin: 0;
padding: 0
}
.widget--toc #TableOfContents ol {
list-style-type: none;
counter-reset: item
}
.widget--toc #TableOfContents ol li a:first-of-type::before {
counter-increment: item;
content: counters(item, ".")". ";
font-weight: 700;
margin-right: 5px
}
.widget--toc #TableOfContents>ul {
padding: 0 1em
}
.widget--toc #TableOfContents li {
margin: 15px 0 15px 20px;
padding: 5px
}
.widget--toc #TableOfContents li>ol,
.widget--toc #TableOfContents li>ul {
margin-top: 10px;
padding-left: 10px;
margin-bottom: -5px
}
.widget--toc #TableOfContents li>ol>li:last-child,
.widget--toc #TableOfContents li>ul>li:last-child {
margin-bottom: 0
}
.widget--toc #TableOfContents li.active-class>a {
border-left: var(--heading-border-size)solid var(--accent-color);
font-weight: 700
}
.widget--toc #TableOfContents ul li.active-class>a {
display: block
}
.widget--toc #TableOfContents>ul>li.active-class>a {
margin-left: calc(-25px - 1em);
padding-left: calc(25px + 1em - var(--heading-border-size))
}
.widget--toc #TableOfContents>ol>li.active-class>a {
margin-left: calc(-9px - 1em);
padding-left: calc(9px + 1em - var(--heading-border-size));
display: block
}
.widget--toc #TableOfContents>ul>li>ul>li.active-class>a {
margin-left: calc(-60px - 1em);
padding-left: calc(60px + 1em - var(--heading-border-size))
}
.widget--toc #TableOfContents>ol>li>ol>li.active-class>a {
margin-left: calc(-44px - 1em);
padding-left: calc(44px + 1em - var(--heading-border-size));
display: block
}
.widget--toc #TableOfContents>ul>li>ul>li>ul>li.active-class>a {
margin-left: calc(-95px - 1em);
padding-left: calc(95px + 1em - var(--heading-border-size))
}
.widget--toc #TableOfContents>ol>li>ol>li>ol>li.active-class>a {
margin-left: calc(-79px - 1em);
padding-left: calc(79px + 1em - var(--heading-border-size));
display: block
}
.widget--toc #TableOfContents>ul>li>ul>li>ul>li>ul>li.active-class>a {
margin-left: calc(-130px - 1em);
padding-left: calc(130px + 1em - var(--heading-border-size))
}
.widget--toc #TableOfContents>ol>li>ol>li>ol>li>ol>li.active-class>a {
margin-left: calc(-114px - 1em);
padding-left: calc(114px + 1em - var(--heading-border-size));
display: block
}
.widget--toc #TableOfContents>ul>li>ul>li>ul>li>ul>li>ul>li.active-class>a {
margin-left: calc(-165px - 1em);
padding-left: calc(165px + 1em - var(--heading-border-size))
}
.widget--toc #TableOfContents>ol>li>ol>li>ol>li>ol>li>ol>li.active-class>a {
margin-left: calc(-149px - 1em);
padding-left: calc(149px + 1em - var(--heading-border-size));
display: block
}
.related-content {
overflow-x: auto;
padding-bottom: 15px
}
.related-content>.flex {
float: left
}
.related-content article {
margin-right: 15px;
flex-shrink: 0;
overflow: hidden;
width: 250px;
height: 150px
}
.related-content article .article-title {
font-size: 1.8rem;
margin: 0
}
.related-content article.has-image .article-details {
padding: 20px;
background: linear-gradient(0deg, rgba(0, 0, 0, .25) 0%, rgba(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)
}
.article-content>p {
margin: 1.5em 0
}
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content 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)
}
.article-content figure {
text-align: center
}
.article-content figure figcaption {
font-size: 1.4rem;
color: var(--card-text-color-secondary)
}
.article-content 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)
}
.article-content blockquote .cite {
display: block;
text-align: right;
font-size: .75em
}
.article-content blockquote .cite a {
text-decoration: underline
}
.article-content hr {
width: 100px;
margin: 40px auto;
background: var(--card-text-color-tertiary);
height: 2px;
border: 0;
opacity: .55
}
.article-content 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)
}
.article-content a,
.article-content code {
word-break: break-word
}
.article-content .gallery {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
margin: 1.5em 0;
gap: 10px
}
.article-content .gallery figure {
margin: 0
}
.article-content 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)
}
[dir=rtl] .article-content pre {
direction: ltr
}
.article-content pre code {
color: unset;
border: none;
background: 0 0;
padding: 0
}
.article-content .highlight {
background-color: var(--pre-background-color);
padding: var(--card-padding);
position: relative
}
.article-content .highlight:hover .copyCodeButton {
opacity: 1
}
[dir=rtl] .article-content .highlight {
direction: ltr
}
.article-content .highlight pre {
margin: initial;
padding: 0;
margin: 0;
width: auto
}
.article-content .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 .3s ease
}
.article-content .table-wrapper {
padding: 0 var(--card-padding);
overflow-x: auto;
display: block
}
.article-content table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 1.5em;
font-size: .96em
}
.article-content th,
.article-content td {
text-align: left;
padding: 4px 8px 4px 10px;
border: 1px solid var(--table-border-color)
}
.article-content td {
vertical-align: top
}
.article-content tr:nth-child(even) {
background-color: var(--tr-even-background-color)
}
.article-content .twitter-tweet {
color: var(--card-text-color-main)
}
.article-content .video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden
}
.article-content .video-wrapper>iframe,
.article-content .video-wrapper>video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: 0
}
.article-content .gitlab-embed-snippets {
margin: 0 !important
}
.article-content .gitlab-embed-snippets .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
}
.article-content blockquote,
.article-content figure,
.article-content .highlight,
.article-content pre,
.article-content .gallery,
.article-content .video-wrapper,
.article-content .table-wrapper,
.article-content .s_video_simple {
margin-left: calc((var(--card-padding)) * -1);
margin-right: calc((var(--card-padding)) * -1);
width: calc(100% + var(--card-padding) * 2)
}
.article-content .katex-display>.katex {
overflow-x: auto;
overflow-y: hidden
}
.article-content kbd {
border: 1px solid var(--kbd-border-color);
font-weight: 700;
font-size: .9em;
line-height: 1;
padding: 2px 4px;
border-radius: 4px;
display: inline-block
}
.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-card .section-term {
font-size: 2.2rem;
margin: 0;
color: var(--card-text-color-main)
}
.section-card .section-description {
font-weight: 400;
color: var(--card-text-color-secondary);
font-size: 1.6rem;
margin: 0
}
.section-card .section-details {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 8px
}
.section-card .section-image img {
width: 60px;
height: 60px
}
.section-card .section-count {
color: var(--card-text-color-tertiary);
font-size: 1.4rem;
margin: 0;
font-weight: 700;
text-transform: uppercase
}
.subsection-list {
overflow-x: auto
}
.subsection-list .article-list--tile {
display: flex;
padding-bottom: 15px
}
.subsection-list .article-list--tile article {
width: 250px;
height: 150px;
margin-right: 20px;
flex-shrink: 0
}
.subsection-list .article-list--tile article .article-title {
margin: 0;
font-size: 1.8rem
}
.subsection-list .article-list--tile article .article-details {
padding: 20px
}
.not-found-card {
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius);
padding: var(--card-padding)
}
.search-form {
position: relative;
--button-size: 80px
}
.search-form.widget {
--button-size: 60px
}
.search-form.widget label {
font-size: 1.3rem;
top: 10px
}
.search-form.widget input {
font-size: 1.5rem;
padding: 30px 20px 15px
}
.search-form p {
position: relative;
margin: 0
}
.search-form label {
position: absolute;
top: 15px;
inset-inline-start: 20px;
font-size: 1.4rem;
color: var(--card-text-color-tertiary)
}
.search-form 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 .3s ease;
font-size: 1.8rem
}
.search-form input:focus {
outline: 0;
box-shadow: var(--shadow-l2)
}
.search-form 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
}
.search-form button:focus {
outline: 0
}
.search-form button:focus svg {
stroke-width: 2;
color: var(--accent-color)
}
.search-form button svg {
color: var(--card-text-color-secondary);
stroke-width: 1.33;
transition: all .3s ease;
width: 20px;
height: 20px
}
a {
text-decoration: none;
color: var(--accent-color)
}
a:hover {
color: var(--accent-color-darker)
}
a.link {
box-shadow: 0 -2px rgba(var(--link-background-color), var(--link-background-opacity))inset;
transition: all .3s ease
}
a.link:hover {
box-shadow: 0 calc(-1rem * var(--article-line-height))rgba(var(--link-background-color), var(--link-background-opacity-hover))inset
}
.section-title {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 10px;
display: block;
font-size: 1.6rem;
font-weight: 700;
color: var(--body-text-color)
}
.section-title a {
color: var(--body-text-color)
}
:root {
--card-border-radius: 20px;
--main-top-padding: 30px;
--card-border-radius: 25px;
--tag-border-radius: 8px;
--section-separation: 40px;
--article-font-size: 1.8rem
}
a {
word-break: break-all
}
code {
word-break: break-all
}
.main-container {
min-height: 100vh;
align-items: flex-start;
padding: 0 15px;
gap: var(--section-separation);
padding-top: var(--main-top-padding)
}
@media(min-width:768px) {
.main-container {
padding: 0 37px
}
}
.container {
margin-left: auto;
margin-right: auto
}
.container .left-sidebar {
order: -3;
max-width: var(--left-sidebar-max-width)
}
.container .right-sidebar {
order: -1;
max-width: var(--right-sidebar-max-width)
}
@media(min-width:1024px) {
.container .right-sidebar {
display: flex
}
}
@media(min-width:768px) {
.container.extended {
max-width: 1024px;
--left-sidebar-max-width: 25%;
--right-sidebar-max-width: 22% !important
}
}
@media(min-width:1024px) {
.container.extended {
max-width: 1280px;
--left-sidebar-max-width: 20%;
--right-sidebar-max-width: 30%
}
}
@media(min-width:1280px) {
.container.extended {
max-width: 1453px;
--left-sidebar-max-width: 15%;
--right-sidebar-max-width: 25%
}
}
@media(min-width:768px) {
.container.compact {
--left-sidebar-max-width: 25%;
max-width: 768px
}
}
@media(min-width:1024px) {
.container.compact {
max-width: 1024px;
--left-sidebar-max-width: 20%
}
}
@media(min-width:1280px) {
.container.compact {
max-width: 1280px
}
}
::selection {
color: #fff;
background: #557697
}
.article-content code {
color: #d4646b;
background-color: var(--code-background-color);
padding: 2px 4px;
border-radius: var(--tag-border-radius);
font-family: Maple Mono, AlibabaHealth
}
html ::-webkit-scrollbar {
width: 18px
}
html ::-webkit-scrollbar-thumb {
background-color: rgba(111, 114, 115, .65);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box
}
html ::-webkit-scrollbar-thumb:hover {
background-color: #232525
}
.welcome {
color: var(--card-text-color-main);
background: var(--card-background);
box-shadow: var(--shadow-l2);
border-radius: 30px;
display: inline-block
}
.shake {
display: inline-block;
animation: shake 1s;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: shake;
animation-timeline: auto;
animation-range-start: normal;
animation-range-end: normal;
animation-delay: 2s
}
@keyframes shake {
0% {
transform: rotate(0)
}
25% {
transform: rotate(45deg)scale(1.2)
}
50% {
transform: rotate(0)scale(1.2)
}
75% {
transform: rotate(45deg)scale(1.2)
}
100% {
transform: rotate(0)
}
}
.jump-text1 {
display: inline-block;
animation: jump .5s 1
}
.jump-text2 {
display: inline-block;
animation: jump .5s 1;
animation-delay: .1s
}
.jump-text3 {
display: inline-block;
animation: jump .5s 1;
animation-delay: .2s
}
.jump-text4 {
display: inline-block;
animation: jump .5s 1;
animation-delay: .3s
}
.jump-text5 {
display: inline-block;
animation: jump .5s 1;
animation-delay: .4s
}
.jump-text6 {
display: inline-block;
animation: jump .5s 1;
animation-delay: .5s
}
.jump-text7 {
display: inline-block;
animation: jump .5s 1;
animation-delay: .6s
}
.jump-text8 {
display: inline-block;
animation: jump .5s 1;
animation-delay: .7s
}
.jump-text9 {
display: inline-block;
animation: jump .5s 1;
animation-delay: .9s
}
@keyframes jump {
0% {
transform: translateY(0)
}
50% {
transform: translateY(-20px)
}
100% {
transform: translateY(0)
}
}
.main-container {
gap: 50px
}
@media(min-width:768px) {
.main-container {
padding: 0 30px;
gap: 40px
}
}
.related-contents {
overflow-x: visible;
padding-bottom: 15px
}
.article-list article .article-image img {
width: 100%;
height: 150px;
object-fit: cover
}
@media(min-width:640px) {
.article-list article .article-image img {
height: 305px
}
}
@media(min-width:768px) {
.article-list article .article-image img {
height: 305px
}
}
@media(min-width:1280px) {
.article-list article .article-image img {
height: 325px
}
}
.article-list article {
--card-border-radius: 24px
}
.article-category a,
.article-tags a {
border-radius: 11px
}
.article-list article .article-image {
position: relative;
overflow: hidden
}
.article-list article .article-image img:hover {
transform: scale(1.2)
}
.article-list article .article-image img {
transition: transform .85s ease-in-out
}
.article-list--compact article .article-image img {
border-radius: 17%
}
.article-list--compact article>a {
transition: .6s ease
}
.article-list--compact article>a:hover {
transform: scale(1.03, 1.03);
overflow: visible
}
.left-sidebar {
--sidebar-avatar-size: 115px;
--sidebar-element-separation: 15px;
--emoji-size: 40px;
--emoji-font-size: 25px
}
.sidebar header .site-avatar .site-logo {
transition: transform 1.65s ease-in-out
}
.sidebar header .site-avatar .site-logo:hover {
transform: rotate(360deg)
}
.menu-social svg {
gap: 15px;
justify-content: center;
width: 30px;
height: 30px;
stroke: var(--body-text-color);
stroke-width: 1.33
}
.menu .menu-bottom-section {
margin-top: 10px
}
#dark-mode-toggle {
gap: 30px
}
.menu {
list-style: none;
flex-direction: column;
overflow-x: hidden;
overflow-y: scroll;
flex-grow: 1;
font-size: 1.7rem;
box-shadow: var(--shadow-l2);
display: none;
margin: 0;
border-radius: 20px;
padding: 30px
}
@media(min-width:1280px) {
.menu {
padding: 15px 0
}
}
.menu,
.menu .menu-bottom-section {
gap: 30px
}
@media(min-width:1280px) {
.menu,
.menu .menu-bottom-section {
gap: 25px
}
}
.menu.show {
display: flex
}
@media(min-width:768px) {
.menu {
align-items: flex-end;
display: flex;
background-color: transparent;
padding: 0;
box-shadow: none;
margin: 0
}
}
.menu li {
position: relative;
vertical-align: middle;
padding: 0
}
@media(min-width:768px) {
.menu li {
width: 100%
}
}
.menu li svg {
stroke-width: 1.33;
width: 20px;
height: 20px
}
.menu li a {
height: 100%;
display: inline-flex;
align-items: center;
color: var(--body-text-color);
gap: var(--menu-icon-separation)
}
.menu li span {
flex: 1
}
.menu li.current a {
color: var(--accent-color);
font-weight: 700
}
.menu::-webkit-scrollbar {
display: none
}
.sidebar header .site-name {
margin: 8px;
font-size: 2rem
}
.search-form.widget {
transition: transform .6s ease
}
.search-form.widget:hover {
transform: scale(1.1, 1.1)
}
.widget.archives .widget-archive--list {
transition: transform .3s ease
}
.widget.archives .widget-archive--list:hover {
transform: scale(1.05, 1.05)
}
.tagCloud .tagCloud-tags a {
border-radius: 10px;
font-size: 1.4rem;
transition: transform .3s ease
}
.tagCloud .tagCloud-tags a:hover {
transform: scale(1.1, 1.1)
}
.article-list--tile article {
transition: .6s ease
}
.article-list--tile article:hover {
transform: scale(1.03, 1.03)
}
@media(min-width:1024px) {
.article-list--compact.links {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background: 0 0;
box-shadow: none;
gap: 1rem
}
.article-list--compact.links article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
border-radius: var(--card-border-radius)
}
.article-list--compact.links article:nth-child(odd) {
margin-right: 8px
}
}
pre code.hljs {
display: block;
overflow-x: auto;
padding: 0 !important
}
.article-content .languageCodeButton {
position: absolute;
border: none;
top: 9px;
right: 69px;
border-radius: 12px;
opacity: 1;
padding: 0 5px;
background: 0;
color: #ffffffad;
font-family: lato;
font-size: 1.5rem
}
@media(min-width:1024px) {
.article-list--compact {
display: grid;
grid-template-columns: 1fr 1fr;
background: 0 0;
box-shadow: none;
gap: 1rem
}
.article-list--compact article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
border-radius: 16px
}
}
.notice {
position: relative;
padding: 1em 1em 2em 2.5em;
margin-bottom: 1em;
border-radius: 4px
}
.notice p:last-child {
margin-bottom: 0
}
.notice p {
margin-left: 20px
}
.notice .notice-title {
position: absolute;
left: 16px;
margin-top: 17px;
font-size: 1.2em
}
.notice .notice-title .notice-icon {
width: 1.2em;
height: 1.2em
}
.notice.notice-warning {
background: rgba(224, 108, 108, .15);
border-left: 5px solid #e06c6c
}
.notice.notice-info {
background: rgba(240, 179, 117, .15);
border-left: 5px solid #f0b375
}
.notice.notice-note {
background: rgba(108, 185, 224, .15);
border-left: 5px solid #6cb9e0
}
.notice.notice-tip {
background: rgba(108, 224, 146, .15);
border-left: 5px solid #6ce092
}
[data-theme=dark] .notice.notice-warning {
background: rgba(112, 67, 67, .15);
border-left: 5px solid #704343
}
[data-theme=dark] .notice.notice-warning .notice-title {
color: #704343
}
[data-theme=dark] .notice.notice-info {
background: rgba(112, 89, 67, .15);
border-left: 5px solid #705943
}
[data-theme=dark] .notice.notice-info .notice-title {
color: #705943
}
[data-theme=dark] .notice.notice-note {
background: rgba(67, 97, 112, .15);
border-left: 5px solid #436170
}
[data-theme=dark] .notice.notice-note .notice-title {
color: #436170
}
[data-theme=dark] .notice.notice-tip {
background: rgba(67, 112, 82, .15);
border-left: 5px solid #437052
}
[data-theme=dark] .notice.notice-tip .notice-title {
color: #437052
}