jekyll-theme-simplex-v2 0.9.8.15

data/_sass/_feed.scss

@@ -0,0 +1,173 @@
+// =============================
+// feed.scss
+// =============================
+// Used for page feed - used in index and categories.
+
+.feed{
+
+    padding: 2rem;
+    margin: 2rem;
+    max-width: 1000px;
+    width: 100%;
+    justify-self: center;
+
+    @include flexbox{
+        flex-direction: column;
+    };
+
+    &__description{
+        @include flexbox{
+            flex-direction: column;
+        };
+
+        color: var(--c-feed-title);
+
+        text-align: center;
+        padding: 0 2rem;
+        margin-bottom: 2rem;
+        min-width: 80%;
+
+        h1{
+            margin: 1rem 0 0 0;
+
+            @include for-size('tablet'){
+                margin: 0;
+            }
+        }
+    }
+
+    .snippet{
+
+        @include flexbox;
+        position: relative;
+        width: 100%;
+        
+        &__link{
+            text-decoration: none;
+            color: initial;
+            width: 100%;
+            height: 100%;
+            margin: 1rem 0;
+            padding: 1rem 2rem;
+            box-shadow: inset 0px 0px 14px -4px var(--c-snippetShadow);
+            transition: $t-smooth;
+
+            &:hover{
+                transform: scale(.99);
+                box-shadow: inset 0px 0px 14px -4px var(--c-snippetShadowHover);
+            }
+        }
+
+        @include for-size('tablet'){
+            width: 100%;
+            padding: 0;
+        }
+
+        &__data{
+
+            @include flexbox{
+                flex-direction: column;
+                align-items: flex-start;
+            };
+
+            &__metadata{
+                font-family: var(--f-header);
+                
+                @include flexbox;
+
+                &__category{
+                    text-transform: uppercase;
+                    margin: 0;
+                    @include flexbox;
+
+                    &__title{
+                        color: var(--c-noCategoryText);
+                        background: var(--c-noCategoryBackground);                        
+                        padding: .2rem .5rem;
+                    }
+
+                    
+                    @include for-size('tablet'){
+                        flex-direction: column;
+
+                        p{
+                            text-align: center;
+                            width: 100%;
+                            margin: 0;
+                        }
+                    }
+                }
+
+                &__date{
+                    margin: 0 0 0 1rem;
+                    color: var(--c-snippetDate);
+
+                    @include for-size('tablet'){
+                        margin: 1rem 0 0 0;
+                    }
+                }
+
+                @include for-size('tablet'){
+                    flex-direction: column;
+                }
+            }
+            
+            &__header{
+                margin: 1rem 0 0 0;
+                color: var(--c-articleHeading);
+
+                @include for-size('tablet'){
+                    margin: 1rem 0 0 0;
+                    text-align: center;
+                }
+            }
+
+            &__text{
+
+                color: var(--c-snippetHeading);
+                margin: 1rem 0 0 0;
+            }
+
+            &__author{
+
+                margin: 1.5rem 0 0 0;
+                color: var(--c-snippetAuthor);
+
+                @include flexbox{
+                    flex-direction: row;
+                };
+
+                img{
+                    height: 2rem;
+                    border-radius: 100%;
+                }
+
+                p{
+                    margin: 0 0 0 1rem;
+                }
+            }
+
+            @include for-size('tablet'){
+                align-items: center;
+            }
+        }
+        
+        &::after{
+            content: "";
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            z-index: -1;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+            opacity: .2;
+
+            @include for-size('tablet'){
+                opacity: .3;
+            }
+        }
+    }
+
+    @include for-size('tablet'){
+        padding: 0;
+    }
+}

data/_sass/_footer.scss

