diff options
65 files changed, 2257 insertions, 1785 deletions
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml new file mode 100644 index 0000000..8563294 --- /dev/null +++ b/.github/workflows/gh-pages.yml @@ -0,0 +1,33 @@ +name: github pages + +on: + push: + branches: + - main + pull_request: + +jobs: + deploy: + runs-on: ubuntu-20.04 + steps: + - uses: actions/checkout@v2 + with: + submodules: true + fetch-depth: 0 + path: cactus + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2.4.13 + with: + hugo-version: 'latest' + extended: true + + - name: Build + run: cd cactus/exampleSite && hugo --minify --themesDir ../.. --baseURL https://www.takuzen.me/hugo-theme-cactus/ + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3.7.3 + if: github.ref == 'refs/heads/main' + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: cactus/exampleSite/public @@ -38,6 +38,16 @@ hugo server colortheme = "white" # dark, light, white, or classic ``` +### Custom CSS + +```toml +[params] + css = ["css/custom.css"] +``` + +You can add multiple custom stylesheets which will be loaded after the main theme css. +For example, the above line will load the CSS-file placed at `/static/css/custom.css`. + ### Navigation ```toml @@ -65,7 +75,7 @@ weight = 4 ### Homepage settings -* description: description will be displayed in the homepage. +* description: description will be displayed in the homepage. Markdown syntax is supported in the description string. ```toml [params] @@ -79,6 +89,13 @@ weight = 4 mainSection = "posts" ``` +* change the default main section title from Writings, to something else: + +```toml +[params] + mainSectionTitle = "Blog" +``` + * Show only the 5 most recent posts (default) ```toml @@ -94,7 +111,7 @@ weight = 4 postsOnHomePage = 5 # this option will be ignored ``` -* show tagsoverview (defalut) or not +* show tagsoverview (default) or not * ```toml [params] @@ -109,7 +126,7 @@ weight = 4 projectsUrl = "https://github.com/monkeyWzr" ``` -Projects section will not be shown if no data file detecSee [Projects list](#projects-list) below. +Projects section will not be shown if no data file is detected. See [Projects list](#projects-list) below. ### Projects list @@ -189,7 +206,7 @@ disqusShortname = "wzr" # cactus will use site title if not set ### highlight -Use hugo's bulit-in [syntax highlighting](https://gohugo.io/getting-started/configuration-markup#highlight). +Use hugo's built-in [syntax highlighting](https://gohugo.io/getting-started/configuration-markup#highlight). default config: diff --git a/assets/scss/_extend.scss b/assets/scss/_extend.scss new file mode 100644 index 0000000..5eb2d52 --- /dev/null +++ b/assets/scss/_extend.scss @@ -0,0 +1,119 @@ +// $base-style +h1, +.h1 { + display: block; + margin-top: 3rem; + margin-bottom: 1rem; + color: $color-accent-1; + letter-spacing: .01em; + font-weight: 700; + font-style: normal; + font-size: 1.5em; + + @include antialias(); +} +h2, +.h2 { + position: relative; + display: block; + margin-top: 2rem; + margin-bottom: .5rem; + color: $color-accent-2; + text-transform: none; + letter-spacing: normal; + font-weight: bold; + font-size: 1rem; +} +h3 { + color: $color-accent-2; + text-decoration: underline; + font-weight: bold; + font-size: .9rem; +} +h4 +h5 +h6 { + display: inline; + text-decoration: none; + color: $color-accent-3; + font-weight: bold; + font-size: .9rem; +} +h3 +h4 +h5 +h6 { + margin-top: .9rem; + margin-bottom: .5rem; +} +hr { + border: .5px dashed $color-accent-3; + opacity: .5; + margin: 0; + margin-top: 20px; + margin-bottom: 20px; +} +strong { + font-weight: bold; +} +em +cite { + font-style: italic; +} +sup +sub { + position: relative; + vertical-align: baseline; + font-size: .75em; + line-height: 0; +} +sup { + top: -.5em; +} +sub { + bottom: -.2em; +} +small { + font-size: .85em; +} +acronym +abbr { + border-bottom: 1px dotted; +} +ul +ol +dl { + line-height: $line-height; +} +ul ul, +ol ul, +ul ol, +ol ol { + margin-top: 0; + margin-bottom: 0; +} +ol { + list-style: decimal; +} +dt { + font-weight: bold; +} +table { + width: 100%; + border-collapse: collapse; + text-align: left; + font-size: $font-size - 2px; + overflow: auto; + display: block; +} +th { + padding: 8px; + border-bottom: 1px dashed $color-border; + color: $color-accent-2; + font-weight: bold; + font-size: $font-size - 1px; +} +td { + padding: 0 8px; + border-bottom: none; +}
\ No newline at end of file diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss new file mode 100644 index 0000000..cae6f74 --- /dev/null +++ b/assets/scss/_fonts.scss @@ -0,0 +1,6 @@ +@font-face { + font-style: normal; + font-family: "JetBrains Mono"; + font-display: swap; + src: local("JetBrains Mono"), local("JetBrains-Mono"), url("/lib/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2") format("woff2"), url("/lib/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff") format("woff"), url("/lib/JetBrainsMono/web/eot/JetBrainsMono-Regular.eot") format("embedded-opentype"), url("/lib/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf") format("truetype"); +};
\ No newline at end of file diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss new file mode 100644 index 0000000..cc0eda6 --- /dev/null +++ b/assets/scss/_mixins.scss @@ -0,0 +1,20 @@ +@mixin antialias() { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +@mixin hyphens($value) { + hyphens: $value; + -moz-hyphens: $value; + -ms-hyphens: $value; + -webkit-hyphens: $value; +} +@mixin underline($size, $color) { + background-image: linear-gradient(transparent, transparent $size, $color $size, $color); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +@mixin no-select() { + user-select: none; + -khtml-user-select: none; +}
\ No newline at end of file diff --git a/assets/scss/_util.scss b/assets/scss/_util.scss new file mode 100644 index 0000000..83cbc8c --- /dev/null +++ b/assets/scss/_util.scss @@ -0,0 +1,319 @@ +/* Basscss */ +.inline { + display: inline; +} +.block { + display: block; +} +.inline-block { + display: inline-block; +} +.table { + display: table; +} +.table-cell { + display: table-cell; +} +.overflow-hidden { + overflow: hidden; +} +.overflow-scroll { + overflow: scroll; +} +.overflow-auto { + overflow: auto; +} +.clearfix:before, +.clearfix:after { + display: table; + content: " "; +} +.clearfix:after { + clear: both; +} +.left { + float: left; +} +.right { + float: right; +} +.fit { + max-width: 100%; +} +.truncate { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.max-width-1 { + max-width: 24rem; +} +.max-width-2 { + max-width: 32rem; +} +.max-width-3 { + max-width: 48rem; +} +.max-width-4 { + max-width: 64rem; +} +.border-box { + box-sizing: border-box; +} +.m0 { + margin: 0; +} +.mt0 { + margin-top: 0; +} +.mr0 { + margin-right: 0; +} +.mb0 { + margin-bottom: 0; +} +.ml0 { + margin-left: 0; +} +.mx0 { + margin-right: 0; + margin-left: 0; +} +.my0 { + margin-top: 0; + margin-bottom: 0; +} +.m1 { + margin: .5rem; +} +.mt1 { + margin-top: .5rem; +} +.mr1 { + margin-right: .5rem; +} +.mb1 { + margin-bottom: .5rem; +} +.ml1 { + margin-left: .5rem; +} +.mx1 { + margin-right: .5rem; + margin-left: .5rem; +} +.my1 { + margin-top: .5rem; + margin-bottom: .5rem; +} +.m2 { + margin: 1rem; +} +.mt2 { + margin-top: 1rem; +} +.mr2 { + margin-right: 1rem; +} +.mb2 { + margin-bottom: 1rem; +} +.ml2 { + margin-left: 1rem; +} +.mx2 { + margin-right: 1rem; + margin-left: 1rem; +} +.my2 { + margin-top: 1rem; + margin-bottom: 1rem; +} +.m3 { + margin: 2rem; +} +.mt3 { + margin-top: 2rem; +} +.mr3 { + margin-right: 2rem; +} +.mb3 { + margin-bottom: 2rem; +} +.ml3 { + margin-left: 2rem; +} +.mx3 { + margin-right: 2rem; + margin-left: 2rem; +} +.my3 { + margin-top: 2rem; + margin-bottom: 2rem; +} +.m4 { + margin: 4rem; +} +.mt4 { + margin-top: 4rem; +} +.mr4 { + margin-right: 4rem; +} +.mb4 { + margin-bottom: 4rem; +} +.ml4 { + margin-left: 4rem; +} +.mx4 { + margin-right: 4rem; + margin-left: 4rem; +} +.my4 { + margin-top: 4rem; + margin-bottom: 4rem; +} +.mxn1 { + margin-right: -.5rem; + margin-left: -.5rem; +} +.mxn2 { + margin-right: -1rem; + margin-left: -1rem; +} +.mxn3 { + margin-right: -2rem; + margin-left: -2rem; +} +.mxn4 { + margin-right: -4rem; + margin-left: -4rem; +} +.ml-auto { + margin-left: auto; +} +.mr-auto { + margin-right: auto; +} +.mx-auto { + margin-right: auto; + margin-left: auto; +} +.p0 { + padding: 0; +} +.pt0 { + padding-top: 0; +} +.pr0 { + padding-right: 0; +} +.pb0 { + padding-bottom: 0; +} +.pl0 { + padding-left: 0; +} +.px0 { + padding-right: 0; + padding-left: 0; +} +.py0 { + padding-top: 0; + padding-bottom: 0; +} +.p1 { + padding: .5rem; +} +.pt1 { + padding-top: .5rem; +} +.pr1 { + padding-right: .5rem; +} +.pb1 { + padding-bottom: .5rem; +} +.pl1 { + padding-left: .5rem; +} +.py1 { + padding-top: .5rem; + padding-bottom: .5rem; +} +.px1 { + padding-right: .5rem; + padding-left: .5rem; +} +.p2 { + padding: 1rem; +} +.pt2 { + padding-top: 1rem; +} +.pr2 { + padding-right: 1rem; +} +.pb2 { + padding-bottom: 1rem; +} +.pl2 { + padding-left: 1rem; +} +.py2 { + padding-top: 1rem; + padding-bottom: 1rem; +} +.px2 { + padding-right: 1rem; + padding-left: 1rem; +} +.p3 { + padding: 2rem; +} +.pt3 { + padding-top: 2rem; +} +.pr3 { + padding-right: 2rem; +} +.pb3 { + padding-bottom: 2rem; +} +.pl3 { + padding-left: 2rem; +} +.py3 { + padding-top: 2rem; + padding-bottom: 2rem; +} +.px3 { + padding-right: 2rem; + padding-left: 2rem; +} +.p4 { + padding: 4rem; +} +.pt4 { + padding-top: 4rem; +} +.pr4 { + padding-right: 4rem; +} +.pb4 { + padding-bottom: 4rem; +} +.pl4 { + padding-left: 4rem; +} +.py4 { + padding-top: 4rem; + padding-bottom: 4rem; +} +.px4 { + padding-right: 4rem; + padding-left: 4rem; +}
\ No newline at end of file diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..279b5b9 --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1,13 @@ +// Fonts +$font-family-body: "JetBrains Mono", monospace; +$font-family-mono: "JetBrains Mono", monospace; +$font-family-tt: "Inconsolata", monospace; +$font-size: 14px; +$line-height: 1.725; +$page-width: 48rem; +// Logo +$logo-width: 50px; +$logo-height: 50px; +$logo-grayout: true; +// Colors +$colors: "dark" // white dark light classic
\ No newline at end of file diff --git a/assets/scss/colors/classic.scss b/assets/scss/colors/classic.scss new file mode 100644 index 0000000..7ff8cb2 --- /dev/null +++ b/assets/scss/colors/classic.scss @@ -0,0 +1,13 @@ +$color-background: #fafafa; +$color-footer-mobile-1: darken($color-background, 2%); +$color-footer-mobile-2: darken($color-background, 10%); +$color-background-code: darken($color-background, 2%); +$color-border: #666; +$color-meta: #666; +$color-meta-code: lighten($color-meta, 10%); +$color-link: rgba(86, 124, 119, .4); +$color-text: #22272a; +$color-accent-1: #cc2a41; +$color-accent-2: rgba(86, 124, 119, .8); +$color-accent-3: #666; +$color-quote: #cc2a41;
\ No newline at end of file diff --git a/assets/scss/colors/dark.scss b/assets/scss/colors/dark.scss new file mode 100644 index 0000000..c7fc243 --- /dev/null +++ b/assets/scss/colors/dark.scss @@ -0,0 +1,13 @@ +$color-background: #1d1f21; +$color-footer-mobile-1: lighten($color-background, 2%); +$color-footer-mobile-2: lighten($color-background, 10%); +$color-background-code: lighten($color-background, 2%); +$color-border: #666; +$color-meta: #666; +$color-meta-code: #666; +$color-link: rgba(212, 128, 170, 1); +$color-text: #c9cacc; +$color-accent-3: #cccccc; +$color-accent-2: #eeeeee; +$color-accent-1: #2bbc8a; +$color-quote: #ccffb6;
\ No newline at end of file diff --git a/assets/scss/colors/light.scss b/assets/scss/colors/light.scss new file mode 100644 index 0000000..dcfcbd6 --- /dev/null +++ b/assets/scss/colors/light.scss @@ -0,0 +1,14 @@ +// by @GabiThume (https://github.com/gabithume) +$color-background: #e2e0de; +$color-footer-mobile-1: darken($color-background, 2%); +$color-footer-mobile-2: darken($color-background, 10%); +$color-background-code: darken($color-background, 2%); +$color-border: #666; +$color-meta: #666; +$color-meta-code: lighten($color-meta, 10%); +$color-link: rgba(43, 188, 138, 1); +$color-text: #363533; +$color-accent-3: #666666; +$color-accent-2: #111111; +$color-accent-1: #d44375; +$color-quote: #ab2251;
\ No newline at end of file diff --git a/assets/scss/colors/white.scss b/assets/scss/colors/white.scss new file mode 100644 index 0000000..a4d1547 --- /dev/null +++ b/assets/scss/colors/white.scss @@ -0,0 +1,14 @@ +// by @sergodeeva (https://github.com/sergodeeva) +$color-background: #FFFFFF; +$color-footer-mobile-1: darken($color-background, 2%); +$color-footer-mobile-2: darken($color-background, 10%); +$color-background-code: darken($color-background, 2%); +$color-border: #666; +$color-meta: #666; +$color-meta-code: lighten($color-meta, 10%); +$color-link: rgba(212, 128, 170, 1); +$color-text: #383838; +$color-accent-3: #8c8c8c; +$color-accent-2: #383838; +$color-accent-1: #2bbc8a; +$color-quote: #2bbc8a;
\ No newline at end of file diff --git a/assets/scss/partial/archive.scss b/assets/scss/partial/archive.scss new file mode 100644 index 0000000..139c583 --- /dev/null +++ b/assets/scss/partial/archive.scss @@ -0,0 +1,32 @@ +#archive { + .post-list { + padding: 0; + + .post-item { + margin-bottom: 1rem; + margin-left: 0; + list-style-type: none; + + .meta { + display: block; + margin-right: 16px; + min-width: 100px; + color: $color-meta; + font-size: 14px; + } + } + } + @media (min-width: 480px) { + .post-list { + .post-item { + display: flex; + margin-bottom: 5px; + margin-left: 1rem; + + .meta { + text-align: left; + } + } + } + } +}
\ No newline at end of file diff --git a/assets/scss/partial/article.scss b/assets/scss/partial/article.scss new file mode 100644 index 0000000..82a005f --- /dev/null +++ b/assets/scss/partial/article.scss @@ -0,0 +1,158 @@ +article { + header { + .posttitle { + margin-top: 0; + margin-bottom: 0; + text-transform: none; + font-size: 1.5em; + line-height: 1.25; + } + .meta { + margin-top: 0; + margin-bottom: 1rem; + } + .meta * { + color: $color-accent-3; + font-size: .85rem; + } + .author { + text-transform: uppercase; + letter-spacing: .01em; + font-weight: 700; + } + .postdate { + display: inline; + } + } + .content { + h2 { + &:before { + position: absolute; + top: -4px; + left: -1rem; + color: $color-accent-1; + content: "#"; + font-weight: bold; + font-size: 1.2rem; + } + } + } + .content img, + .content video { + display: block; + margin: auto; + max-width: 100%; + height: auto; + + /* http://webdesignerwall.com/tutorials/css-elastic-videos */ + .video-container { + position: relative; + overflow: hidden; + padding-top: 56.25% e; + // (9/16 * 100)% // 16:9 ratio + height: 0; + + iframe, + object, + embed { + position: absolute; + top: 0; + left: 0; + margin-top: 0; + width: 100%; + height: 100%; + } + } + blockquote { + margin: 1rem 10px; + padding: .5em 10px; + background: inherit; + color: $color-quote; + quotes: "\201C" "\201D" "\2018" "\2019"; + font-weight: bold; + + p { + margin: 0; + } + &:before { + margin-right: .25em; + color: $color-quote; + content: "\201C"; + vertical-align: -.4em; + font-size: 2em; + line-height: .1em; + } + footer { + margin: line-height 0; + color: $color-meta; + font-size: 11px; + + a { + background-image: linear-gradient(transparent, transparent 5px, $color-meta 5px, $color-meta); + color: $color-meta; + } + a:hover { + background-image: linear-gradient(transparent, transparent 4px, lighten($color-meta, 20%) 4px, lighten($color-meta, 20%)); + color: lighten($color-meta, 20%); + } + cite { + &:before { + padding: 0 .5em; + content: "—"; + } + } + } + } + .pullquote { + margin: 0; + width: 45%; + text-align: left; + + &.left { + margin-right: 1em; + margin-left: .5em; + } + &.right { + margin-right: .5em; + margin-left: 1em; + } + } + .caption { + position: relative; + display: block; + margin-top: .5em; + color: $color-meta; + text-align: center; + font-size: .9em; + } + } +} +.posttitle { + text-transform: none; + font-size: 1.5em; + line-height: 1.25; +} +.article-tag { + .tag-link { + &:before { + content: "#"; + @include underline(10px, $color-link); + } + } +} +.article-category { + .category-link { + @include underline(10px, $color-link); + } +} +@media (min-width: 480px) { + .article-read-time, + .article-tag, + .article-category { + display: inline; + + &:before { + content: "|"; + } + } +};
\ No newline at end of file diff --git a/assets/scss/partial/categories.scss b/assets/scss/partial/categories.scss new file mode 100644 index 0000000..dc75239 --- /dev/null +++ b/assets/scss/partial/categories.scss @@ -0,0 +1,18 @@ +#categories { + .category-list-title { + color: $color-meta; + } + .category-list { + .category-list-item { + .category-list-count { + color: $color-meta; + } + .category-list-count:before { + content: " ("; + } + .category-list-count:after { + content: ")"; + } + } + } +}
\ No newline at end of file diff --git a/assets/scss/partial/comments.scss b/assets/scss/partial/comments.scss new file mode 100644 index 0000000..2ed3c9d --- /dev/null +++ b/assets/scss/partial/comments.scss @@ -0,0 +1,3 @@ +.blog-post-comments { + margin-top: 4rem; +}
\ No newline at end of file diff --git a/assets/scss/partial/footer.scss b/assets/scss/partial/footer.scss new file mode 100644 index 0000000..da52981 --- /dev/null +++ b/assets/scss/partial/footer.scss @@ -0,0 +1,66 @@ +#footer { + position: absolute; + bottom: 0; + margin-bottom: 10px; + width: 100%; + color: $color-meta; + vertical-align: top; + text-align: center; + font-size: 11px; + + ul { + margin: 0; + padding: 0; + list-style: none; + } + li { + display: inline-block; + margin-right: 15px; + border-right: 1px solid; + border-color: $color-border; + vertical-align: middle; + + a { + margin-right: 15px; + } + } + li:last-child { + margin-right: 0; + border-right: 0; + + a { + margin-right: 0; + } + } + a { + color: $color-meta; + text-decoration: underline; + background-image: none; + } + a:hover { + color: lighten($color-meta, 20%); + } + .footer-left { + height: 20px; + vertical-align: middle; + line-height: 20px; + } +} +@media (min-width: 39rem) { + #footer { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + align-content: center; + margin-bottom: 20px; + + .footer-left { + align-self: flex-start; + margin-right: 20px; + } + .footer-right { + align-self: flex-end; + } + } +};
\ No newline at end of file diff --git a/assets/scss/partial/header.scss b/assets/scss/partial/header.scss new file mode 100644 index 0000000..cbb83ff --- /dev/null +++ b/assets/scss/partial/header.scss @@ -0,0 +1,123 @@ +#header { + margin: 0 auto 2rem; + width: 100%; + + h1, + .h1 { + margin-top: 0; + margin-bottom: 0; + color: $color-text; + letter-spacing: .01em; + font-weight: 700; + font-style: normal; + font-size: 1.5rem; + line-height: 2rem; + + @include antialias(); + } + a { + background: none; + color: inherit; + text-decoration: none; + } + #logo { + display: inline-block; + float: left; + margin-right: 20px; + width: $logo-width; + height: $logo-height; + border-radius: 5px; + background-size: $logo-width $logo-height; + background-repeat: no-repeat; + @if $logo-grayout { + filter: grayscale(100%); + -webkit-filter: grayscale(100%); + } + } + #nav { + color: $color-accent-1; + letter-spacing: .01em; + font-weight: 200; + font-style: normal; + font-size: .8rem; + + ul { + margin: 0; + padding: 0; + list-style-type: none; + line-height: 15px; + + a { + margin-right: 15px; + color: $color-accent-1; + } + a:hover { + @include underline(5px, $color-accent-1); + } + li { + display: inline-block; + margin-right: 15px; + border-right: 1px dotted; + border-color: $color-accent-1; + vertical-align: middle; + } + .icon { + display: none; + } + li:last-child { + margin-right: 0; + border-right: 0; + + a { + margin-right: 0; + } + } + } + } +} +@if $logo-grayout { + #header:hover { + #logo { + filter: none; + -webkit-filter: none; + } + } +} +@media screen and (max-width: 480px) { + #header #title { + display: table; + margin-right: 5rem; + min-height: $logo-height; + h1 { + display: table-cell; + vertical-align: middle; + } + } + #header #nav { + ul { + a:hover { + background: none; + } + li { + display: none; + border-right: 0; + } + li.icon { + position: absolute; + top: 77px; + right: 1rem; + display: inline-block; + } + } + ul.responsive { + li { + display: block; + } + } + li:not(:first-child) { + padding-top: 1rem; + padding-left: $logo-width + 20px; + font-size: 1rem; + } + } +};
\ No newline at end of file diff --git a/assets/scss/partial/index.scss b/assets/scss/partial/index.scss new file mode 100644 index 0000000..4ae7639 --- /dev/null +++ b/assets/scss/partial/index.scss @@ -0,0 +1,40 @@ +.post-list { + padding: 0; + + .post-item { + margin-bottom: 1rem; + margin-left: 0; + list-style-type: none; + + .meta { + display: block; + margin-right: 16px; + min-width: 100px; + color: $color-meta; + font-size: 14px; + } + } +} +@media (min-width: 480px) { + .post-list { + .post-item { + display: flex; + margin-bottom: 5px; + + .meta { + text-align: left; + } + } + } +} +.project-list { + padding: 0; + list-style: none; + + .project-item { + margin-bottom: 5px; + p { + display: inline; + } + } +}
\ No newline at end of file diff --git a/assets/scss/partial/pagination.scss b/assets/scss/partial/pagination.scss new file mode 100644 index 0000000..eecc53c --- /dev/null +++ b/assets/scss/partial/pagination.scss @@ -0,0 +1,25 @@ +.pagination { + display: inline-block; + margin-top: 2rem; + width: 100%; + text-align: center; + + .page-number { + color: $color-text; + font-size: .8rem; + } + a { + padding: 4px 6px; + border-radius: 5px; + // background-color: $color-accent-1 + background-image: none; + color: $color-text; + text-decoration: none; + } + a:hover { + background-image: none; + } + a:hover:not(.active) { + color: $color-accent-2; + } +}
\ No newline at end of file diff --git a/assets/scss/partial/post/actions_desktop.scss b/assets/scss/partial/post/actions_desktop.scss new file mode 100644 index 0000000..35aaf71 --- /dev/null +++ b/assets/scss/partial/post/actions_desktop.scss @@ -0,0 +1,256 @@ +#header-post { + position: fixed; + top: 2rem; + right: 0; + display: inline-block; + float: right; + z-index: 100; + + a { + background: none; + color: inherit; + text-decoration: none; + } + a.icon { + background: none; + + &:hover { + color: $color-link; + } + } + nav { + ul { + display: block; + + list-style-image: none; + + list-style-position: outside; + + list-style-type: none; + + padding-inline-start: 40px; + + li { + display: list-item; + + margin-right: 0px; + } + } + } + nav > ul { + margin-block-end: 1em; + + margin-block-start: 1em; + } + + ul { + display: inline-block; + margin: 0; + padding: 0; + list-style-type: none; + + li { + display: inline-block; + margin-right: 15px; + vertical-align: middle; + } + li:last-child { + margin-right: 0; + } + } + #menu-icon { + float: right; + margin-right: 2rem; + margin-left: 15px; + + &:hover { + color: $color-accent-1; + } + } + #menu-icon-tablet { + float: right; + margin-right: 2rem; + margin-left: 15px; + + &:hover { + color: $color-accent-1; + } + } + #top-icon-tablet { + position: fixed; + right: 2rem; + bottom: 2rem; + margin-right: 2rem; + margin-left: 15px; + + &:hover { + color: $color-accent-1; + } + } + .active { + color: $color-accent-1; + } + #menu { + visibility: hidden; + margin-right: 2rem; + } + #nav { + color: $color-accent-1; + letter-spacing: .01em; + font-weight: 200; + font-style: normal; + font-size: .8rem; + + ul { + line-height: 15px; + + a { + margin-right: 15px; + color: $color-accent-1; + } + a:hover { + @include underline(5px, $color-accent-1); + } + li { + border-right: 1px dotted $color-accent-1; + } + li:last-child { + margin-right: 0; + border-right: 0; + + a { + margin-right: 0; + } + } + } + } + #actions { + float: right; + margin-top: 2rem; + margin-right: 2rem; + width: 100%; + text-align: right; + + ul { + display: block; + } + .info { + display: block; + font-style: italic; + } + } + #share { + clear: both; + padding-top: 1rem; + padding-right: 2rem; + text-align: right; + + li { + display: block; + margin: 0; + } + } + #toc { + float: right; + clear: both; + overflow: auto; + margin-top: 1rem; + padding-right: 2rem; + max-width: 20em; + max-height: calc(95vh - 7rem); + text-align: right; + + a:hover { + color: $color-link; + } + // .toc-level-1 > .toc-link + // display: none + + nav > ul > li { + color: $color-text; + font-size: .8rem; + + &:before { + color: $color-accent-1; + content: "#"; + margin-right: 8px; + } + } + nav > ul > li > ul > li { + color: $color-meta; + font-size: .7rem; + + &:before { + color: $color-accent-1; + content: "·"; + font-weight: bold; + margin-right: 3px; + } + } + nav > ul > li > ul > li > ul > li { + color: darken($color-meta, 20%); + font-size: .4rem; + } + .toc-level-5 { + display: none; + } + .toc-level-6 { + display: none; + } + .toc-number { + display: none; + } +// smartphone + phapblet + } +} +@media screen and (max-width: 500px) { + #header-post { + display: none; + } +} + +@media screen and (max-width: 900px) { + #header-post { + #menu-icon { + display: none; + } + #actions { + display: none; + } + } +} +@media screen and (max-width: 1199px) { + #header-post { + #toc { + display: none; + } + } +} +@media screen and (min-width: 900px) { + #header-post { + #menu-icon-tablet { + display: none !important; + } + #top-icon-tablet { + display: none !important; + } + } +} +@media screen and (min-width: 1199px) { + #header-post { + #actions { + width: auto; + + ul { + display: inline-block; + float: right; + } + .info { + display: inline; + float: left; + margin-right: 2rem; + font-style: italic; + } + } + } +};
\ No newline at end of file diff --git a/assets/scss/partial/post/actions_mobile.scss b/assets/scss/partial/post/actions_mobile.scss new file mode 100644 index 0000000..b4acd51 --- /dev/null +++ b/assets/scss/partial/post/actions_mobile.scss @@ -0,0 +1,154 @@ +#footer-post { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 5000000; + width: 100%; + border-top: 1px solid $color-border; + background: $color-footer-mobile-1; + transition: opacity .2s; + + a { + background: none; + color: inherit; + text-decoration: none; + } + a.icon { + background: none; + + &:hover { + color: $color-link; + } + } + #nav-footer { + padding-right: 1rem; + padding-left: 1rem; + background: $color-footer-mobile-2; + text-align: center; + + a { + color: $color-accent-1; + font-size: 1em; + } + a:hover { + @include underline(5px, $color-accent-1); + } + ul { + display: table; + margin: 0; + padding: 0; + width: 100%; + list-style-type: none; + + li { + display: inline-table; + padding: 10px; + width: 20%; + vertical-align: middle; + } + } + } + #actions-footer { + overflow: auto; + margin-top: 1rem; + margin-bottom: 1rem; + padding-right: 1rem; + padding-left: 1rem; + width: 100%; + text-align: center; + white-space: nowrap; + + a { + display: inline-block; + padding-left: 1rem; + color: $color-accent-1; + } + } + #share-footer { + padding-right: 1rem; + padding-left: 1rem; + background: $color-footer-mobile-2; + text-align: center; + + ul { + display: table; + margin: 0; + padding: 0; + width: 100%; + list-style-type: none; + + li { + display: inline-table; + padding: 10px; + width: 20%; + vertical-align: middle; + } + } + } + #toc-footer { + clear: both; + padding-top: 1rem; + padding-bottom: 1rem; + background: $color-footer-mobile-2; + text-align: left; + + #TableOfContents { + ul { + margin: 0; + padding-left: 20px; + list-style-type: none; + + li { + line-height: 30px; + } + } + } + a:hover { + color: $color-link; + } + // .toc-level-1 > .toc-link + // display: none + + #TableOfContents > ul > li { + color: $color-text; + font-size: .8rem; + + &:before { + color: $color-accent-1; + content: "#"; + margin-right: 8px; + } + } + #TableOfContents > ul > li > ul > li { + color: $color-meta; + font-size: .7rem; + line-height: 15px; + + &:before { + color: $color-accent-1; + content: "·"; + + font-weight: bold; + + margin-right: 3px; + } + } + #TableOfContents > ul > li > ul > li > ul > li { + display: none; + } + // .toc-level-5 + // display: none + + // .toc-level-6 + // display: none + + // .toc-number + // display: none + } +} +@media screen and (min-width: 500px) { + #footer-post-container { + display: none; + } +};
\ No newline at end of file diff --git a/assets/scss/partial/search.scss b/assets/scss/partial/search.scss new file mode 100644 index 0000000..2965c63 --- /dev/null +++ b/assets/scss/partial/search.scss @@ -0,0 +1,49 @@ +.search-input { + padding: 4px 7px; + width: 100%; + outline: none; + border: solid 1px $color-accent-3; + border-radius: 5px; + background-color: $color-background; + color: $color-text; + font-size: 1.2rem; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + + &:focus { + border: solid 1px $color-accent-1; + } +} +#search-result { + ul.search-result-list { + padding: 0; + list-style-type: none; + } + li { + margin: 2em auto; + } + a.search-result-title { + background-image: none; + color: $color-text; + text-transform: capitalize; + font-weight: bold; + line-height: 1.2; + } + p.search-result { + overflow: hidden; + margin: .4em auto; + max-height: 13em; + text-align: justify; + font-size: .8em; + } + em.search-keyword { + border-bottom: 1px dashed $color-link; + color: $color-link; + font-weight: bold; + } +} +.search-no-result { + display: none; + padding-bottom: .5em; + color: $color-text; +}
\ No newline at end of file diff --git a/assets/scss/partial/tags.scss b/assets/scss/partial/tags.scss new file mode 100644 index 0000000..1af38ef --- /dev/null +++ b/assets/scss/partial/tags.scss @@ -0,0 +1,13 @@ +#tag-cloud { + .tag-cloud-title { + color: $color-meta; + } + .tag-cloud-tags { + clear: both; + text-align: center; + a { + display: inline-block; + margin: 10px; + } + } +}
\ No newline at end of file diff --git a/assets/scss/partial/tooltip.scss b/assets/scss/partial/tooltip.scss new file mode 100644 index 0000000..9cb6cd6 --- /dev/null +++ b/assets/scss/partial/tooltip.scss @@ -0,0 +1,86 @@ +// ref: https://github.com/primer/primer/blob/master/modules/primer-tooltips/lib/tooltips.scss +.tooltipped { + position: relative; +} +// This is the tooltip bubble +.tooltipped::after { + position: absolute; + z-index: 1000000; + display: none; + padding: .2em .5em; + -webkit-font-smoothing: subpixel-antialiased; + color: $color-background; + font-display: swap; + font-weight: 400; + font-size: $font-size * 0.8; + font-family: $font-family-body; + line-height: $line-height; + text-rendering: geometricPrecision; + text-align: center; + word-wrap: break-word; + white-space: pre; + content: attr(aria-label); + background: $color-text; + border-radius: 3px; + opacity: 0; +} +// This is the tooltip arrow +.tooltipped::before { + position: absolute; + z-index: 1000001; + display: none; + width: 0; + height: 0; + color: $color-text; + pointer-events: none; + content: ''; + border: 6px solid transparent; + opacity: 0; +} +// delay animation for tooltip +@keyframes tooltip-appear { + from { + opacity: 0; + } + to { + opacity: 1; + } +}; + +// This will indicate when we'll activate the tooltip +.tooltipped:hover, +.tooltipped:active, +.tooltipped:focus { + &::before, + &::after { + display: inline-block; + text-decoration: none; + animation-name: tooltip-appear; + animation-duration: 0.1s; + animation-fill-mode: forwards; + animation-timing-function: ease-in; + } +// Tooltipped south +} +.tooltipped-s, +.tooltipped-sw { + &::after { + top: 100%; + right: 50%; + margin-top: 6px; + } + &::before { + top: auto; + right: 50%; + bottom: -7px; + margin-right: -6px; + border-bottom-color: $color-text; + } +} +.tooltipped-sw::after { + margin-right: -16px; +} +// Move the tooltip body to the center of the object. +.tooltipped-s::after { + transform: translateX(50%); +}
\ No newline at end of file diff --git a/assets/scss/rtl.scss b/assets/scss/rtl.scss new file mode 100644 index 0000000..44aebba --- /dev/null +++ b/assets/scss/rtl.scss @@ -0,0 +1,105 @@ +@font-face { + font-family: Vazir; + src: url('../lib/vazir-font/Vazir.eot'); + src: url("../lib/vazir-font/Vazir.eot?#iefix") format('embedded-opentype'), url("../lib/vazir-font/Vazir.woff2") format('woff2'), url("../lib/vazir-font/Vazir.woff") format('woff'), url("../lib/vazir-font/Vazir.ttf") format('truetype'); + font-weight: normal; +} + +@font-face { + font-family: Vazir; + src: url('../lib/vazir-font/Vazir-Bold.eot'); + src: url("../lib/vazir-font/Vazir-Bold.eot?#iefix") format('embedded-opentype'), url("../lib/vazir-font/Vazir-Bold.woff2") format('woff2'), url("../lib/vazir-font/Vazir-Bold.woff") format('woff'), url("../lib/vazir-font/Vazir-Bold.ttf") format('truetype'); + font-weight: bold; +} + +@font-face { + font-family: Vazir; + src: url('../lib/vazir-font/Vazir-Light.eot'); + src: url("../lib/vazir-font/Vazir-Light.eot?#iefix") format('embedded-opentype'), url("../lib/vazir-font/Vazir-Light.woff2") format('woff2'), url("../lib/vazir-font/Vazir-Light.woff") format('woff'), url("../lib/vazir-font/Vazir-Light.ttf") format('truetype'); + font-weight: 300; +} + +.rtl { + font-family: Vazir, sans-serif; + direction: rtl; + + #nav { + li { + margin-right: 0px !important; + padding-left: 15px; + border-right: 0px !important; + border-left: 1px dotted; + } + li:last-child { + margin-right: 15px !important; + border-left: 0 !important; + } + } + #header { + #logo { + float: right; + margin-right: 0; + margin-left: 20px; + } + } + #footer { + li { + margin-right: 0px; + padding-left: 15px; + border-right: 0px; + border-left: 1px dotted; + } + li:last-child { + margin-right: 15px !important; + border-left: 0 !important; + } + #logo { + float: right; + } + } + article { + .content { + h2:before { + right: -1rem; + } + } + } + .post-list { + .post-item { + .meta { + margin-left: 16px; + margin-right: inherit; + } + } + } +} +@media screen and (min-width: 480px) { + .rtl { + .post-list { + .post-item { + .meta { + text-align: left; + } + } + } + } +} +@media screen and (max-width: 480px) { + .rtl { + #header { + #title { + margin-left: 5rem; + margin-right: 0; + } + #nav { + ul { + li { + left: 1rem; + right: auto; + border: 0; + } + } + } + } + } +};
\ No newline at end of file diff --git a/assets/scss/style.scss b/assets/scss/style.scss new file mode 100644 index 0000000..f9c0691 --- /dev/null +++ b/assets/scss/style.scss @@ -0,0 +1,231 @@ +@import "variables"; +@import "colors/{{ site.Params.colortheme }}"; +@import "util"; +@import "mixins"; +@import "extend"; +@import "fonts"; + +// global-reset() + +*, +*:before, +*:after { + box-sizing: border-box; +} +html { + margin: 0; + padding: 0; + height: 100%; + border-top: 2px solid $color-text; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + margin: 0; + height: 100%; + background-color: $color-background; + color: $color-text; + font-display: swap; + font-weight: 400; + font-size: $font-size; + font-family: $font-family-body; + line-height: $line-height; + text-rendering: geometricPrecision; + flex: 1; + + @include antialias(); + + @extend $base-style !optional; +} +.content { + position: relative; + display: flex; + flex-direction: column; + min-height: 100%; + overflow-wrap: break-word; + + p { + @include hyphens(auto); + } + code { + @include hyphens(manual); + } + a { + color: $color-text; + text-decoration: none; + + @include underline(5px, $color-text); + + &:hover { + background-image: linear-gradient(transparent, transparent 4px, $color-link 4px, $color-link); + } + } + a.icon { + background: none; + + &:hover { + color: $color-link; + } + } + h1 a, + .h1 a, + h2 a, + h3 a, + h4 a, + h5 a, + h6 a { + background: none; + color: inherit; + text-decoration: none; + } + h1 a:hover, + .h1 a:hover, + h2 a:hover, + h3 a:hover, + h4 a:hover, + h5 a:hover, + h6 a:hover { + @include underline(6px, $color-link); + } + h6 { + a { + background: none; + color: inherit; + text-decoration: none; + } + } + h6 { + a:hover { + @include underline(6px, $color-link); + } + } +} +@media (min-width: 540px) { + .image-wrap { + flex-direction: row; + margin-bottom: 2rem; + + .image-block { + flex: 1 0 35%; + margin-right: 2rem; + } + p { + flex: 1 0 65%; + } + } +} +.max-width { + max-width: $page-width; +} +@media (max-width: 480px) { // smaller margins at smaller screen widths + .px3 { + padding-right: 1rem; + padding-left: 1rem; + } + .my4 { + margin-top: 2rem; + margin-bottom: 2rem; + } +} + +@media (min-width: 480px) { + p { + text-align: justify; + } +} + +@import "partial/header"; +@import "partial/post/actions_desktop"; +@import "partial/post/actions_mobile"; +@import "partial/index"; +@import "partial/article"; +@import "partial/archive"; +@import "partial/comments"; +@import "partial/footer"; +@import "partial/pagination"; +@import "partial/search"; +@import "partial/tags"; +@import "partial/tooltip"; +@import "partial/categories"; + +pre { + overflow-x: auto; + padding: 15px 15px 10px 15px; + border: 1px dotted $color-border; + border-radius: 2px; + -webkit-border-radius: 2px; + font-size: 13px; + font-family: $font-family-mono; + line-height: 22px; + position: relative; + + .code-copy-btn { + position: absolute; + top: 0; + right: 0; + border: 0; + border-radius: 0 2px; + padding: 0; + font-family: "JetBrains Mono", monospace; + font-weight: 800; + font-size: 0.9em; + line-height: 1.7; + color: #fff; + background-color: #8c8c8c; + min-width: 60px; + text-align: center; + cursor: pointer; + letter-spacing: 0em; + } + + .code-copy-btn:hover { + background-color: #666; + color: #2bbc8a; + } + + code { + display: block; + padding: 0; + border: none; + } +} + +code { + font-family: $font-family-mono; + padding: 0 5px; + border: 1px dotted $color-border; + border-radius: 2px; + -webkit-border-radius: 2px; +} + +.highlight { + + & > div { + border-radius: 2px; + -webkit-border-radius: 2px; + } + + pre { + border: none; + background: none; + } + + table { + + pre { + margin-top: 0; + } + + td:first-child { + pre { + padding-right: 0; + } + } + + td:last-child { + pre { + padding-left: 0; + } + } + } +}
\ No newline at end of file diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 65e445a..dd0e4ef 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -35,6 +35,16 @@ weight = 4 endLevel = 4 ordered = false startLevel = 2 + [markup.highlight] + codeFences = true + guessSyntax = false + hl_Lines = "" + lineNoStart = 1 + lineNos = true + lineNumbersInTable = false + noClasses = true + style = "dracula" + tabWidth = 4 [params] @@ -55,7 +65,8 @@ weight = 4 dateFormat = "2006-01-02" # default # Post page settings - show_updated = false # default + show_updated = true # default + showReadTime = true # default [params.comments] enabled = false # default diff --git a/exampleSite/content/posts/code-block-test.md b/exampleSite/content/posts/code-block-test.md new file mode 100644 index 0000000..a7ef079 --- /dev/null +++ b/exampleSite/content/posts/code-block-test.md @@ -0,0 +1,160 @@ +--- +title: Code Block Test +date: 2021-06-27 09:00:00 +tags: + - test +categories: + - tech +keywords: + - markdown + - code block +--- + + +`String` + +Using indents: + + text + text + text + + +Fenced code block: + +``` +text +text +<tag> +``` + +Fenced code block with language (lineNumbersInTable = false): + +```Java +// JavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJava +public final class String + implements java.io.Serializable, Comparable<String>, CharSequence +{ + /** The value is used for character storage. */ + private final char value[]; + + /** The offset is the first index of the storage that is used. */ + private final int offset; + + /** The count is the number of characters in the String. */ + private final int count; + + /** Cache the hash code for the string */ + private int hash; // Default to 0 + + // ... + + // Package private constructor which shares value array for speed. + String(int offset, int count, char value[]) { + this.value = value; + this.offset = offset; + this.count = count; + } + + // ... + + /** + * Returns a new string that is a substring of this string. The + * substring begins at the specified <code>beginIndex</code> and + * extends to the character at index <code>endIndex - 1</code>. + * Thus the length of the substring is <code>endIndex-beginIndex</code>. + * <p> + * Examples: + * <blockquote><pre> + * "hamburger".substring(4, 8) returns "urge" + * "smiles".substring(1, 5) returns "mile" + * </pre></blockquote> + * + * @param beginIndex the beginning index, inclusive. + * @param endIndex the ending index, exclusive. + * @return the specified substring. + * @exception IndexOutOfBoundsException if the + * <code>beginIndex</code> is negative, or + * <code>endIndex</code> is larger than the length of + * this <code>String</code> object, or + * <code>beginIndex</code> is larger than + * <code>endIndex</code>. + */ + public String substring(int beginIndex, int endIndex) { + if (beginIndex < 0) { + throw new StringIndexOutOfBoundsException(beginIndex); + } + if (endIndex > count) { + throw new StringIndexOutOfBoundsException(endIndex); + } + if (beginIndex > endIndex) { + throw new StringIndexOutOfBoundsException(endIndex - beginIndex); + } + return ((beginIndex == 0) && (endIndex == count)) ? this : + new String(offset + beginIndex, endIndex - beginIndex, value); + } + + // ... +} +``` + +Using hugo's `highlight` [shortcode]([highlight](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode)) (lineNumbersInTable = true): + +{{< highlight typescript "linenos=table, hl_lines=8 18-21" >}} +// TypeScript +type OptionalUser = { + [K in keyof User]?: User[K] +} + +// ! we can remove optional constraint +type RequiredUser = { + [K in keyof OptionalUser]-?: User[K] +} + +type NullableUser = { + [K in keyof User]: User[K] | null +} +type ReadonlyUser = { + readonly [K in keyof User]: User[K] +} + +// ! we can remove readonly constraint +type ModifiableUser = { + -readonly [K in keyof User]: User[K] +} +{{< /highlight >}} + +Without line number + +{{< highlight javascript "linenos=false" >}} +(() => { + + function createCopyButton(codeNode) { + const copyBtn = document.createElement('button') + copyBtn.className = 'code-copy-btn' + copyBtn.type = 'button' + copyBtn.innerText = 'copy' + copyBtn.parentElement = codeNode.parentElement + + let resetTimer + copyBtn.addEventListener('click', () => { + navigator.clipboard.writeText(codeNode.innerText).then(() => { + copyBtn.innerText = 'copied!' + }).then(() => { + clearTimeout(resetTimer) + resetTimer = setTimeout(() => { + copyBtn.innerText = 'copy' + }, 1000) + }) + }) + + return copyBtn + } + + document.querySelectorAll('pre > code').forEach((codeNode) => { + const copyBtn = createCopyButton(codeNode); + codeNode.parentNode.insertBefore(copyBtn, codeNode) + }) + +})() +{{< / highlight >}} diff --git a/exampleSite/netlify.toml b/exampleSite/netlify.toml new file mode 100644 index 0000000..696410d --- /dev/null +++ b/exampleSite/netlify.toml @@ -0,0 +1,31 @@ +[build] +publish = "public" +command = "hugo --gc --minify" + +[context.production.environment] +HUGO_VERSION = "0.83.1" +HUGO_ENV = "production" +HUGO_ENABLEGITINFO = "true" + +[context.split1] +command = "hugo --gc --minify --enableGitInfo" + +[context.split1.environment] +HUGO_VERSION = "0.83.1" +HUGO_ENV = "production" + +[context.deploy-preview] +command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL" + +[context.deploy-preview.environment] +HUGO_VERSION = "0.83.1" + +[context.branch-deploy] +command = "hugo --gc --minify -b $DEPLOY_PRIME_URL" + +[context.branch-deploy.environment] +HUGO_VERSION = "0.83.1" + +[context.next.environment] +HUGO_ENABLEGITINFO = "true" + diff --git a/exampleSite/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.content b/exampleSite/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.content new file mode 100644 index 0000000..e560b1d --- /dev/null +++ b/exampleSite/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.content @@ -0,0 +1,3 @@ +.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:before,.clearfix:after{display:table;content:" "}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.truncate{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.max-width-1{max-width:24rem}.max-width-2{max-width:32rem}.max-width-3{max-width:48rem}.max-width-4{max-width:64rem}.border-box{box-sizing:border-box}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.mx0{margin-right:0;margin-left:0}.my0{margin-top:0;margin-bottom:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.mx1{margin-right:.5rem;margin-left:.5rem}.my1{margin-top:.5rem;margin-bottom:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.mx2{margin-right:1rem;margin-left:1rem}.my2{margin-top:1rem;margin-bottom:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3{margin-left:2rem}.mx3{margin-right:2rem;margin-left:2rem}.my3{margin-top:2rem;margin-bottom:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mx4{margin-right:4rem;margin-left:4rem}.my4{margin-top:4rem;margin-bottom:4rem}.mxn1{margin-right:-.5rem;margin-left:-.5rem}.mxn2{margin-right:-1rem;margin-left:-1rem}.mxn3{margin-right:-2rem;margin-left:-2rem}.mxn4{margin-right:-4rem;margin-left:-4rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mx-auto{margin-right:auto;margin-left:auto}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0{padding-left:0}.px0{padding-right:0;padding-left:0}.py0{padding-top:0;padding-bottom:0}.p1{padding:.5rem}.pt1{padding-top:.5rem}.pr1{padding-right:.5rem}.pb1{padding-bottom:.5rem}.pl1{padding-left:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-right:.5rem;padding-left:.5rem}.p2{padding:1rem}.pt2{padding-top:1rem}.pr2{padding-right:1rem}.pb2{padding-bottom:1rem}.pl2{padding-left:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-right:1rem;padding-left:1rem}.p3{padding:2rem}.pt3{padding-top:2rem}.pr3{padding-right:2rem}.pb3{padding-bottom:2rem}.pl3{padding-left:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-right:2rem;padding-left:2rem}.p4{padding:4rem}.pt4{padding-top:4rem}.pr4{padding-right:4rem}.pb4{padding-bottom:4rem}.pl4{padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-right:4rem;padding-left:4rem}h1,.h1{display:block;margin-top:3rem;margin-bottom:1rem;color:#2bbc8a;letter-spacing:.01em;font-weight:700;font-style:normal;font-size:1.5em;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h2,.h2{position:relative;display:block;margin-top:2rem;margin-bottom:.5rem;color:#383838;text-transform:none;letter-spacing:normal;font-weight:bold;font-size:1rem}h3{color:#383838;text-decoration:underline;font-weight:bold;font-size:.9rem}h4 h5 h6{display:inline;text-decoration:none;color:#8c8c8c;font-weight:bold;font-size:.9rem}h3 h4 h5 h6{margin-top:.9rem;margin-bottom:.5rem}hr{border:0.5px dashed #8c8c8c;opacity:.5;margin:0;margin-top:20px;margin-bottom:20px}strong{font-weight:bold}em cite{font-style:italic}sup sub{position:relative;vertical-align:baseline;font-size:.75em;line-height:0}sup{top:-.5em}sub{bottom:-.2em}small{font-size:.85em}acronym abbr{border-bottom:1px dotted}ul ol dl{line-height:1.725}ul ul,ol ul,ul ol,ol ol{margin-top:0;margin-bottom:0}ol{list-style:decimal}dt{font-weight:bold}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px;overflow:auto;display:block}th{padding:8px;border-bottom:1px dashed #666;color:#383838;font-weight:bold;font-size:13px}td{padding:0 8px;border-bottom:none}@font-face{font-style:normal;font-family:"JetBrains Mono";font-display:swap;src:local("JetBrains Mono"),local("JetBrains-Mono"),url("/lib/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2") format("woff2"),url("/lib/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff") format("woff"),url("/lib/JetBrainsMono/web/eot/JetBrainsMono-Regular.eot") format("embedded-opentype"),url("/lib/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf") format("truetype")}*,*:before,*:after{box-sizing:border-box}html{margin:0;padding:0;height:100%;border-top:2px solid #383838;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;height:100%;background-color:#fff;color:#383838;font-display:swap;font-weight:400;font-size:14px;font-family:"JetBrains Mono",monospace;line-height:1.725;text-rendering:geometricPrecision;flex:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.content{position:relative;display:flex;flex-direction:column;min-height:100%;overflow-wrap:break-word}.content p{hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-webkit-hyphens:auto}.content code{hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;-webkit-hyphens:manual}.content a{color:#383838;text-decoration:none;background-image:linear-gradient(transparent, transparent 5px, #383838 5px, #383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}.content a:hover{background-image:linear-gradient(transparent, transparent 4px, #d480aa 4px, #d480aa)}.content a.icon{background:none}.content a.icon:hover{color:#d480aa}.content h1 a,.content .h1 a,.content h2 a,.content h3 a,.content h4 a,.content h5 a,.content h6 a{background:none;color:inherit;text-decoration:none}.content h1 a:hover,.content .h1 a:hover,.content h2 a:hover,.content h3 a:hover,.content h4 a:hover,.content h5 a:hover,.content h6 a:hover{background-image:linear-gradient(transparent, transparent 6px, #d480aa 6px, #d480aa);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}.content h6 a{background:none;color:inherit;text-decoration:none}.content h6 a:hover{background-image:linear-gradient(transparent, transparent 6px, #d480aa 6px, #d480aa);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}@media (min-width: 540px){.image-wrap{flex-direction:row;margin-bottom:2rem}.image-wrap .image-block{flex:1 0 35%;margin-right:2rem}.image-wrap p{flex:1 0 65%}}.max-width{max-width:48rem}@media (max-width: 480px){.px3{padding-right:1rem;padding-left:1rem}.my4{margin-top:2rem;margin-bottom:2rem}}@media (min-width: 480px){p{text-align:justify}}#header{margin:0 auto 2rem;width:100%}#header h1,#header .h1{margin-top:0;margin-bottom:0;color:#383838;letter-spacing:.01em;font-weight:700;font-style:normal;font-size:1.5rem;line-height:2rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}#header a{background:none;color:inherit;text-decoration:none}#header #logo{display:inline-block;float:left;margin-right:20px;width:50px;height:50px;border-radius:5px;background-size:50px 50px;background-repeat:no-repeat;filter:grayscale(100%);-webkit-filter:grayscale(100%)}#header #nav{color:#2bbc8a;letter-spacing:.01em;font-weight:200;font-style:normal;font-size:.8rem}#header #nav ul{margin:0;padding:0;list-style-type:none;line-height:15px}#header #nav ul a{margin-right:15px;color:#2bbc8a}#header #nav ul a:hover{background-image:linear-gradient(transparent, transparent 5px, #2bbc8a 5px, #2bbc8a);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}#header #nav ul li{display:inline-block;margin-right:15px;border-right:1px dotted;border-color:#2bbc8a;vertical-align:middle}#header #nav ul .icon{display:none}#header #nav ul li:last-child{margin-right:0;border-right:0}#header #nav ul li:last-child a{margin-right:0}#header:hover #logo{filter:none;-webkit-filter:none}@media screen and (max-width: 480px){#header #title{display:table;margin-right:5rem;min-height:50px}#header #title h1{display:table-cell;vertical-align:middle}#header #nav ul a:hover{background:none}#header #nav ul li{display:none;border-right:0}#header #nav ul li.icon{position:absolute;top:77px;right:1rem;display:inline-block}#header #nav ul.responsive li{display:block}#header #nav li:not(:first-child){padding-top:1rem;padding-left:70px;font-size:1rem}}#header-post{position:fixed;top:2rem;right:0;display:inline-block;float:right;z-index:100}#header-post a{background:none;color:inherit;text-decoration:none}#header-post a.icon{background:none}#header-post a.icon:hover{color:#d480aa}#header-post nav ul{display:block;list-style-image:none;list-style-position:outside;list-style-type:none;padding-inline-start:40px}#header-post nav ul li{display:list-item;margin-right:0px}#header-post nav>ul{margin-block-end:1em;margin-block-start:1em}#header-post ul{display:inline-block;margin:0;padding:0;list-style-type:none}#header-post ul li{display:inline-block;margin-right:15px;vertical-align:middle}#header-post ul li:last-child{margin-right:0}#header-post #menu-icon{float:right;margin-right:2rem;margin-left:15px}#header-post #menu-icon:hover{color:#2bbc8a}#header-post #menu-icon-tablet{float:right;margin-right:2rem;margin-left:15px}#header-post #menu-icon-tablet:hover{color:#2bbc8a}#header-post #top-icon-tablet{position:fixed;right:2rem;bottom:2rem;margin-right:2rem;margin-left:15px}#header-post #top-icon-tablet:hover{color:#2bbc8a}#header-post .active{color:#2bbc8a}#header-post #menu{visibility:hidden;margin-right:2rem}#header-post #nav{color:#2bbc8a;letter-spacing:.01em;font-weight:200;font-style:normal;font-size:.8rem}#header-post #nav ul{line-height:15px}#header-post #nav ul a{margin-right:15px;color:#2bbc8a}#header-post #nav ul a:hover{background-image:linear-gradient(transparent, transparent 5px, #2bbc8a 5px, #2bbc8a);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}#header-post #nav ul li{border-right:1px dotted #2bbc8a}#header-post #nav ul li:last-child{margin-right:0;border-right:0}#header-post #nav ul li:last-child a{margin-right:0}#header-post #actions{float:right;margin-top:2rem;margin-right:2rem;width:100%;text-align:right}#header-post #actions ul{display:block}#header-post #actions .info{display:block;font-style:italic}#header-post #share{clear:both;padding-top:1rem;padding-right:2rem;text-align:right}#header-post #share li{display:block;margin:0}#header-post #toc{float:right;clear:both;overflow:auto;margin-top:1rem;padding-right:2rem;max-width:20em;max-height:calc(95vh - 7rem);text-align:right}#header-post #toc a:hover{color:#d480aa}#header-post #toc nav>ul>li{color:#383838;font-size:.8rem}#header-post #toc nav>ul>li:before{color:#2bbc8a;content:"#";margin-right:8px}#header-post #toc nav>ul>li>ul>li{color:#666;font-size:.7rem}#header-post #toc nav>ul>li>ul>li:before{color:#2bbc8a;content:"·";font-weight:bold;margin-right:3px}#header-post #toc nav>ul>li>ul>li>ul>li{color:#333;font-size:.4rem}#header-post #toc .toc-level-5{display:none}#header-post #toc .toc-level-6{display:none}#header-post #toc .toc-number{display:none}@media screen and (max-width: 500px){#header-post{display:none}}@media screen and (max-width: 900px){#header-post #menu-icon{display:none}#header-post #actions{display:none}}@media screen and (max-width: 1199px){#header-post #toc{display:none}}@media screen and (min-width: 900px){#header-post #menu-icon-tablet{display:none !important}#header-post #top-icon-tablet{display:none !important}}@media screen and (min-width: 1199px){#header-post #actions{width:auto}#header-post #actions ul{display:inline-block;float:right}#header-post #actions .info{display:inline;float:left;margin-right:2rem;font-style:italic}}#footer-post{position:fixed;right:0;bottom:0;left:0;z-index:5000000;width:100%;border-top:1px solid #666;background:#fafafa;transition:opacity .2s}#footer-post a{background:none;color:inherit;text-decoration:none}#footer-post a.icon{background:none}#footer-post a.icon:hover{color:#d480aa}#footer-post #nav-footer{padding-right:1rem;padding-left:1rem;background:#e6e6e6;text-align:center}#footer-post #nav-footer a{color:#2bbc8a;font-size:1em}#footer-post #nav-footer a:hover{background-image:linear-gradient(transparent, transparent 5px, #2bbc8a 5px, #2bbc8a);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}#footer-post #nav-footer ul{display:table;margin:0;padding:0;width:100%;list-style-type:none}#footer-post #nav-footer ul li{display:inline-table;padding:10px;width:20%;vertical-align:middle}#footer-post #actions-footer{overflow:auto;margin-top:1rem;margin-bottom:1rem;padding-right:1rem;padding-left:1rem;width:100%;text-align:center;white-space:nowrap}#footer-post #actions-footer a{display:inline-block;padding-left:1rem;color:#2bbc8a}#footer-post #share-footer{padding-right:1rem;padding-left:1rem;background:#e6e6e6;text-align:center}#footer-post #share-footer ul{display:table;margin:0;padding:0;width:100%;list-style-type:none}#footer-post #share-footer ul li{display:inline-table;padding:10px;width:20%;vertical-align:middle}#footer-post #toc-footer{clear:both;padding-top:1rem;padding-bottom:1rem;background:#e6e6e6;text-align:left}#footer-post #toc-footer #TableOfContents ul{margin:0;padding-left:20px;list-style-type:none}#footer-post #toc-footer #TableOfContents ul li{line-height:30px}#footer-post #toc-footer a:hover{color:#d480aa}#footer-post #toc-footer #TableOfContents>ul>li{color:#383838;font-size:.8rem}#footer-post #toc-footer #TableOfContents>ul>li:before{color:#2bbc8a;content:"#";margin-right:8px}#footer-post #toc-footer #TableOfContents>ul>li>ul>li{color:#666;font-size:.7rem;line-height:15px}#footer-post #toc-footer #TableOfContents>ul>li>ul>li:before{color:#2bbc8a;content:"·";font-weight:bold;margin-right:3px}#footer-post #toc-footer #TableOfContents>ul>li>ul>li>ul>li{display:none}@media screen and (min-width: 500px){#footer-post-container{display:none}}.post-list{padding:0}.post-list .post-item{margin-bottom:1rem;margin-left:0;list-style-type:none}.post-list .post-item .meta{display:block;margin-right:16px;min-width:100px;color:#666;font-size:14px}@media (min-width: 480px){.post-list .post-item{display:flex;margin-bottom:5px}.post-list .post-item .meta{text-align:left}}.project-list{padding:0;list-style:none}.project-list .project-item{margin-bottom:5px}.project-list .project-item p{display:inline}article header .posttitle{margin-top:0;margin-bottom:0;text-transform:none;font-size:1.5em;line-height:1.25}article header .meta{margin-top:0;margin-bottom:1rem}article header .meta *{color:#8c8c8c;font-size:.85rem}article header .author{text-transform:uppercase;letter-spacing:.01em;font-weight:700}article header .postdate{display:inline}article .content h2:before{position:absolute;top:-4px;left:-1rem;color:#2bbc8a;content:"#";font-weight:bold;font-size:1.2rem}article .content img,article .content video{display:block;margin:auto;max-width:100%;height:auto}article .content img .video-container,article .content video .video-container{position:relative;overflow:hidden;padding-top:56.25% e;height:0}article .content img .video-container iframe,article .content img .video-container object,article .content img .video-container embed,article .content video .video-container iframe,article .content video .video-container object,article .content video .video-container embed{position:absolute;top:0;left:0;margin-top:0;width:100%;height:100%}article .content img blockquote,article .content video blockquote{margin:1rem 10px;padding:.5em 10px;background:inherit;color:#2bbc8a;quotes:"\201C" "\201D" "\2018" "\2019";font-weight:bold}article .content img blockquote p,article .content video blockquote p{margin:0}article .content img blockquote:before,article .content video blockquote:before{margin-right:.25em;color:#2bbc8a;content:"\201C";vertical-align:-.4em;font-size:2em;line-height:.1em}article .content img blockquote footer,article .content video blockquote footer{margin:line-height 0;color:#666;font-size:11px}article .content img blockquote footer a,article .content video blockquote footer a{background-image:linear-gradient(transparent, transparent 5px, #666 5px, #666);color:#666}article .content img blockquote footer a:hover,article .content video blockquote footer a:hover{background-image:linear-gradient(transparent, transparent 4px, #999 4px, #999);color:#999}article .content img blockquote footer cite:before,article .content video blockquote footer cite:before{padding:0 .5em;content:"—"}article .content img .pullquote,article .content video .pullquote{margin:0;width:45%;text-align:left}article .content img .pullquote.left,article .content video .pullquote.left{margin-right:1em;margin-left:.5em}article .content img .pullquote.right,article .content video .pullquote.right{margin-right:.5em;margin-left:1em}article .content img .caption,article .content video .caption{position:relative;display:block;margin-top:.5em;color:#666;text-align:center;font-size:.9em}.posttitle{text-transform:none;font-size:1.5em;line-height:1.25}.article-tag .tag-link:before{content:"#";background-image:linear-gradient(transparent, transparent 10px, #d480aa 10px, #d480aa);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}.article-category .category-link{background-image:linear-gradient(transparent, transparent 10px, #d480aa 10px, #d480aa);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x}@media (min-width: 480px){.article-read-time,.article-tag,.article-category{display:inline}.article-read-time:before,.article-tag:before,.article-category:before{content:"|"}}#archive .post-list{padding:0}#archive .post-list .post-item{margin-bottom:1rem;margin-left:0;list-style-type:none}#archive .post-list .post-item .meta{display:block;margin-right:16px;min-width:100px;color:#666;font-size:14px}@media (min-width: 480px){#archive .post-list .post-item{display:flex;margin-bottom:5px;margin-left:1rem}#archive .post-list .post-item .meta{text-align:left}}.blog-post-comments{margin-top:4rem}#footer{position:absolute;bottom:0;margin-bottom:10px;width:100%;color:#666;vertical-align:top;text-align:center;font-size:11px}#footer ul{margin:0;padding:0;list-style:none}#footer li{display:inline-block;margin-right:15px;border-right:1px solid;border-color:#666;vertical-align:middle}#footer li a{margin-right:15px}#footer li:last-child{margin-right:0;border-right:0}#footer li:last-child a{margin-right:0}#footer a{color:#666;text-decoration:underline;background-image:none}#footer a:hover{color:#999}#footer .footer-left{height:20px;vertical-align:middle;line-height:20px}@media (min-width: 39rem){#footer{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;align-content:center;margin-bottom:20px}#footer .footer-left{align-self:flex-start;margin-right:20px}#footer .footer-right{align-self:flex-end}}.pagination{display:inline-block;margin-top:2rem;width:100%;text-align:center}.pagination .page-number{color:#383838;font-size:.8rem}.pagination a{padding:4px 6px;border-radius:5px;background-image:none;color:#383838;text-decoration:none}.pagination a:hover{background-image:none}.pagination a:hover:not(.active){color:#383838}.search-input{padding:4px 7px;width:100%;outline:none;border:solid 1px #8c8c8c;border-radius:5px;background-color:#fff;color:#383838;font-size:1.2rem;-webkit-border-radius:5px;-moz-border-radius:5px}.search-input:focus{border:solid 1px #2bbc8a}#search-result ul.search-result-list{padding:0;list-style-type:none}#search-result li{margin:2em auto}#search-result a.search-result-title{background-image:none;color:#383838;text-transform:capitalize;font-weight:bold;line-height:1.2}#search-result p.search-result{overflow:hidden;margin:.4em auto;max-height:13em;text-align:justify;font-size:.8em}#search-result em.search-keyword{border-bottom:1px dashed #d480aa;color:#d480aa;font-weight:bold}.search-no-result{display:none;padding-bottom:.5em;color:#383838}#tag-cloud .tag-cloud-title{color:#666}#tag-cloud .tag-cloud-tags{clear:both;text-align:center}#tag-cloud .tag-cloud-tags a{display:inline-block;margin:10px}.tooltipped{position:relative}.tooltipped::after{position:absolute;z-index:1000000;display:none;padding:.2em .5em;-webkit-font-smoothing:subpixel-antialiased;color:#fff;font-display:swap;font-weight:400;font-size:11.2px;font-family:"JetBrains Mono",monospace;line-height:1.725;text-rendering:geometricPrecision;text-align:center;word-wrap:break-word;white-space:pre;content:attr(aria-label);background:#383838;border-radius:3px;opacity:0}.tooltipped::before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:#383838;pointer-events:none;content:'';border:6px solid transparent;opacity:0}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.tooltipped:hover::before,.tooltipped:hover::after,.tooltipped:active::before,.tooltipped:active::after,.tooltipped:focus::before,.tooltipped:focus::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in}.tooltipped-s::after,.tooltipped-sw::after{top:100%;right:50%;margin-top:6px}.tooltipped-s::before,.tooltipped-sw::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:#383838}.tooltipped-sw::after{margin-right:-16px}.tooltipped-s::after{transform:translateX(50%)}#categories .category-list-title{color:#666}#categories .category-list .category-list-item .category-list-count{color:#666}#categories .category-list .category-list-item .category-list-count:before{content:" ("}#categories .category-list .category-list-item .category-list-count:after{content:")"}pre{overflow-x:auto;padding:15px 15px 10px 15px;border:1px dotted #666;border-radius:2px;-webkit-border-radius:2px;font-size:13px;font-family:"JetBrains Mono",monospace;line-height:22px;position:relative}pre .code-copy-btn{position:absolute;top:0;right:0;border:0;border-radius:0 2px;padding:0;font-family:"JetBrains Mono", monospace;font-weight:800;font-size:0.9em;line-height:1.7;color:#fff;background-color:#8c8c8c;min-width:60px;text-align:center;cursor:pointer;letter-spacing:0em}pre .code-copy-btn:hover{background-color:#666;color:#2bbc8a}pre code{display:block;padding:0;border:none}code{font-family:"JetBrains Mono",monospace;padding:0 5px;border:1px dotted #666;border-radius:2px;-webkit-border-radius:2px}.highlight>div{border-radius:2px;-webkit-border-radius:2px}.highlight pre{border:none;background:none}.highlight table pre{margin-top:0}.highlight table td:first-child pre{padding-right:0}.highlight table td:last-child pre{padding-left:0} + +/*# sourceMappingURL=styles.css.map */
\ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.json b/exampleSite/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.json new file mode 100644 index 0000000..1a30636 --- /dev/null +++ b/exampleSite/resources/_gen/assets/scss/scss/style.scss_17a317b87063135b4df76ed814d78726.json @@ -0,0 +1 @@ +{"Target":"css/styles.36b0f851d27724769394927e036d31d122d9a96b5caa65ea94fa72c661d20105534bfdd578dc11ea49d72bb0ae12692c1c3ba924faa4906e8fcb5602c3acab6c.css","MediaType":"text/css","Data":{"Integrity":"sha512-NrD4UdJ3JHaTlJJ+A20x0SLZqWtcqmXqlPpyxmHSAQVTS/3VeNwR6knXK7CuEmksHDupJPqkkG6Py1YCw6yrbA=="}}
\ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5fb0211..f7a3080 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -12,13 +12,6 @@ {{ partial "footer.html" . }} </div> - {{ if .Site.GoogleAnalytics }} - {{ if .Site.Params.googleAnalyticsAsync }} - {{ template "_internal/google_analytics_async.html" . }} - {{ else }} - {{ template "_internal/google_analytics.html" . }} - {{ end }} - {{ end }} </body> <link rel="stylesheet" href={{ "lib/font-awesome/css/all.min.css" | relURL }}> diff --git a/layouts/index.html b/layouts/index.html index 01167b7..10c5e28 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,27 +1,27 @@ {{ define "main" }} <section id="about"> {{ if isset .Site.Params "description" }} - {{ .Site.Params.description }} + {{ .Site.Params.description | $.Page.RenderString }} {{ end }} {{ if isset .Site.Params "social" }} <p>Find me on {{ $length := (len .Site.Params.social) }} {{ range $index, $elem := .Site.Params.social}} {{ if eq $elem.name "email" }} - <a class="icon" target="_blank" rel="noopener" href="mailto:{{ $elem.link }}"> - <i class="fas fa-envelope"></i> + <a class="icon" target="_blank" rel="noopener" href="mailto:{{ $elem.link }}" aria-label="Email"> + <i class="fas fa-envelope" aria-hidden="true"></i> </a> {{ else if eq $elem.name "rss" }} - <a class="icon" target="_blank" rel="noopener" href="{{ $elem.link }}"> - <i class="fas fa-rss"></i> + <a class="icon" target="_blank" rel="noopener" href="{{ $elem.link }}" aria-label="RSS"> + <i class="fas fa-rss" aria-hidden="true"></i> </a> {{ else if eq $elem.name "scholar" }} - <a class="icon" target="_blank" rel="noopener" href="{{ $elem.link }}"> - <i class="fas fa-graduation-cap"></i> + <a class="icon" target="_blank" rel="noopener" href="{{ $elem.link }}" aria-label="Google Scholar"> + <i class="fas fa-graduation-cap" aria-hidden="true"></i> </a> {{ else }} - <a class="icon" target="_blank" rel="noopener" href="{{ $elem.link }}"> - <i class="fab fa-{{ lower $elem.name }}"></i> + <a class="icon" target="_blank" rel="noopener" href="{{ $elem.link }}" aria-label="{{ $elem.name }}"> + <i class="fab fa-{{ lower $elem.name }}" aria-hidden="true"></i> </a> {{ end }} {{ if (lt (add $index 2) $length) }} @@ -34,11 +34,11 @@ {{ end }} </p> {{ end }} + {{ partial "optional-about.html" . }} </section> <section id="writing"> - <!-- TODO: use built in mainSections parameter https://gohugo.io/functions/where/#mainsections --> - <span class="h1"><a href="{{ .Site.Params.mainSection | absURL }}">Writings</a></span> + <span class="h1"><a href="{{ .Site.Params.mainSection | absURL }}">{{ .Site.Params.mainSectionTitle | default "Writings" }}</a></span> {{ if (and (and (isset .Site.Params "tagsoverview") (eq .Site.Params.tagsOverview true)) (gt (len .Site.Taxonomies.tags) 0)) }} <span class="h2">Topics</span> <span class="widget tagcloud"> @@ -57,9 +57,10 @@ {{ $showAllPostsOnHomePage = .Site.Params.ShowAllPostsOnHomePage }} {{ end }} {{ $dataFormat := .Site.Params.dateFormat | default "2006-01-02" }} + {{ $mainPosts := (sort ( where site.RegularPages "Type" "in" site.Params.mainSections ) "Date" "desc") }} {{ if $showAllPostsOnHomePage }} <ul class="post-list"> - {{ range (sort .Paginator.Pages "Date" "desc") }} + {{ range (.Paginate $mainPosts).Pages }} <li class="post-item"> <div class="meta"><time datetime="{{ time .Date }}" itemprop="datePublished">{{ .Date.Format $dataFormat }}</time></div> <span><a href="{{ .Permalink }}">{{ if .Title }} {{- .Title -}} {{ else }} {{- print "Untitled" -}}{{ end }}</a></span> @@ -75,7 +76,7 @@ {{ if isset .Site.Params "postsonhomepage" }} {{ .Scratch.Set "count" .Site.Params.postsOnHomePage }} {{ end }} - {{ range (first (.Scratch.Get "count") (sort .Site.RegularPages "Date" "desc")) }} + {{ range (first (.Scratch.Get "count") $mainPosts) }} <li class="post-item"> <div class="meta"><time datetime="{{ time .Date }}" itemprop="datePublished">{{ .Date.Format $dataFormat }}</time></div> <span><a href="{{ .Permalink }}">{{ if .Title }} {{- .Title -}} {{ else }} {{- print "Untitled" -}}{{ end }}</a></span> @@ -86,14 +87,14 @@ </section> {{ $showProjectsList := false }} - {{ if .Site.Data.projects }} + {{ if (isset .Site.Params "showprojectslist") }} + {{ $showProjectsList = .Site.Params.showProjectsList }} + {{ else if .Site.Data.projects }} {{ $showProjectsList = true }} - {{ else if (isset .Site.Params "showProjectsList") }} - {{ $showProjectsList = .Site.Params.ShowProjectsList }} {{ end }} {{ if $showProjectsList }} {{ $projectsUrl := "#" }} - {{ if isset .Site.Params "projectsUrl" }} + {{ if isset .Site.Params "projectsurl" }} {{ $projectsUrl = .Site.Params.projectsUrl }} {{ end }} <section id="projects"> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 15404e5..5eff070 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -6,6 +6,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>{{ if .IsPage }} {{ .Title }} | {{ end }}{{ .Site.Title }}</title> + <link rel = 'canonical' href = '{{ .Permalink }}'> {{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }} <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="all,follow"> @@ -17,7 +18,13 @@ {{ .Scratch.Set "colortheme" .Site.Params.Colortheme }} {{ end }} {{ $colortheme := .Scratch.Get "colortheme" }} - <link rel="stylesheet" href="{{ $colortheme | printf "css/style-%s.css" | absURL }}"> + + {{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}} + {{- $styles := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "scss/style.scss" . | resources.ToCSS $options | resources.Fingerprint "sha512" }} + <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}"> + + <!-- Custom CSS --> + {{ range .Site.Params.css }} <link rel="stylesheet" href="{{ . | absURL }}"> {{ end }} {{ ` <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> @@ -31,4 +38,11 @@ {{ printf `<link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML }} {{ end }} {{ end }} -</head>
\ No newline at end of file + {{ if .Site.GoogleAnalytics }} + {{ if .Site.Params.googleAnalyticsAsync }} + {{ template "_internal/google_analytics_async.html" . }} + {{ else }} + {{ template "_internal/google_analytics.html" . }} + {{ end }} + {{ end }} +</head> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 9f4a318..3ecdb0b 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,7 +1,7 @@ <header id="header"> <a href="{{ .Site.BaseURL }}"> {{ if (isset .Site.Params "gravatar") }} - <div id="logo" style="background-image: url(https://www.gravatar.com/avatar/{{ md5 .Site.param.gravatar }}?s=100&d=identicon)"></div> + <div id="logo" style="background-image: url(https://www.gravatar.com/avatar/{{ md5 .Site.Params.gravatar }}?s=100&d=identicon)"></div> {{ else if (isset .Site.Params "logo") }} <div id="logo" style="background-image: url({{ .Site.Params.logo | absURL }})"></div> {{ else }} @@ -14,12 +14,12 @@ <div id="nav"> <ul> <li class="icon"> - <a href="#"><i class="fas fa-bars fa-2x"></i></a> + <a href="#" aria-label="Menu"><i class="fas fa-bars fa-2x" aria-hidden="true"></i></a> </li> - {{ range .Site.Menus.main }} + {{ range .Site.Menus.main }} <li><a href="{{ .URL }}">{{ .Name }}</a></li> {{ end }} </ul> </div> </header> -
\ No newline at end of file + diff --git a/layouts/partials/optional-about.html b/layouts/partials/optional-about.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/partials/optional-about.html diff --git a/layouts/partials/page_nav.html b/layouts/partials/page_nav.html index 331f272..58580da 100644 --- a/layouts/partials/page_nav.html +++ b/layouts/partials/page_nav.html @@ -1,7 +1,7 @@ <div id="header-post"> <a id="menu-icon" href="#"><i class="fas fa-bars fa-lg"></i></a> <a id="menu-icon-tablet" href="#"><i class="fas fa-bars fa-lg"></i></a> - <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a> + <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;" aria-label="Top of Page"><i class="fas fa-chevron-up fa-lg"></i></a> <span id="menu"> <span id="nav"> <ul> @@ -15,25 +15,25 @@ <ul> {{ if .Prev }} <li> - <a class="icon" href=" {{ .Prev.Permalink }}"> + <a class="icon" href=" {{ .Prev.Permalink }}" aria-label="Previous"> <i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i> </a> </li> {{ end }} {{ if .Next }} <li> - <a class="icon" href="{{ .Next.Permalink }}"> + <a class="icon" href="{{ .Next.Permalink }}" aria-label="Next"> <i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i> </a> </li> {{ end }} <li> - <a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"> + <a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" aria-label="Top of Page"> <i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i> </a> </li> <li> - <a class="icon" href="#"> + <a class="icon" href="#" aria-label="Share"> <i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i> </a> </li> diff --git a/layouts/partials/page_nav_mobile.html b/layouts/partials/page_nav_mobile.html index 3684eec..10b4a61 100644 --- a/layouts/partials/page_nav_mobile.html +++ b/layouts/partials/page_nav_mobile.html @@ -20,13 +20,13 @@ <div id="actions-footer"> <!-- TODO: rewrite the toggle function. hide the others when one menu is displayed --> - <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"> + <a id="menu-toggle" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;" aria-label="Menu"> <i class="fas fa-bars fa-lg" aria-hidden="true"></i> Menu</a> - <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"> + <a id="toc-toggle" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;" aria-label="TOC"> <i class="fas fa-list fa-lg" aria-hidden="true"></i> TOC</a> - <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"> + <a id="share-toggle" class="icon" href="#" onclick="$('#share-footer').toggle();return false;" aria-label="Share"> <i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> share</a> - <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"> + <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" aria-label="Top of Page"> <i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a> </div> diff --git a/layouts/partials/share.html b/layouts/partials/share.html index bdc64cf..4aeadd7 100644 --- a/layouts/partials/share.html +++ b/layouts/partials/share.html @@ -7,57 +7,47 @@ {{ end }} {{ $description := .Scratch.Get "description" }} <li> - <a class="icon" href="http://www.facebook.com/sharer.php?u={{ .Permalink }}"> + <a class="icon" href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" aria-label="Facebook"> <i class="fab fa-facebook {{ $icon_class_name }}" aria-hidden="true"></i> </a> </li> <li> - <a class="icon" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}"> + <a class="icon" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" aria-label="Twitter"> <i class="fab fa-twitter {{ $icon_class_name }}" aria-hidden="true"></i> </a> </li> <li> - <a class="icon" href="http://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}"> + <a class="icon" href="http://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" aria-label="Linkedin"> <i class="fab fa-linkedin {{ $icon_class_name }}" aria-hidden="true"></i> </a> </li> <li> - <a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url={{ .Permalink }}&is_video=false&description={{ .Title }}"> + <a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url={{ .Permalink }}&is_video=false&description={{ .Title }}" aria-label="Pinterest"> <i class="fab fa-pinterest {{ $icon_class_name }}" aria-hidden="true"></i> </a> </li> <li> - <a class="icon" href="mailto:?subject={{ .Title }}&body=Check out this article: {{ .Permalink }}"> + <a class="icon" href="mailto:?subject={{ .Title }}&body=Check out this article: {{ .Permalink }}" aria-label="Email"> <i class="fas fa-envelope {{ $icon_class_name }}" aria-hidden="true"></i> </a> </li> <li> - <a class="icon" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}"> + <a class="icon" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" aria-label="Pocket"> <i class="fab fa-get-pocket {{ $icon_class_name }}" aria-hidden="true"></i> </a> </li> <li> - <a class="icon" href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}"> + <a class="icon" href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" aria-label="reddit"> <i class="fab fa-reddit {{ $icon_class_name }}" aria-hidden="true"></i> </a> </li> <li> - <a class="icon" href="http://www.stumbleupon.com/submit?url={{ .Permalink }}&title={{ .Title }}"> - <i class="fab fa-stumbleupon {{ $icon_class_name }}" aria-hidden="true"></i> - </a> - </li> - <li> - <a class="icon" href="http://digg.com/submit?url={{ .Permalink }}&title={{ .Title }}"> - <i class="fab fa-digg {{ $icon_class_name }}" aria-hidden="true"></i> - </a> - </li> - <li> - <a class="icon" href="http://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}&description={{ $description }}"> + <a class="icon" href="http://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}&description={{ $description }}" aria-label="Tumblr"> <i class="fab fa-tumblr {{ $icon_class_name }}" aria-hidden="true"></i> </a> </li> <li> - <a class="icon" href="https://news.ycombinator.com/submitlink?u={{ .Permalink }}&t={{ .Title }}"> + <a class="icon" href="https://news.ycombinator.com/submitlink?u={{ .Permalink }}&t={{ .Title }}" aria-label="Hacker News"> <i class="fab fa-hacker-news {{ $icon_class_name }}" aria-hidden="true"></i> </a> </li> diff --git a/layouts/posts/single.html b/layouts/posts/single.html index 37d12ce..fb6a6b4 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -30,11 +30,19 @@ (Updated: <time datetime="{{ .Lastmod }}" itemprop="dateModified">{{ .Lastmod.Format $dataFormat }}</time>) {{ end }} </div> + {{ $showReadTime := .Site.Params.showReadTime | default false }} + {{if $showReadTime}} + <div class="article-read-time"> + <i class="far fa-clock"></i> + {{ $readTime := math.Round (div (countwords .Content) 220.0) }} + {{ $readTime }} minute read + </div> + {{ end }} {{ if gt .Params.categories 0 }} <div class="article-category"> <i class="fas fa-archive"></i> {{ range $index, $value := .Params.categories }} - {{ if gt $index 1 }} {{ print ", " }} {{ end }} + {{ if gt $index 0 }} {{ print ", " }} {{ end }} <a class="category-link" href="{{ "/categories/" | relLangURL }}{{ $value | urlize }}">{{ $value }}</a> {{ end }} </div> @@ -43,10 +51,10 @@ <div class="article-tag"> <i class="fas fa-tag"></i> {{ range $index, $value := .Params.tags }} - {{ if gt $index 1 }} {{ print ", " }} {{ end }} + {{ if gt $index 0 }} {{ print ", " }} {{ end }} <a class="tag-link" href="{{ "/tags/" | relLangURL }}{{ $value | urlize }}" rel="tag">{{ $value }}</a> {{ end }} - </div> + </div> {{ end }} </div> </header> @@ -77,6 +85,7 @@ <link rel="stylesheet" href={{ "/lib/font-awesome/css/all.min.css" | relURL }}> <script src={{ "/lib/jquery/jquery.min.js" | relURL }}></script> <script src={{ "/js/main.js" | relURL }}></script> +<script src={{ "js/code-copy.js" | relURL }}></script> {{ $mathjax := false }} {{ if isset .Params "mathjax" }} {{ $mathjax = .Params.mathjax }} diff --git a/static/_styl/_colors/classic.styl b/static/_styl/_colors/classic.styl deleted file mode 100644 index 728cce8..0000000 --- a/static/_styl/_colors/classic.styl +++ /dev/null @@ -1,13 +0,0 @@ -$color-background = #fafafa -$color-footer-mobile-1 = darken($color-background, 2%) -$color-footer-mobile-2 = darken($color-background, 10%) -$color-background-code = darken($color-background, 2%) -$color-border = #666 -$color-meta = #666 -$color-meta-code = lighten($color-meta, 10%) -$color-link = rgba(86, 124, 119, .4) -$color-text = #22272a -$color-accent-1 = #cc2a41 -$color-accent-2 = rgba(86, 124, 119, .8) -$color-accent-3 = #666 -$color-quote = #cc2a41 diff --git a/static/_styl/_colors/dark.styl b/static/_styl/_colors/dark.styl deleted file mode 100644 index f168852..0000000 --- a/static/_styl/_colors/dark.styl +++ /dev/null @@ -1,13 +0,0 @@ -$color-background = #1d1f21 -$color-footer-mobile-1 = lighten($color-background, 2%) -$color-footer-mobile-2 = lighten($color-background, 10%) -$color-background-code = lighten($color-background, 2%) -$color-border = #666 -$color-meta = #666 -$color-meta-code = #666 -$color-link = rgba(212, 128, 170, 1) -$color-text = #c9cacc -$color-accent-3 = #cccccc -$color-accent-2 = #eeeeee -$color-accent-1 = #2bbc8a -$color-quote = #ccffb6 diff --git a/static/_styl/_colors/light.styl b/static/_styl/_colors/light.styl deleted file mode 100644 index 8876c2c..0000000 --- a/static/_styl/_colors/light.styl +++ /dev/null @@ -1,14 +0,0 @@ -// by @GabiThume (https://github.com/gabithume) -$color-background = #e2e0de -$color-footer-mobile-1 = darken($color-background, 2%) -$color-footer-mobile-2 = darken($color-background, 10%) -$color-background-code = darken($color-background, 2%) -$color-border = #666 -$color-meta = #666 -$color-meta-code = lighten($color-meta, 10%) -$color-link = rgba(43, 188, 138, 1) -$color-text = #363533 -$color-accent-3 = #666666 -$color-accent-2 = #111111 -$color-accent-1 = #d44375 -$color-quote = #ab2251 diff --git a/static/_styl/_colors/white.styl b/static/_styl/_colors/white.styl deleted file mode 100644 index 405930c..0000000 --- a/static/_styl/_colors/white.styl +++ /dev/null @@ -1,14 +0,0 @@ -// by @sergodeeva (https://github.com/sergodeeva) -$color-background = #FFFFFF -$color-footer-mobile-1 = darken($color-background, 2%) -$color-footer-mobile-2 = darken($color-background, 10%) -$color-background-code = darken($color-background, 2%) -$color-border = #666 -$color-meta = #666 -$color-meta-code = lighten($color-meta, 10%) -$color-link = rgba(212, 128, 170, 1) -$color-text = #383838 -$color-accent-3 = #8c8c8c -$color-accent-2 = #383838 -$color-accent-1 = #2bbc8a -$color-quote = #2bbc8a
\ No newline at end of file diff --git a/static/_styl/_extend.styl b/static/_styl/_extend.styl deleted file mode 100644 index eafeec2..0000000 --- a/static/_styl/_extend.styl +++ /dev/null @@ -1,116 +0,0 @@ -$base-style - h1, .h1 - display: block - margin-top: 3rem - margin-bottom: 1rem - color: $color-accent-1 - letter-spacing: .01em - font-weight: 700 - font-style: normal - font-size: 1.5em - - antialias() - - h2, .h2 - position: relative - display: block - margin-top: 2rem - margin-bottom: .5rem - color: $color-accent-2 - text-transform: none - letter-spacing: normal - font-weight: bold - font-size: 1rem - - h3 - color: $color-accent-2 - text-decoration: underline - font-weight: bold - font-size: .9rem - - h4 - h5 - h6 - display: inline - text-decoration: none - color: $color-accent-3 - font-weight: bold - font-size: .9rem - - h3 - h4 - h5 - h6 - margin-top: .9rem - margin-bottom: .5rem - - hr - border: .5px dashed $color-accent-3 - opacity: .5 - margin: 0 - margin-top: 20px - margin-bottom: 20px - - strong - font-weight: bold - - em - cite - font-style: italic - - sup - sub - position: relative - vertical-align: baseline - font-size: .75em - line-height: 0 - - sup - top: -.5em - - sub - bottom: -.2em - - small - font-size: .85em - - acronym - abbr - border-bottom: 1px dotted - - ul - ol - dl - line-height: $line-height - - ul - ol - ul - ol - margin-top: 0 - margin-bottom: 0 - - ol - list-style: decimal - - dt - font-weight: bold - - table - width: 100% - border-collapse: collapse - text-align: left - font-size: $font-size - 2px - overflow: auto - display: block - - th - padding: 8px - border-bottom: 1px dashed $color-border - color: $color-accent-2 - font-weight: bold - font-size: $font-size - 1px - - td - padding: 0 8px - border-bottom: none diff --git a/static/_styl/_mixins.styl b/static/_styl/_mixins.styl deleted file mode 100644 index e8ac8a2..0000000 --- a/static/_styl/_mixins.styl +++ /dev/null @@ -1,22 +0,0 @@ -antialias() - -moz-osx-font-smoothing: grayscale - -webkit-font-smoothing: antialiased - -hyphens($value) - hyphens: $value - -moz-hyphens: $value - -ms-hyphens: $value - -webkit-hyphens: $value - -underline($size, $color) - background-image: linear-gradient(transparent, transparent $size, $color $size, $color) - background-position: bottom - background-size: 100% 6px - background-repeat: repeat-x - -no-select() - user-select: none - -khtml-user-select: none - -o-user-select: none - -moz-user-select: none - -webkit-user-select: none diff --git a/static/_styl/_partial/archive.styl b/static/_styl/_partial/archive.styl deleted file mode 100644 index 9865351..0000000 --- a/static/_styl/_partial/archive.styl +++ /dev/null @@ -1,25 +0,0 @@ -#archive - .post-list - padding: 0 - - .post-item - margin-bottom: 1rem - margin-left: 0 - list-style-type: none - - .meta - display: block - margin-right: 16px - min-width: 100px - color: $color-meta - font-size: 14px - - @media (min-width: 480px) - .post-list - .post-item - display: flex - margin-bottom: 5px - margin-left: 1rem - - .meta - text-align: left diff --git a/static/_styl/_partial/article.styl b/static/_styl/_partial/article.styl deleted file mode 100644 index a5bfcbd..0000000 --- a/static/_styl/_partial/article.styl +++ /dev/null @@ -1,137 +0,0 @@ -article - header - .posttitle - margin-top: 0 - margin-bottom: 0 - text-transform: none - font-size: 1.5em - line-height: 1.25 - - .meta - margin-top: 0 - margin-bottom: 1rem - - .meta * - color: $color-accent-3 - font-size: .85rem - - .author - text-transform: uppercase - letter-spacing: .01em - font-weight: 700 - - .postdate - display: inline - - .content - h2:before - position: absolute - top: -4px - left: -1rem - color: $color-accent-1 - content: "#" - font-weight: bold - font-size: 1.2rem - - img - video - display: block - margin: auto - max-width: 100% - height: auto - - /* http://webdesignerwall.com/tutorials/css-elastic-videos */ - .video-container - position: relative - overflow: hidden - padding-top: (9 / 16 * 100)% // 16:9 ratio - height: 0 - - iframe, object, embed - position: absolute - top: 0 - left: 0 - margin-top: 0 - width: 100% - height: 100% - - blockquote - margin: 1rem 10px - padding: .5em 10px - background: inherit - color: $color-quote - quotes: "\201C" "\201D" "\2018" "\2019" - font-weight: bold - - p - margin: 0 - - &:before - margin-right: .25em - color: $color-quote - content: "\201C" - vertical-align: -.4em - font-size: 2em - line-height: .1em - - footer - margin: line-height 0 - color: $color-meta - font-size: 11px - - a - background-image: linear-gradient(transparent, transparent 5px, $color-meta 5px, $color-meta) - color: $color-meta - - a:hover - background-image: linear-gradient(transparent, transparent 4px, lighten($color-meta, 20%) 4px, lighten($color-meta, 20%)) - color: lighten($color-meta, 20%) - - cite - &:before - padding: 0 .5em - content: "—" - - .pullquote - margin: 0 - width: 45% - text-align: left - - &.left - margin-right: 1em - margin-left: .5em - - &.right - margin-right: .5em - margin-left: 1em - - .caption - position: relative - display: block - margin-top: .5em - color: $color-meta - text-align: center - font-size: .9em - -.posttitle - text-transform: none - font-size: 1.5em - line-height: 1.25 - -.article-tag - .tag-link - &:before - content: "#" - underline(10px, $color-link) - -.article-category - .category-link - underline(10px, $color-link) - -@media (min-width: 480px) - .article-tag, - .article-category - display: inline - - &:before - content: "|" diff --git a/static/_styl/_partial/categories.styl b/static/_styl/_partial/categories.styl deleted file mode 100644 index fcc179c..0000000 --- a/static/_styl/_partial/categories.styl +++ /dev/null @@ -1,11 +0,0 @@ -#categories - .category-list-title - color: $color-meta - .category-list - .category-list-item - .category-list-count - color: $color-meta - .category-list-count:before - content: " (" - .category-list-count:after - content: ")" diff --git a/static/_styl/_partial/comments.styl b/static/_styl/_partial/comments.styl deleted file mode 100644 index 49a1ef0..0000000 --- a/static/_styl/_partial/comments.styl +++ /dev/null @@ -1,2 +0,0 @@ -.blog-post-comments - margin-top: 4rem diff --git a/static/_styl/_partial/footer.styl b/static/_styl/_partial/footer.styl deleted file mode 100644 index 14cb999..0000000 --- a/static/_styl/_partial/footer.styl +++ /dev/null @@ -1,60 +0,0 @@ -#footer - position: absolute - bottom: 0 - margin-bottom: 10px - width: 100% - color: $color-meta - vertical-align: top - text-align: center - font-size: 11px - - ul - margin: 0 - padding: 0 - list-style: none - - li - display: inline-block - margin-right: 15px - border-right: 1px solid - border-color: $color-border - vertical-align: middle - - a - margin-right: 15px - - li:last-child - margin-right: 0 - border-right: 0 - - a - margin-right: 0 - - a - color: $color-meta - text-decoration: underline - background-image: none - - a:hover - color: lighten($color-meta, 20%) - - .footer-left - height: 20px - vertical-align: middle - line-height: 20px - -@media (min-width: 39rem) - #footer - display: flex - flex-flow: row wrap - justify-content: space-between - align-items: center - align-content: center - margin-bottom: 20px - - .footer-left - align-self: flex-start - margin-right: 20px - - .footer-right - align-self: flex-end diff --git a/static/_styl/_partial/header.styl b/static/_styl/_partial/header.styl deleted file mode 100644 index d04514b..0000000 --- a/static/_styl/_partial/header.styl +++ /dev/null @@ -1,109 +0,0 @@ -#header - margin: 0 auto 2rem - width: 100% - - h1, .h1 - margin-top: 0 - margin-bottom: 0 - color: $color-text - letter-spacing: .01em - font-weight: 700 - font-style: normal - font-size: 1.5rem - line-height: 2rem - - antialias() - - a - background: none - color: inherit - text-decoration: none - - #logo - display: inline-block - float: left - margin-right: 20px - width: $logo-width - height: $logo-height - border-radius: 5px - background-size: $logo-width $logo-height - background-repeat: no-repeat - if $logo-grayout - filter: grayscale(100%) - -webkit-filter: grayscale(100%) - - #nav - color: $color-accent-1 - letter-spacing: .01em - font-weight: 200 - font-style: normal - font-size: .8rem - - ul - margin: 0 - padding: 0 - list-style-type: none - line-height: 15px - - a - margin-right: 15px - color: $color-accent-1 - - a:hover - underline(5px, $color-accent-1) - - li - display: inline-block - margin-right: 15px - border-right: 1px dotted - border-color: $color-accent-1 - vertical-align: middle - - .icon - display: none - - li:last-child - margin-right: 0 - border-right: 0 - - a - margin-right: 0 - -if $logo-grayout - #header:hover - #logo - filter: none - -webkit-filter: none - -@media screen and (max-width: 480px) - #header #title - display: table - margin-right: 5rem - min-height: $logo-height - h1 - display: table-cell - vertical-align: middle - - #header #nav - ul - a:hover - background: none - - li - display: none - border-right: 0 - - li.icon - position: absolute - top: 77px - right: 1rem - display: inline-block - - ul.responsive - li - display: block - - li:not(:first-child) - padding-top: 1rem - padding-left: $logo-width + 20px - font-size: 1rem diff --git a/static/_styl/_partial/index.styl b/static/_styl/_partial/index.styl deleted file mode 100644 index aa15aca..0000000 --- a/static/_styl/_partial/index.styl +++ /dev/null @@ -1,32 +0,0 @@ -.post-list - padding: 0 - - .post-item - margin-bottom: 1rem - margin-left: 0 - list-style-type: none - - .meta - display: block - margin-right: 16px - min-width: 100px - color: $color-meta - font-size: 14px - -@media (min-width: 480px) - .post-list - .post-item - display: flex - margin-bottom: 5px - - .meta - text-align: left - -.project-list - padding: 0 - list-style: none - - .project-item - margin-bottom: 5px - p - display: inline diff --git a/static/_styl/_partial/pagination.styl b/static/_styl/_partial/pagination.styl deleted file mode 100644 index 5f53dc6..0000000 --- a/static/_styl/_partial/pagination.styl +++ /dev/null @@ -1,23 +0,0 @@ -.pagination - display: inline-block - margin-top: 2rem - width: 100% - text-align: center - - .page-number - color: $color-text - font-size: .8rem - - a - padding: 4px 6px - border-radius: 5px - // background-color: $color-accent-1 - background-image: none - color: $color-text - text-decoration: none - - a:hover - background-image: none - - a:hover:not(.active) - color: $color-accent-2 diff --git a/static/_styl/_partial/post/actions_desktop.styl b/static/_styl/_partial/post/actions_desktop.styl deleted file mode 100644 index 8634438..0000000 --- a/static/_styl/_partial/post/actions_desktop.styl +++ /dev/null @@ -1,221 +0,0 @@ -#header-post - position: fixed - top: 2rem - right: 0 - display: inline-block - float: right - z-index: 100 - - a - background: none - color: inherit - text-decoration: none - - a.icon - background: none - - &:hover - color: $color-link - - nav - ul - display: block; - list-style-image: none; - list-style-position: outside; - list-style-type: none; - list-style-type: none; - padding-inline-start: 40px; - li - display: list-item; - margin-right: 0px; - - nav > ul - margin-block-end: 1em; - margin-block-start: 1em; - - ul - display: inline-block - margin: 0 - padding: 0 - list-style-type: none - - li - display: inline-block - margin-right: 15px - vertical-align: middle - - li:last-child - margin-right: 0 - - #menu-icon - float: right - margin-right: 2rem - margin-left: 15px - - &:hover - color: $color-accent-1 - - #menu-icon-tablet - float: right - margin-right: 2rem - margin-left: 15px - - &:hover - color: $color-accent-1 - - #top-icon-tablet - position: fixed - right: 2rem - bottom: 2rem - margin-right: 2rem - margin-left: 15px - - &:hover - color: $color-accent-1 - - .active - color: $color-accent-1 - - #menu - visibility: hidden - margin-right: 2rem - - #nav - color: $color-accent-1 - letter-spacing: .01em - font-weight: 200 - font-style: normal - font-size: .8rem - - ul - line-height: 15px - - a - margin-right: 15px - color: $color-accent-1 - - a:hover - underline(5px, $color-accent-1) - - li - border-right: 1px dotted $color-accent-1 - - li:last-child - margin-right: 0 - border-right: 0 - - a - margin-right: 0 - - #actions - float: right - margin-top: 2rem - margin-right: 2rem - width: 100% - text-align: right - - ul - display: block - - .info - display: block - font-style: italic - - #share - clear: both - padding-top: 1rem - padding-right: 2rem - text-align: right - - li - display: block - margin: 0 - - #toc - float: right - clear: both - overflow: auto - margin-top: 1rem - padding-right: 2rem - max-width: 20em - max-height: calc(95vh - 7rem) - text-align: right - - a:hover - color: $color-link - - // .toc-level-1 > .toc-link - // display: none - - nav > ul > li - color: $color-text - font-size: .8rem - - &:before - color: $color-accent-1 - content: "#" - margin-right: 8px - - nav > ul > li > ul > li - color: $color-meta - font-size: .7rem - - &:before - color: $color-accent-1 - content: "·" - font-weight: bold - margin-right: 3px - - nav > ul > li > ul > li > ul > li - color: darken($color-meta, 20%) - font-size: .4rem - - .toc-level-5 - display: none - - .toc-level-6 - display: none - - .toc-number - display: none - -// smartphone + phapblet -@media screen and (max-width: 500px) - #header-post - display: none - -@media screen and (max-width: 900px) - #header-post - #menu-icon - display: none - - #actions - display: none - -@media screen and (max-width: 1199px) - #header-post - #toc - display: none - -@media screen and (min-width: 900px) - #header-post - #menu-icon-tablet - display: none !important - - #top-icon-tablet - display: none !important - -@media screen and (min-width: 1199px) - #header-post - #actions - width: auto - - ul - display: inline-block - float: right - - .info - display: inline - float: left - margin-right: 2rem - font-style: italic diff --git a/static/_styl/_partial/post/actions_mobile.styl b/static/_styl/_partial/post/actions_mobile.styl deleted file mode 100644 index 17911a7..0000000 --- a/static/_styl/_partial/post/actions_mobile.styl +++ /dev/null @@ -1,139 +0,0 @@ -#footer-post - position: fixed - right: 0 - bottom: 0 - left: 0 - z-index: 5000000 - width: 100% - border-top: 1px solid $color-border - background: $color-footer-mobile-1 - transition: opacity .2s - - a - background: none - color: inherit - text-decoration: none - - a.icon - background: none - - &:hover - color: $color-link - - #nav-footer - padding-right: 1rem - padding-left: 1rem - background: $color-footer-mobile-2 - text-align: center - - a - color: $color-accent-1 - font-size: 1em - - a:hover - underline(5px, $color-accent-1) - - ul - display: table - margin: 0 - padding: 0 - width: 100% - list-style-type: none - - li - display: inline-table - padding: 10px - width: 20% - vertical-align: middle - - #actions-footer - overflow: auto - margin-top: 1rem - margin-bottom: 1rem - padding-right: 1rem - padding-left: 1rem - width: 100% - text-align: center - white-space: nowrap - - a - display: inline-block - padding-left: 1rem - color: $color-accent-1 - - #share-footer - padding-right: 1rem - padding-left: 1rem - background: $color-footer-mobile-2 - text-align: center - - ul - display: table - margin: 0 - padding: 0 - width: 100% - list-style-type: none - - li - display: inline-table - padding: 10px - width: 20% - vertical-align: middle - - #toc-footer - clear: both - padding-top: 1rem - padding-bottom: 1rem - background: $color-footer-mobile-2 - text-align: left - - #TableOfContents - ul - margin: 0 - padding-left: 20px - list-style-type: none - - li - line-height: 30px - - a:hover - color: $color-link - - // .toc-level-1 > .toc-link - // display: none - - #TableOfContents > ul > li - color: $color-text - font-size: .8rem - - &:before - color: $color-accent-1 - content: "#" - margin-right: 8px; - - #TableOfContents > ul > li > ul > li - color: $color-meta - font-size: .7rem - line-height: 15px - - &:before - color: $color-accent-1 - content: "·"; - font-weight: bold; - margin-right: 3px; - - #TableOfContents > ul > li > ul > li > ul > li - display: none - - // .toc-level-5 - // display: none - - // .toc-level-6 - // display: none - - // .toc-number - // display: none - -@media screen and (min-width: 500px) - #footer-post-container - display: none diff --git a/static/_styl/_partial/search.styl b/static/_styl/_partial/search.styl deleted file mode 100644 index 589bff7..0000000 --- a/static/_styl/_partial/search.styl +++ /dev/null @@ -1,46 +0,0 @@ -.search-input - padding: 4px 7px - width: 100% - outline: none - border: solid 1px $color-accent-3 - border-radius: 5px - background-color: $color-background - color: $color-text - font-size: 1.2rem - -webkit-border-radius: 5px - -moz-border-radius: 5px - - &:focus - border: solid 1px $color-accent-1 - -#search-result - ul.search-result-list - padding: 0 - list-style-type: none - - li - margin: 2em auto - - a.search-result-title - background-image: none - color: $color-text - text-transform: capitalize - font-weight: bold - line-height: 1.2 - - p.search-result - overflow: hidden - margin: .4em auto - max-height: 13em - text-align: justify - font-size: .8em - - em.search-keyword - border-bottom: 1px dashed $color-link - color: $color-link - font-weight: bold - -.search-no-result - display: none - padding-bottom: .5em - color: $color-text diff --git a/static/_styl/_partial/tags.styl b/static/_styl/_partial/tags.styl deleted file mode 100644 index 41522e6..0000000 --- a/static/_styl/_partial/tags.styl +++ /dev/null @@ -1,9 +0,0 @@ -#tag-cloud - .tag-cloud-title - color: $color-meta - .tag-cloud-tags - clear: both - text-align: center - a - display: inline-block - margin: 10px diff --git a/static/_styl/_partial/tooltip.styl b/static/_styl/_partial/tooltip.styl deleted file mode 100644 index 1d35faf..0000000 --- a/static/_styl/_partial/tooltip.styl +++ /dev/null @@ -1,78 +0,0 @@ -// ref: https://github.com/primer/primer/blob/master/modules/primer-tooltips/lib/tooltips.scss -.tooltipped - position: relative - -// This is the tooltip bubble -.tooltipped::after - position: absolute - z-index: 1000000 - display: none - padding: .2em .5em - -webkit-font-smoothing: subpixel-antialiased - color: $color-background - font-display: swap // @stylint ignore - font-weight: 400 - font-size: $font-size * 0.8 - font-family: $font-family-body - line-height: $line-height - text-rendering: geometricPrecision - text-align: center - word-wrap: break-word - white-space: pre - content: attr(aria-label) - background: $color-text - border-radius: 3px - opacity: 0 - -// This is the tooltip arrow -.tooltipped::before - position: absolute - z-index: 1000001 - display: none - width: 0 - height: 0 - color: $color-text - pointer-events: none - content: '' - border: 6px solid transparent - opacity: 0 - -// delay animation for tooltip -@keyframes tooltip-appear - from - opacity: 0 - to - opacity: 1 - -// This will indicate when we'll activate the tooltip -.tooltipped:hover, -.tooltipped:active, -.tooltipped:focus - &::before, - &::after - display: inline-block - text-decoration: none - animation-name: tooltip-appear - animation-duration: 0.1s - animation-fill-mode: forwards - animation-timing-function: ease-in - -// Tooltipped south -.tooltipped-s, -.tooltipped-sw - &::after - top: 100% - right: 50% - margin-top: 6px - &::before - top: auto - right: 50% - bottom: -7px - margin-right: -6px - border-bottom-color: $color-text -.tooltipped-sw::after - margin-right: -16px - -// Move the tooltip body to the center of the object. -.tooltipped-s::after - transform: translateX(50%)
\ No newline at end of file diff --git a/static/_styl/_util.styl b/static/_styl/_util.styl deleted file mode 100644 index b6e3f87..0000000 --- a/static/_styl/_util.styl +++ /dev/null @@ -1,317 +0,0 @@ -/* Basscss */ -.inline - display: inline - -.block - display: block - -.inline-block - display: inline-block - -.table - display: table - -.table-cell - display: table-cell - -.overflow-hidden - overflow: hidden - -.overflow-scroll - overflow: scroll - -.overflow-auto - overflow: auto - -.clearfix:before, .clearfix:after - display: table - content: " " - -.clearfix:after - clear: both - -.left - float: left - -.right - float: right - -.fit - max-width: 100% - -.truncate - display: inline-block - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - -.max-width-1 - max-width: 24rem - -.max-width-2 - max-width: 32rem - -.max-width-3 - max-width: 48rem - -.max-width-4 - max-width: 64rem - -.border-box - box-sizing: border-box - -.m0 - margin: 0 - -.mt0 - margin-top: 0 - -.mr0 - margin-right: 0 - -.mb0 - margin-bottom: 0 - -.ml0 - margin-left: 0 - -.mx0 - margin-right: 0 - margin-left: 0 - -.my0 - margin-top: 0 - margin-bottom: 0 - -.m1 - margin: .5rem - -.mt1 - margin-top: .5rem - -.mr1 - margin-right: .5rem - -.mb1 - margin-bottom: .5rem - -.ml1 - margin-left: .5rem - -.mx1 - margin-right: .5rem - margin-left: .5rem - -.my1 - margin-top: .5rem - margin-bottom: .5rem - -.m2 - margin: 1rem - -.mt2 - margin-top: 1rem - -.mr2 - margin-right: 1rem - -.mb2 - margin-bottom: 1rem - -.ml2 - margin-left: 1rem - -.mx2 - margin-right: 1rem - margin-left: 1rem - -.my2 - margin-top: 1rem - margin-bottom: 1rem - -.m3 - margin: 2rem - -.mt3 - margin-top: 2rem - -.mr3 - margin-right: 2rem - -.mb3 - margin-bottom: 2rem - -.ml3 - margin-left: 2rem - -.mx3 - margin-right: 2rem - margin-left: 2rem - -.my3 - margin-top: 2rem - margin-bottom: 2rem - -.m4 - margin: 4rem - -.mt4 - margin-top: 4rem - -.mr4 - margin-right: 4rem - -.mb4 - margin-bottom: 4rem - -.ml4 - margin-left: 4rem - -.mx4 - margin-right: 4rem - margin-left: 4rem - -.my4 - margin-top: 4rem - margin-bottom: 4rem - -.mxn1 - margin-right: -.5rem - margin-left: -.5rem - -.mxn2 - margin-right: -1rem - margin-left: -1rem - -.mxn3 - margin-right: -2rem - margin-left: -2rem - -.mxn4 - margin-right: -4rem - margin-left: -4rem - -.ml-auto - margin-left: auto - -.mr-auto - margin-right: auto - -.mx-auto - margin-right: auto - margin-left: auto - -.p0 - padding: 0 - -.pt0 - padding-top: 0 - -.pr0 - padding-right: 0 - -.pb0 - padding-bottom: 0 - -.pl0 - padding-left: 0 - -.px0 - padding-right: 0 - padding-left: 0 - -.py0 - padding-top: 0 - padding-bottom: 0 - -.p1 - padding: .5rem - -.pt1 - padding-top: .5rem - -.pr1 - padding-right: .5rem - -.pb1 - padding-bottom: .5rem - -.pl1 - padding-left: .5rem - -.py1 - padding-top: .5rem - padding-bottom: .5rem - -.px1 - padding-right: .5rem - padding-left: .5rem - -.p2 - padding: 1rem - -.pt2 - padding-top: 1rem - -.pr2 - padding-right: 1rem - -.pb2 - padding-bottom: 1rem - -.pl2 - padding-left: 1rem - -.py2 - padding-top: 1rem - padding-bottom: 1rem - -.px2 - padding-right: 1rem - padding-left: 1rem - -.p3 - padding: 2rem - -.pt3 - padding-top: 2rem - -.pr3 - padding-right: 2rem - -.pb3 - padding-bottom: 2rem - -.pl3 - padding-left: 2rem - -.py3 - padding-top: 2rem - padding-bottom: 2rem - -.px3 - padding-right: 2rem - padding-left: 2rem - -.p4 - padding: 4rem - -.pt4 - padding-top: 4rem - -.pr4 - padding-right: 4rem - -.pb4 - padding-bottom: 4rem - -.pl4 - padding-left: 4rem - -.py4 - padding-top: 4rem - padding-bottom: 4rem - -.px4 - padding-right: 4rem - padding-left: 4rem diff --git a/static/_styl/_variables.styl b/static/_styl/_variables.styl deleted file mode 100644 index c32893e..0000000 --- a/static/_styl/_variables.styl +++ /dev/null @@ -1,13 +0,0 @@ -// Fonts -$font-family-body = "JetBrains Mono", monospace -$font-family-mono = "JetBrains Mono", monospace -$font-family-tt = "Inconsolata", monospace -$font-size = 14px -$line-height = 1.725 -$page-width = 48rem -// Logo -$logo-width = 50px -$logo-height = 50px -$logo-grayout = true -// Colors -$colors = "dark" // white dark light classic diff --git a/static/_styl/rtl.styl b/static/_styl/rtl.styl deleted file mode 100644 index 6d9f5bb..0000000 --- a/static/_styl/rtl.styl +++ /dev/null @@ -1,93 +0,0 @@ -@font-face - font-family: Vazir - src: url('../lib/vazir-font/Vazir.eot') - src: url('../lib/vazir-font/Vazir.eot?#iefix') format('embedded-opentype'), - url('../lib/vazir-font/Vazir.woff2') format('woff2'), - url('../lib/vazir-font/Vazir.woff') format('woff'), - url('../lib/vazir-font/Vazir.ttf') format('truetype') - font-weight: normal - -@font-face - font-family: Vazir - src: url('../lib/vazir-font/Vazir-Bold.eot') - src: url('../lib/vazir-font/Vazir-Bold.eot?#iefix') format('embedded-opentype'), - url('../lib/vazir-font/Vazir-Bold.woff2') format('woff2'), - url('../lib/vazir-font/Vazir-Bold.woff') format('woff'), - url('../lib/vazir-font/Vazir-Bold.ttf') format('truetype') - font-weight: bold - -@font-face - font-family: Vazir - src: url('../lib/vazir-font/Vazir-Light.eot') - src: url('../lib/vazir-font/Vazir-Light.eot?#iefix') format('embedded-opentype'), - url('../lib/vazir-font/Vazir-Light.woff2') format('woff2'), - url('../lib/vazir-font/Vazir-Light.woff') format('woff'), - url('../lib/vazir-font/Vazir-Light.ttf') format('truetype') - font-weight: 300 - -.rtl - font-family: Vazir, sans-serif - direction: rtl - - #nav - li - margin-right: 0px !important // @stylint ignore - padding-left: 15px - border-right: 0px !important // @stylint ignore - border-left: 1px dotted - - li:last-child - margin-right: 15px !important // @stylint ignore - border-left: 0 !important // @stylint ignore - - #header - #logo - float: right - margin-right: 0 - margin-left: 20px - - #footer - li - margin-right: 0px - padding-left: 15px - border-right: 0px - border-left: 1px dotted - - li:last-child - margin-right: 15px !important // @stylint ignore - border-left: 0 !important // @stylint ignore - - #logo - float: right - - article - .content - h2:before - right: -1rem - - .post-list - .post-item - .meta - margin-left: 16px - margin-right: inherit - -@media screen and (min-width: 480px) - .rtl - .post-list - .post-item - .meta - text-align: left - -@media screen and (max-width: 480px) - .rtl - #header - #title - margin-left: 5rem - margin-right: 0 - - #nav - ul - li - left: 1rem - right: auto - border: 0
\ No newline at end of file diff --git a/static/_styl/style.styl b/static/_styl/style.styl deleted file mode 100644 index 44d10c4..0000000 --- a/static/_styl/style.styl +++ /dev/null @@ -1,211 +0,0 @@ -@import "_variables" -@import "_colors/" + $colors -@import "_util" -@import "_mixins" -@import "_extend" -@import "_fonts" - -global-reset() - -*, *:before, *:after - box-sizing: border-box - -html - margin: 0 - padding: 0 - height: 100% - border-top: 2px solid $color-text - -webkit-text-size-adjust: 100% - -ms-text-size-adjust: 100% - -body - margin: 0 - height: 100% - background-color: $color-background - color: $color-text - font-display: swap // @stylint ignore - font-weight: 400 - font-size: $font-size - font-family: $font-family-body - line-height: $line-height - text-rendering: geometricPrecision - flex: 1 - - antialias() - - @extend $base-style - -.content - position: relative - display: flex - flex-direction: column - min-height: 100% - overflow-wrap: break-word - - p - hyphens(auto) - - code - hyphens(manual) - - a - color: $color-text - text-decoration: none - - underline(5px, $color-text) - - &:hover - background-image: linear-gradient(transparent, transparent 4px, $color-link 4px, $color-link) - - a.icon - background: none - - &:hover - color: $color-link - - h1 a, .h1 a, h2 a, h3 a, h4 a, h5 a, h6 a - background: none - color: inherit - text-decoration: none - - h1 a:hover, .h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover - underline(6px, $color-link) - - h6 - a - background: none - color: inherit - text-decoration: none - - h6 - a:hover - underline(6px, $color-link) - -@media (min-width: 540px) - .image-wrap - flex-direction: row - margin-bottom: 2rem - - .image-block - flex: 1 0 35% - margin-right: 2rem - - p - flex: 1 0 65% - -.max-width - max-width: $page-width - -@media (max-width: 480px) - // smaller margins at smaller screen widths - .px3 - padding-right: 1rem - padding-left: 1rem - - .my4 - margin-top: 2rem - margin-bottom: 2rem - -@media (min-width: 480px) - p - text-align: justify - -@import "_partial/header" -@import "_partial/post/actions_desktop" -@import "_partial/post/actions_mobile" -@import "_partial/index" -@import "_partial/article" -@import "_partial/archive" -@import "_partial/comments" -@import "_partial/footer" -@import "_partial/pagination" -@import "_partial/search" -@import "_partial/tags" -@import "_partial/tooltip" -@import "_partial/categories" -// Code -// @import "_highlight/" + $highlight - -pre - overflow-x: auto - padding: 10px 15px - padding-bottom: 0 - border: 1px dotted $color-border - border-radius: 4px - font-size: 13px - font-family: $font-family-mono - line-height: 22px - -webkit-border-radius: 4px - - code - display: block - padding: 0 - border: none - -code - padding: 0 5px - border: 1px dotted $color-border - border-radius: 2px - -webkit-border-radius: 2px - -.highlight - overflow-x: auto - margin: 1rem 0 - padding: 10px 15px - border-radius: 4px - background: $color-background-code - font-family: $font-family-mono - // color: $color-accent-3 - -webkit-border-radius: 4px - - figcaption - margin: -5px 0 5px - color: $color-meta-code - font-size: .9em - zoom: 1 - - a - float: right - color: $color-meta-code - font-style: italic - font-size: .8em - - underline(10px, $color-link) - - a:hover - color: lighten($color-meta-code, 20%) - - &:before, content: "" - display: table - - &:after - clear: both - - &:hover - .btn-copy - opacity: 1 - - .btn-copy - font-size: 1.2rem - position: absolute - right: 20px - opacity: 0 - transition: opacity 0.2s ease-in - &:hover - color: $color-accent-1 - - pre - margin: 0 - padding: 0 - border: none - background: none - - table - width: auto - - td.gutter - text-align: right - opacity: .2 - - .line - height: 22px diff --git a/static/js/code-copy.js b/static/js/code-copy.js new file mode 100644 index 0000000..5a07bf8 --- /dev/null +++ b/static/js/code-copy.js @@ -0,0 +1,36 @@ +(() => { + + function createCopyButton(codeNode) { + const copyBtn = document.createElement('button') + copyBtn.className = 'code-copy-btn' + copyBtn.type = 'button' + copyBtn.innerText = 'copy' + + let resetTimer + copyBtn.addEventListener('click', () => { + navigator.clipboard.writeText(codeNode.innerText).then(() => { + copyBtn.innerText = 'copied!' + }).then(() => { + clearTimeout(resetTimer) + resetTimer = setTimeout(() => { + copyBtn.innerText = 'copy' + }, 1000) + }) + }) + + return copyBtn + } + + document.querySelectorAll('pre > code') + .forEach((codeNode) => { + const copyBtn = createCopyButton(codeNode); + const preNode = codeNode.parentNode + codeNode.parentNode.insertBefore(copyBtn, codeNode) + }) + + document.querySelectorAll('.highlight table > tbody > tr > td:first-child .code-copy-btn') + .forEach((btn) => { + btn.remove() + }) + +})()
\ No newline at end of file @@ -3,9 +3,10 @@ license = "MIT" licenselink = "https://github.com/monkeyWzr/hugo-theme-cactus/blob/master/LICENSE" description = "A clean, responsive hugo theme for personal blog. Forked from hexo theme cactus created by @probberechts." homepage = "https://github.com/monkeyWzr/hugo-theme-cactus" +demosite = "https://www.takuzen.me/hugo-theme-cactus/" tags = ["blog", "responsive", "clean"] features = ["mathjax", "customizable", "color"] -min_version = "0.48" +min_version = "0.55" # If the theme has a single author [author] |