jekyll-theme-simplex 0.9.0

data/_sass/_global.scss

@@ -0,0 +1,67 @@
+// =============================
+// global.scss
+// =============================
+// Used for global styles.
+
+*, *:before, *:after{
+    box-sizing: border-box;
+}
+
+html{
+
+    font-family: var(--f-text);
+
+    // Root font size. Other sizes are derived from this accroding to variable values.
+    font-size: 16px;
+
+    @include for-size('tablet'){
+        font-size: 18px;
+    }
+}
+
+body{
+    background: var(--c-pageBackground);
+    
+    margin: 0;
+    min-height: 100vh;
+    
+    display: grid;
+    gap: 0 100px;
+    grid-template-areas: 
+        "header"
+        "main"
+        "footer";
+}
+
+h1,h2,h3,h4,h5,h5,h6{
+
+    font-family: var(--f-header);
+}
+
+h1{
+
+    font-size: 2rem;
+}
+
+p{
+    font-size: var(--s-p);
+}
+
+a{
+    
+    &:link{
+        color: var(--c-link);
+    }
+
+    &:visited{
+        color: var(--c-linkVisited);
+    }
+
+    &:hover{
+        color: var(--c-linkHover);
+    }
+
+    &:active{
+        color: var(--c-linkActive);
+    }
+}

data/_sass/_header.scss

