diff --git a/.gitignore b/.gitignore index d2dceebb3..642f7bd1c 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ _site/ .sass-cache .jekyll-cache .jekyll-metadata +.bundle *.gem Gemfile.lock vendor \ No newline at end of file diff --git a/Gemfile b/Gemfile index 9e357cc34..c302a2f97 100644 --- a/Gemfile +++ b/Gemfile @@ -21,6 +21,7 @@ gem "jekyll-sitemap", "~> 1.3" gem "jekyll-seo-tag", "~> 2.6" gem "kramdown-parser-gfm", "~> 1.1.0" gem "webrick", "~> 1.7.0" +gem 'jekyll-loading-lazy', "~> 0.1.1" # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem # and associated library. diff --git a/_config.yml b/_config.yml index 2b99f94be..53b6c37ea 100644 --- a/_config.yml +++ b/_config.yml @@ -1,7 +1,7 @@ title: Example.com description: "Satellite - jekyll blog theme" logo_img: "/assets/img/favicon.webp" -profile_img: "/assets/img/profile.jpg" +profile_img: "/assets/img/profile.webp" # Social Links email: example@gmail.com @@ -24,6 +24,7 @@ plugins: - jekyll-feed - jekyll-sitemap - jekyll-seo-tag + - jekyll-loading-lazy exclude: - docs/ diff --git a/_includes/footer.html b/_includes/footer.html index 6b2804e51..cfab68fef 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,6 +1,5 @@ - - - + + - - {% if page.title %}{{ page.title }} - {% else %}{{ site.title }} - {% endif %} - - \ No newline at end of file diff --git a/_includes/pagination.html b/_includes/pagination.html index 4146485a1..b7469a47c 100644 --- a/_includes/pagination.html +++ b/_includes/pagination.html @@ -5,7 +5,7 @@

{% if page_level == 1 %} All Posts {% else %} - {{ page.path | remove: 'index.md' | split: "/" | last }} + {{ category_title }} {% endif %}

