jekyll-theme-nangka 0.1.0

data/_sass/_base.scss

@@ -0,0 +1,298 @@
+html {
+    font: 100%/1.625 -apple-system,'BlinkMacSystemFont','Segoe UI','Roboto','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+    box-sizing: border-box;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+* {
+    box-sizing: inherit;
+}
+
+*:before {
+    box-sizing: inherit;
+}
+
+*:after {
+    box-sizing: inherit;
+}
+
+body {
+    color: hsla(0, 0%, 0%, 0.8);
+    font-family: -apple-system,'BlinkMacSystemFont','Segoe UI','Roboto','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+    font-weight: normal;
+    word-wrap: break-word;
+    font-kerning: normal;
+    -moz-font-feature-settings: "kern", "liga", "clig", "calt";
+    -ms-font-feature-settings: "kern", "liga", "clig", "calt";
+    -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
+    font-feature-settings: "kern", "liga", "clig", "calt";
+}
+
+img {
+    max-width: 100%;
+    margin-bottom: 0.8125rem;
+    padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: -apple-system,'BlinkMacSystemFont','Segoe UI','Roboto','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+    text-rendering: optimizeLegibility;
+    font-weight: 600;
+    line-height: 1.1;
+}
+
+h1 {
+    margin: 2.4375rem 0 1.21875rem 0;
+    padding: 0 0 calc(0.40625rem - 1px) 0;
+    color: inherit;
+    font-size: 2rem;
+    border-bottom: 1px solid hsla(0, 0%, 0%, 0.07);
+}
+
+h2 {
+    margin: 24px 0 16px 0;
+    padding: 0 0 calc(0.40625rem - 1px) 0;
+    color: inherit;
+    font-size: 1.51572rem;
+    border-bottom: 1px solid hsla(0, 0%, 0%, 0.07);
+}
+
+h3 {
+    padding: 0;
+    margin: 0 0 0.8125rem 0;
+    color: inherit;
+    font-size: 1.31951rem;
+}
+
+h4 {
+    padding: 0;
+    margin: 0 0 0.8125rem 0;
+    color: inherit;
+    font-size: 1rem;
+}
+
+h5 {
+    padding: 0;
+    margin: 0 0 0.8125rem 0;
+    color: inherit;
+    font-size: 0.87055rem;
+}
+
+h6 {
+    padding: 0;
+    margin: 0 0 0.8125rem 0;
+    color: hsla(0, 0%, 0%, 0.53);
+    font-size: 0.81225rem;
+}
+
+hgroup {
+    padding: 0;
+    margin: 0 0 0.8125rem 0;
+}
+
+ul, ol {
+    margin: 0 0 0.8125rem 1.625rem;
+    padding: 0;
+    list-style-position: outside;
+    list-style-image: none;
+}
+
+dl, dd, p, figure, fieldset, form, noscript, iframe {
+    padding: 0;
+    margin: 0 0 0.8125rem 0;
+}
+
+pre {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 0.8125rem;
+    font-size: 0.85rem;
+    line-height: 1.625rem;
+}
+
+table {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 0.8125rem;
+    font-size: 1rem;
+    line-height: 1.625rem;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+blockquote {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: calc(0.8125rem - 1px);
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 0.8125rem;
+    border-left: 4px solid hsla(0, 0%, 0%, 0.13);
+    color: hsla(0, 0%, 0%, 0.53);
+}
+
+hr {
+    padding: 0;
+    margin: 40px 0;
+    background: rgba(0, 0, 0, 0.07);
+    border: none;
+    height: 1px;
+}
+
+address {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 0.8125rem;
+}
+
+b {
+    font-weight: 600;
+}
+
+strong {
+    font-weight: 600;
+}
+
+dt {
+    font-weight: 600;
+}
+
+th {
+    font-weight: 600;
+}
+
+li {
+    margin-bottom: calc(0.8125rem / 2);
+    padding-left: 0;
+}
+
+li > ol, li > ul {
+    margin-left: 1.625rem;
+    margin-bottom: calc(0.8125rem / 2);
+    margin-top: calc(0.8125rem / 2);
+}
+
+blockquote *:last-child, li *:last-child, p *:last-child {
+    margin-bottom: 0;
+}
+
+li > p {
+    margin-bottom: calc(0.8125rem / 2);
+}
+
+code, samp, kbd {
+    font-size: 0.85rem;
+    line-height: 1.625rem;
+}
+
+abbr, acronym {
+    border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+    cursor: help;
+}
+
+abbr[title] {
+    border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+    cursor: help;
+    text-decoration: none;
+}
+
+thead {
+    text-align: left;
+}
+
+td, th {
+    text-align: left;
+    border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
+    font-feature-settings: "tnum";
+    -moz-font-feature-settings: "tnum";
+    -ms-font-feature-settings: "tnum";
+    -webkit-font-feature-settings: "tnum";
+    padding-left: 1.08333rem;
+    padding-right: 1.08333rem;
+    padding-top: 0.8125rem;
+    padding-bottom: calc(0.8125rem - 1px);
+}
+
+th:first-child, td:first-child {
+    padding-left: 0;
+}
+
+th:last-child, td:last-child {
+    padding-right: 0;
+}
+
+h3, h4, h5, h6 {
+    margin-bottom: 0.8125rem;
+    margin-top: 1.625rem;
+}
+
+ol, ul {
+    margin-left: 2.03125rem;
+}
+
+li > ol, li > ul {
+    margin-left: 2.03125rem;
+}
+
+a {
+    color: #4078c0;
+    text-decoration: none;
+}
+
+a:hover, a:active {
+    text-decoration: underline;
+}
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+    //font-family: Menlo,Monaco,Courier;
+    //font-size: 85%;
+    background-color: #f7f7f7;
+    font: 14px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+code {
+    padding: 1px 5px;
+}
+
+pre {
+    padding: 16px;
+    overflow-x: auto;
+
+    > code {
+        border: 0;
+        padding-right: 0;
+        padding-left: 0;
+    }
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 9px;
+    background: #f7f7f7;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #e3e3e3;
+}

data/_sass/_layout.scss

@@ -0,0 +1,270 @@
+.wrapper {
+    max-width: $content-width;
+    margin: 0 auto;
+    padding: 2.4rem 1.2rem;
+    height: 100vh;
+}
+
+.hidden, .breadcrumb {
+    display: none;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}
+
+.site-header {
+    position: relative;
+}
+
+h1 ~ .site-nav {
+    top: 3px;
+}
+
+h3 ~ .site-nav {
+    top: 0;
+}
+
+.site-nav {
+    position: absolute;
+    text-align: right;
+    right: 0;
+    padding: 5px 10px;
+    background-color: #ebeef2;
+
+    @include media-query($on-palm) {
+        background: none;
+        padding: 0;
+    }
+
+
+    border-radius: 2px;
+
+    a {
+        padding: 0 .41rem;
+    }
+
+    label {
+        @include media-query($on-palm) {
+            display: none;
+        }
+    }
+}
+
+.nav-links {
+    display: none;
+
+    @include media-query($on-palm) {
+        display: block;
+    }
+}
+
+#nav-trigger {
+    &:checked ~ .nav-links {
+        display: block;
+
+        a {
+            display: block;
+            padding: 0;
+        }
+    }
+}
+
+.site-title {
+    margin-top: 0;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+}
+
+.post-title {
+    margin-top: .68em;
+}
+
+.post-meta {
+    margin-bottom: 1.5rem;
+    display: block;
+}
+.cover{
+    max-width: 100vw;
+    position: relative;
+    margin-right: -50vw;
+    right: 50%;
+    margin-left: -50vw;
+    left: 50%;
+    text-align: center;
+    font-style: italic;
+    font-size: small;
+    font-weight: bold;
+    color: rgb(104, 104, 104);
+}
+.post-content{
+    img{
+        display: block;
+        margin: 0 auto;
+        // max-width: $content-width + 12rem;
+    }
+}
+.post-item {
+    display: block;
+    position: relative;
+    margin: 20px 0;
+    padding: 0;
+    overflow: hidden;
+    max-height: 300px;
+    h3{
+        margin-top: 0px;
+    }
+    &:hover{
+        text-decoration: none;
+        & > h3{
+            text-decoration: underline;
+        }
+        img{
+            -webkit-filter: saturate(3); 
+            filter: saturate(3);
+        }
+    }
+    *:not(h3){
+        margin: 0;
+        padding: 0;
+        color: #1E2025;
+    }
+    img{
+        width: 100%;
+        margin:0;
+        min-height: 200px;
+        object-fit:cover;
+    }
+
+    .image-caption{
+        width: 100%;
+        position: absolute;
+        bottom: 7px;
+        display: block;
+        padding: 50px 8px 15px 8px;
+        * {
+            display: block;
+            position: relative;
+            z-index: 10;
+
+            & > *{
+                display: inline;
+                background: #fff;
+                box-shadow: 8px 0 #fff, -8px 0 #fff;
+            }
+        }
+    }
+}
+
+
+#disqus_thread {
+    margin: 2rem 0 auto;
+}
+
+.pagination {
+    width: 100%;
+    overflow: auto;
+    padding-top: 1rem;
+
+    .prev {
+        float: left;
+    }
+
+    .next {
+        float: right;
+    }
+}
+
+.site-footer {
+    padding: 1em 0;
+    margin-top: 1em;
+}
+
+.mini-bio {
+    width: 100%;
+    display: block;
+    overflow: auto;
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 1.4;
+    border-top: 1px solid #eee;
+    padding: 30px 0;
+    margin: 40px 0;
+    color: #444;
+}
+
+.author {
+    float: left;
+
+    .avatar {
+        height: 36px;
+        width: 36px;
+        float: left;
+        border-radius: 50%;
+        margin-top: 3px;
+        margin-right: 20px;
+        box-shadow: 0 0 0 3px #fff, 0 0 0 4px #eee;
+    }
+
+    div {
+        margin: 0 25px 0 0;
+        float: left;
+    }
+
+    span {
+        color: #aaa;
+        font-weight: 500;
+        display: block;
+
+        &.name {
+            color: #1E2025;
+        }
+    }
+}
+
+.share {
+    float: right;
+
+    a {
+        font-size: 13px;
+        font-weight: bold;
+        color: #fff;
+        padding: 6px 10px;
+        border-radius: 4px;
+        margin-left: 2px;
+        display: inline-block;
+
+        svg {
+            width: 13px;
+            height: 13px;
+
+            path {
+                fill: #fff;
+            }
+        }
+
+        &.twitter {
+            background: #4fafed;
+        }
+
+        &.facebook {
+            background: #4361b3;
+        }
+    }
+}
+
+#___gcse_0 *:not(.gsc-above-wrapper-area) {
+    border: none !important;
+    padding: 0 !important;
+}
+
+.gsc-selected-option-container {
+    max-width: 100% !important;
+}
+
+.gcsc-branding {
+    display: none !important;
+}
+