@@ -0,0 +1,283 @@
+// =============================
+// header.scss
+// =============================
+// Used for page header.
+
+.header{
+
+    @include flexbox{
+        flex-direction: column;
+    };
+
+    #menuToggle{
+        display: none;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        
+        margin: 2rem 0;
+        padding: 0;
+        font-size: 1rem;
+        width: 3em;
+
+        @include for-size('tablet'){
+            display: block;
+        }
+
+        div{
+            pointer-events:none;
+            width: 100%;
+            height: 0.25em;
+            margin: 0.5em 0;
+            background: black;
+            transition: $t-smooth;
+        }
+
+        &.open{
+
+            div:nth-child(1){
+                transform: translateY(.75em) rotateZ(45deg);
+            }
+
+            div:nth-child(2){
+                opacity: 0;
+            }
+    
+            div:nth-child(3){
+                transform: translateY(-.75em) rotateZ(-45deg);
+            }
+        }
+    }
+
+    .menu{
+
+        max-width: 100vw;
+        width: 100%;
+    
+        .list{
+
+            @include flexbox;
+
+            padding: 0;
+            margin: 0;
+            list-style: none;
+
+            @include for-size('tablet'){
+                flex-direction: column;
+            }
+
+            .item{
+
+                position: relative; 
+
+                @include flexbox;
+                cursor: pointer;
+
+                .item-controls{
+
+                    @include flexbox;
+                    width: 100%;
+
+                    img,p{
+                        transition: $t-smooth;
+                        filter: brightness(0);
+                    }
+    
+                    img{
+                        @include for-size('tablet'){
+                            margin: 0 .5rem 0 0;
+                        }
+                    }
+
+                    p{
+                        @include for-size('tablet'){
+                            margin: 0 0 0 0;
+                        }
+                    }
+    
+                    a{
+                        text-decoration: none;
+                        color: var(--c-menuLinks);
+                        @include flexbox;
+                        @include for-size('tablet'){
+                            padding: 1rem;
+                        }
+                    }
+
+                    .button-submenu{
+                        display: none;
+                    }
+
+                    @include for-size('tablet'){
+                        .button-submenu{
+                            @include flexbox;
+                        }
+                    }
+
+                }
+
+                >.list{
+                    
+                    max-height: 0;
+                    width: 250px;
+                    overflow: hidden;
+                    box-shadow: inset 0px 0px 14px -4px rgba(0,0,0,0.5);
+                    transition: $t-smooth;
+                    flex-direction: column;
+
+                    .item{
+                        width: 100%;
+                    }
+
+                    @include for-size('tablet-up'){
+                        a{
+                            padding: 0 4rem;
+                        }
+                    }
+
+                    @include for-size('tablet'){
+                        
+                        position: static;    
+                        width: 100%;
+                    }
+                }
+    
+                a:hover{
+      
+                    img{
+                        transform: scale(1.1);
+                        filter: none;
+
+                        @include for-size('tablet'){
+                            transform: scale(1);
+                        }
+                    }
+
+                    p{
+                        letter-spacing: .1rem;
+                        filter: none;
+
+                        @include for-size('tablet'){
+                            letter-spacing: .2rem;
+                        }
+                    }
+                }
+
+                &.open{
+                    >.list{
+                        max-height: $s-m-menuMaxHeight;
+                    }
+                }
+
+                @include for-size('tablet'){
+                    flex-direction: column;
+                    width: 100%;
+                    padding: 0;
+                }
+
+                @include for-size('tablet-up'){
+                    
+                    display: block;
+                    &:hover{
+                        >.list{
+                            max-height: $s-m-menuMaxHeight;
+                        }
+                    }
+                }
+            }
+
+            &.primary{
+
+                >.item{
+
+                    margin: 0 1rem;
+
+                    >.item-controls>a{
+                        
+                        @include flexbox{
+                            flex-direction: column;
+                        };
+
+                        &.button-submenu{
+                            display: none;
+                        }
+                        
+                        img{
+    
+                            max-width: 5rem;
+                        }
+        
+                        p{
+                            margin: 1rem 0 0 0;
+
+                            @include for-size('tablet'){
+                                margin: 0 0 0 .5rem;
+                            }
+                        }
+
+                        &:hover p{
+                            letter-spacing: normal;
+                            transform: scale(1.1);
+                        }
+
+                        @include for-size('tablet'){
+                            flex-direction: row;
+                            width: unset;
+
+                            img{
+                                max-height: 1.5rem;
+                            }
+
+                            &.button-submenu{
+                                @include flexbox;
+                            }
+                        }
+                    }
+
+                    >.list{
+                        position: absolute;
+                        top: calc(100% + 1rem);
+                        left: 0;
+                        z-index: 1000;
+                        background: var(--c-pageBackground);
+
+                        @include for-size('tablet'){
+                            position: static;
+                        }
+                    }
+                }
+            }
+        }
+
+        @include for-size('tablet'){
+            box-shadow: inset 0px 0px 14px -4px rgba(0,0,0,0.5);
+
+            transition: $t-smooth;
+            max-height: 0;
+            overflow: hidden;
+            &.open{
+                max-height: $s-m-menuMaxHeight;
+            }
+        }
+    }
+
+    .button-submenu{
+    
+        .arrow{
+            pointer-events:none;
+            border: solid black;
+            border-width: 0 .25rem .25rem 0;
+            display: inline-block;
+            padding: .25rem;
+
+            transform: translateY(-.125rem) rotate(45deg);
+            transition: $t-smooth;
+        }
+
+        &.open{
+            .arrow{
+                transform: translateY(.125rem) rotate(-135deg);
+            }
+        }
+    }
+}

data/_sass/_index.scss

@@ -0,0 +1,8 @@
+// =============================
+// index.scss
+// =============================
+// Used for page index.
+
+.index{
+    
+}

data/_sass/_mixins.scss