diff --git a/_includes/post.html b/_includes/post.html index c20c113ae..6475ae035 100644 --- a/_includes/post.html +++ b/_includes/post.html @@ -33,7 +33,7 @@ - {% endif %} - + - @@ -61,5 +61,5 @@
- +
\ No newline at end of file diff --git a/_includes/search_event.html b/_includes/search_event.html index f70dd5996..5bfe1208f 100644 --- a/_includes/search_event.html +++ b/_includes/search_event.html @@ -1,8 +1,7 @@ {%- assign page_list = site.pages | where_exp: "item", "item.title != nil" -%} - - {% else %} - - - - - + + + {% endif %} - {% include search_event.html %} + {% include search_event.html %} \ No newline at end of file diff --git a/_sass/darkmode.scss b/_sass/darkmode.scss index 52d71e632..d8ab5620b 100644 --- a/_sass/darkmode.scss +++ b/_sass/darkmode.scss @@ -1,211 +1,204 @@ body.dark-theme { -background: #1E1E1F; +background:#1E1E1F; -a, span, p, h1, h2, h3, i, mark { color: #aaa; } +a, span, p, h1, h2, h3, i, mark { color:#aaa; } -svg { fill: #aaa; } +svg { fill:#aaa; } -#stars, #loading { background: #1E1E1F; } +#stars, #loading { background:#1E1E1F; } -#loading p { color: cadetblue; } +#loading p { color:cadetblue; } -.sidebar-left { background-color: #313132; } +.sidebar-left { background-color:#313132; } -.nav-item span { color: #ccc; } +.nav-item span { color:#ccc; } -.nav-lh svg { fill: goldenrod; } +.nav-lh svg { fill:goldenrod; } .nav-list-expander { - &:hover { - svg { fill: goldenrod; } - } + &:hover { + svg { fill:goldenrod; } + } } -.nav-list li > .nav-list { background: #464647; } +.nav-list li > .nav-list { background:#464647; } .side-banner { - box-shadow: 0px 4px 8px 0 black; + box-shadow:0px 4px 8px 0 black; - button { - background-color: #313132; + button { + background-color:#313132; - &:hover { background-color: #1E1E1F; } - } + &:hover { background-color:#1E1E1F; } + } - svg { fill: $color-aqua; } + svg { fill:$color-aqua; } } #contact{ - ul>li>a { - &:hover{ - svg { fill: indianred; } - } + ul>li>a { + &:hover{ + svg { fill:indianred; } } + } - a { color: mediumseagreen; } + a { color:mediumseagreen; } } #post { - .inner-header { background: #464647; } - - .inner-content { background: #313132; } + .inner-header { background:#464647; } + .inner-content { background:#313132; } } -.transbox { background-color: rgba(64, 64, 64, 0.6); } +.transbox { background-color:rgba(64, 64, 64, 0.6); } .post-title, .info-box * { - color: #eee; - fill : #eee; - filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); + color:#eee; + fill :#eee; + filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6)); } main { - h1, h2, h3, p { color: #aaa; } - - strong { color: lightgrey; } - - a { - color: dodgerblue; - - &::before { - color: mediumseagreen; - text-decoration-color: mediumseagreen; - } - } - - code, - .highlighter-rouge .highlight { - border: 1px solid dimgrey; - background-color: #363a41; - color: goldenrod; - } - - blockquote { - background: #1E1E1F; - border-left: 4px solid #464647; - } - - table { background-color: #464647; } + h1, h2, h3, p { color:#aaa; } - table, head { box-shadow: 0 0 32px 0 rgba(128,128,128,.15); } + strong { color:lightgrey; } - th, td { border: 2px solid #3c3c3d; } + a { + color:dodgerblue; - thead th, - tbody td { - color: #aaa; - } - - hr { background: cadetblue; } - - img + em, - li { - color: #aaa; + &::before { + color:mediumseagreen; + text-decoration-color:mediumseagreen; } + } + + code, + .highlighter-rouge .highlight { + border:1px solid dimgrey; + background-color:#363a41; + color:goldenrod; + } + + blockquote { + background:#1E1E1F; + border-left:4px solid #464647; + } + + table { background-color:#464647; } + table, head { box-shadow:0 0 32px 0 rgba(128,128,128,.15); } + + th, td { border:2px solid #3c3c3d; } + thead th, + tbody td { + color:#aaa; + } + + hr { background:cadetblue; } + + img + em, + li { + color:#aaa; + } } -#related-box span { color: darkgoldenrod; } - -#related-posts .title { color: #ccc; } +#related-box span { color:darkgoldenrod; } +#related-posts .title { color:#ccc; } +#related-posts li:hover { box-shadow:8px 8px 16px -4px rgba(255, 255, 255, .2); } -#related-posts li:hover { box-shadow: 8px 8px 16px -4px rgba(255, 255, 255, .2); } - -.category-tree a { color: goldenrod; } +.category-tree a { color:goldenrod; } .category-header { - color: cadetblue; - text-decoration: underline slategrey; + color:cadetblue; + text-decoration:underline slategrey; } #article_content { - border-bottom: 2px solid #464647; - - .box_contents { background-image: none; } - - .txt_post { color: #aaa; } - - .title_post { color: darkgoldenrod; } + border-bottom:2px solid #464647; - .date { color: #ccc; } + .box_contents { background-image:none; } - .category { color: mediumseagreen; } + .txt_post { color:#aaa; } + .title_post { color:darkgoldenrod; } + .date { color:#ccc; } + .category { color:mediumseagreen; } } .pagination-number, .pagination-button { - color: #ccc; + color:#ccc; } - .pagination-number:hover, .pagination-button:not(.disabled):hover { - background: grey; + background:grey; } #search { - background: rgba(64, 64, 64, 0.875); + background:rgba(64, 64, 64, 0.875); - ul { - border-bottom: 2px solid #464647; - box-shadow: 0px 4px 8px 0 #1E1E1F; + ul { + border-bottom:2px solid #464647; + box-shadow:0px 4px 8px 0 #1E1E1F; - svg { background-color: #ccc; } + svg { background-color:#ccc; } - th { color: #ccc; } + th { color:#ccc; } - &::-webkit-scrollbar { - width: 8px; - background-color: grey; - } + &::-webkit-scrollbar { + width:8px; + background-color:grey; } + } - input, input::placeholder { color: #ccc; } + input, input::placeholder { color:#ccc; } } -.search-box h1 { color: #fff; } +.search-box h1 { color:#fff; } .input-box { - &:before { background: #5a5a5b; } - - &:after { opacity: 0.5; } + &:before { background:#5a5a5b; } + &:after { opacity:0.5; } } .result-item{ - border: 1px solid #464647; - background: #313132; + border:1px solid #464647; + background:#313132; - &:hover { background: $color-wenge; } + &:hover { background:$color-wenge; } } -.toc-header { color: darkgoldenrod; } +.toc-header { color:darkgoldenrod; } @include mq(tablet){ - #article_content .box_contents { background-color: rgba(70, 70, 70, 0.95); } - .post-title { text-shadow: 0 1px 2px rgba(0,0,0,0.6); } +#article_content .box_contents { background-color:rgba(70, 70, 70, 0.95); } + +.post-title { text-shadow:0 1px 2px rgba(0,0,0,0.6); } + } @include mq(desktop) { - .sidebar-left { background: none; } - .site-name { box-shadow: none; } +.sidebar-left { background:none; } - .nav-lh { - &:before { background: rgba(#464647, 1); } +.site-tab { box-shadow:none; } - &:hover:before { background: rgba(#464647, .75); } - } +.nav-lh { + &:before { background:rgba(#464647, 1); } + &:hover:before { background:rgba(#464647, .75); } +} - .nav-list li > .nav-list { background: none; } +.nav-list li > .nav-list { background:none; } - #contact{ - hr { border-top: 1px solid dimgrey; } - - h3 { background-color: #1E1E1F; } - } +#contact{ + hr { border-top:1px solid dimgrey; } + + h3 { background-color:#1E1E1F; } +} + +#post .inner-content { box-shadow:none; } - #post .inner-content { box-shadow: none; } } } \ No newline at end of file diff --git a/_sass/layout.scss b/_sass/layout.scss index ed6bd15f0..e5bd70e83 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -1,57 +1,57 @@ @mixin mq($name) { - // Retrieves the value from the key - $value: map-get($mediawd, $name); - - // If the key exists in the map - @if $value { - // Prints a media query based on the value - @media (min-width: $value) { - @content; - } - } @else { - @warn "No value could be retrieved from `#{$mediawd}`. Please make sure it is defined in `$mediawd` map."; + // Retrieves the value from the key + $value:map-get($mediawd, $name); + + // If the key exists in the map + @if $value { + // Prints a media query based on the value + @media (min-width:$value) { + @content; } + } @else { + @warn "No value could be retrieved from `#{$mediawd}`. Please make sure it is defined in `$mediawd` map."; + } } #loading { - width: 100%; - height: 100%; - top: 0; - left: 0; - position: fixed; - display: flex; - background: white; - z-index: 999; - text-align: center; + width:100%; + height:100%; + top:0; + left:0; + position:fixed; + display:flex; + background:white; + z-index:999; + text-align:center; - .loading_box { - margin: auto; + .loading_box { + margin:auto; - img { - width: 128px; - height: 128px; - } + img { + width:128px; + height:128px; + } - p { - margin: 2rem; - font-size: 2.5rem; - color: $color-wenge; - font-weight: 600; - font-family: Cambria, sans-serif; - } + p { + margin:2rem; + font-size:2.5rem; + color:$color-wenge; + font-weight:600; + font-family:Cambria, sans-serif; } + } } #stars { - display: none; - position: fixed; - width: 100%; - height: 100vh; - z-index: -1; - background: none; + display:none; + position:fixed; + width:100%; + height:100vh; + z-index:-1; + background:none; } @include mq(desktop){ - #stars { display: block; } + #stars { display:block; } } \ No newline at end of file diff --git a/_sass/navigation.scss b/_sass/navigation.scss index b768ca6bb..22a5dd1ee 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -1,177 +1,172 @@ #navigation { - display: none; - flex: 1 1 auto; - width: 100%; - - &.nav-open { - display: block; - border-top: 1px solid dimgrey; - } + display:none; + flex:1 1 auto; + width:100%; + + &.nav-open { + display:block; + border-top:1px solid dimgrey; + } } .nav-list { - padding: 0; - margin: 0 auto; - - li { - font-size: 1rem; + padding:0; + margin:0 auto; + + li { + font-size:1rem; + + > .nav-list { + padding-left:18px; + background:#eee; + + transition:max-height .5s ease-in-out, opacity .3s; + opacity:0; + max-height:0; - > .nav-list { - padding-left: 1.125rem; - background: #eee; - - transition: max-height .5s ease-in-out, opacity .3s; - opacity: 0; - max-height: 0; - - li { position: relative; } - } - - &.active { - > .nav-item .nav-list-expander svg { transform: rotate(180deg); } - - > .nav-list { - opacity: 1; - max-height: 768px; - } - } + li { position:relative; } } - svg { - margin-right: 0.5rem; - display: inline-block; - vertical-align: middle; + &.active { + > .nav-item .nav-list-expander svg { transform:rotate(180deg); } + + > .nav-list { + opacity:1; + max-height:768px; + } } + } + + svg { + margin-right:8px; + display:inline-block; + vertical-align:middle; + } } .nav-item { - position: relative; - padding: 0.75rem; - border-bottom: 1px solid #aaa; - - &.selected { - span { - font-weight: 600; - text-decoration: underline; - } + position:relative; + padding:12px; + border-bottom:1px solid #aaa; + + &.selected { + span { + font-weight:600; + text-decoration:underline; } + } - a { font-weight: 400; } + a { font-weight:400; } } .nav-list-link { - position: relative; - transition: .2s ease; + position:relative; + transition:.2s ease; - span { position: relative; } + span { position:relative; } } -.nav-lh svg { - margin-left: -0.25rem; - position: relative; - fill: $color-darkorange; - transform: translateY(-2px); +.nav-list-expander { + position:absolute; + height:100%; + aspect-ratio:1; + top:0; + right:8px; + cursor:pointer; + + &, svg { transition:.3s; } + svg { width:18px; } + + &:hover { + transform:scale(1.25); + svg { fill:$color-darkorange; } + } } -.nav-sh svg { - width: 14px; - margin-left: 0; +.nav-lh svg { + margin-left:-0.25rem; + position:relative; + fill:$color-darkorange; + transform:translateY(-2px); } - -.nav-list-expander { - position: absolute; - height: 100%; - aspect-ratio: 1; - top: 0; - right: 8px; - cursor: pointer; - - &, svg { transition: .3s; } - - svg { width: 18px; } - - &:hover { - transform: scale(1.25); - svg { fill: $color-darkorange; } - } +.nav-sh svg { + width:14px; + margin-left:0; } @include mq(tablet) { - .nav-list-link { min-height: 2rem; } - - .nav-list li { font-size: 1.125rem; } - .nav-sh svg { width: 16px; } +.nav-list-link { min-height:2rem; } +.nav-list li { font-size:1.125rem; } +.nav-list-expander svg { width:20px; } - .nav-lh svg { width: 18px; } +.nav-sh svg { width:16px; } +.nav-lh svg { width:18px; } - .nav-list-expander svg { width: 20px; } } @include mq(desktop){ - #navigation { - width: calc(#{$sidebarwd} - 2.5rem); - display: block; - max-height: calc(100vh - 26rem); - padding: 0 1.25rem; - overflow-y: auto; - overflow-x: hidden; - margin-top: 2rem; - - &.nav-open { border: none; } - - &::-webkit-scrollbar { - width: 4px; - background-color: #aaa; - } - - &::-webkit-scrollbar-thumb { background-color: rosybrown; } - } - - .nav-list { position: relative; } - .nav-list li > .nav-list { background: none; } - - .nav-lh svg { transform: none; } +#navigation { + width:calc(#{$sidebarwd} - 2.5rem); + display:block; + max-height:calc(100vh - 26rem); + padding:0 20px; + overflow-y:auto; + overflow-x:hidden; + margin-top:2rem; + + &.nav-open { border:none; } + + &::-webkit-scrollbar { + width:4px; + background-color:#aaa; + } + &::-webkit-scrollbar-thumb { background-color:rosybrown; } +} - .nav-item { border: none; } +.nav-item { border:none; } - .nav-list-link { - display: flex; - width: 95%; - align-items: center; +.nav-list { position:relative; } +.nav-list li > .nav-list { background:none; } +.nav-list-link { + display:flex; + width:95%; + align-items:center; + + &:hover { + span { + font-weight:600; + text-decoration:underline; + } - &:hover { - span { - font-weight: 600; - text-decoration: underline; - } + transform:scale(.9); + } +} - transform: scale(.9); - } - } +.nav-lh { + &:before { + content:""; + position:absolute; + display:block; + left:0; + border-radius:1.5rem; + background:rgba(gold, .375); + width:3rem; + height:3rem; + transition:.3s; + } + &:hover:before { + width:105%; + background:gold; + } + + svg { transform:none; } +} - .nav-lh { - &:before { - content: ""; - position: absolute; - display: block; - left: 0; - border-radius: 1.5rem; - background: rgba(gold, .375); - width: 3rem; - height: 3rem; - transition: .3s; - } - - &:hover:before { - width: 105%; - background: gold; - } - } +.nav-list-expander { + background-color:transparent; + right:-16px; +} - .nav-list-expander { - background-color: transparent; - right: -16px; - } } \ No newline at end of file diff --git a/_sass/pagination.scss b/_sass/pagination.scss index e2ba4105c..bc0e5d5e3 100644 --- a/_sass/pagination.scss +++ b/_sass/pagination.scss @@ -1,251 +1,238 @@ -#category-list { width: 100%; } +#category-list { width:100%; } .category-tree { - margin:0 0.5rem; - position: relative; - font-size: 0.875rem; - - p { - margin: 0; - padding: 1rem 0; - padding-left: 1.5rem; - line-height: 150%; - font-weight: bold; - color: slategrey; - } - - a { - color: dodgerblue; - text-decoration: none; - } - - svg { - position: absolute; - display: inline-flex; - top: 18px; - width: 14px; - } + margin:0 8px; + position:relative; + font-size:0.875rem; + + p { + margin:0; + padding:1rem 0 1rem 1.5rem; + line-height:150%; + font-weight:bold; + color:slategrey; + } + + a { + color:dodgerblue; + text-decoration:none; + } + + svg { + position:absolute; + display:inline-flex; + top:18px; + width:14px; + } } .category-header { - margin: 0 0.5rem; - margin-bottom: 1.5rem; - font-weight: 600; - border-bottom: 1px solid lightgrey; - text-decoration: underline dimgrey; - text-underline-offset: 12px; - padding-bottom: 8px; + margin:0 8px 24px 8px; + font-weight:600; + border-bottom:1px solid lightgrey; + text-decoration:underline dimgrey; + text-underline-offset:12px; + padding-bottom:8px; } .paginated-list { - margin: 0; - padding: 0; + margin:0; + padding:0; } - .paginated-item { - list-style-type: none; - height: fit-content; + list-style-type:none; + height:fit-content; } #article_content { - border-bottom: 2px solid lightgrey; - - .thumbnail_post { - display: block; - background-size: cover; - background-position: 50% 50%; - width: 100%; - aspect-ratio: 5 / 3; - border-radius: 0; - } - - .thumbnail_post:hover { opacity: 0.8; } - - .empty { opacity: 0.5; } - - .box_contents { - margin: 0.75rem; - position: relative; - overflow: hidden; - } - - a { text-decoration: none; } - - .title_post { - font-weight: 600; - font-size: 1rem; - line-height: 2rem; - word-break: normal; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: left; - } - - .info-post { font-size: 0.875rem; } - - .category{ color: mediumseagreen !important; } - - .title_post:hover, - .category:hover { - color: $color-rose; - } - - .txt_post { - display: -webkit-box; - margin-bottom: 0.75rem; - font-size: 0.875rem; - color: grey; - overflow: hidden; - text-overflow: ellipsis; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - word-wrap: break-word; - } + border-bottom:2px solid lightgrey; + + .thumbnail_post { + display:block; + background-size:cover; + background-position:50% 50%; + width:100%; + aspect-ratio:5/3; + border-radius:0; + + &:hover { opacity:0.8; } + } + + .empty { opacity:0.5; } + + .box_contents { + margin:12px; + position:relative; + overflow:hidden; + } + + a { text-decoration:none; } + + .info-post { font-size:0.875rem; } + + .title_post { + font-weight:600; + font-size:1rem; + line-height:2rem; + word-break:normal; + white-space:nowrap; + overflow:hidden; + text-overflow:ellipsis; + text-align:left; + } + .title_post:hover, + .category:hover { + color:$color-rose; + } + .category{ color:mediumseagreen !important; } + + .txt_post { + display:-webkit-box; + margin-bottom:12px; + font-size:0.875rem; + color:grey; + overflow:hidden; + text-overflow:ellipsis; + -webkit-line-clamp:2; + -webkit-box-orient:vertical; + word-wrap:break-word; + } } .no-posts { - position: relative; - margin: 6rem 0; - text-align: center; + position:relative; + margin:6rem 0; + text-align:center; - img { - width: 50% !important; - aspect-ratio: 2/1; - } + img { + width:50% !important; + aspect-ratio:2/1; + } - h1 {margin-top: 3rem;} + h1 {margin-top:3rem;} } -.hidden { display: none; } - +.hidden { display:none; } + .pagination-container { - width: 90%; - display: flex; - align-items: center; - padding: 4rem 0; - margin: auto; - justify-content: center; + width:90%; + display:flex; + align-items:center; + padding:4rem 0; + margin:auto; + justify-content:center; } - .pagination-number, .pagination-button{ - font-size: 1rem; - margin: 4px; - cursor: pointer; - width: 2.5rem; - aspect-ratio: 1.0; - border-radius: .2rem; + font-size:1rem; + margin:4px; + cursor:pointer; + width:2.5rem; + aspect-ratio:1.0; + border-radius:.2rem; } - .pagination-number:hover, .pagination-button:not(.disabled):hover { - background: #fff; + background:#fff; } - .pagination-number.active { - color: #fff; - background: #0085b6; + color:#fff; + background:#0085b6; } @include mq(tablet){ - .category-tree { - margin: 0 2rem; - font-size: 1.125rem; - - p { - padding: 1.5rem 0; - padding-left: 2rem; - } - - svg { - top: 28px; - width: 18px; - } - } - - .category-header { - font-size: 2.25rem; - padding-bottom: 0.5rem; - text-underline-offset: 16px; - margin: 0 2rem; - margin-bottom: 3rem; - } - - .paginated-list { margin: auto 2rem; } - - .paginated-item { - margin: 3rem 0; - height: 12.5rem; - } - - #article_content { - display: flex; - transition: .3s; - box-shadow: 0 1px 1px 0 rgba(31, 35, 46, .15); - - &:hover { - transform: translate(0px, -4px); - box-shadow: 0 15px 45px -10px rgba(10, 16, 34, .2); - } - - .thumbnail_post { - display: block; - height: 12.5rem; - aspect-ratio: 4 / 3; - margin: auto; - } - - .box_contents { - width: 100%; - margin: auto 0 auto -5rem; - padding: 0.5rem 1.5rem; - background-color: rgba(255,255,255,0.95); - background-image: url(/assets/img/tile.png); - border-radius: 6px; - } - - .title_post{ - font-size: 1.5rem; - padding-top: 0.75rem; - } - - .info-post, - .txt_post { - font-size: 1.125rem; - } - - .category{ font-weight: bold; } - - .txt_post { - margin-top: 1rem; - margin-bottom: 1.5rem; - } - } - - .pagination-number, - .pagination-button{ - font-size: 1.125rem; - } + +.category-tree { + margin:0 2rem; + font-size:1.125rem; + + p { padding:1.5rem 0 1.5rem 2rem; } + + svg { + top:28px; + width:18px; + } +} + +.category-header { + font-size:2.25rem; + padding-bottom:8px; + text-underline-offset:16px; + margin:0 2rem 3rem 2rem; +} + +.paginated-list { margin:auto 2rem; } +.paginated-item { + margin:3rem 0; + height:12.5rem; +} + +#article_content { + display:flex; + transition:.3s; + box-shadow:0 1px 1px 0 rgba(31, 35, 46, .15); + + &:hover { + transform:translate(0px, -4px); + box-shadow:0 15px 45px -10px rgba(10, 16, 34, .2); + } + + .thumbnail_post { + display:block; + height:12.5rem; + aspect-ratio:4/3; + margin:auto; + } + + .box_contents { + width:100%; + margin:auto 0 auto -5rem; + padding:8px 24px; + background-color:rgba(255,255,255,0.95); + background-image:url(/assets/img/tile.png); + border-radius:6px; + } + + .category{ font-weight:bold; } + + .title_post{ + font-size:1.5rem; + padding-top:12px; + } + .info-post, + .txt_post { + font-size:1.125rem; + } + .txt_post { + margin-top:1rem; + margin-bottom:1.5rem; + } +} + +.pagination-number, +.pagination-button{ + font-size:1.125rem; +} + } @include mq(desktop){ - .category-header { font-size: 3rem; } - .paginated-item { height: 15rem; } - - #article_content { - .thumbnail_post { height: 15rem; } +.category-header { font-size:3rem; } - .box_contents { - margin-left: -6rem; - border-radius: 8px; - } - - .date { font-size: 1.125rem; } +.paginated-item { height:15rem; } - .category { font-size: 1.25rem; } +#article_content { + .thumbnail_post { height:15rem; } + + .box_contents { + margin-left:-6rem; + border-radius:8px; + } + + .date { font-size:1.125rem; } + .category { font-size:1.25rem; } + .txt_post { margin-top:1.25rem; } +} - .txt_post { margin-top: 1.25rem; } - } } \ No newline at end of file diff --git a/_sass/post.scss b/_sass/post.scss index caf2458f1..a6898ea62 100644 --- a/_sass/post.scss +++ b/_sass/post.scss @@ -1,647 +1,639 @@ #post { - max-width: #{$contentwd}; - margin: auto; + max-width:#{$contentwd}; + margin:auto; } .inner-header { - display: none; - background: linear-gradient(180deg, rgba(240,240,240,1) 0%, rgba(224,224,224,1) 100%); - border-radius: 1rem 1rem 0 0; - padding: 0.5rem 1rem; - - .dot { - height: 1rem; - width: 1rem; - margin: 0 0.25rem; - border-radius: 50%; - display: inline-block; - } + display:none; + background:linear-gradient(180deg, rgba(240,240,240,1) 0%, rgba(224,224,224,1) 100%); + border-radius:1rem 1rem 0 0; + padding:8px 16px; + + .dot { + height:1rem; + width:1rem; + margin:0 4px; + border-radius:50%; + display:inline-block; + } } .inner-content { - background: #fff; - - img { - display: block; - text-align: center; - width: 100%; - margin: auto; - } - - .img-xs { width: 12.5% !important; } - - .img-sm { width: 25% !important; } - - .img-md { width: 50% !important; } - - .img-lg { width: 75% !important; } + background:#fff; + + img { + display:block; + text-align:center; + width:100%; + margin:auto; + } + .img-xs { width:12.5% !important; } + .img-sm { width:25% !important; } + .img-md { width:50% !important; } + .img-lg { width:75% !important; } } .thumbnail { - display: block; - position: relative; - width: 100%; - aspect-ratio: 2; - margin: auto; - background-size: cover; - background-position: center center; - box-shadow: 0 16px 16px 8px rgba(31, 35, 46, .15); + display:block; + position:relative; + width:100%; + aspect-ratio:2; + margin:auto; + background-size:cover; + background-position:center center; + box-shadow:0 16px 16px 8px rgba(31, 35, 46, .15); } .transbox { - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - -moz-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - width: 100%; - margin: auto; - padding: 1rem 0; - text-align: center; - backdrop-filter: blur(4px); - background-color: rgba(255, 255, 255, 0.5); + position:absolute; + top:50%; + left:50%; + -webkit-transform:translate(-50%, -50%); + -moz-transform:translate(-50%, -50%); + transform:translate(-50%, -50%); + width:100%; + margin:auto; + padding:1rem 0; + text-align:center; + backdrop-filter:blur(4px); + background-color:rgba(255, 255, 255, 0.5); } .post-title { - font-size: 1.25rem; - word-spacing: 4px; - font-weight: 600; - word-wrap: break-word; - font-family: Cambria, sans-serif; + font-size:1.25rem; + word-spacing:4px; + font-weight:600; + word-wrap:break-word; + font-family:Cambria, sans-serif; } .post-info { - margin-top: 1.25rem; - font-size: 0.875rem; + margin-top:1.25rem; + font-size:0.875rem; - svg { width: 14px; } + svg { width:14px; } } .info-box { - display: inline-flex; - border-radius: 8px; - margin: 0; - padding: 6px; - position: relative; - transition: all .5s; - - background: - linear-gradient( - to right, - rgba(100, 200, 200, 1), - rgba(100, 200, 200, 1) - ), - linear-gradient( - to right, - rgba(255, 0, 0, 1), - rgba(255, 0, 180, 1), - rgba(0, 100, 200, 1) - ); - background-size: 100% 3px, 0 3px; - background-position: 100% 100%, 0 100%; - background-repeat: no-repeat; - - &:hover { - background-size: 0 3px, 100% 3px; - box-shadow: 0 3px 48px 12px rgba(100, 200, 200, 1); - } - - svg { margin-right: 4px; } + display:inline-flex; + border-radius:8px; + margin:0; + padding:6px; + position:relative; + transition:all .5s; + + background: + linear-gradient( + to right, + rgba(100, 200, 200, 1), + rgba(100, 200, 200, 1) + ), + linear-gradient( + to right, + rgba(255, 0, 0, 1), + rgba(255, 0, 180, 1), + rgba(0, 100, 200, 1) + ); + background-size:100% 3px, 0 3px; + background-position:100% 100%, 0 100%; + background-repeat:no-repeat; + + &:hover { + background-size:0 3px, 100% 3px; + box-shadow:0 3px 48px 12px rgba(100, 200, 200, 1); + } + + svg { margin-right:4px; } } .tag-box { - margin: 1rem; - display: inline-block; + margin:1rem; + display:inline-block; } .tag { - float: left; - position: relative; - margin-left: 24px; - padding:0 10px 0 12px; - line-height: 1.5rem; - color: #fff !important; - font-size: 1rem; - text-shadow: 0 1px 2px rgba(0,0,0,0.6); - cursor: pointer; - - &:before { - content: ""; - position: absolute; - left: -12px; - border-style: solid; - border-width: 12px 12px 12px 0; - } - - &:after { - content: ""; - position: absolute; - top: 10px; - left: 1px; - width: 5px; - height: 5px; - -webkit-border-radius: 50%; - border-radius: 50%; - background: #fff; - -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,0.4); - box-shadow: -1px -1px 2px rgba(0,0,0,0.4); - } - - &:hover { - animation: pulse 1s infinite; - transition: 0.3s; - } - - @keyframes pulse { - 0% { transform: scale(1); } - - 70% { transform: scale(0.9); } - - 100% { transform: scale(1); } - } + float:left; + position:relative; + margin:8px 12px; + padding:0 10px 0 12px; + line-height:1.5rem; + color:#fff !important; + font-size:1rem; + text-shadow:0 1px 2px rgba(0,0,0,0.6); + cursor:pointer; + + &:before { + content:""; + position:absolute; + left:-12px; + border-style:solid; + border-width:12px 12px 12px 0; + } + &:after { + content:""; + position:absolute; + top:10px; + left:1px; + width:5px; + height:5px; + -webkit-border-radius:50%; + border-radius:50%; + background:#fff; + -webkit-box-shadow:-1px -1px 2px rgba(0,0,0,0.4); + box-shadow:-1px -1px 2px rgba(0,0,0,0.4); + } + &:hover { + animation:pulse 1s infinite; + transition:0.3s; + } + + @keyframes pulse { + 0% { transform:scale(1); } + 70% { transform:scale(0.9); } + 100% { transform:scale(1); } + } } .theme-0 { - background: hsl(50, 65%, 50%); - - &::before { border-color: transparent hsl(50, 65%, 50%) transparent transparent; } + background:hsl(50, 65%, 50%); + &::before { border-color:transparent hsl(50, 65%, 50%) transparent transparent; } } - .theme-1 { - background: hsl(360, 65%, 50%); - - &::before { border-color: transparent hsl(360, 65%, 50%) transparent transparent; } + background:hsl(360, 65%, 50%); + &::before { border-color:transparent hsl(360, 65%, 50%) transparent transparent; } } - .theme-2 { - background: hsl(200, 65%, 50%); - - &::before { border-color: transparent hsl(200, 65%, 50%) transparent transparent; } + background:hsl(200, 65%, 50%); + &::before { border-color:transparent hsl(200, 65%, 50%) transparent transparent; } } main { - padding: 1rem; - margin: auto; - font-size: 1rem; - line-height: 200%; - position: relative; - overflow-wrap: break-word; - word-wrap: break-word; - - * { margin: auto; } - - h1, h2, h3 { - margin-top: 3rem; - margin-bottom: 1rem; - } - - h1, .sh1 { font-size: 1.75rem; } - - h2, .sh2 { font-size: 1.375rem; } - - h3, .sh3 { font-size: 1.125rem; } - - p { text-align:justify; } - - u { - color: $color-rose; - text-underline-offset: 2px; - } - - em { padding-right: 2px; } - - a { - color: dodgerblue; - text-decoration: none; - - &::before { - position: absolute; - content: attr(data-content); - color: midnightblue; - text-decoration: underline; - text-decoration-style: wavy; - text-underline-offset: 4px; - text-decoration-color: midnightblue; - clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%); - transition: clip-path .25s; + padding:1rem; + margin:auto; + font-size:1rem; + line-height:200%; + position:relative; + overflow-wrap:break-word; + word-wrap:break-word; + + * { margin:auto; } + + h1, h2, h3 { + margin-top:3rem; + margin-bottom:1rem; + } + h1, .sh1 { font-size:1.75rem; } + h2, .sh2 { font-size:1.375rem; } + h3, .sh3 { font-size:1.125rem; } + + p { text-align:justify; } + + u { + color:$color-rose; + text-underline-offset:2px; + } + + em { padding-right:2px; } + + a { + color:dodgerblue; + text-decoration:none; + + &::before { + position:absolute; + content:attr(data-content); + color:midnightblue; + text-decoration:underline; + text-decoration-style:wavy; + text-underline-offset:4px; + text-decoration-color:midnightblue; + clip-path:polygon(0 0, 0 0, 0% 100%, 0 100%); + transition:clip-path .25s; + } + &:hover::before { + clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); + } + } + + p, ul, table, div { margin-bottom:3rem; } + + p + div, + p + pre, + p + blockquote, + div + div, + div + blockquote { + margin-top:-2rem; + } + + ul { padding-left:2rem; } + + li > ul { margin:0; } + + code { + margin:0 2px; + padding:1px 5px; + border:1px solid #eaeaea; + background-color:#f4f4f4; + border-radius:3px; + font-family:'Courier New', Courier, monospace; + color:$color-darkorange; + position:relative; + top:-1px; + vertical-align:middle; + } + + .highlighter-rouge .highlight { + background:#f4f4f4; + border:1px solid #eaeaea; + border-radius:3px; + margin:8px auto; + + pre { + margin:0; + border:none; + overflow-x:auto; + position:relative; + + button { + display:none; + position:absolute; + top:20px; + right:20px; + width:2rem; + height:2rem; + font-size:1.125rem; + color:#777; + padding:4px; + background-color:#ddd; + border-radius:4px; + + svg { + background-color:darkslategrey !important; + -webkit-mask-image:url(/assets/img/icon/clipboard-regular.svg); + mask-image:url(/assets/img/icon/clipboard-regular.svg); + mask-repeat:no-repeat; + mask-position:center; + mask-size:80%; } - &:hover::before { - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); - } - } - - p, ul, table, div { margin-bottom: 3rem; } - - p + div, - p + pre, - p + blockquote, - div + div, - div + blockquote { - margin-top: -2rem; - } - - ul { padding-left: 2rem; } - - li > ul { margin: 0; } - - code { - margin: 0 2px; - padding: 1px 5px; - border: 1px solid #eaeaea; - background-color: #f4f4f4; - border-radius: 3px; - font-family:'Courier New', Courier, monospace; - color: $color-darkorange; - position: relative; - top: -1px; - vertical-align: middle; - } - - .highlighter-rouge .highlight { - background: #f4f4f4; - border: 1px solid #eaeaea; - border-radius: 3px; - margin: 0.5rem auto; - - pre { - margin: 0; - border: none; - overflow-x: auto; - position: relative; - - button { - display: none; - position: absolute; - top: 20px; - right: 20px; - width: 2rem; - height: 2rem; - font-size: 1.125rem; - color: #777; - padding: 0.25rem; - background-color: #ddd; - border-radius: 4px; - - svg { - background-color: darkslategrey !important; - -webkit-mask-image: url(/assets/img/icon/clipboard-regular.svg); - mask-image: url(/assets/img/icon/clipboard-regular.svg); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 80%; - } - - &:after { - content: ""; - display: block; - position: absolute; - border-radius: 4rem; - left:0; - top:0; - width: 100%; - height: 100%; - opacity: 0; - transition: .5s; - box-shadow: 0 0 6px 24px #888; - } - - &:active:after { - box-shadow: 0 0 0 0 #888; - position: absolute; - border-radius: 4rem; - left:0; - top:0; - opacity: 1; - transition: 0s; - } - } - - &:hover { - button { display: block; } - } - } - - code { - margin: 0; - padding: 1.5rem 1rem; - border: none; - } - } - - blockquote { - background: $color-beige; - border-left: 4px solid burlywood; - border-radius: 4px; - box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 3px 10px rgba(0,0,0,.1); - padding-left: 1rem; - padding-right: 1rem; - margin: 0.5rem auto; - word-break: break-all; - - p { - margin: 0; - padding: 1rem 0; + &:after { + content:""; + display:block; + position:absolute; + border-radius:4rem; + left:0; + top:0; + width:100%; + height:100%; + opacity:0; + transition:.5s; + box-shadow:0 0 6px 24px #888; } - } - - .table-wrapper { overflow-x: auto; } - - table { - display: block; - max-width: -moz-fit-content; - max-width: fit-content; - overflow-x: auto; - white-space: nowrap; - position: relative; - background-color: #fff; - border-radius: 10px; - border-collapse: collapse; - line-height: 1.5; - box-shadow: 0 0 40px 0 rgba(0,0,0,.15); - - thead { box-shadow: 0 0 40px 0 rgba(0,0,0,.15); } - - th, td { - border: 1px solid lightgrey; - word-wrap: break-word; - white-space: initial; - max-width: 16rem; + &:active:after { + box-shadow:0 0 0 0 #888; + position:absolute; + border-radius:4rem; + left:0; + top:0; + opacity:1; + transition:0s; } + } - thead tr { height: 3.5rem; } - - tbody tr { height: 3rem; } - - tbody td, thead th { padding: 0.5rem; } - - tr:first-child th { border-top: 0; } - - td:first-child, th:first-child { border-left: 0; } - - td:last-child, th:last-child { border-right: 0; } + &:hover { + button { display:block; } + } } - li { padding: 0.25rem 0; } - - hr { - border: 0; - height: 2px; - margin: 1rem 0; - background: burlywood; - } - - img + em { - display: block; - text-align: center; - color: dimgrey; - font-size: 0.875rem; - font-style: normal; - } + code { + margin:0; + padding:1.5rem 1rem; + border:none; + } + } + + blockquote { + background:$color-beige; + border-left:4px solid burlywood; + border-radius:4px; + box-shadow:0 1px 2px rgba(0,0,0,.15), 0 3px 10px rgba(0,0,0,.1); + padding-left:1rem; + padding-right:1rem; + margin:8px auto; + word-break:break-all; + + p { + margin:0; + padding:1rem 0; + } + } + + .table-wrapper { overflow-x:auto; } + + table { + display:block; + max-width:-moz-fit-content; + max-width:fit-content; + overflow-x:auto; + white-space:nowrap; + position:relative; + background-color:#fff; + border-radius:10px; + border-collapse:collapse; + line-height:1.5; + box-shadow:0 0 40px 0 rgba(0,0,0,.15); + + thead { box-shadow:0 0 40px 0 rgba(0,0,0,.15); } + th, td { + border:1px solid lightgrey; + word-wrap:break-word; + white-space:initial; + max-width:16rem; + } + thead tr { height:3.5rem; } + tbody tr { height:3rem; } + tbody td, thead th { padding:8px; } + + tr:first-child th { border-top:0; } + td:first-child, th:first-child { border-left:0; } + td:last-child, th:last-child { border-right:0; } + } + + li { padding:4px 0; } + + hr { + border:0; + height:2px; + margin:1rem 0; + background:burlywood; + } + + img + em { + display:block; + text-align:center; + color:dimgrey; + font-size:0.875rem; + font-style:normal; + } } #related-box { - margin-top: 2rem; + margin-top:2rem; - span { font-size: 1.25rem; } + span { font-size:1.25rem; } - svg { - width: 20px; - display: inline-flex; - transform: translateY(3px); - } + svg { + width:20px; + display:inline-flex; + transform:translateY(3px); + } } #related-posts { - display: inline-table; - position: relative; - width: 100%; - margin: 1rem 0; - padding: 0; - - li { - float: left; - position: relative; - width: 45%; - margin-left: 5%; - margin-bottom: 2rem; - padding: 0; - list-style: none; - transition: .3s; - - &:hover { - transform: translate(0px, -4px); - box-shadow: 8px 8px 16px -4px rgba(0, 0, 255, .2); - } - } + display:inline-table; + position:relative; + width:100%; + margin:1rem 0; + padding:0; + + li { + float:left; + position:relative; + width:45%; + margin-left:5%; + margin-bottom:2rem; + padding:0; + list-style:none; + transition:.3s; + overflow: hidden; - li:nth-child(3n+1) { margin-left: 0; } - - a { - width: 100%; - display: inline-block; - text-decoration: none; - - p { - width: 100%; - margin: 8px 0; - line-height: 1.25; - font-family: Verdana, Tahoma, sans-serif; - } - } - - img { - display: block; - width: 100%; - aspect-ratio: 1.5/1; - } - - .category { - color: $color-aqua; - font-size: 1rem; - } - - .title { - display: -webkit-box; - color: $color-darkbrown; - font-size: 1.125rem; - font-weight: 600; - height: 2.5em; - text-align: left; - overflow: hidden; - text-overflow: ellipsis; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - word-wrap: break-word; - } - - .date { - color: goldenrod; - font-size: 0.875rem; - text-transform: uppercase; - } + &:hover { + box-shadow:8px 8px 16px -4px rgba(0, 0, 255, .2); + + -webkit-transform:scale(1.05); + -moz-transform:scale(1.05); + transform:scale(1.05); + + img { + opacity:.7; + } + } + } + + @media (max-width:768px){ + li:nth-child(2n+1) { margin-left:0; } + } + + a { + width:100%; + display:inline-block; + text-decoration:none; + + p { + width:100%; + margin:8px 0; + line-height:1.25; + font-family:Verdana, Tahoma, sans-serif; + } + } + + img { + display:block; + width:100%; + aspect-ratio:1.5/1; + transition:.3s; + } + + .category { + color:$color-aqua; + font-size:1rem; + } + + .title { + display:-webkit-box; + color:$color-darkbrown; + font-size:1.125rem; + font-weight:600; + height:2.5em; + text-align:left; + overflow:hidden; + text-overflow:ellipsis; + -webkit-line-clamp:2; + -webkit-box-orient:vertical; + word-wrap:break-word; + } + + .date { + color:goldenrod; + font-size:0.875rem; + text-transform:uppercase; + } } .top-arrow { - position: fixed; - display: none; - bottom: 2rem; - right: 2rem; - width: 48px; - background: rgba(100, 200, 200, 0.75); - cursor: pointer; - - &, &:before{ - aspect-ratio: 1.0; - border-radius: 50%; - } - - &:before{ - content: ""; - width: 40px; - border: 2px solid #fff; - position: absolute; - top: 2px; - left: 2px; - } - - svg { - width: 28px; - top: 11px; - left: 10px; - fill: #fff !important; - filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); - position: absolute; - animation: ascend 2s infinite; - } - - @keyframes ascend { - 0% { - opacity: 0; - transform: translateY(8px); - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - transform: translateY(-8px); - } - } + position:fixed; + display:none; + bottom:2rem; + right:2rem; + width:48px; + background:rgba(100, 200, 200, 0.75); + cursor:pointer; + + &, &:before{ + aspect-ratio:1.0; + border-radius:50%; + } + &:before{ + content:""; + width:40px; + border:2px solid #fff; + position:absolute; + top:2px; + left:2px; + } + + svg { + width:28px; + top:11px; + left:10px; + fill:#fff !important; + filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6)); + position:absolute; + animation:ascend 2s infinite; + } + + @keyframes ascend { + 0% { + opacity:0; + transform:translateY(8px); + } + 50% { + opacity:1; + } + 100% { + opacity:0; + transform:translateY(-8px); + } + } } -.arrow-open { display: block; } +.arrow-open { display:block; } @include mq(tablet){ - .transbox { - width: 87.5%; - padding: 2rem; - } - .post-title { font-size: 2.25rem; } - - .post-info { - margin-top: 4rem; - font-size: 1.25rem; - - svg { width: 20px; } - } +.transbox { + width:87.5%; + padding:2rem; +} - .info-box { - margin: 0 8px; - padding: 8px; - background-size: 100% 4px, 0 4px; +.post-title { font-size:2.25rem; } - &:hover { - background-size: 0 4px, 100% 4px; - box-shadow: 0 4px 64px 16px rgba(100, 200, 200, 1); - } +.post-info { + margin-top:4rem; + font-size:1.25rem; - svg { margin-right: 8px; } - } + svg { width:20px; } +} - .tag-box { - margin: 3rem; - margin-top: 1rem; - } +.info-box { + margin:0 8px; + padding:8px; + background-size:100% 4px, 0 4px; - .tag { - margin-left: 32px; - padding:0 14px 0 16px; - line-height: 2rem; - font-size: 1.125rem; + &:hover { + background-size:0 4px, 100% 4px; + box-shadow:0 4px 64px 16px rgba(100, 200, 200, 1); + } - &:before { - left: -16px; - border-width: 16px 16px 16px 0; - } + svg { margin-right:8px; } +} - &:after { - top: 14px; - left: 2px; - } - } +.tag-box { + margin:3rem; + margin-top:1rem; +} - main { - padding: 2.5rem; - padding-top: 0; - font-size: 1.125rem; +.tag { + margin:12px 16px; + padding:0 14px 0 16px; + line-height:2rem; + font-size:1.125rem; + + &:before { + left:-16px; + border-width:16px 16px 16px 0; + } + &:after { + top:14px; + left:2px; + } +} - h1, .sh1 { - font-size: 2.25rem; - margin-top: 5rem; - } - - h2, .sh2 { - font-size: 1.75rem; - margin-top: 4rem; - } - - h3, .sh3 { - font-size: 1.375rem; - } +main { + padding:2.5rem; + padding-top:0; + font-size:1.125rem; + + h1, .sh1 { + font-size:2.25rem; + margin-top:5rem; + } + h2, .sh2 { + font-size:1.75rem; + margin-top:4rem; + } + h3, .sh3 { + font-size:1.375rem; + } + + table { + tbody td, thead th { padding:1rem; } + } + + code { font-size:1rem; } + + blockquote p { font-size:1rem; } +} - table { - tbody td, thead th { padding: 1rem; } - } +#related-box { + margin-top:4rem; - code { font-size: 1rem; } + span { font-size:1.5rem; } - blockquote p { font-size: 1rem; } - } + svg { width:24px; } +} - #related-box { - margin-top: 4rem; +#related-posts { + li { width:30%; } + li:nth-child(3n+1) { margin-left:0; } +} - span { font-size: 1.5rem; } +} - svg { width: 24px; } - } +@include mq(desktop){ - #related-posts li { width: 30%; } +#post { + margin:4rem 0; + margin-left:#{$sidebarwd}; + width:var(--pagewidth-desktop); + display:inline-block; } -@include mq(desktop){ - #post { - margin: 4rem 0; - margin-left: #{$sidebarwd}; - width: var(--pagewidth-desktop); - display: inline-block; - } +.inner-header { display:block; } - .inner-header { display: block; } +.inner-content { + border-radius:0 0 1rem 1rem; + box-shadow:0 16px 16px 8px rgba(31, 35, 46, 0.15); +} - .inner-content { - border-radius: 0 0 1rem 1rem; - box-shadow: 0 16px 16px 8px rgba(31, 35, 46, 0.15); - } +.top-arrow { left:calc(#{$sidebarwd} + var(--pagewidth-desktop) - 4rem); } - .top-arrow { left: calc(#{$sidebarwd} + var(--pagewidth-desktop) - 4rem); } } @include mq(wide){ - #post { margin-left: calc((100vw - #{$contentwd})/2); } - .top-arrow { left: calc(50vw + #{$contentwd}/2 - 4rem); } +#post { margin-left:calc((100vw - #{$contentwd})/2); } + +.top-arrow { left:calc(50vw + #{$contentwd}/2 - 4rem); } + } \ No newline at end of file diff --git a/_sass/search.scss b/_sass/search.scss index 611d7b31e..68309b798 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -1,248 +1,229 @@ #search { - width: 100%; - height: 100%; - top: 0; - left: 0; - position: fixed; - display: none; - background: rgba(255,255,255,0.875); - z-index: 999; - text-align: center; - - ul, input { - min-width: 20rem; - width: 50vw; + width:100%; + height:100%; + top:0; + left:0; + position:fixed; + display:none; + background:rgba(255,255,255,0.875); + z-index:999; + text-align:center; + + ul, input { + min-width:20rem; + width:50vw; + } + ul { + margin:auto; + margin-top:-1px; + padding:0; + overflow-y:auto; + max-height:60vh; + border-bottom:2px solid #aaa; + box-shadow:0px 4px 8px 0 #ccc; + + i { + margin-right:0.5rem; + color:#666; } - ul { - margin: auto; - margin-top: -1px; - padding: 0; - overflow-y: auto; - max-height: 60vh; - border-bottom: 2px solid #aaa; - box-shadow: 0px 4px 8px 0 #ccc; - - i { - margin-right: 0.5rem; - color: #666; - } - - &::-webkit-scrollbar { - width: 8px; - background-color: #ddd; - } - - &::-webkit-scrollbar-thumb { background-color: rosybrown; } + &::-webkit-scrollbar { + width:8px; + background-color:#ddd; } + &::-webkit-scrollbar-thumb { background-color:rosybrown; } + } - &.active{ display: flex; } + &.active{ display:flex; } } .wave { - background: rgba(253, 177, 55, 0.5); - border-radius: 0 0 250% 250%; - position: fixed; - width: 200%; - height: 12rem; - animation: wave 10s -3s linear infinite; - transform: translate3d(0, 0, 0); - opacity: 0.75; - top: 0; - left: 0; - z-index: -1; + background:rgba(253, 177, 55, 0.5); + border-radius:0 0 250% 250%; + position:fixed; + width:200%; + height:12rem; + animation:wave 10s -3s linear infinite; + transform:translate3d(0, 0, 0); + opacity:0.75; + top:0; + left:0; + z-index:-1; } - .wave:nth-of-type(2) { - top: -1.5em; - animation: wave 18s linear reverse infinite; - opacity: 0.75; + top:-1.5em; + animation:wave 18s linear reverse infinite; + opacity:0.75; } - .wave:nth-of-type(3) { - top: -3em; - animation: wave 20s -1s reverse infinite; - opacity: 0.875; + top:-3em; + animation:wave 20s -1s reverse infinite; + opacity:0.875; } @keyframes wave { - 2% { transform: translateX(1); } - - 25% { transform: translateX(-25%); } - - 50% { transform: translateX(-50%); } - - 75% { transform: translateX(-25%); } - - 100% { transform: translateX(1); } + 2% { transform:translateX(1); } + 25% { transform:translateX(-25%); } + 50% { transform:translateX(-50%); } + 75% { transform:translateX(-25%); } + 100% { transform:translateX(1); } } .search-box { - margin: auto; - margin-top: 2rem; - - mark { - margin-bottom: 1rem; - color: #fff !important; - opacity: 0.8; - font-size: 1.5rem; - font-weight: 200; - display: block; - } - - input { - font-size: 1.25rem; - padding: 0.5rem; - border: 2px solid #aaa; - background: none; - } + margin:auto; + margin-top:2rem; + + mark { + margin-bottom:1rem; + color:#fff !important; + opacity:0.8; + font-size:1.5rem; + font-weight:200; + display:block; + } + + input { + font-size:1.25rem; + padding:8px; + border:2px solid #aaa; + background:none; + } } .input-box { - position: relative; - - &:before, - &:after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: -1; - } - - &:before { background: #fff; } - - &:after { background-image: url('/assets/img/tile.png'); } - - button { - position: absolute; - display: none; - cursor: pointer; - top: 0; - right: 8px; - width: 22px; - aspect-ratio: 1.0; - border-radius: 50%; - transform: translateY(50%); - font-size: 14px; - background: slategrey !important; - - svg { - fill: #fff !important; - width: 14px; - } + position:relative; + + &:before, + &:after { + content:""; + position:absolute; + width:100%; + height:100%; + top:0; + left:0; + z-index:-1; + } + &:before { background:#fff; } + &:after { background-image:url('/assets/img/tile.png'); } + + button { + position:absolute; + display:none; + cursor:pointer; + top:0; + right:8px; + width:22px; + aspect-ratio:1.0; + border-radius:50%; + transform:translateY(50%); + font-size:14px; + background:slategrey !important; + + svg { + fill:#fff !important; + width:14px; } + } } .result-item { - list-style: none; - text-align: justify; - padding: 0.5rem; - border: 1px solid #aaa; - background: #fff; - - &:hover { background: #ffe7a0; } - - table { - th, td { - text-align: left; - vertical-align: top; - } - - th { font-size: 1rem; } - - td { font-size: 0.875rem; } - - svg { - background-color: darkslategrey; - mask-repeat: no-repeat; - display: inline-flex; - width: 14px; - margin-right: 8px; - transform: translateY(2px); - } - - .ico-book { - background-color: dodgerblue !important; - -webkit-mask-image: url(/assets/img/icon/book-solid.svg); - mask-image: url(/assets/img/icon/book-solid.svg); - } - - .ico-folder { - -webkit-mask-image: url(/assets/img/icon/folder-open-regular.svg); - mask-image: url(/assets/img/icon/folder-open-regular.svg); - } - - .ico-tags { - -webkit-mask-image: url(/assets/img/icon/tags-solid.svg); - mask-image: url(/assets/img/icon/tags-solid.svg); - } - - .ico-calendar { - -webkit-mask-image: url(/assets/img/icon/calendar-days-regular.svg); - mask-image: url(/assets/img/icon/calendar-days-regular.svg); - } - - th .ico-folder { background-color: mediumseagreen !important; } - - .ico-book, th .ico-folder { width: 18px; } + list-style:none; + text-align:justify; + padding:8px; + border:1px solid #aaa; + background:#fff; + + &:hover { background:#ffe7a0; } + + table { + th, td { + text-align:left; + vertical-align:top; } - - .highlight { - font-weight: 900; - color: yellowgreen !important; + th { font-size:1rem; } + td { font-size:0.875rem; } + + svg { + background-color:darkslategrey; + mask-repeat:no-repeat; + display:inline-flex; + width:14px; + margin-right:8px; + transform:translateY(2px); + } + .ico-book { + background-color:dodgerblue !important; + -webkit-mask-image:url(/assets/img/icon/book-solid.svg); + mask-image:url(/assets/img/icon/book-solid.svg); + } + .ico-folder { + -webkit-mask-image:url(/assets/img/icon/folder-open-regular.svg); + mask-image:url(/assets/img/icon/folder-open-regular.svg); } + .ico-tags { + -webkit-mask-image:url(/assets/img/icon/tags-solid.svg); + mask-image:url(/assets/img/icon/tags-solid.svg); + } + .ico-calendar { + -webkit-mask-image:url(/assets/img/icon/calendar-days-regular.svg); + mask-image:url(/assets/img/icon/calendar-days-regular.svg); + } + .ico-book, th .ico-folder { width:18px; } + th .ico-folder { background-color:mediumseagreen !important; } + } + + .highlight { + font-weight:900; + color:yellowgreen !important; + } } @include mq(tablet) { - #search { - ul, input { width: 40rem; } - ul { - div { font-size: 1.125rem; } +#search { + ul, input { width:40rem; } + ul { + div { font-size:1.125rem; } + i { margin-right:1rem; } + } +} - i { margin-right: 1rem; } - } - } +.search-box { + margin-top:4rem; - .search-box { - margin-top: 4rem; - - mark { - font-size: 2.5rem; - margin-bottom: 2rem; - } - } + mark { + font-size:2.5rem; + margin-bottom:2rem; + } +} - .search-box input { - font-size: 2rem; - padding: 1rem; - width: 40rem; - } +.search-box input { + font-size:2rem; + padding:1rem; + width:40rem; +} - .input-box button { - width: 36px; - right: 16px; +.input-box button { + width:36px; + right:16px; - svg { width: 20px; } - } + svg { width:20px; } +} - .result-item { - padding: 1rem; +.result-item { + padding:1rem; - table { - th { font-size: 1.25rem; } + table { + th { font-size:1.25rem; } + td { font-size:1rem; } - td { font-size: 1rem; } + svg { width:16px; } - svg { width: 16px; } + .ico-book, th .ico-folder { width:20px; } + } - .ico-book, th .ico-folder { width: 20px; } - } + .title { font-size:1.25rem; } +} - .title { font-size: 1.25rem; } - } } \ No newline at end of file diff --git a/_sass/sidebar.scss b/_sass/sidebar.scss index 68ce89b32..c35f51ebf 100644 --- a/_sass/sidebar.scss +++ b/_sass/sidebar.scss @@ -1,318 +1,317 @@ .sidebar { - z-index: 1; - flex-wrap: wrap; + z-index:1; + flex-wrap:wrap; - ul, li { - list-style: none; - } + ul, li { + list-style:none; + } } .sidebar-left { - display: flex; - background-color: $color-beige; + display:flex; + background-color:$color-beige; } .side-banner { - width: 100%; - text-align:center; - box-shadow: 0px 4px 8px 0 #aaa; - - button { - position: absolute; - background-color: $color-beige; - height: 100%; - aspect-ratio: 1; - top: 0; - - svg { width: 20px; } - - &:hover { background-color: rgba(212, 201, 191, 0.7); } - } - - #btn-nav { right: 0; } - - #btn-search { right: 38px; } - - #btn-brightness { right: 76px; } - - .ico-dark { - display: block; - - &.active{ display: none; } - } - - .ico-light { - display: none; - - &.active{ display: block; } - } + width:100%; + text-align:center; + box-shadow:0px 4px 8px 0 #aaa; + + button { + position:absolute; + background-color:$color-beige; + height:100%; + aspect-ratio:1; + top:0; + + svg { width:20px; } + + &:hover { background-color:rgba(212, 201, 191, 0.7); } + } + #btn-nav { right:0; } + #btn-search { right:38px; } + #btn-brightness { right:76px; } + + .ico-dark { + display:block; + &.active{ display:none; } + } + .ico-light { + display:none; + &.active{ display:block; } + } } +.site-tab img { display: none; } + .site-avatar { - img { - display: none; - width: 9rem; - aspect-ratio: 1; - border-radius: 50%; - outline: 4.5rem solid rgba(64,64,64,0.5); - outline-offset: -4.5rem; - transition: .3s; - - &:hover { - outline: 4px solid orange; - outline-offset: 8px; - } + img { + display:none; + width:9rem; + aspect-ratio:1; + border-radius:50%; + outline:4.5rem solid rgba(64,64,64,0.5); + outline-offset:-4.5rem; + transition:.3s; + + &:hover { + outline:4px solid orange; + outline-offset:8px; } + } - img + img { border-radius: 50%; } + img + img { border-radius:50%; } } -.site-name { - padding: 0.5rem; - font-size: 1rem; - text-align: left; - position: relative; +.site-tab { + padding:8px; + font-size:1rem; + text-align:left; + position:relative; - a, span { letter-spacing: 2px; } + a, span { letter-spacing:2px; } } .side-info { - position: relative; - width: 100%; + position:relative; + width:100%; } #contact{ - display: none; - position: relative; - width: 75%; - transform: translateX(12.5%); - text-align: center; - padding: 1rem 0; - - &.contact-open { display: block; } - - hr { - border: 0; - margin: 0; - } + display:none; + position:relative; + width:75%; + transform:translateX(12.5%); + text-align:center; + padding:1rem 0; - h3 { display: none; } + &.contact-open { display:block; } - ul{ - text-align: center; - padding: 0; - margin: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + hr { + border:0; + margin:0; + } - li{ - display: inline-block; - margin-top: 0.5rem; + h3 { display:none; } - a { - display: block; - padding: 6px; - transition: .3s; - - svg { - width: 16px; - fill: dimgrey; - } + ul{ + text-align:center; + padding:0; + margin:0; + overflow:hidden; + white-space:nowrap; + text-overflow:ellipsis; + + li{ + display:inline-block; + margin-top:8px; + + a { + display:block; + padding:6px; + transition:.3s; + + svg { + width:16px; + fill:dimgrey; + } - &:hover{ - svg { fill: orange; } + &:hover{ + svg { fill:orange; } - transform: scale(1.5) translateY(-12.5%); - } - } + transform:scale(1.5) translateY(-12.5%); } + } } + } - span { font-size: 0.875rem; } - - a { color: $color-darkorange; } + span { font-size:0.875rem; } + a { color:$color-darkorange; } } -.sidebar-right{ - display: none; -} +.sidebar-right{ display:none; } .tools { - position: fixed; - top: 1rem; - - button { - width: 2.75rem; - aspect-ratio: 1; - text-align: center; - background: #ffe390; - border: none; - border-radius: 50%; - margin-left: 1rem; - position: relative; - vertical-align: top; - cursor: pointer; - - &:hover { - border: 2px solid midnightblue; - animation: leaves .75s ease-in-out infinite alternate; - } - } + position:fixed; + top:1rem; - @keyframes leaves { - 0% { - transform: scale(1.0); - background: #ffe390; - } - 100% { - transform: scale(1.25); - background: #ffd044; - } + button { + width:2.75rem; + aspect-ratio:1; + text-align:center; + background:#ffe390; + border:none; + border-radius:50%; + margin-left:1rem; + position:relative; + vertical-align:top; + cursor:pointer; + + &:hover { + border:2px solid midnightblue; + animation:leaves .75s ease-in-out infinite alternate; } + } - svg { - fill: #3A241A !important; - width: 24px; - position: relative; - transition: all .3s; + @keyframes leaves { + 0% { + transform:scale(1.0); + background:#ffe390; } - - .ico-dark, .ico-light { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + 100% { + transform:scale(1.25); + background:#ffd044; } + } + + svg { + fill:#3A241A !important; + width:24px; + position:relative; + transition:all .3s; + } + .ico-dark, .ico-light { + position:absolute; + top:50%; + left:50%; + transform:translate(-50%, -50%); + } + .ico-dark { + transform:translate(-50%, -50%) scale(1); + &.active{ transform:translate(-50%, -50%) scale(0); } + } + .ico-light { + transform:translate(-50%, -50%) scale(0); + &.active{ transform:translate(-50%, -50%) scale(1); } + } +} - .ico-dark { - transform: translate(-50%, -50%) scale(1); - - &.active{ transform: translate(-50%, -50%) scale(0); } - } +@include mq(tablet){ - .ico-light { - transform: translate(-50%, -50%) scale(0); +.side-banner { + button { font-size:1.75rem; } + #btn-search { right:60px; } + #btn-brightness { right:120px; } +} - &.active{ transform: translate(-50%, -50%) scale(1); } - } +.site-tab { + padding:1rem; + font-size:1.375rem; } -@include mq(tablet){ - .side-banner { - button { font-size: 1.75rem; } +#contact { + ul li a svg { width:18px; } - #btn-search { right: 60px; } + span { font-size:1rem; } +} - #btn-brightness { right: 120px; } - } - - .site-name { - padding: 1rem; - font-size: 1.375rem; - } +} - #contact { - ul li a svg { width: 18px; } +@include mq(desktop){ - span { font-size: 1rem; } - } +.sidebar { position:fixed; } + +.sidebar-left{ + flex-flow:column nowrap; + width:#{$sidebarwd}; + min-height:100%; + background:none; + align-items:flex-end; } -@include mq(desktop){ - .sidebar { position: fixed; } - - .sidebar-left{ - flex-flow: column nowrap; - width: #{$sidebarwd}; - min-height: 100%; - background: none; - align-items: flex-end; - } +.side-banner{ + width:#{$sidebarwd}; + box-shadow:none !important; - .side-banner{ - width: #{$sidebarwd}; - box-shadow: none !important; + button { + display:none; + font-size:1.5rem; + } + #btn-search { right:69px; } + #btn-brightness { right:138px; } +} - button { - display: none; - font-size: 1.5rem; - } +.site-avatar img { display:inline-block; } - #btn-search { right: 69px; } +.site-tab { + font-size:1.375rem; + padding:1rem; + text-align:center; + position:relative; +} - #btn-brightness { right: 138px; } +.site-name { + position:relative; + + img, mark { transition:.5s ease; } + mark { + color:$color-wenge; + word-break:break-word; + } + + img { + display:inline-block; + width:32px; + height:32px; + top:-4px; + left:0; + left:-40px; + position:absolute; + transform:rotateY(90deg); + } + + &:hover { + mark { + color:$color-rose; + margin-left:40px; } - - .site-avatar img { display: inline-block; } - - .site-name { - font-size: 1.375rem; - padding: 1rem; - text-align: center; - - .highlight { - font-weight: 600; - background-image: -webkit-linear-gradient(left, #a95770 25%, #ff4d7c 32.5%, #97d0ec 50%, #ff4d7c 67.5%, #a95770 75%); - background-image: linear-gradient(90deg, #a95770 25%, #ff4d7c 32.5%, #97d0ec 50%, #ff4d7c 67.5%, #a95770 75%); - background-position: right center; - background-size: 400% auto; - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - - &:hover { - color: #ef9671; - animation: slidetext 2s ease-in infinite; - } - - @keyframes slidetext { - 100% { - background-position: left center; - } - } - } + img { + left:0; + transform:rotateY(360deg); } + } +} - .side-info { - width: #{$sidebarwd}; - height: calc(100% - 14rem); - display: contents; - } +.side-info { + width:#{$sidebarwd}; + height:calc(100% - 14rem); + display:contents; +} - #contact{ - display: block; - width: calc(#{$sidebarwd} - 4rem); - margin-top: 2rem; - padding: 1rem 2rem; - transform: none; +#contact{ + display:block; + width:calc(#{$sidebarwd} - 4rem); + margin-top:2rem; + padding:1rem 2rem; + transform:none; + + hr { + border-top:1px solid lightgrey; + margin:8px; + } + + h3{ + display:block; + position:absolute; + margin:0; + top:14px; + font-size:1rem; + transform:translateX(-50%); + left:50%; + background-color:#fff; + } +} - hr { - border-top: 1px solid lightgrey; - margin: 0.5rem; - } - - h3{ - display: block; - position: absolute; - margin: 0; - top: 14px; - font-size: 1rem; - transform: translateX(-50%); - left: 50%; - background-color: #fff; - } - } } @include mq(wide){ - .sidebar-left{ width: calc((100vw - #{$contentwd})/2); } - - .sidebar-right{ - display: flex; - height: 100%; - align-items: flex-end; - width: calc((100vw - #{$contentwd})/2); - margin-left: calc(#{$contentwd} + (100vw - #{$contentwd})/2); - } + +.sidebar-left{ width:calc((100vw - #{$contentwd})/2); } +.sidebar-right{ + display:flex; + height:100%; + width:calc((100vw - #{$contentwd})/2); + margin-left:calc(#{$contentwd} + (100vw - #{$contentwd})/2); +} + } \ No newline at end of file diff --git a/_sass/toc.scss b/_sass/toc.scss index 50bed32ea..8ee74e4a3 100644 --- a/_sass/toc.scss +++ b/_sass/toc.scss @@ -1,58 +1,58 @@ .toc { - position: fixed; - top: 6rem; + position:fixed; + top:6rem; } .toc-header { - font-size: 1.25rem; - font-weight: 600; - padding-left: 0.75rem; - padding-bottom: 4px; - border-bottom: burlywood 2px solid; - - svg { - width: 16px; - display: inline-flex; - transform: translateY(2px); - } + font-size:1.25rem; + font-weight:600; + padding:0 0 4px 12px; + border-bottom:burlywood 2px solid; + + svg { + width:16px; + display:inline-flex; + transform:translateY(2px); + } } .toc-board { - max-width: #{$sidebarwd}; - margin: 0; - margin-left: 2rem; + max-width:#{$sidebarwd}; + margin: 1rem 0 1rem 2rem !important; } -.toc-list { - font-size: 1.125rem; - padding: 0; +.toc-board, .toc-list { + font-size:1.125rem; + padding:0; + margin: 0 auto; - li:last-child { margin-bottom: 0; } + li a { display:inline-block; } + li:last-child { margin-bottom:0; } - li a { display:inline-block; } + .node-name--H1 { margin-top:8px; } + .node-name--H2 { + font-size:1rem; + margin-top:6px; + padding-left:16px; + } - .node-name--H1 { margin-top: 0.5rem; } + .toc-list-item { + word-break:normal; + line-height:150%; - .node-name--H2 { - font-size: 1rem; - margin-top: 0.375rem; - padding-left: 0.5rem; + a { + animation:.5s ease-out 0s 1 slide; + cursor: pointer; } - .toc-list-item { - word-break: normal; - display: block; - line-height: 150%; - animation: .5s ease-out 0s 1 slide; - - @keyframes slide { - 0% { transform: scaleY(0); } - 100% { transform: scaleY(1); } - } - } - - .is-active-link{ - color: indianred !important; - font-weight:950; + @keyframes slide { + 0% { transform:scaleY(0); } + 100% { transform:scaleY(1); } } + } + + .is-active-link{ + color:indianred !important; + font-weight:950; + } } \ No newline at end of file diff --git a/assets/css/404.scss b/assets/css/404.scss index 5aedaebf8..d64def5c6 100644 --- a/assets/css/404.scss +++ b/assets/css/404.scss @@ -2,46 +2,46 @@ --- body { - margin: 0; - background: - repeating-linear-gradient( - to right, transparent, - transparent 100px, - white 100px, - white 112px - ), - repeating-linear-gradient( - to bottom, transparent, - transparent 100px, - white 100px, - white 112px - ), - linear-gradient(45deg, pink, skyblue); + margin:0; + background: + repeating-linear-gradient( + to right, transparent, + transparent 100px, + white 100px, + white 112px + ), + repeating-linear-gradient( + to bottom, transparent, + transparent 100px, + white 100px, + white 112px + ), + linear-gradient(45deg, pink, skyblue); } .blank-page { - display: table-cell; - z-index: 0; - background: #fff; - margin: 1rem auto; - width: 100vw; - height: 45vh; - vertical-align: middle; + display:table-cell; + z-index:0; + background:#fff; + margin:1rem auto; + width:100vw; + height:45vh; + vertical-align:middle; - .go-home { - text-decoration: none; - margin-left: 5vw; - font-size: 1.25rem; - } + .go-home { + text-decoration:none; + margin-left:5vw; + font-size:1.25rem; + } - .not-found-msg { text-align: center; } + .not-found-msg { text-align:center; } - .sour-face { - margin: 3rem auto; - font-size: 5rem; - line-height: 1; - letter-spacing: -1px; - } + .sour-face { + margin:3rem auto; + font-size:5rem; + line-height:1; + letter-spacing:-1px; + } } -.container { display: none; } \ No newline at end of file +.container { display:none; } \ No newline at end of file diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss deleted file mode 100644 index be19b904d..000000000 --- a/assets/css/fonts.scss +++ /dev/null @@ -1,29 +0,0 @@ ---- ---- - -@font-face { - font-family: 'Nunito Sans'; - font-style: normal; - font-weight: 400; - font-display: optional; - src: local('Nunito Sans'), - url(/assets/fonts/NunitoSans-Regular.ttf) format("truetype"); -} - -@font-face { - font-family: 'Righteous'; - font-style: normal; - font-weight: 600; - font-display: optional; - src: local('Righteous'), - url(/assets/fonts/Righteous-Regular.ttf) format("truetype"); -} - -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 400; - font-display: optional; - src: local('Lato'), - url(/assets/fonts/Lato-Regular.ttf) format("truetype"); -} \ No newline at end of file diff --git a/assets/css/highlight-dark.min.css b/assets/css/highlight-dark.min.css deleted file mode 100644 index 45bda87d8..000000000 --- a/assets/css/highlight-dark.min.css +++ /dev/null @@ -1 +0,0 @@ -pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf !important;background:#282c34 !important}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd !important}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75 !important}.hljs-literal{color:#56b6c2 !important}.hljs-addition,.hljs-attribute,.hljs-comment,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379 !important}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66 !important}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee !important}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b !important}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline} \ No newline at end of file diff --git a/assets/css/highlight-default.min.css b/assets/css/highlight-default.min.css deleted file mode 100644 index a48c1b091..000000000 --- a/assets/css/highlight-default.min.css +++ /dev/null @@ -1 +0,0 @@ -pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-attribute{color:#0184bb !important}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649 !important}.hljs-literal{color:#0184bb !important}.hljs-addition,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f !important}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2 !important}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401 !important}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline} \ No newline at end of file diff --git a/assets/css/highlight.min.css b/assets/css/highlight.min.css new file mode 100644 index 000000000..7fcf1a7eb --- /dev/null +++ b/assets/css/highlight.min.css @@ -0,0 +1,2 @@ +pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-attribute{color:#0184bb}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline} +.pre-dark {code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf !important;background:#282c34 !important}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd !important}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75 !important}.hljs-literal{color:#56b6c2 !important}.hljs-addition,.hljs-attribute,.hljs-comment,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379 !important}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66 !important}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee !important}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b !important}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index b50a3f6bb..9e35acad7 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -2,67 +2,46 @@ --- html, body { - margin: 0; - padding: 0; + margin:0; + padding:0; } .fonts-loaded { - a, span, p { - font-family: "Nunito Sans", 'Lucida Sans', sans-serif; - } - - h1, h2, h3 { - font-family: "Lato", Helvetica, sans-serif; - } - - mark { - font-family: 'Righteous', sans-serif; - } -} - -a { - text-decoration: none; -} - -a, span, p, h1, h2, h3, i { - color: #3A241A; -} - -a, span, p { - font-family: 'Lucida Sans', sans-serif; + a, span, p { font-family:"Nunito Sans", 'Lucida Sans', sans-serif; } + h1, h2, h3 { font-family:"Lato", Helvetica, sans-serif; } + mark { font-family:'Righteous', sans-serif; } } +a { text-decoration:none; } +a, span, p, h1, h2, h3, i { color:#3A241A; } +a, span, p { font-family:'Lucida Sans', sans-serif; } h1, h2, h3, mark { - margin: 0; - font-family: Helvetica, sans-serif; -} - -mark { - background-color: transparent; + margin:0; + font-family:Helvetica, sans-serif; } +mark { background-color:transparent; } svg { - width: 16px; - aspect-ratio: 1.0; - fill: #3A241A; - display: block; - margin: auto; + width:16px; + aspect-ratio:1.0; + fill:#3A241A; + display:block; + margin:auto; } button { - border: none; - background: none; - padding: 0; + border:none; + background:none; + padding:0; } /* Disable default input cancel button */ input::-ms-clear, input::-ms-reveal{ display:none; - width:0; - height:0; + width:0; + height:0; } - input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, @@ -74,7 +53,7 @@ input::-webkit-search-results-decoration{ @import 'layout'; :root{ - --pagewidth-desktop: calc(max(min(100vw - #{$sidebarwd} - 2rem, #{$contentwd}), 44rem)); + --pagewidth-desktop:calc(max(min(100vw - #{$sidebarwd} - 2rem, #{$contentwd}), 44rem)); } @import "sidebar"; @@ -83,5 +62,4 @@ input::-webkit-search-results-decoration{ @import "toc"; @import "post"; @import "search"; - @import "darkmode"; \ No newline at end of file diff --git a/assets/fonts/Lato-Regular.ttf b/assets/fonts/Lato-Regular.ttf deleted file mode 100644 index 04ea8efb1..000000000 Binary files a/assets/fonts/Lato-Regular.ttf and /dev/null differ diff --git a/assets/fonts/Lato-Regular.woff2 b/assets/fonts/Lato-Regular.woff2 new file mode 100644 index 000000000..80581a61a Binary files /dev/null and b/assets/fonts/Lato-Regular.woff2 differ diff --git a/assets/fonts/NunitoSans-Regular.ttf b/assets/fonts/NunitoSans-Regular.ttf deleted file mode 100644 index 10cb4b2e3..000000000 Binary files a/assets/fonts/NunitoSans-Regular.ttf and /dev/null differ diff --git a/assets/fonts/NunitoSans-Regular.woff2 b/assets/fonts/NunitoSans-Regular.woff2 new file mode 100644 index 000000000..316c8e3d3 Binary files /dev/null and b/assets/fonts/NunitoSans-Regular.woff2 differ diff --git a/assets/fonts/Righteous-Regular.ttf b/assets/fonts/Righteous-Regular.ttf deleted file mode 100644 index 07fc0b451..000000000 Binary files a/assets/fonts/Righteous-Regular.ttf and /dev/null differ diff --git a/assets/fonts/Righteous-Regular.woff2 b/assets/fonts/Righteous-Regular.woff2 new file mode 100644 index 000000000..33f4aafe7 Binary files /dev/null and b/assets/fonts/Righteous-Regular.woff2 differ diff --git a/assets/img/icon/house.webp b/assets/img/icon/house.webp new file mode 100644 index 000000000..a020713c2 Binary files /dev/null and b/assets/img/icon/house.webp differ diff --git a/assets/img/loading.webp b/assets/img/loading.webp index 1a891582a..04ebd22b3 100644 Binary files a/assets/img/loading.webp and b/assets/img/loading.webp differ diff --git a/assets/img/profile.jpg b/assets/img/profile.jpg deleted file mode 100644 index 02c9c0e28..000000000 Binary files a/assets/img/profile.jpg and /dev/null differ diff --git a/assets/img/profile.webp b/assets/img/profile.webp new file mode 100644 index 000000000..ad97e33e6 Binary files /dev/null and b/assets/img/profile.webp differ diff --git a/assets/js/background.js b/assets/js/background.js index 6758c3ec1..1cf9523b3 100644 --- a/assets/js/background.js +++ b/assets/js/background.js @@ -1,700 +1 @@ -/** - * Stars - * Inspired by Steve Courtney's poster art for Celsius GS's Drifter - http://celsiusgs.com/drifter/posters.php - * by Cory Hughart - http://coryhughart.com - */ - -// Settings -var particleCount = 40, - flareCount = 16, - motion = 0.05, - tilt = 0.05, - color = '#44b5fd', - colorPalette = ["#c13c3c", "#c13cc1", "#3c3cc1", "#3cc1c1", "#3cc13c", "#c1c13c"], - particleSizeBase = 2, - particleSizeMultiplier = 0.5, - flareSizeBase = 100, - flareSizeMultiplier = 100, - lineWidth = 1, - linkChance = 75, // chance per frame of link, higher = smaller chance - linkLengthMin = 5, // min linked vertices - linkLengthMax = 7, // max linked vertices - linkOpacity = 0.375; // number between 0 & 1 - linkFade = 90, // link fade-out frames - linkSpeed = 1, // distance a link travels in 1 frame - glareAngle = -60, - glareOpacityMultiplier = 0.05, - renderParticles = true, - renderParticleGlare = true, - renderFlares = true, - renderLinks = true, - renderMesh = false, - flicker = true, - flickerSmoothing = 15, // higher = smoother flicker - blurSize = 0, - orbitTilt = true, - randomMotion = true, - noiseLength = 1000, - noiseStrength = 1; - -var canvas = document.getElementById('stars'), - context = canvas.getContext('2d'), - mouse = { x: 0, y: 0 }, - m = {}, - r = 0, - c = 1000, // multiplier for delaunay points, since floats too small can mess up the algorithm - n = 0, - nAngle = (Math.PI * 2) / noiseLength, - nRad = 100, - nScale = 0.5, - nPos = {x: 0, y: 0}, - points = [], - vertices = [], - triangles = [], - links = [], - particles = [], - flares = []; - -// Delaunay Triangulation -var EPSILON = 1.0 / 1048576.0; - -function randomColor(colors){ - return colors[Math.floor(Math.random() * colors.length)]; -} - -function supertriangle(vertices) { - var xmin = Number.POSITIVE_INFINITY, - ymin = Number.POSITIVE_INFINITY, - xmax = Number.NEGATIVE_INFINITY, - ymax = Number.NEGATIVE_INFINITY, - i, dx, dy, dmax, xmid, ymid; - - for(i = vertices.length; i--; ) { - if(vertices[i][0] < xmin) xmin = vertices[i][0]; - if(vertices[i][0] > xmax) xmax = vertices[i][0]; - if(vertices[i][1] < ymin) ymin = vertices[i][1]; - if(vertices[i][1] > ymax) ymax = vertices[i][1]; - } - - dx = xmax - xmin; - dy = ymax - ymin; - dmax = Math.max(dx, dy); - xmid = xmin + dx * 0.5; - ymid = ymin + dy * 0.5; - - return [ - [xmid - 20 * dmax, ymid - dmax], - [xmid , ymid + 20 * dmax], - [xmid + 20 * dmax, ymid - dmax] - ]; -} - -function circumcircle(vertices, i, j, k) { - var x1 = vertices[i][0], - y1 = vertices[i][1], - x2 = vertices[j][0], - y2 = vertices[j][1], - x3 = vertices[k][0], - y3 = vertices[k][1], - fabsy1y2 = Math.abs(y1 - y2), - fabsy2y3 = Math.abs(y2 - y3), - xc, yc, m1, m2, mx1, mx2, my1, my2, dx, dy; - - /* Check for coincident points */ - if(fabsy1y2 < EPSILON && fabsy2y3 < EPSILON) - throw new Error("Eek! Coincident points!"); - - if(fabsy1y2 < EPSILON) { - m2 = -((x3 - x2) / (y3 - y2)); - mx2 = (x2 + x3) / 2.0; - my2 = (y2 + y3) / 2.0; - xc = (x2 + x1) / 2.0; - yc = m2 * (xc - mx2) + my2; - } - else if(fabsy2y3 < EPSILON) { - m1 = -((x2 - x1) / (y2 - y1)); - mx1 = (x1 + x2) / 2.0; - my1 = (y1 + y2) / 2.0; - xc = (x3 + x2) / 2.0; - yc = m1 * (xc - mx1) + my1; - } - else { - m1 = -((x2 - x1) / (y2 - y1)); - m2 = -((x3 - x2) / (y3 - y2)); - mx1 = (x1 + x2) / 2.0; - mx2 = (x2 + x3) / 2.0; - my1 = (y1 + y2) / 2.0; - my2 = (y2 + y3) / 2.0; - xc = (m1 * mx1 - m2 * mx2 + my2 - my1) / (m1 - m2); - yc = (fabsy1y2 > fabsy2y3) ? - m1 * (xc - mx1) + my1 : - m2 * (xc - mx2) + my2; - } - - dx = x2 - xc; - dy = y2 - yc; - return {i: i, j: j, k: k, x: xc, y: yc, r: dx * dx + dy * dy}; -} - -function dedup(edges) { - var i, j, a, b, m, n; - - for(j = edges.length; j; ) { - b = edges[--j]; - a = edges[--j]; - - for(i = j; i; ) { - n = edges[--i]; - m = edges[--i]; - - if((a === m && b === n) || (a === n && b === m)) { - edges.splice(j, 2); - edges.splice(i, 2); - break; - } - } - } -} - -function Delaunay(vertices, key) { - var n = vertices.length, - i, j, indices, st, open, closed, edges, dx, dy, a, b, c; - - /* Bail if there aren't enough vertices to form any triangles. */ - if(n < 3) - return []; - - /* Slice out the actual vertices from the passed objects. (Duplicate the - * array even if we don't, though, since we need to make a supertriangle - * later on!) */ - vertices = vertices.slice(0); - - if(key) - for(i = n; i--; ) - vertices[i] = vertices[i][key]; - - /* Make an array of indices into the vertex array, sorted by the - * vertices' x-position. */ - indices = new Array(n); - - for(i = n; i--; ) - indices[i] = i; - - indices.sort(function(i, j) { - return vertices[j][0] - vertices[i][0]; - }); - - /* Next, find the vertices of the supertriangle (which contains all other - * triangles), and append them onto the end of a (copy of) the vertex - * array. */ - st = supertriangle(vertices); - vertices.push(st[0], st[1], st[2]); - - /* Initialize the open list (containing the supertriangle and nothing - * else) and the closed list (which is empty since we havn't processed - * any triangles yet). */ - open = [circumcircle(vertices, n + 0, n + 1, n + 2)]; - closed = []; - edges = []; - - /* Incrementally add each vertex to the mesh. */ - for(i = indices.length; i--; edges.length = 0) { - c = indices[i]; - - /* For each open triangle, check to see if the current point is - * inside it's circumcircle. If it is, remove the triangle and add - * it's edges to an edge list. */ - for(j = open.length; j--; ) { - /* If this point is to the right of this triangle's circumcircle, - * then this triangle should never get checked again. Remove it - * from the open list, add it to the closed list, and skip. */ - dx = vertices[c][0] - open[j].x; - - if(dx > 0.0 && dx * dx > open[j].r) { - closed.push(open[j]); - open.splice(j, 1); - continue; - } - - /* If we're outside the circumcircle, skip this triangle. */ - dy = vertices[c][1] - open[j].y; - - if(dx * dx + dy * dy - open[j].r > EPSILON) - continue; - - /* Remove the triangle and add it's edges to the edge list. */ - edges.push( - open[j].i, open[j].j, - open[j].j, open[j].k, - open[j].k, open[j].i - ); - - open.splice(j, 1); - } - - /* Remove any doubled edges. */ - dedup(edges); - - /* Add a new triangle for each edge. */ - for(j = edges.length; j; ) { - b = edges[--j]; - a = edges[--j]; - open.push(circumcircle(vertices, a, b, c)); - } - } - - /* Copy any remaining open triangles to the closed list, and then - * remove any triangles that share a vertex with the supertriangle, - * building a list of triplets that represent triangles. */ - for(i = open.length; i--; ) - closed.push(open[i]); - - open.length = 0; - - for(i = closed.length; i--; ) - if(closed[i].i < n && closed[i].j < n && closed[i].k < n) - open.push(closed[i].i, closed[i].j, closed[i].k); - - /* Yay, we're done! */ - return open; -} - -function init() { - var i, j, k; - - // requestAnimFrame polyfill - window.requestAnimFrame = (function(){ - return window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - function( callback ){ - window.setTimeout(callback, 1000 / 60); - }; - })(); - - // Size canvas - resize(); - - mouse.x = canvas.clientWidth / 2; - mouse.y = canvas.clientHeight / 2; - - // Create particle positions - for (i = 0; i < particleCount; i++) { - var p = new Particle(); - particles.push(p); - points.push([p.x*c, p.y*c]); - } - - vertices = Delaunay(points); - // Create an array of "triangles" (groups of 3 indices) - var tri = []; - - for (i = 0; i < vertices.length; i++) { - if (tri.length == 3) { - triangles.push(tri); - tri = []; - } - - tri.push(vertices[i]); - } - - // Tell all the particles who their neighbors are - for (i = 0; i < particles.length; i++) { - // Loop through all tirangles - for (j = 0; j < triangles.length; j++) { - // Check if this particle's index is in this triangle - k = triangles[j].indexOf(i); - // If it is, add its neighbors to the particles contacts list - if (k !== -1) { - triangles[j].forEach(function(value, index, array) { - if (value !== i && particles[i].neighbors.indexOf(value) == -1) { - particles[i].neighbors.push(value); - } - }); - } - } - } - - if (renderFlares) { - // Create flare positions - for (i = 0; i < flareCount; i++) { - flares.push(new Flare()); - } - } - - // Motion mode - if ('ontouchstart' in document.documentElement && window.DeviceOrientationEvent) { - // console.log('Using device orientation'); - window.addEventListener('deviceorientation', function(e) { - mouse.x = (canvas.clientWidth / 2) - ((e.gamma / 90) * (canvas.clientWidth / 2) * 2); - mouse.y = (canvas.clientHeight / 2) - ((e.beta / 90) * (canvas.clientHeight / 2) * 2); - }, true); - } - else { - // Mouse move listener - // console.log('Using mouse movement'); - document.body.addEventListener('mousemove', function(e) { - mouse.x = e.clientX; - mouse.y = e.clientY; - }); - } - - // Animation loop - (function animloop(){ - requestAnimFrame(animloop); - resize(); - render(); - })(); -} - -function render() { - if (randomMotion) { - n++; - - if (n >= noiseLength) { - n = 0; - } - - nPos = noisePoint(n); - } - - // Clear - context.clearRect(0, 0, canvas.width, canvas.height); - - if (blurSize > 0) { - context.shadowBlur = blurSize; - context.shadowColor = randomColor(colorPalette); - } - - if (renderParticles) { - // Render particles - for (var i = 0; i < particleCount; i++) { - particles[i].render(); - } - } - - if (renderMesh) { - // Render all lines - context.beginPath(); - - for (var v = 0; v < vertices.length-1; v++) { - // Splits the array into triplets - if ((v + 1) % 3 === 0) { continue; } - - var p1 = particles[vertices[v]], - p2 = particles[vertices[v+1]]; - - var pos1 = position(p1.x, p1.y, p1.z), - pos2 = position(p2.x, p2.y, p2.z); - - context.moveTo(pos1.x, pos1.y); - context.lineTo(pos2.x, pos2.y); - } - - context.strokeStyle = randomColor(colorPalette); - context.lineWidth = lineWidth; - context.stroke(); - context.closePath(); - } - - if (renderLinks) { - // Possibly start a new link - if (random(0, linkChance) == linkChance) { - var length = random(linkLengthMin, linkLengthMax); - var start = random(0, particles.length-1); - startLink(start, length); - } - - // Render existing links - // Iterate in reverse so that removing items doesn't affect the loop - for (var l = links.length-1; l >= 0; l--) { - if (links[l] && !links[l].finished) { - links[l].render(); - } - else { - delete links[l]; - } - } - } - - if (renderFlares) { - // Render flares - for (var j = 0; j < flareCount; j++) { - flares[j].render(); - } - } -} - -function resize() { - canvas.width = window.innerWidth * (window.devicePixelRatio || 1); - canvas.height = canvas.width * (canvas.clientHeight / canvas.clientWidth); -} - -function startLink(vertex, length) { - links.push(new Link(vertex, length)); -} - -// Particle class -var Particle = function() { - this.x = random(-0.1, 1.1, true); - this.y = random(-0.1, 1.1, true); - this.z = random(0,4); - this.color = randomColor(colorPalette); - this.opacity = random(0.1,1,true); - this.flicker = 0; - this.neighbors = []; // placeholder for neighbors -}; - -Particle.prototype.render = function() { - var pos = position(this.x, this.y, this.z), - r = ((this.z * particleSizeMultiplier) + particleSizeBase) * (sizeRatio() / 1000), - o = this.opacity; - - if (flicker) { - var newVal = random(-0.5, 0.5, true); - this.flicker += (newVal - this.flicker) / flickerSmoothing; - - if (this.flicker > 0.5) this.flicker = 0.5; - if (this.flicker < -0.5) this.flicker = -0.5; - - o += this.flicker; - - if (o > 1) o = 1; - if (o < 0) o = 0; - } - - context.fillStyle = this.color; - context.globalAlpha = o; - context.beginPath(); - context.arc(pos.x, pos.y, r, 0, 2 * Math.PI, false); - context.fill(); - context.closePath(); - - if (renderParticleGlare) { - context.globalAlpha = o * glareOpacityMultiplier; - context.ellipse(pos.x, pos.y, r * 100, r, (glareAngle - ((nPos.x - 0.5) * noiseStrength * motion)) * (Math.PI / 180), 0, 2 * Math.PI, false); - context.fill(); - context.closePath(); - } - - context.globalAlpha = 1; -}; - -// Flare class -var Flare = function() { - this.x = random(-0.25, 1.25, true); - this.y = random(-0.25, 1.25, true); - this.z = random(0,2); - this.color = randomColor(colorPalette); - this.opacity = random(0.001, 0.01, true); -}; - -Flare.prototype.render = function() { - var pos = position(this.x, this.y, this.z), - r = ((this.z * flareSizeMultiplier) + flareSizeBase) * (sizeRatio() / 1000); - - // Feathered circles - context.beginPath(); - context.globalAlpha = this.opacity; - context.arc(pos.x, pos.y, r, 0, 2 * Math.PI, false); - context.fillStyle = this.color; - context.fill(); - context.closePath(); - context.globalAlpha = 1; -}; - -// Link class -var Link = function(startVertex, numPoints) { - this.length = numPoints; - this.verts = [startVertex]; - this.stage = 0; - this.linked = [startVertex]; - this.distances = []; - this.traveled = 0; - this.fade = 0; - this.finished = false; -}; - -Link.prototype.render = function() { - // Stages: - // 0. Vertex collection - // 1. Render line reaching from vertex to vertex - // 2. Fade out - // 3. Finished (delete me) - - var i, p, pos, points; - - switch (this.stage) { - // VERTEX COLLECTION STAGE - case 0: - // Grab the last member of the link - var last = particles[this.verts[this.verts.length-1]]; - if (last && last.neighbors && last.neighbors.length > 0) { - // Grab a random neighbor - var neighbor = last.neighbors[random(0, last.neighbors.length-1)]; - // If we haven't seen that particle before, add it to the link - if (this.verts.indexOf(neighbor) == -1) { - this.verts.push(neighbor); - } - // If we have seen that particle before, we'll just wait for the next frame - } - else { - this.stage = 3; - this.finished = true; - } - - if (this.verts.length >= this.length) { - // Calculate all distances at once - for (i = 0; i < this.verts.length-1; i++) { - var p1 = particles[this.verts[i]], - p2 = particles[this.verts[i+1]], - dx = p1.x - p2.x, - dy = p1.y - p2.y, - dist = Math.sqrt(dx*dx + dy*dy); - - this.distances.push(dist); - } - this.stage = 1; - } - break; - - // RENDER LINE ANIMATION STAGE - case 1: - if (this.distances.length > 0) { - - points = []; - - // Gather all points already linked - for (i = 0; i < this.linked.length; i++) { - p = particles[this.linked[i]]; - pos = position(p.x, p.y, p.z); - points.push([pos.x, pos.y]); - } - - var linkSpeedRel = linkSpeed * 0.00001 * canvas.width; - this.traveled += linkSpeedRel; - var d = this.distances[this.linked.length-1]; - // Calculate last point based on linkSpeed and distance travelled to next point - if (this.traveled >= d) { - this.traveled = 0; - // We've reached the next point, add coordinates to array - this.linked.push(this.verts[this.linked.length]); - p = particles[this.linked[this.linked.length-1]]; - pos = position(p.x, p.y, p.z); - points.push([pos.x, pos.y]); - - if (this.linked.length >= this.verts.length) { - this.stage = 2; - } - } - else { - // We're still travelling to the next point, get coordinates at travel distance - // http://math.stackexchange.com/a/85582 - var a = particles[this.linked[this.linked.length-1]], - b = particles[this.verts[this.linked.length]], - t = d - this.traveled, - x = ((this.traveled * b.x) + (t * a.x)) / d, - y = ((this.traveled * b.y) + (t * a.y)) / d, - z = ((this.traveled * b.z) + (t * a.z)) / d; - - pos = position(x, y, z); - points.push([pos.x, pos.y]); - } - - this.drawLine(points); - } - else { - this.stage = 3; - this.finished = true; - } - break; - - // FADE OUT STAGE - case 2: - if (this.verts.length > 1) { - if (this.fade < linkFade) { - this.fade++; - - // Render full link between all vertices and fade over time - points = []; - var alpha = (1 - (this.fade / linkFade)) * linkOpacity; - - for (i = 0; i < this.verts.length; i++) { - p = particles[this.verts[i]]; - pos = position(p.x, p.y, p.z); - points.push([pos.x, pos.y]); - } - - this.drawLine(points, alpha); - } - else { - this.stage = 3; - this.finished = true; - } - } - else { - this.stage = 3; - this.finished = true; - } - - break; - // FINISHED STAGE - case 3: - default: - this.finished = true; - break; - } -}; - -Link.prototype.drawLine = function(points, alpha) { - if (typeof alpha !== 'number') alpha = linkOpacity; - - if (points.length > 1 && alpha > 0) { - context.globalAlpha = alpha; - context.beginPath(); - - for (var i = 0; i < points.length-1; i++) { - context.moveTo(points[i][0], points[i][1]); - context.lineTo(points[i+1][0], points[i+1][1]); - } - - context.strokeStyle = '#888'; - context.lineWidth = lineWidth; - context.stroke(); - context.closePath(); - context.globalAlpha = 1; - } -}; - -// Utils -function noisePoint(i) { - var a = nAngle * i, - cosA = Math.cos(a), - sinA = Math.sin(a), - rad = nRad; - - return { - x: rad * cosA, - y: rad * sinA - }; -} - -function position(x, y, z) { - return { - x: (x * canvas.width) + ((((canvas.width / 2) - mouse.x + ((nPos.x - 0.5) * noiseStrength)) * z) * motion), - y: (y * canvas.height) + ((((canvas.height / 2) - mouse.y + ((nPos.y - 0.5) * noiseStrength)) * z) * motion) - }; -} - -function sizeRatio() { - return canvas.width >= canvas.height ? canvas.width : canvas.height; -} - -function random(min, max, float) { - return float ? - Math.random() * (max - min) + min : - Math.floor(Math.random() * (max - min + 1)) + min; -} - -// init -if (canvas) init(); \ No newline at end of file +var particleCount=40,flareCount=16,motion=.05,tilt=.05,color="#44b5fd",colorPalette=["#c13c3c","#c13cc1","#3c3cc1","#3cc1c1","#3cc13c","#c1c13c"],particleSizeBase=2,particleSizeMultiplier=.5,flareSizeBase=100,flareSizeMultiplier=100,lineWidth=1,linkChance=75,linkLengthMin=5,linkLengthMax=7,linkOpacity=.375;linkFade=90,linkSpeed=1,glareAngle=-60,glareOpacityMultiplier=.05,renderParticles=!0,renderParticleGlare=!0,renderFlares=!0,renderLinks=!0,renderMesh=!1,flicker=!0,flickerSmoothing=15,blurSize=0,orbitTilt=!0,randomMotion=!0,noiseLength=1e3,noiseStrength=1;var canvas=document.getElementById("stars"),context=canvas.getContext("2d"),mouse={x:0,y:0},m={},r=0,c=1e3,n=0,nAngle=2*Math.PI/noiseLength,nRad=100,nScale=.5,nPos={x:0,y:0},points=[],vertices=[],triangles=[],links=[],particles=[],flares=[],EPSILON=1/1048576;function randomColor(t){return t[Math.floor(Math.random()*t.length)]}function supertriangle(t){var e,i,s,o,a,l,h=Number.POSITIVE_INFINITY,$=Number.POSITIVE_INFINITY,f=Number.NEGATIVE_INFINITY,d=Number.NEGATIVE_INFINITY;for(e=t.length;e--;)t[e][0]f&&(f=t[e][0]),t[e][1]<$&&($=t[e][1]),t[e][1]>d&&(d=t[e][1]);return o=Math.max(i=f-h,s=d-$),[[(a=h+.5*i)-20*o,(l=$+.5*s)-o],[a,l+20*o],[a+20*o,l-o]]}function circumcircle(t,e,i,s){var o,a,l,h,$,f,d,u,v,p,g=t[e][0],_=t[e][1],x=t[i][0],k=t[i][1],y=t[s][0],P=t[s][1],I=Math.abs(_-k),b=Math.abs(k-P);if(Ib?l*(o-$)+d:h*(o-f)+u),v=x-o,p=k-a,{i:e,j:i,k:s,x:o,y:a,r:v*v+p*p}}function dedup(t){var e,i,s,o,a,l;for(i=t.length;i;)for(o=t[--i],s=t[--i],e=i;e;)if(l=t[--e],s===(a=t[--e])&&o===l||s===l&&o===a){t.splice(i,2),t.splice(e,2);break}}function Delaunay(t,e){var i,s,o,a,l,h,$,f,d,u,v,p,g=t.length;if(g<3)return[];if(t=t.slice(0),e)for(i=g;i--;)t[i]=t[i][e];for(o=Array(g),i=g;i--;)o[i]=i;for(o.sort(function(e,i){return t[i][0]-t[e][0]}),a=supertriangle(t),t.push(a[0],a[1],a[2]),l=[circumcircle(t,g+0,g+1,g+2)],h=[],$=[],i=o.length;i--;$.length=0){for(p=o[i],s=l.length;s--;){if((f=t[p][0]-l[s].x)>0&&f*f>l[s].r){h.push(l[s]),l.splice(s,1);continue}f*f+(d=t[p][1]-l[s].y)*d-l[s].r>EPSILON||($.push(l[s].i,l[s].j,l[s].j,l[s].k,l[s].k,l[s].i),l.splice(s,1))}for(dedup($),s=$.length;s;)v=$[--s],u=$[--s],l.push(circumcircle(t,u,v,p))}for(i=l.length;i--;)h.push(l[i]);for(l.length=0,i=h.length;i--;)h[i].i=noiseLength&&(n=0),nPos=noisePoint(n)),context.clearRect(0,0,canvas.width,canvas.height),blurSize>0&&(context.shadowBlur=blurSize,context.shadowColor=randomColor(colorPalette)),renderParticles)for(var t=0;t=0;h--)links[h]&&!links[h].finished?links[h].render():delete links[h]}if(renderFlares)for(var $=0;$.5&&(this.flicker=.5),this.flicker<-.5&&(this.flicker=-.5),(i+=this.flicker)>1&&(i=1),i<0&&(i=0)}context.fillStyle=this.color,context.globalAlpha=i,context.beginPath(),context.arc(t.x,t.y,e,0,2*Math.PI,!1),context.fill(),context.closePath(),renderParticleGlare&&(context.globalAlpha=i*glareOpacityMultiplier,context.ellipse(t.x,t.y,100*e,e,(glareAngle-(nPos.x-.5)*noiseStrength*motion)*(Math.PI/180),0,2*Math.PI,!1),context.fill(),context.closePath()),context.globalAlpha=1};var Flare=function(){this.x=random(-.25,1.25,!0),this.y=random(-.25,1.25,!0),this.z=random(0,2),this.color=randomColor(colorPalette),this.opacity=random(.001,.01,!0)};Flare.prototype.render=function(){var t=position(this.x,this.y,this.z),e=(this.z*flareSizeMultiplier+flareSizeBase)*(sizeRatio()/1e3);context.beginPath(),context.globalAlpha=this.opacity,context.arc(t.x,t.y,e,0,2*Math.PI,!1),context.fillStyle=this.color,context.fill(),context.closePath(),context.globalAlpha=1};var Link=function(t,e){this.length=e,this.verts=[t],this.stage=0,this.linked=[t],this.distances=[],this.traveled=0,this.fade=0,this.finished=!1};function noisePoint(t){var e=nAngle*t,i=nRad;return{x:i*Math.cos(e),y:i*Math.sin(e)}}function position(t,e,i){return{x:t*canvas.width+(canvas.width/2-mouse.x+(nPos.x-.5)*noiseStrength)*i*motion,y:e*canvas.height+(canvas.height/2-mouse.y+(nPos.y-.5)*noiseStrength)*i*motion}}function sizeRatio(){return canvas.width>=canvas.height?canvas.width:canvas.height}function random(t,e,i){return i?Math.random()*(e-t)+t:Math.floor(Math.random()*(e-t+1))+t}Link.prototype.render=function(){var t,e,i,s;switch(this.stage){case 0:var o=particles[this.verts[this.verts.length-1]];if(o&&o.neighbors&&o.neighbors.length>0){var a=o.neighbors[random(0,o.neighbors.length-1)];-1==this.verts.indexOf(a)&&this.verts.push(a)}else this.stage=3,this.finished=!0;if(this.verts.length>=this.length){for(t=0;t0){for(t=0,s=[];t=v)this.traveled=0,this.linked.push(this.verts[this.linked.length]),i=position((e=particles[this.linked[this.linked.length-1]]).x,e.y,e.z),s.push([i.x,i.y]),this.linked.length>=this.verts.length&&(this.stage=2);else{var p,g=particles[this.linked[this.linked.length-1]],_=particles[this.verts[this.linked.length]],x=v-this.traveled,k=(this.traveled*_.x+x*g.x)/v;i=position(k,(this.traveled*_.y+x*g.y)/v,(this.traveled*_.z+x*g.z)/v),s.push([i.x,i.y])}this.drawLine(s)}else this.stage=3,this.finished=!0;break;case 2:if(this.verts.length>1){if(this.fade1&&e>0){context.globalAlpha=e,context.beginPath();for(var i=0;i { ico.classList.add('active'); }); - /* - const moonIcons = document.querySelectorAll(".ico-dark"); - const sunIcons = document.querySelectorAll(".ico-light"); - - moonIcons.forEach((ico) => { - ico.classList.add('active'); - }); - - sunIcons.forEach((ico) => { - ico.classList.add('active'); - }); - */ } else { isDarkMode = false; @@ -95,6 +83,7 @@ document.addEventListener('DOMContentLoaded', function(){ // Change Datk/Light Theme const themeButton = document.querySelectorAll("#btn-brightness"); + const innerContent = document.querySelector('main'); themeButton.forEach((btn) => { btn.addEventListener('click', function() { @@ -114,16 +103,18 @@ document.addEventListener('DOMContentLoaded', function(){ if (isDarkMode){ localStorage.setItem('theme', 'default'); // Disable highlighter dark color theme - document.getElementById("highlight-default").disabled=false; - document.getElementById("highlight-dark").disabled=true; + Array.from(innerContent.querySelectorAll('pre')).forEach(function (codeblock){ + codeblock.classList.remove('pre-dark'); + }); changeGiscusTheme('light'); isDarkMode = false; } else { localStorage.setItem('theme', 'dark'); // Disable highlighter default color theme - document.getElementById("highlight-default").disabled=true; - document.getElementById("highlight-dark").disabled=false; + Array.from(innerContent.querySelectorAll('pre')).forEach(function (codeblock){ + codeblock.classList.add('pre-dark'); + }); changeGiscusTheme('noborder_gray'); isDarkMode = true; } @@ -152,7 +143,7 @@ document.addEventListener('DOMContentLoaded', function(){ searchButton.forEach((btn) => { btn.addEventListener('click', function() { searchPage.classList.add('active'); - $('#search-input').focus(); + document.getElementById("search-input").focus(); }); }); } @@ -171,9 +162,191 @@ document.addEventListener('DOMContentLoaded', function(){ if (cancelButton) { cancelButton.addEventListener('click', function() { - $('.result-item').remove(); - $('#search-input').val(""); - $('#btn-clear').hide(); + document.getElementById('btn-clear').style.display = 'none'; + document.getElementById('search-input').value = ""; + + Array.from(document.querySelectorAll('.result-item')).forEach(function (item) { + item.remove(); + }); + }); + } +}); + +function searchPost(pages){ + document.getElementById('search-input').addEventListener('keyup', function() { + var keyword = this.value.toLowerCase(); + var matchedPosts = []; + const searchResults = document.getElementById('search-result'); + const prevResults = document.querySelector(".result-item"); + + if (keyword.length > 0) { + searchResults.style.display = 'block'; + document.getElementById('btn-clear').style.display = 'block'; + } else { + searchResults.style.display = 'none'; + document.getElementById('btn-clear').style.display = 'none'; + } + + Array.from(document.querySelectorAll('.result-item')).forEach(function (item) { + item.remove(); + }); + + for (var i = 0; i < pages.length; i++) { + var post = pages[i]; + + if (post.title === 'Home' && post.type == 'category') continue; + + if (post.title.toLowerCase().indexOf(keyword) >= 0 + || post.path.toLowerCase().indexOf(keyword) >= 0 + || post.tags.toLowerCase().indexOf(keyword) >= 0){ + matchedPosts.push(post); + } + } + + if (matchedPosts.length === 0) { + insertItem('There is no search result.'); + + return; + } + + matchedPosts.sort(function (a, b) { + if (a.type == 'category') return 1; + + return -1; + }); + + for (var i = 0; i < matchedPosts.length; i++) { + var highlighted_path = highlightKeyword(matchedPosts[i].path, keyword); + + if (highlighted_path === '') + highlighted_path = "Home"; + + if (matchedPosts[i].type === 'post'){ + var highlighted_title = highlightKeyword(matchedPosts[i].title, keyword); + var highlighted_tags = highlightKeyword(matchedPosts[i].tags, keyword); + + if (highlighted_tags === '') + highlighted_tags = "none"; + + insertItem('
' + highlighted_title + + '
' + highlighted_path + + '
' + highlighted_tags + + '
' + matchedPosts[i].date + + '
' + ); + } + else { + insertItem('
' + highlighted_path + + '
' + ); + } + } + + function insertItem(inner_html){ + let contents = document.createElement("li"); + contents.classList.add("result-item"); + contents.innerHTML = inner_html; + searchResults.append(contents); + } + }); + + function highlightKeyword(txt, keyword) { + var index = txt.toLowerCase().lastIndexOf(keyword); + + if (index >= 0) { + out = txt.substring(0, index) + + "" + + txt.substring(index, index+keyword.length) + + "" + + txt.substring(index + keyword.length); + return out; + } + + return txt; + } +} + +function searchRelated(pages){ + const refBox = document.getElementById('related-box'); + const refResults = document.getElementById('related-posts'); + + if (!refBox) return; + + var relatedPosts = []; + var currPost = pages.find(obj => {return obj.url === location.pathname}); + + let currTags = currPost.tags.split(', '); + let currCategory = currPost.path.split(' > ').pop(); + + for (var i = 0; i < pages.length; i++) { + let page = pages[i]; + + if (page.type === 'category') continue; + + if (page.title === currPost.title) continue; + + let tags = page.tags.split(', '); + let category = page.path.split(' > ').pop(); + let correlationScore = 0; + + for (var j = 0; j < currTags.length; j++){ + if (tags.indexOf(currTags[j]) != -1) correlationScore += 1; + } + + if (category === currCategory) correlationScore += 1; + + if (correlationScore == 0) continue; + + relatedPosts.push({ + 'title': page.title, + 'date': page.date, + 'category': category, + 'url': page.url, + 'thumbnail': page.image, + 'score': correlationScore }); } -}); \ No newline at end of file + + relatedPosts.sort(function (a, b) { + if(a.hasOwnProperty('score')){ + return b.score - a.score; + } + }); + + if (relatedPosts.length == 0){ + refBox.style.display = 'none'; + return; + } + + for (var i = 0; i < Math.min(relatedPosts.length, 6); i++){ + let post = relatedPosts[i]; + let date = '-'; + let category = 'No category'; + + if (post.date !== '1900-01-01'){ + date = new Date(post.date); + date = date.toLocaleString('en-US', {day: 'numeric', month:'long', year:'numeric'}); + } + + if (post.category !== '') category = post.category; + + if (post.thumbnail === ''){ + post.thumbnail = "/assets/img/thumbnail/empty.jpg"; + } + + let contents = document.createElement("li"); + contents.classList.add("related-item"); + contents.innerHTML = '

' + category + + '

' + post.title + + '

' + date + + '

'; + + refResults.append(contents); + } +} \ No newline at end of file diff --git a/assets/js/post.js b/assets/js/post.js index 6b39ee8bd..4f6e970da 100644 --- a/assets/js/post.js +++ b/assets/js/post.js @@ -1,82 +1,175 @@ document.addEventListener('DOMContentLoaded', function(){ - var content = document.querySelector('main'); + var innerContent = document.querySelector('main'); let currentTheme = localStorage.getItem('theme'); - // Lazy image loading - var images = content.querySelectorAll('img'); + // tocbot + var headings = innerContent.querySelectorAll('h1, h2'); + var prevHead; - images.forEach((img) => { - img.setAttribute('loading', 'lazy'); - }); + const tocBorad = document.querySelector(".toc-board"); + + Array.from(headings).forEach(function(heading){ + let tocItem = document.createElement("li"); + tocItem.classList.add("toc-list-item"); - // tocbot - var headings = content.querySelectorAll('h1, h2'); - var headingMap = {}; + let itemLink = document.createElement("a"); + itemLink.classList.add("toc-link"); + itemLink.id = "toc-id-" + heading.textContent; + itemLink.textContent = heading.textContent; + + tocItem.append(itemLink); - Array.prototype.forEach.call(headings, function (heading) { - var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase() - .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, ''); + itemLink.addEventListener('click', function(){ + heading.scrollIntoView({ + behavior: 'smooth' + }); + }); - headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0; + console.log(heading.textContent, heading.getBoundingClientRect().top); - if (headingMap[id]) { - heading.id = id + '-' + headingMap[id]; - } else { - heading.id = id; + if (heading.tagName == 'H1'){ + itemLink.classList.add("node-name--H1"); + prevHead = tocItem; + tocBorad.append(tocItem); } - }) + else { + itemLink.classList.add("node-name--H2"); + + if (prevHead == undefined) { + tocBorad.append(tocItem); + return; + } + + let subList = prevHead.querySelector('ol'); + + if (!subList){ + subList = document.createElement("ol"); + subList.classList.add("toc-list"); + prevHead.append(subList); + } - tocbot.init({ - tocSelector: '.toc-board', - contentSelector: '.inner-content', - headingSelector:'h1, h2', - hasInnerContainers: false + subList.append(tocItem); + } }); + setInterval(function(){ + var scrollPos = document.documentElement.scrollTop; + + Array.from(tocBorad.querySelectorAll('.toc-link')).forEach(function(link){ + link.classList.remove('is-active-link'); + }); + + var currHead; + + Array.from(headings).forEach(function(heading){ + let headPos = heading.getBoundingClientRect().top + window.scrollY - 512; + + if (scrollPos > headPos) currHead = heading; + }); + + if (currHead != undefined){ + let tocLink = document.getElementById("toc-id-" + currHead.textContent); + tocLink.classList.add('is-active-link'); + } + }, 200); + // link (for hover effect) - var links = content.querySelectorAll('a:not(.related-item a)'); + var links = innerContent.querySelectorAll('a:not(.related-item a)'); links.forEach((link) => { link.setAttribute('data-content', link.innerText); }); - // code clipboard copy button - async function copyCode(block) { - let code = block.querySelector("code"); - let text = code.innerText; - - await navigator.clipboard.writeText(text); + // Tag EventListener + const searchPage = document.querySelector("#search"); + + document.querySelectorAll('.tag-box .tag').forEach(function(tagButton){ + tagButton.addEventListener('click', function() { + const contentID = tagButton.getAttribute('contentID'); + const inpuxBox = document.getElementById('search-input'); + searchPage.classList.add('active'); + + inpuxBox.value = contentID; + inpuxBox.dispatchEvent(new KeyboardEvent('keyup')); + }); + }); + + // Move to Top + if (document.querySelector('.thumbnail')){ + const arrowButton = document.querySelector('.top-arrow'); + + setInterval(function(){ + var scrollPos = document.documentElement.scrollTop; + + if (scrollPos < 512){ + arrowButton.classList.remove('arrow-open'); + } + else { + arrowButton.classList.add('arrow-open'); + } + }, 1000); + + arrowButton.addEventListener('click', function(){ + window.scroll({top:0, behavior:'smooth'}); + }); } - let blocks = document.querySelectorAll("pre"); + // Move to Comment + document.getElementById('comments-counter').addEventListener('click', function(){ + document.getElementById("giscus").scrollIntoView({ + behavior: 'smooth' + }); + }); - blocks.forEach((block) => { - // only add button if browser supports Clipboard API - if (navigator.clipboard) { - let clip_btn = document.createElement("button"); - let clip_img = document.createElement("svg"); + // Code highlighter + if (currentTheme === 'dark'){ + // Disable highlighter default color theme + Array.from(innerContent.querySelectorAll('pre')).forEach(function (codeblock){ + codeblock.classList.add('pre-dark'); + }); + } +}); - clip_btn.setAttribute('title', "Copy Code"); - clip_img.ariaHidden = true; +window.addEventListener('load', function(){ + // Page Hits + const pageHits = document.getElementById('page-hits'); - block.appendChild(clip_btn); - clip_btn.appendChild(clip_img); + if (pageHits) { + const goatcounterCode = pageHits.getAttribute('usercode'); + const requestURL = 'https://' + + goatcounterCode + + '.goatcounter.com/counter/' + + encodeURIComponent(location.pathname) + + '.json'; - clip_btn.addEventListener("click", async () => { - await copyCode(block, clip_btn); - }); - } + var resp = new XMLHttpRequest(); + resp.open('GET', requestURL); + resp.onerror = function() { pageHits.innerText = "0"; }; + resp.onload = function() { pageHits.innerText = JSON.parse(this.responseText).count; }; + resp.send(); + } + + // Highlighter + hljs.highlightAll(); + + // Disable code highlights to the plaintext codeblocks + document.querySelectorAll('.language-text, .language-plaintext').forEach(function(codeblock){ + codeblock.querySelectorAll('.hljs-keyword, .hljs-meta, .hljs-selector-tag').forEach(function($){ + $.outerHTML = $.innerHTML; + }); }); // Initialize/Change Giscus theme var giscusTheme = "light"; - const giscus_repo = $('meta[name="giscus_repo"]').attr("content"); - const giscus_repoId = $('meta[name="giscus_repoId"]').attr("content"); - const giscus_category = $('meta[name="giscus_category"]').attr("content"); - const giscus_categoryId = $('meta[name="giscus_categoryId"]').attr("content"); + const giscus_repo = document.querySelector('meta[name="giscus_repo"]').content; + const giscus_repoId = document.querySelector('meta[name="giscus_repoId"]').content; + const giscus_category = document.querySelector('meta[name="giscus_category"]').content; + const giscus_categoryId = document.querySelector('meta[name="giscus_categoryId"]').content; if (giscus_repo !== undefined) { + let currentTheme = localStorage.getItem('theme'); + if (currentTheme === 'dark'){ giscusTheme = "noborder_gray"; } @@ -101,91 +194,49 @@ document.addEventListener('DOMContentLoaded', function(){ document.body.appendChild(giscusScript); } + // code clipboard copy button + async function copyCode(block) { + let code = block.querySelector("code"); + let text = code.innerText; + + await navigator.clipboard.writeText(text); + } + + let blocks = document.querySelectorAll("pre"); + + blocks.forEach((block) => { + // only add button if browser supports Clipboard API + if (navigator.clipboard) { + let clip_btn = document.createElement("button"); + let clip_img = document.createElement("svg"); + + clip_btn.setAttribute('title', "Copy Code"); + clip_img.ariaHidden = true; + + block.appendChild(clip_btn); + clip_btn.appendChild(clip_img); + + clip_btn.addEventListener("click", async () => { + await copyCode(block, clip_btn); + }); + } + }); + // Giscus IMetadataMessage event handler function handleMessage(event) { if (event.origin !== 'https://giscus.app') return; if (!(typeof event.data === 'object' && event.data.giscus)) return; const giscusData = event.data.giscus; + const commentCount = document.getElementById('num-comments'); if (giscusData && giscusData.hasOwnProperty('discussion')) { - $('#num-comments').text(giscusData.discussion.totalCommentCount); + commentCount.innerText = giscusData.discussion.totalCommentCount; } else { - $('#num-comments').text('0'); + commentCount.innerText = '0'; } } window.addEventListener('message', handleMessage); - - // Tag EventListener - const searchPage = document.querySelector("#search"); - - document.querySelectorAll('.tag-box .tag').forEach(function(tagButton){ - tagButton.addEventListener('click', function() { - const contentID = tagButton.getAttribute('contentID'); - searchPage.classList.add('active'); - - $('#search-input').val(contentID); - $('#search-input').trigger('keyup'); - }); - }); - - // Page Hits - const pageHits = document.getElementById('page-hits'); - - if (pageHits) { - const goatcounterCode = pageHits.getAttribute('usercode'); - const requestURL = 'https://' - + goatcounterCode - + '.goatcounter.com/counter/' - + encodeURIComponent(location.pathname) - + '.json'; - - var resp = new XMLHttpRequest(); - resp.open('GET', requestURL); - resp.onerror = function() { pageHits.innerText = "0"; }; - resp.onload = function() { pageHits.innerText = JSON.parse(this.responseText).count; }; - resp.send(); - } - - // Sweat Scroll - const scroller = new SweetScroll({ - /* some options */ - }); - - // Move to Top - if (document.querySelector('.thumbnail')){ - const arrowButton = document.querySelector('.top-arrow'); - - setInterval(function(){ - var scrollPos = document.documentElement.scrollTop; - - if (scrollPos < 512){ - arrowButton.classList.remove('arrow-open'); - } - else { - arrowButton.classList.add('arrow-open'); - } - }, 1000); - } - - // Code highlighter - if (currentTheme === 'dark'){ - // Disable highlighter default color theme - document.getElementById("highlight-default").disabled=true; - } - else { - // Disable highlighter dark color theme - document.getElementById("highlight-dark").disabled=true; - } - - hljs.highlightAll(); - - // Disable code highlights to the plaintext codeblocks - document.querySelectorAll('.language-text, .language-plaintext').forEach(function(codeblock){ - codeblock.querySelectorAll('.hljs-keyword, .hljs-meta, .hljs-selector-tag').forEach(function($){ - $.outerHTML = $.innerHTML; - }); - }); }); \ No newline at end of file diff --git a/assets/js/search.js b/assets/js/search.js deleted file mode 100644 index c7e1b8ec9..000000000 --- a/assets/js/search.js +++ /dev/null @@ -1,168 +0,0 @@ -function searchPost(pages){ - $('#search-input').on('keyup', function () { - var keyword = this.value.toLowerCase(); - var searchResult = []; - - if (keyword.length > 0) { - $('#search-result').show(); - $('#btn-clear').show(); - } else { - $('#search-result').hide(); - $('#btn-clear').hide(); - } - - $('.result-item').remove(); - - for (var i = 0; i < pages.length; i++) { - var post = pages[i]; - - if (post.title === 'Home' && post.type == 'category') continue; - - if (post.title.toLowerCase().indexOf(keyword) >= 0 - || post.path.toLowerCase().indexOf(keyword) >= 0 - || post.tags.toLowerCase().indexOf(keyword) >= 0){ - searchResult.push(post); - } - } - - if (searchResult.length === 0) { - $('#search-result').append( - '
  • There is no search result.
    • ' - ); - - return; - } - - searchResult.sort(function (a, b) { - if (a.type == 'category') return 1; - - return -1; - }); - - for (var i = 0; i < searchResult.length; i++) { - var highlighted_path = highlightKeyword(searchResult[i].path, keyword); - - if (highlighted_path === '') - highlighted_path = "Home"; - - if (searchResult[i].type === 'post'){ - var highlighted_title = highlightKeyword(searchResult[i].title, keyword); - var highlighted_tags = highlightKeyword(searchResult[i].tags, keyword); - - if (highlighted_tags === '') - highlighted_tags = "none"; - - $('#search-result').append( - '
  • ' + highlighted_title + - '
    ' + highlighted_path + - '
    ' + highlighted_tags + - '
    ' + searchResult[i].date + - '
    • ' - ); - } - else { - $('#search-result').append( - '
  • ' + highlighted_path + - '
    • ' - ); - } - } - }); - - function highlightKeyword(txt, keyword) { - var index = txt.toLowerCase().lastIndexOf(keyword); - - if (index >= 0) { - out = txt.substring(0, index) + - "" + - txt.substring(index, index+keyword.length) + - "" + - txt.substring(index + keyword.length); - return out; - } - - return txt; - } -} - -function searchRelated(pages){ - const refBox = document.getElementById('related-box'); - - if (!refBox) return; - - var relatedPosts = []; - var currPost = pages.find(obj => {return obj.url === location.pathname}); - - let currTags = currPost.tags.split(', '); - let currCategory = currPost.path.split(' > ').pop(); - - for (var i = 0; i < pages.length; i++) { - let page = pages[i]; - - if (page.type === 'category') continue; - - if (page.title === currPost.title) continue; - - let tags = page.tags.split(', '); - let category = page.path.split(' > ').pop(); - let correlationScore = 0; - - for (var j = 0; j < currTags.length; j++){ - if (tags.indexOf(currTags[j]) != -1) correlationScore += 1; - } - - if (category === currCategory) correlationScore += 1; - - if (correlationScore == 0) continue; - - relatedPosts.push({ - 'title': page.title, - 'date': page.date, - 'category': category, - 'url': page.url, - 'thumbnail': page.image, - 'score': correlationScore - }); - } - - relatedPosts.sort(function (a, b) { - if(a.hasOwnProperty('score')){ - return b.score - a.score; - } - }); - - if (relatedPosts.length == 0){ - $('#related-box').hide(); - return; - } - - for (var i = 0; i < Math.min(relatedPosts.length, 6); i++){ - let post = relatedPosts[i]; - let date = '-'; - let category = 'No category'; - - if (post.date !== '1900-01-01'){ - date = new Date(post.date); - date = date.toLocaleString('en-US', {day: 'numeric', month:'long', year:'numeric'}); - } - - if (post.category !== '') category = post.category; - - if (post.thumbnail === ''){ - post.thumbnail = "/assets/img/thumbnail/empty.jpg"; - } - - $('#related-posts').append( - '

  • ' + category + - '

    ' + post.title + - '

    ' + date + - '

    • ' - ); - } -} \ No newline at end of file diff --git a/assets/js/subject.js b/assets/js/subject.js index 9d7fabb97..b96859d2a 100644 --- a/assets/js/subject.js +++ b/assets/js/subject.js @@ -96,7 +96,7 @@ document.addEventListener('DOMContentLoaded', function(){ } }); - $('html, body').scrollTop(0); + window.scrollTo({top:0}); localStorage.setItem(pageKey, currentPage); }; diff --git a/assets/js/sweet-scroll.min.js b/assets/js/sweet-scroll.min.js deleted file mode 100644 index 11800003e..000000000 --- a/assets/js/sweet-scroll.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! @preserve sweet-scroll v4.0.0 - tsuyoshiwada | MIT License */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).SweetScroll=e()}(this,function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,n=1,o=arguments.length;n=0&&n[o]!==t;);return o>-1},O=function(t){return Math.max(t.scrollHeight,t.clientHeight,t.offsetHeight)},$=function(t){return Math.max(t.scrollWidth,t.clientWidth,t.offsetWidth)},M=function(t){return{width:$(t),height:O(t)}},E={y:"scrollTop",x:"scrollLeft"},I={y:"pageYOffset",x:"pageXOffset"},C=function(t,e){return y(t)?t[I[e]]:t[E[e]]},S=function(t,e,n){if(y(t)){var o="y"===n;t.scrollTo(o?t.pageXOffset:e,o?e:t.pageYOffset)}else t[E[n]]=e},k=function(t,e){var n=t.getBoundingClientRect();if(n.width||n.height){var o={top:0,left:0},i=void 0;if(y(e)||x(e))i=document.documentElement,o.top=window[I.y],o.left=window[I.x];else{var r=(i=e).getBoundingClientRect();o.top=-1*r.top+i[E.y],o.left=-1*r.left+i[E.x]}return{top:n.top+o.top-i.clientTop,left:n.left+o.left-i.clientLeft}}return n},A=e?"onwheel"in document?"wheel":"mousewheel":"wheel",L=function(t,e,n,i,r){n.split(" ").forEach(function(n){t[e](function(t){return"wheel"===t?A:t}(n),i,!!o&&{passive:r})})},P=function(t,e,n,o){return L(t,"addEventListener",e,n,o)},Q=function(t,e,n,o){return L(t,"removeEventListener",e,n,o)},z=/^(\+|-)=(\d+(?:\.\d+)?)$/,W=function(e,n){var o,r={top:0,left:0,relative:!1};if(a(e,"top")||a(e,"left"))r=t({},r,e);else if(u(e))if(e.length>1)r.top=e[0],r.left=e[1];else{if(1!==e.length)return null;r.top=n?e[0]:0,r.left=n?0:e[0]}else if(!u(o=e)&&o-parseFloat(o)+1>=0)n?r.top=e:r.left=e;else{if(!i(e))return null;var l=e.trim().match(z);if(!l)return null;var s=l[1],c=parseInt(l[2],10);"+"===s?(r.top=n?c:0,r.left=n?0:c):(r.top=n?-c:0,r.left=n?0:-c),r.relative=!0}return r},j={trigger:"[data-scroll]",header:"[data-scroll-header]",duration:1e3,easing:"easeOutQuint",offset:0,vertical:!0,horizontal:!1,cancellable:!0,updateURL:!1,preventDefault:!0,stopPropagation:!0,before:null,after:null,cancel:null,complete:null,step:null};return function(){function o(n,i){var r=this;this.$el=null,this.ctx={$trigger:null,opts:null,progress:!1,pos:null,startPos:null,easing:null,start:0,id:0,cancel:!1,hash:null},this.loop=function(t){var e=r,n=e.$el,i=e.ctx;if(i.start||(i.start=t),i.progress&&n){var u=i.opts,a=i.pos,l=i.start,s=i.startPos,c=i.easing,f=u.duration,p={top:"y",left:"x"},h=t-l,d=Math.min(1,Math.max(h/f,0));Object.keys(a).forEach(function(t){var e=a[t],o=s[t],i=e-o;if(0!==i){var r=c(d,f*d,0,1,f);S(n,Math.round(o+i*r),p[t])}}),h<=f?(r.hook(u,"step",d),i.id=o.raf(r.loop)):r.stop(!0)}else r.stop()},this.handleClick=function(e){for(var n=r.opts,o=e.target;o&&o!==document;o=o.parentNode)if(b(o,n.trigger)){var i=JSON.parse(o.getAttribute("data-scroll-options")||"{}"),u=o.getAttribute("data-scroll")||o.getAttribute("href"),a=t({},n,i),l=a.preventDefault,s=a.stopPropagation,c=a.vertical,f=a.horizontal;l&&e.preventDefault(),s&&e.stopPropagation(),r.ctx.$trigger=o,f&&c?r.to(u,a):c?r.toTop(u,a):f&&r.toLeft(u,a);break}},this.handleStop=function(t){var e=r.ctx,n=e.opts;n&&n.cancellable?(e.cancel=!0,r.stop()):t.preventDefault()},this.opts=t({},j,n||{});var u=null;e&&(u="string"==typeof i?w(i):null!=i?i:window),this.$el=u,u&&this.bind(!0,!1)}return o.create=function(t,e){return new o(t,e)},o.prototype.to=function(n,o){if(e){var r=this.$el,u=this.ctx,a=this.opts,l=u.$trigger,s=t({},a,o||{}),c=s.offset,f=s.vertical,p=s.horizontal,h=m(s.header)?s.header:w(s.header),d=i(n)&&/^#/.test(n)?n:null;if(u.opts=s,u.cancel=!1,u.hash=d,this.stop(),r){var v=W(c,f),g=W(n,f),b={top:0,left:0};if(g)if(g.relative){var E=C(r,f?"y":"x");b.top=f?E+g.top:g.top,b.left=f?g.left:E+g.left}else b=g;else if(i(n)&&"#"!==n){var I=w(n);if(!I)return;b=k(I,r)}v&&(b.top+=v.top,b.left+=v.left),h&&(b.top=Math.max(0,b.top-M(h).height));var S=function(t){var e=y(t)||x(t);return{viewport:{width:e?Math.min(window.innerWidth,document.documentElement.clientWidth):t.clientWidth,height:e?window.innerHeight:t.clientHeight},size:e?{width:Math.max($(document.body),$(document.documentElement)),height:Math.max(O(document.body),O(document.documentElement))}:M(t)}}(r),A=S.viewport,L=S.size;b.top=f?Math.max(0,Math.min(L.height-A.height,b.top)):C(r,"y"),b.left=p?Math.max(0,Math.min(L.width-A.width,b.left)):C(r,"x"),!1!==this.hook(s,"before",b,l)?(u.pos=b,this.start(s),this.bind(!1,!0)):u.opts=null}}},o.prototype.toTop=function(e,n){this.to(e,t({},n||{},{vertical:!0,horizontal:!1}))},o.prototype.toLeft=function(e,n){this.to(e,t({},n||{},{vertical:!1,horizontal:!0}))},o.prototype.toElement=function(t,n){var o=this.$el;e&&o&&this.to(k(t,o),n||{})},o.prototype.stop=function(t){void 0===t&&(t=!1);var e=this.$el,n=this.ctx,i=n.pos;e&&n.progress&&(o.caf(n.id),n.progress=!1,n.start=0,n.id=0,t&&i&&(S(e,i.left,"x"),S(e,i.top,"y")),this.complete())},o.prototype.update=function(e){if(this.$el){var n=t({},this.opts,e);this.stop(),this.unbind(!0,!0),this.opts=n,this.bind(!0,!1)}},o.prototype.destroy=function(){this.$el&&(this.stop(),this.unbind(!0,!0),this.$el=null)},o.prototype.onBefore=function(t,e){return!0},o.prototype.onStep=function(t){},o.prototype.onAfter=function(t,e){},o.prototype.onCancel=function(){},o.prototype.onComplete=function(t){},o.prototype.start=function(t){var e=this.ctx;e.opts=t,e.progress=!0,e.easing=r(t.easing)?t.easing:v[t.easing];var n=this.$el,i={top:C(n,"y"),left:C(n,"x")};e.startPos=i,e.id=o.raf(this.loop)},o.prototype.complete=function(){var t=this.$el,o=this.ctx,i=o.hash,r=o.cancel,u=o.opts,a=o.pos,l=o.$trigger;if(t&&u){if(null!=i&&i!==window.location.hash){var s=u.updateURL;e&&n&&!1!==s&&window.history["replace"===s?"replaceState":"pushState"](null,"",i)}this.unbind(!1,!0),o.opts=null,o.$trigger=null,r?this.hook(u,"cancel"):this.hook(u,"after",a,l),this.hook(u,"complete",r)}},o.prototype.hook=function(t,e){for(var n,o=[],i=2;ie.fixedSidebarOffset?-1===n.className.indexOf(e.positionFixedClass)&&(n.className+=r+e.positionFixedClass):n.className=n.className.split(r+e.positionFixedClass).join("")}();var c,a=i;if(l&&null!==document.querySelector(e.tocSelector)&&a.length>0){n.call(a,function(t,n){return function t(n){var o=0;return n!==document.querySelector(e.contentSelector&&null!=n)&&(o=n.offsetTop,e.hasInnerContainers&&(o+=t(n.offsetParent))),o}(t)>s+e.headingsOffset+10?(c=a[0===n?n:n-1],!0):n===a.length-1?(c=a[a.length-1],!0):void 0});var u=document.querySelector(e.tocSelector).querySelectorAll("."+e.linkClass);t.call(u,function(t){t.className=t.className.split(r+e.activeLinkClass).join("")});var d=document.querySelector(e.tocSelector).querySelectorAll("."+e.listItemClass);t.call(d,function(t){t.className=t.className.split(r+e.activeListItemClass).join("")});var f=document.querySelector(e.tocSelector).querySelector("."+e.linkClass+".node-name--"+c.nodeName+'[href="'+e.basePath+"#"+c.id.replace(/([ #;&,.+*~':"!^$[\]()=>|/@])/g,"\\$1")+'"]');-1===f.className.indexOf(e.activeLinkClass)&&(f.className+=r+e.activeLinkClass);var m=f.parentNode;m&&-1===m.className.indexOf(e.activeListItemClass)&&(m.className+=r+e.activeListItemClass);var h=document.querySelector(e.tocSelector).querySelectorAll("."+e.listClass+"."+e.collapsibleClass);t.call(h,function(t){-1===t.className.indexOf(e.isCollapsedClass)&&(t.className+=r+e.isCollapsedClass)}),f.nextSibling&&-1!==f.nextSibling.className.indexOf(e.isCollapsedClass)&&(f.nextSibling.className=f.nextSibling.className.split(r+e.isCollapsedClass).join("")),function t(n){return-1!==n.className.indexOf(e.collapsibleClass)&&-1!==n.className.indexOf(e.isCollapsedClass)?(n.className=n.className.split(r+e.isCollapsedClass).join(""),t(n.parentNode.parentNode)):n}(f.parentNode.parentNode)}}}}},function(e,t){e.exports=function(e){var t=[].reduce;function n(e){return e[e.length-1]}function o(t){if(!(t instanceof window.HTMLElement))return t;if(e.ignoreHiddenElements&&(!t.offsetHeight||!t.offsetParent))return null;var n={id:t.id,children:[],nodeName:t.nodeName,headingLevel:function(e){return+e.nodeName.split("H").join("")}(t),textContent:e.headingLabelCallback?String(e.headingLabelCallback(t.textContent)):t.textContent.trim()};return e.includeHtml&&(n.childNodes=t.childNodes),e.headingObjectCallback?e.headingObjectCallback(n,t):n}return{nestHeadingsArray:function(l){return t.call(l,function(t,l){var r=o(l);return r&&function(t,l){for(var r=o(t),i=r.headingLevel,s=l,c=n(s),a=i-(c?c.headingLevel:0);a>0;)(c=n(s))&&void 0!==c.children&&(s=c.children),a--;i>=e.collapseDepth&&(r.isCollapsed=!0),s.push(r)}(r,t.nest),t},{nest:[]})},selectHeadings:function(t,n){var o=n;e.ignoreSelector&&(o=n.split(",").map(function(t){return t.trim()+":not("+e.ignoreSelector+")"}));try{return document.querySelector(t).querySelectorAll(o)}catch(e){return console.warn("Element not found: "+t),null}}}}},function(e,t){e.exports=function(e){var t=document.querySelector(e.tocSelector);if(t&&t.scrollHeight>t.clientHeight){var n=t.querySelector("."+e.activeListItemClass);n&&(t.scrollTop=n.offsetTop)}}},function(e,t){function n(e,t){var n=window.pageYOffset,o={duration:t.duration,offset:t.offset||0,callback:t.callback,easing:t.easing||d},l=document.querySelector('[id="'+decodeURI(e).split("#").join("")+'"]'),r=typeof e==="string"?o.offset+(e?l&&l.getBoundingClientRect().top||0:-(document.documentElement.scrollTop||document.body.scrollTop)):e,i=typeof o.duration==="function"?o.duration(r):o.duration,s,c;function a(e){c=e-s;window.scrollTo(0,o.easing(c,n,r,i));if(c0||"#"===e.href.charAt(e.href.length-1))&&(r(e.href)===l||r(e.href)+"#"===l)}(i.target)||i.target.className.indexOf("no-smooth-scroll")>-1||"#"===i.target.href.charAt(i.target.href.length-2)&&"!"===i.target.href.charAt(i.target.href.length-1)||-1===i.target.className.indexOf(e.linkClass))return;n(i.target.hash,{duration:t,offset:o,callback:function(){!function(e){var t=document.getElementById(e.substring(1));t&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())}(i.target.hash)}})},!1)}()}}]); \ No newline at end of file diff --git a/docs/_config.yml b/docs/_config.yml index acd33a706..07b7a0664 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -1,7 +1,7 @@ title: Example.com description: "Introduction for you blog" logo_img: "/assets/img/favicon.webp" -profile_img: "/assets/img/profile.jpg" +profile_img: "/assets/img/profile.webp" # Social Links email: example@gmail.com diff --git a/jekyll-theme-satellite.gemspec b/jekyll-theme-satellite.gemspec index 405bef086..6e90afedb 100644 --- a/jekyll-theme-satellite.gemspec +++ b/jekyll-theme-satellite.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "jekyll-theme-satellite" - spec.version = "1.1.2" + spec.version = "1.2.4" spec.authors = ["Yankos"] spec.email = ["byanko55@gmail.com"] @@ -21,4 +21,5 @@ Gem::Specification.new do |spec| spec.add_runtime_dependency "jekyll-feed", "~> 0.12" spec.add_runtime_dependency "jekyll-sitemap", "~> 1.3" spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.6" + spec.add_runtime_dependency "jekyll-loading-lazy", "~> 0.1.1" end