@@ -0,0 +1,52 @@
+// =============================
+// index.scss
+// =============================
+// Used for page footer.
+
+.footer{
+
+    @include flexbox;
+    padding: 1rem 0 0 0;
+    margin-top: auto;
+    color: var(--c-footerText);
+
+    &__about{
+
+        @include flexbox;
+
+        &__copyright{
+            margin: 0;
+        }
+
+        .divider{
+            margin: 0 1rem;
+
+            @include for-size('tablet'){
+                display: none;
+            }
+        }
+
+        &__theme{
+            @include flexbox;
+        }
+
+        #simplex-logo{
+            
+            img{
+                vertical-align: middle;
+                height: 1.25rem;
+                margin: 0 .5rem;
+                transition: $t-smooth;
+                filter: var(--c-footerImageFilter);
+
+                &:hover{
+                    transform: scale(1.05) rotate(-5deg);
+                }
+            }
+        }
+
+        @include for-size('tablet'){
+            flex-direction: column;
+        }
+    }
+}

data/_sass/_global.scss

@@ -0,0 +1,157 @@
+// =============================
+// 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: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+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);
+    }
+}
+
+table:not([class]){
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 1px solid var(--c-tableBorder);
+
+    th,td{
+        padding: .25rem;
+        border: 1px solid var(--c-tableBorder);
+    }
+}
+
+.highlight{
+
+    margin: 2rem 0;
+    transition: $t-smooth;
+    box-shadow: inset 0px 0px 14px -4px var(--c-codeShadow);
+
+    &:hover{
+        box-shadow: inset 0px 0px 14px -4px var(--c-codeShadowHover);
+    }
+
+    max-width: calc(100vw - 2rem);
+    overflow-x: auto;
+
+    pre{
+        margin: 0;
+        padding: 1rem;
+    }
+}
+
+.sx-center{
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.sx-button{
+
+    width: 100%;
+    margin: 1rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &__content{
+
+        &:link, &:visited, &:hover, &:active{
+            color: var(--c-themePrimaryLight);
+        }
+        text-decoration: none;
+        width: fit-content;
+        padding: .5rem 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: $t-smooth;
+
+        &.red{background-color: var(--c-themeHueRed);}
+        &.orange{background-color: var(--c-themeHueOrange);}
+        &.green{background-color: var(--c-themeHueGreen);}
+        &.blue{background-color: var(--c-themeHueBlue);}
+        &.purple{background-color: var(--c-themeHuePurple);}
+        &.brown{background-color: var(--c-themeHueBrown);}
+
+        img{
+            margin-right: 1rem;
+            height: 1rem;
+            filter: brightness(0) invert(1);
+        }
+
+        &:hover{
+            letter-spacing: .05rem;
+        }
+    }
+}
+
+.sx-subtitle{
+    font-style: italic;
+    color: var(--c-subtitle);
+}
+
+.sx-picture{
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    margin: 1.5rem 0;
+}

data/_sass/_header.scss

@@ -0,0 +1,308 @@
+// =============================
+// header.scss
+// =============================
+// Used for page header.
+
+.header{
+
+    @include flexbox{
+        flex-direction: column;
+    };
+
+    padding-top: 2rem;
+
+    .logo{
+
+        &__link{
+
+            text-decoration: none;
+            color: var(--c-themePrimaryDark);
+            transition: $t-smooth;
+
+            &:hover{
+                letter-spacing: .5rem;
+            }
+            h1{
+                margin: 0;
+            }
+            &__img{
+                filter: var(--c-headerImageFilter);
+                height: 2rem;
+            }
+        }
+    }
+
+    #menuToggle{
+        display: none;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        
+        margin: 2rem 0 1rem 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%;
+        margin-top: 2rem;
+    
+        .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: var(--c-menuItemsFilter);
+                    }
+    
+                    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 var(--c-menuShadow);
+                    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: var(--c-menuItemsFilterHover);
+
+                        @include for-size('tablet'){
+                            transform: scale(1);
+                        }
+                    }
+
+                    p{
+                        letter-spacing: .1rem;
+                        filter: var(--c-menuItemsFilterHover);
+
+                        @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{
+    
+                            height: 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 var(--c-menuShadow);
+
+            transition: $t-smooth;
+            max-height: 0;
+            overflow: hidden;
+            margin: 0;
+            &.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{
+    
+}