jekyll-theme-satellite 1.0.0

data/_sass/search.scss

@@ -0,0 +1,248 @@
+#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;
+    }
+
+    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; }
+    }
+
+    &.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;
+}
+
+.wave:nth-of-type(2) {
+    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;
+}
+
+@keyframes wave {
+    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;
+
+    h1 { 
+        margin-bottom: 1rem;
+        color: #fff;
+        opacity: 0.8;
+        font-size: 1.5rem;
+        font-weight: 200;
+        font-family: 'Righteous', sans-serif;
+    }
+
+    input {
+        font-size: 1.25rem;
+        padding: 0.5rem;
+        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;
+        }
+    }
+}
+
+.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; }
+    }
+
+    .highlight {
+        font-weight: 900;
+        color: yellowgreen !important;
+    }
+}
+
+@include mq(tablet) {
+    #search {
+        ul, input { width: 40rem; }
+
+        ul {
+            div { font-size: 1.125rem; }
+
+            i { margin-right: 1rem; }
+        }
+    }
+
+    .search-box { 
+        margin-top: 4rem; 
+    
+        h1 { 
+            font-size: 2.5rem;
+            margin-bottom: 2rem;
+        }
+    }
+
+    .search-box input {
+        font-size: 2rem;
+        padding: 1rem;
+        width: 40rem;
+    }
+
+    .input-box button {
+        width: 36px;
+        right: 16px;
+
+        svg { width: 20px; }
+    }
+
+    .result-item {
+        padding: 1rem;
+
+        table {
+            th { font-size: 1.25rem; }
+
+            td { font-size: 1rem; }
+
+            svg { width: 16px; }
+
+            .ico-book, th .ico-folder { width: 20px; }
+        }
+
+        .title { font-size: 1.25rem; }
+    }
+}

data/_sass/sidebar.scss

@@ -0,0 +1,309 @@
+.sidebar {
+    z-index: 1;
+    flex-wrap: wrap;
+
+    ul, li {
+        list-style: none;
+    }
+}
+
+.sidebar-left {
+    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; }
+    }
+}
+
+.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 + img { border-radius: 50%; }
+}
+
+.site-name {
+    padding: 0.5rem;
+    font-size: 1rem;
+    text-align: left;
+    position: relative;
+
+    a, span { letter-spacing: 2px; }
+}
+
+.side-info {
+    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;
+    }
+
+    h3 { display: none; }
+
+    ul{
+        text-align: center;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        li{
+            display: inline-block;
+            margin-top: 0.5rem;
+
+            a {
+                display: block;
+                padding: 6px;
+                transition: .3s;
+
+                svg {
+                    width: 16px;
+                    fill: dimgrey;
+                }
+
+                &:hover{
+                    svg { fill: orange; }
+
+                    transform: scale(1.5) translateY(-12.5%);
+                }
+            }
+        }
+    }
+
+    span { font-size: 0.875rem; }
+
+    a { color: $color-darkorange; }
+}
+
+.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;
+        cursor: pointer;
+
+        &:hover {
+            border: 2px solid midnightblue;
+            animation: leaves .75s ease-in-out infinite alternate;
+        }
+    }
+
+    @keyframes leaves {
+        0% {
+            transform: scale(1.0);
+            background: #ffe390;
+        }
+        100% {
+            transform: scale(1.25);
+            background: #ffd044;
+        }
+    }
+
+    svg {
+        fill: #3A241A !important;
+        width: 24px;
+        position: relative;
+    }
+
+    .ico-dark {
+        display: block;
+
+        &.active{ display: none; }
+    }
+
+    .ico-light {
+        display: none;
+
+        &.active{ display: block; }
+    }
+}
+
+@include mq(tablet){
+    .side-banner {
+        button { font-size: 1.75rem; }
+
+        #btn-search { right: 60px; }
+
+        #btn-brightness { right: 120px; }
+    }
+    
+    .site-name { 
+        padding: 1rem;
+        font-size: 1.375rem; 
+    }
+
+    #contact {
+        ul li a svg { width: 18px; }
+
+        span { font-size: 1rem; }
+    }
+}
+
+@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;
+
+        button {
+            display: none;
+            font-size: 1.5rem;
+        }
+
+        #btn-search { right: 69px; }
+
+        #btn-brightness { right: 138px; }
+    }
+
+    .site-avatar img { display: inline-block; }
+
+    .site-name {
+        font-size: 1.375rem;
+        padding: 1rem;
+        text-align: center;
+
+        .highlight {
+            font-weight: 600;
+            font-family: 'Righteous', sans-serif;
+            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: slide 2s ease-in infinite;
+            }
+
+            @keyframes slide {
+                100% {
+                    background-position: left center;
+                }
+            }
+        }
+    }
+
+    .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;
+
+        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);
+    }
+}