@@ -0,0 +1,67 @@
+// =============================
+// mixins.scss
+// =============================
+// Useful functions.
+
+
+// responsivity
+// ===============================================
+@mixin for-size($size, $width: 1000px) {
+   
+    // ▼▼▼▼ DO NOT EDIT ▼▼▼▼
+    // by resolution
+    @if $size == 'hd-up' {
+        @media (min-width: 720px) { @content; }
+    } @else if $size == 'fhd-up' {
+        @media (min-width: 1080px) { @content; }
+    } @else if $size == 'qhd-up' {
+        @media (min-width: 1440px) { @content; }
+    } @else if $size == 'uhd-up' {
+        @media (min-width: 2160px) { @content; }
+    } 
+
+    // by devices
+    @else if $size == 'tablet' {
+        @media (max-width: 768px) { @content; }
+    }
+    @else if $size == 'tablet-up' {
+        @media (min-width: 768px) { @content; }
+    } 
+    @else if $size == 'desktop' {
+        @media (min-width: 769px) { @content; }
+    } 
+
+    // custom natural breakpoints (project+element-specific)
+    @else if $size == 'bp-up'{
+        @media (min-width: $width) { @content; }
+    }
+
+    // custom natural breakpoints down (project+element-specific)
+    @else if $size == 'bp-down'{
+        @media (max-width: $width) { @content; }
+    }
+
+    // ▲▲▲▲ DO NOT EDIT ▲▲▲▲
+
+    // natural breakpoints (project-specific)
+    @else if $size == 'menu-width'{
+
+        @media (max-width: $s-menuWidth) { @content; }        
+    }
+
+    @else if $size == 'menu-width-up'{
+
+        @media (min-width: $s-menuWidth) { @content; }        
+    }
+}
+
+// flexbox
+// ===============================================
+@mixin flexbox($align: center, $justify: center, $direction: row){
+
+    display: flex;
+    align-items: $align;
+    justify-content: $justify;
+    flex-direction: $direction;
+    @content;
+}

data/_sass/_post.scss

@@ -0,0 +1,11 @@
+// =============================
+// post.scss
+// =============================
+// Used for single post view.
+
+.post{
+
+    justify-self: center;
+    padding: 0 1rem;
+    max-width: 1000px;
+}

data/_sass/_variables.scss

@@ -0,0 +1,81 @@
+// =============================
+// variables.scss
+// =============================
+// Contains all the useful variables for colors, sizes...
+
+// THEME COLORS
+:root{
+
+    --c-themePrimaryLight: #EFEFEF;
+    --c-themePrimaryDark:  #101010;
+    --c-themeSecondaryLight: #DADADA;
+    --c-themeSecondaryDark: #252525;
+    --c-themeTerniaryLight: #AEAEAE;
+    --c-themeTerniaryDark: #515151;
+    --c-themeQuaternaryLight: #919191;
+    --c-themeQuaternaryDark: #888888;
+
+    --c-themeHueRed: #C02717;
+    --c-themeHueGreen: #8EA604;
+    --c-themeHueBlue: #2E86AB;
+    --c-themeHueOrange: #E59500;
+    --c-themeHuePurple: #9F00CE;
+    --c-themeHueBrown: #230007;
+}
+
+// ELEMENT COLORS
+:root{
+
+    @media (prefers-color-scheme: light){
+
+        --c-articleHeading: var(--c-themePrimaryDark);
+        --c-articleParagraph: var(--c-themeSecondaryDark);
+        --c-articleBackground: var(--c-themePrimaryLight);
+
+        --c-pageBackground: var(--c-themePrimaryLight);
+
+        --c-menuLinks: var(--c-themePrimaryDark);
+        --c-menuDepth0: var(--c-themeSecondaryLight);
+
+        --c-snippetBackgroundExternal: rgba(239, 239, 239, 0.425);
+        --c-snippetBackgroundInternal: var(--c-pageBackground);
+
+        --c-snippetDate: var(--c-themeTerniaryLight);
+
+        --c-link: var(--c-themeTerniaryDark);
+        --c-linkVisited: var(--c-themeQuaternaryDark);
+        --c-linkHover: var(--c-themePrimaryDark);
+        --c-linkActive: var(--c-themePrimaryDark);
+    }
+
+    @media (prefers-color-scheme: dark){
+
+        --c-articleHeading: var(--c-themePrimaryLight);
+        --c-articleParagraph: var(--c-themeSecondaryLight);
+        --c-articleBackground: var(--c-themePrimaryDark);
+
+        --c-pageBackground: var(--c-themePrimaryDark);
+    }
+    
+}
+
+// SIZES
+:root{
+    
+    --s-p: 1rem;
+}
+
+// FONTS
+:root{
+
+    --f-header: Roboto;
+    --f-text: Roboto Slab;
+}
+
+// FIXED SIZES
+$s-menuItemWidth: 8rem;
+$s-menuItemPadding: 1rem;
+$s-m-menuMaxHeight: 1000px;
+
+// TRANSITIONS
+$t-smooth: ease .5s;