jekyll-theme-satellite 1.0.0

data/_sass/darkmode.scss

@@ -0,0 +1,211 @@
+body.dark-theme {
+
+background: #1E1E1F;
+
+a, span, p, h1, h2, h3, i { color: #aaa; }
+
+svg { fill: #aaa; }
+
+#stars, #loading { background: #1E1E1F; }
+
+#loading p { color: cadetblue; }
+
+.sidebar-left { background-color: #313132; }
+
+.nav-item span { color: #ccc; }
+
+.nav-lh svg { fill: goldenrod; }
+
+.nav-list-expander {
+    &:hover { 
+        svg { fill: goldenrod; } 
+    }
+}
+
+.nav-list li > .nav-list { background: #464647; }
+
+.side-banner {
+    box-shadow: 0px 4px 8px 0 black;
+
+    button {
+        background-color: #313132;
+
+        &:hover { background-color: #1E1E1F; }
+    }
+
+    svg { fill: $color-aqua; }
+}
+
+#contact{
+    ul>li>a {
+        &:hover{
+            svg { fill: indianred; }
+        }
+    }
+
+    a { color: mediumseagreen; }
+}
+
+#post {
+    .inner-header { background: #464647; }
+
+    .inner-content { background: #313132; }
+}
+
+.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));
+}
+
+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; }
+
+    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-posts li:hover { box-shadow: 8px 8px 16px -4px rgba(255, 255, 255, .2); }
+
+.category-tree a { color: goldenrod; }
+
+.category-header {
+    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; }
+
+    .date { color: #ccc; }
+
+    .category { color: mediumseagreen; }
+}
+
+.pagination-number,
+.pagination-button {
+    color: #ccc;
+}
+
+.pagination-number:hover,
+.pagination-button:not(.disabled):hover {
+    background: grey;
+}
+
+#search {
+    background: rgba(64, 64, 64, 0.875);
+
+    ul {
+        border-bottom: 2px solid #464647;
+        box-shadow: 0px 4px 8px 0 #1E1E1F;
+
+        svg { background-color: #ccc;  }
+
+        th { color: #ccc; }
+
+        &::-webkit-scrollbar {
+            width: 8px;
+            background-color: grey;
+        }
+    }
+
+    input, input::placeholder { color: #ccc; }
+}
+
+.search-box h1 { color: #fff; }
+
+.input-box {
+    &:before { background: #5a5a5b; }
+
+    &:after { opacity: 0.5; }
+}
+
+.result-item{
+    border: 1px solid #464647;
+    background: #313132;
+
+    &:hover { background: $color-wenge; }
+}
+
+.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); }
+}
+
+@include mq(desktop) {
+    .sidebar-left { background: none; }
+
+    .site-name { box-shadow: none; }
+
+    .nav-lh {
+        &:before { background: rgba(#464647, 1); }
+
+        &:hover:before { background: rgba(#464647, .75); }
+    }
+
+    .nav-list li > .nav-list { background: none; }
+
+    #contact{
+        hr { border-top: 1px solid dimgrey; }
+    
+        h3 { background-color: #1E1E1F; }
+    }
+
+    #post .inner-content { box-shadow: none; }
+}
+
+}

data/_sass/layout.scss

@@ -0,0 +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.";
+    }
+}
+
+#loading
+{
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    position: fixed;
+    display: flex;
+    background: white;
+    z-index: 999;
+    text-align: center;
+
+    .loading_box {
+        margin: auto;
+
+        img {
+            width: 128px;
+            height: 128px;
+        }
+
+        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;
+}
+
+@include mq(desktop){
+    #stars { display: block; }
+}

data/_sass/navigation.scss

@@ -0,0 +1,178 @@
+#navigation {
+    display: none;
+    flex: 1 1 auto;
+    width: 100%;
+
+    &.nav-open {
+        display: block;
+        border-top: 1px solid dimgrey;
+    }
+}
+
+.nav-list {
+    padding: 0;
+    margin: 0 auto;
+    font-family: 'Lato', sans-serif;
+  
+    li {
+        font-size: 1rem;
+  
+        > .nav-list {
+            padding-left: 1.125rem;
+            background: #eee;
+
+            transition: max-height .5s, opacity .2s;
+            opacity: 0;
+            max-height: 0;
+    
+            li { position: relative; }
+        }
+
+        &.active {
+            > .nav-item .nav-list-expander svg { transform: rotate(180deg); }
+
+            > .nav-list {
+                opacity: 1;
+                max-height: 256px;
+            }
+        }
+    }
+
+    svg { 
+        margin-right: 0.5rem;
+        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;
+        }
+    }
+
+    a { font-weight: 400; }
+}
+
+.nav-list-link {
+    position: relative;
+    transition: .2s ease;
+
+    span { position: relative; }
+}
+
+.nav-lh svg {
+    margin-left: -0.25rem;
+    position: relative;
+    fill: $color-darkorange;
+    transform: translateY(-2px);
+}
+
+.nav-sh svg { 
+    width: 14px;
+    margin-left: 0;
+}
+
+.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; }
+    }
+}
+
+@include mq(tablet) {
+    .nav-list-link { min-height: 2rem; }
+
+    .nav-list li { font-size: 1.125rem; }
+
+    .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; }
+
+    .nav-item { border: none; }
+
+    .nav-list-link {
+        display: flex;
+        width: 95%;
+        align-items: center;
+
+        &:hover {
+            span {
+                font-weight: 600;
+                text-decoration: underline;
+            }
+
+            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;
+        }
+    }
+
+    .nav-list-expander {
+        background-color: transparent;
+        right: -16px;
+    }
+}

data/_sass/pagination.scss

@@ -0,0 +1,253 @@
+#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;
+    }
+}
+
+.category-header {
+    margin: 0 0.5rem;
+    margin-bottom: 1.5rem;
+    font-weight: 600;
+    font-family: 'Lato', sans-serif;
+    border-bottom: 1px solid lightgrey;
+    text-decoration: underline dimgrey;
+    text-underline-offset: 12px;
+    padding-bottom: 8px;
+}
+
+.paginated-list {
+    margin: 0;
+    padding: 0;
+}
+
+.paginated-item {
+    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-family: 'Lato', sans-serif;
+        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;
+    }
+}
+
+.no-posts {
+    position: relative;
+    margin: 6rem 0;
+    text-align: center;
+
+    img {
+        width: 50%;
+        aspect-ratio: 2/1;
+    }
+
+    h1 {margin-top: 3rem;}
+}
+
+.hidden { display: none; }
+  
+.pagination-container {
+    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;
+}
+
+.pagination-number:hover,
+.pagination-button:not(.disabled):hover {
+    background: #fff;
+}
+
+.pagination-number.active {
+    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;
+    }
+}
+
+@include mq(desktop){
+    .category-header { font-size: 3rem; }
+
+    .paginated-item { height: 15rem; }
+    
+    #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; }
+    }
+}