data/_sass/toc.scss

@@ -0,0 +1,52 @@
+.toc {
+    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);
+    }
+}
+
+.toc-board {
+    max-width: #{$sidebarwd};
+    margin: 0;
+    margin-left: 2rem;
+}
+
+.toc-list {
+    font-size: 1.125rem;
+    padding: 0;
+
+    li:last-child { margin-bottom: 0; }
+
+    li a { display:inline-block; }
+
+    .node-name--H1 { margin-top: 0.5rem; }
+
+    .node-name--H2 {
+        font-size: 1rem;
+        margin-top: 0.375rem;
+        padding-left: 0.5rem;
+    }
+
+    .toc-list-item {
+        word-break: normal;
+        display: block;
+        line-height: 150%;
+    }
+      
+    .is-active-link{
+        color: indianred !important;
+        font-weight:950;
+    }
+}

data/_sass/vars.scss

@@ -0,0 +1,15 @@
+$color-wenge: #66545E;
+$color-beige: #F1EBE5;
+$color-darkbrown: #3A241A;
+$color-darkorange: #B04008;
+$color-rose: #fa4251;
+$color-aqua: #64c8c8;
+$sidebarwd: 18rem;
+$contentwd: 54rem;
+
+$mediawd: (
+  mobile: 320px,
+  tablet: 769px,
+  desktop: 1025px,
+  wide: 1441px,
+) !default;

data/assets/css/highlight-dark.min.css

@@ -0,0 +1 @@
+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}

data/assets/css/highlight-default.min.css

@@ -0,0 +1 @@
+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}

data/assets/css/style.scss

@@ -0,0 +1,89 @@
+---
+---
+
+@font-face {
+    font-family: 'Nunito Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/assets/fonts/NunitoSans-Regular.ttf);
+}
+
+@font-face {
+    font-family: 'Righteous';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(/assets/fonts/Righteous-Regular.ttf);
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/assets/fonts/Lato-Regular.ttf);
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+a, span, p, h1, h2, h3, i {
+    color: #3A241A;
+    font-family: "Nunito Sans", sans-serif;
+}
+
+h1, h2, h3 {
+    margin: 0;
+}
+
+svg {
+    width: 16px;
+    aspect-ratio: 1.0;
+    fill: #3A241A;
+    display: block;
+    margin: auto;
+}
+
+button {
+    border: none;
+    background: none;
+    padding: 0;
+}
+
+/* Disable default input cancel button */
+input::-ms-clear,
+input::-ms-reveal{
+	display:none;
+    width:0;
+    height:0;
+}
+
+input::-webkit-search-decoration,
+input::-webkit-search-cancel-button,
+input::-webkit-search-results-button,
+input::-webkit-search-results-decoration{
+	display:none;
+}
+
+@import 'vars';
+@import 'layout';
+
+:root{
+    --pagewidth-desktop: calc(max(min(100vw - #{$sidebarwd} - 2rem, #{$contentwd}), 44rem));
+}
+
+@import "sidebar";
+@import "navigation";
+@import "pagination";
+@import "toc";
+@import "post";
+@import "search";
+
+@import "darkmode";