jekyll-theme-simpleton 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b52e03f912e9ddd340029e5e673daf1c4e94257be5fff9025a574306c82ac04
-  data.tar.gz: 47fb0247ad71b65e4da5c375b2effca17f0634006bcccdf27709c2e1c2bbae3a
+  metadata.gz: 22bba17131f8438fcc7f3bf03c88c0a96a729c9bc2e2ba7140498989f4f3a22d
+  data.tar.gz: 1ae833a21d06742cef9aaea3d7722b15e45912460417f6e7adb7aa17f057eb5c
 SHA512:
-  metadata.gz: f8257e0bfa38baa0d96f634dfb5fdfde147d16b820ef6038e65d5cc7aaa8f295d2fd9da105988d055591a8eec8e6346f14764947e3958e49d9015ad74907f11b
-  data.tar.gz: dd9eeaebb25252a7fcad335f04baf1c323bcd44701c03bae46ea8fd3606320fcf7ba2868158c72498f8d49ff70a3fe37f7d9cf58bef1e4d5329c0eaedcdfa984
+  metadata.gz: d93ae4755d6650cf3a9a241f579713f8c74b2404837b1324aa09eb68c85905e0a467fa94b576728b72b20bdb2cde6c9f191727fb2f0827b18dfe52e6fae3fec3
+  data.tar.gz: ea6de4dc366438bf2710737a5162c75c85d57c63ffb65e1e5f735f9f16430d620937715997cb2c0f1d7142413a09633b2f989f6e2ae9feafc040a4d038c1007f

data/_sass/README.md

@@ -1 +1,51 @@
 # My Sass Library
+## Table of Contents
+- [About](#about)
+- [Structure](#structure)
+- [Is it any good?](#is-it-any-good?)
+
+
+## About
+Just my collection of sassy snippets.
+
+
+## Structure
+This repo is using the 7-1 structure with the `main.scss` file exstracted in the actual project.
+The used naming convention was chosen in order to show the added complexity of content when going down the directory list.
+
+
+### Abstracts
+... __(or utilities)__ holds anything that does not output any CSS when compiled.
+
+
+### Base
+... holds the boilerplate code which commonly imports also all your [abstracts](#abstracts) and gives you a good way to start any project.
+This means that any project will usually start with `@import "base/all"` which imports the chosen base ([normalize](https://necolas.github.io/normalize.css/) in my case) and anything else choosen worthy.
+
+
+### Components
+... __(or modules)__ holds all of your reusable styles which are independend of any real structure.
+
+
+### Layout
+... contains all styles involved with the layout of your project.
+Such as styles for your header, footer, navigation and the grid system.
+
+
+### Pages
+... any styles specific to individual pages will sit here.
+For example it's not uncommon for the home page of your site to require page specific styles that no other page receives.
+
+
+### Themes
+... this is likely not used in many projects.
+It would hold files that create project specific themes.
+For example if sections of your site contain alternate color schemes.
+
+
+### Vendors
+... contains all third party code.
+
+
+## Is it any good?
+Yes!

data/_sass/abstracts/_all.scss

@@ -0,0 +1,7 @@
+@import "abstracts/variables/breakpoints";
+@import "abstracts/variables/colors";
+@import "abstracts/variables/spacing";
+@import "abstracts/variables/transition";
+@import "abstracts/variables/typography";
+@import "abstracts/variables/z-index";
+@import "abstracts/mixins";

data/_sass/abstracts/_mixins.scss

@@ -0,0 +1,58 @@
+@mixin transition {
+  transition: all $transition-duration $transition-timing-function;
+}
+
+@mixin media-screen-gt($breakpoint) {
+  @media screen and (min-width: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin media-screen-gt-sm {
+  @include media-screen-gt($break-sm) {
+    @content;
+  }
+}
+
+@mixin media-screen-gt-md {
+  @include media-screen-gt($break-md) {
+    @content;
+  }
+}
+
+@mixin media-screen-gt-lg {
+  @include media-screen-gt($break-lg) {
+    @content;
+  }
+}
+
+@mixin media-screen-gt-xl {
+  @include media-screen-gt($break-xl) {
+    @content;
+  }
+}
+
+@mixin media-screen-width-breakpoints {
+  @include media-screen-gt-sm {
+    max-width: $break-sm;
+  }
+
+  @include media-screen-gt-md {
+    max-width: $break-md;
+  }
+
+  @include media-screen-gt-md {
+    max-width: $break-md;
+  }
+
+  @include media-screen-gt-xl {
+    max-width: $break-xl;
+  }
+}
+
+
+
+
+@mixin foreground {
+  z-index: $foreground-index;
+}

data/_sass/{modules → abstracts/variables}/_colors.scss

@@ -13,3 +13,4 @@ $text-grey-color: #111111;
 // Menu
 $menu-background-color: $ubuntu-orange-color !default;
 $menu-text-color: $white-color !default;
+$menu-separator-color: $warm-grey-color !default;

data/_sass/abstracts/variables/_spacing.scss

@@ -0,0 +1,8 @@
+$menu-width: 160px !default;
+
+$hamburger-color: #000000;
+$hamburger-height: 5px;
+$hamburger-width: 24px;
+$hamburger-radius: 2px;
+$hamburger-size: 32px;
+$clickable-cursor: pointer;

data/_sass/abstracts/variables/_transition.scss

@@ -0,0 +1,2 @@
+$transition-duration: 1s !default;
+$transition-timing-function: ease-out !default;

data/_sass/abstracts/variables/_typography.scss

@@ -0,0 +1,3 @@
+$link-text-decoration: none;
+
+$font-stack: Ubuntu, sans-serif;

data/_sass/abstracts/variables/_z-index.scss

@@ -0,0 +1,4 @@
+$ui-index: 1000;
+$foreground-index: 1;
+$middleground-index: 0;
+$background-index: -1;

data/_sass/base/_all.scss

@@ -0,0 +1,3 @@
+@import "abstracts/all";
+
+@import "base/normalize";

data/_sass/base/_normalize.scss

@@ -0,0 +1 @@
+@import "vendor/normalize"

data/_sass/base/_typography.scss

@@ -0,0 +1,4 @@
+
+.content p {
+  text-align: justify;;
+}

data/_sass/components/_hero.scss

@@ -0,0 +1,5 @@
+#hero {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}

data/_sass/components/_nav.scss

@@ -0,0 +1,7 @@
+nav {
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+}

data/_sass/components/_text-align.scss

@@ -0,0 +1,21 @@
+.text-align {
+  &-start {
+    text-align: start !important;
+  }
+
+  &-end {
+    text-align: end !important;
+  }
+
+  &-center {
+    text-align: center !important;
+  }
+
+  &-justify {
+    text-align: justify !important;
+  }
+
+  &-match-parent {
+    text-align: match-parent !important;
+  }
+}

data/_sass/layout/_gallery.scss

@@ -0,0 +1,31 @@
+#gallery {
+  #gallery-header {
+    #category-filter {
+
+      #category-list {
+
+        .category-item {
+          @extend .pure-menu-item;
+
+          .category-button {
+          }
+
+          .disabled {
+
+          }
+        }
+      }
+    }
+  }
+
+  #gallery-content {
+
+    img {
+    }
+
+    figure {
+
+
+    }
+  }
+}

data/_sass/layout/_justified-p.scss

@@ -0,0 +1,5 @@
+@import "components/text-align";
+
+p {
+  @extend .text-align-justify;
+}

data/_sass/layout/_side-menu.scss

@@ -0,0 +1,118 @@
+#menu-container {
+  * {
+    @include transition;
+  }
+
+  #menu-toggle {
+    display: none;
+
+    &:checked {
+      ~ #menu {
+        left: 0;
+      }
+
+      ~ #menu-icon {
+        background: green;
+        left: $menu-width;
+
+        span {
+          $translation-y: 9px;
+          $rotation-deg: 45deg;
+          &:first-child {
+            transform: translate(0, $translation-y) rotate($rotation-deg);
+          }
+
+          &:nth-child(2) {
+            opacity: 0;
+          }
+
+          &:last-child {
+            transform: translate(0, -$translation-y) rotate(-$rotation-deg);
+          }
+        }
+      }
+    }
+  } // #menu-toggle
+
+  #menu {
+    @include foreground;
+
+    position: fixed;
+    top: 0;
+    left: -$menu-width;
+    bottom: 0;
+    background: $menu-background-color;
+    width: $menu-width;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    #menu-header {
+      border-bottom: 1px solid $menu-separator-color;
+    }
+
+    .menu-heading {
+      font-size: 125%;
+      font-weight: 300%;
+      letter-spacing: .1em;
+      margin-top: 0;
+      text-transform: uppercase;
+    }
+
+    .menu-list {
+      .menu-item {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+      }
+    }
+
+    .menu-link {
+      color: $menu-text-color;
+      text-decoration: $link-text-decoration;
+      padding: .5em .8em;
+    }
+
+    .menu-heading,
+    .menu-link {
+      display: block;
+    }
+
+    @include media-screen-gt-sm {
+      left: 0;
+    }
+
+  } // #menu
+
+  #menu-icon {
+    @include foreground;
+    position: fixed;
+
+    top: 0;
+    left: 0;
+    width: $hamburger-size;
+    height: $hamburger-size;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+
+    @include media-screen-gt-sm {
+      display: none;
+    }
+
+    span {
+      display: block;
+      background: $hamburger-color;
+      height: $hamburger-height;
+      width: $hamburger-width;
+      border-radius: $hamburger-radius;
+      cursor: $clickable-cursor;
+    }
+  } // #menu-icon
+} // #menu-container
+
+@include media-screen-gt-sm {
+  #layout {
+    margin-left: $menu-width;
+  }
+}

data/_sass/pages/_home.scss

@@ -1,39 +1,42 @@
-#hero {
-  display: grid;
-  grid-template: 1fr / 1fr;
-  width: 100%;
-  height: 100vh;
+$gallery-height: 80vh;
+$tile-size: $gallery-height / 3;
 
-  .hero-tile {
-    animation: carousel ease-out 10s infinite;
 
-    &:first-of-type {
-      //animation: carousel ease-out 3s infinite;
-    }
-  }
+#hero-gallery {
+  height: $gallery-height;
+  margin: ((100vh - $gallery-height) / 2) auto;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax($tile-size, 1fr));
+  grid-template-rows: repeat(3, 1fr);
+  gap: 0;
+
+  overflow: hidden;
 }
 
+.tile {
+  //animation: carousel ease-out 10s infinite;
+  width: auto;
+  height: $tile-size;
 
-@keyframes carousel {
-  0% {
-    opacity: 1;
-  }
+  background-size: cover;
+  background-position: center;
 
-  30% {
-    opacity: 1;
-  }
+  a {
+    @include transition;
 
-  50% {
+    height: 100%;
+    text-decoration: none;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     opacity: 0;
-  }
+    color: white;
+    background: #000;
 
-  70% {
-    opacity: 1
-  }
-
-  /*
-  100% {
-    background: 1;
+    &:hover {
+      opacity: 1;
+    }
   }
-  */
 }

data/_sass/themes/_beko-art.scss

@@ -0,0 +1,60 @@
+@import "vendor/bootstrap";
+@import "vendor/dancing-script";
+
+@import "base/all";
+
+@import "components/hero";
+
+:root {
+  #main {
+    min-height: 100vh;
+
+    > *:first-child:not(#hero) {
+      margin-top: 10vh;
+    }
+
+    #hero {
+      #hero-content {
+        background-color: black;
+        overflow: hidden;
+        height: 80vh;
+        margin: 10vh auto;
+
+
+        #hero-image {
+          background-image: url('../../assets/images/hero.webp');
+
+
+        background-size: contain;
+        background-position: left;
+        background-repeat: no-repeat;
+        }
+      }
+    }
+  }
+}
+
+.blockquote {
+  font-family: "Dancing Script", cursive;
+  position: static;
+
+  p {
+    @extend .fs-2;
+
+    &::before {
+      content: "\201C";
+      font-size: 200%;
+
+      //@extend .fs-1;
+      @extend .fw-bold;
+    }
+
+    /*
+    &::after {
+      content: "\201C";
+
+      @extend .fs-1;
+    }
+    */
+  }
+}

data/_sass/themes/_purebred.scss

@@ -0,0 +1,5 @@
+@import "vendor/purecss";
+
+@import "base/all";
+
+@import "layout/justified-p";

data/_sass/themes/_simpleton.scss

@@ -0,0 +1,16 @@
+@import "base/all";
+
+@import "layout/justified-p";
+
+#layout {
+  width: 100%;
+
+  & > * {
+    @include media-screen-width-breakpoints;
+
+    margin: {
+      left: auto;
+      right: auto;
+    }
+  }
+}

data/_sass/vendor/_bootstrap.scss

@@ -0,0 +1 @@
+@import "bootstrap/scss/bootstrap";

data/_sass/vendor/_dancing-script.scss

@@ -0,0 +1 @@
+@import "@fontsource/dancing-script"

data/_sass/vendor/_normalize.scss

@@ -0,0 +1 @@
+@import "normalize.css/normalize"

data/_sass/vendor/_purecss.scss

@@ -0,0 +1,2 @@
+@import "purecss/build/pure";
+@import "purecss/build/grids-responsive";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-simpleton
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Anatoli Wagner
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-01-02 00:00:00.000000000 Z
+date: 2021-03-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -71,15 +71,32 @@ files:
 - _layouts/page.html
 - _layouts/post.html
 - _sass/README.md
-- _sass/modules/_all.scss
-- _sass/modules/_breakpoints.scss
-- _sass/modules/_colors.scss
-- _sass/modules/_mixins.scss
-- _sass/modules/_spacing.scss
-- _sass/modules/_typography.scss
+- _sass/abstracts/_all.scss
+- _sass/abstracts/_mixins.scss
+- _sass/abstracts/variables/_breakpoints.scss
+- _sass/abstracts/variables/_colors.scss
+- _sass/abstracts/variables/_spacing.scss
+- _sass/abstracts/variables/_transition.scss
+- _sass/abstracts/variables/_typography.scss
+- _sass/abstracts/variables/_z-index.scss
+- _sass/base/_all.scss
+- _sass/base/_normalize.scss
+- _sass/base/_typography.scss
+- _sass/components/_hero.scss
+- _sass/components/_nav.scss
+- _sass/components/_text-align.scss
+- _sass/layout/_gallery.scss
+- _sass/layout/_justified-p.scss
+- _sass/layout/_side-menu.scss
+- _sass/pages/_gallery.scss
 - _sass/pages/_home.scss
-- _sass/partials/base.scss
-- _sass/partials/side-menu.scss
+- _sass/themes/_beko-art.scss
+- _sass/themes/_purebred.scss
+- _sass/themes/_simpleton.scss
+- _sass/vendor/_bootstrap.scss
+- _sass/vendor/_dancing-script.scss
+- _sass/vendor/_normalize.scss
+- _sass/vendor/_purecss.scss
 - assets/css/style.scss
 homepage: https://gitlab.com/anwait/jekyll-theme-simpleton
 licenses:
@@ -100,7 +117,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubygems_version: 3.2.13
 signing_key:
 specification_version: 4
 summary: A very simple jekyll theme with almost no css.

data/_sass/modules/_all.scss

@@ -1,13 +0,0 @@
-@import "modules/breakpoints";
-@import "modules/colors";
-@import "modules/mixins";
-@import "modules/spacing";
-@import "modules/typography";
-
-// TODO move
-$hamburger-color: $black-color;
-$hamburger-margin: 0.5ex;
-$hamburger-height: 1ex;
-$hamburger-width: 2em;
-$hamburger-radius: 1ex;
-$clickable-cursor: pointer;

data/_sass/modules/_mixins.scss

@@ -1,13 +0,0 @@
-@mixin transition {
-  -webkit-transition: all 0.2s ease-out;
-  -moz-transition: all 0.2s ease-out;
-  -ms-transition: all 0.2s ease-out;
-  -o-transition: all 0.2s ease-out;
-  transition: all 0.2s ease-out;
-}
-
-@mixin media-query($breakpoint) {
-  @media screen and (min-width: $breakpoint) {
-    @content;
-  }
-}

data/_sass/modules/_spacing.scss

@@ -1 +0,0 @@
-$menu-width: 160px !default;

data/_sass/modules/_typography.scss

@@ -1 +0,0 @@
-$link-text-decoration: none;

data/_sass/partials/base.scss

@@ -1 +0,0 @@
-@import "modules/all";

data/_sass/partials/side-menu.scss

@@ -1,86 +0,0 @@
-#menu-container {
-  * {
-    transition: all 1s ease-out;
-  }
-
-  #menu-toggle {
-    display: none;
-
-    &:checked {
-      ~ #menu {
-        left: 0;
-      }
-
-      ~ #menu-icon {
-        background: green;
-        left: $menu-width;
-
-        span {
-          /* TODO */
-          &:first-child {
-            transform: rotate(135deg) translate(21px, -13px);
-          }
-
-          &:nth-child(2) {
-            opacity: 0;
-          }
-
-          &:last-child {
-            transform: rotate(-135deg) translate(3px);
-          }
-        }
-      }
-    }
-  } // #menu-toggle
-
-  #menu {
-    position: fixed;
-    top: 0;
-    left: -$menu-width;
-    bottom: 0;
-    background: $menu-background-color;
-    width: $menu-width;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
-
-    > * {
-      margin: 0.5em;
-    }
-
-    header {
-      display: flex;
-      flex-flow: row wrap;
-      justify-content: center;
-      text-align: center; /* DEBUG */
-    }
-
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
-    }
-
-    a {
-      color: $menu-text-color;
-      text-decoration: $link-text-decoration;
-      // margin: 1em;
-    }
-  } // #menu
-
-  #menu-icon {
-    position: fixed;
-    top: 0;
-    left: 0;
-
-    span {
-      display: block;
-      background: $hamburger-color;
-      margin: $hamburger-margin;
-      height: $hamburger-height;
-      width: $hamburger-width;
-      border-radius: $hamburger-radius;
-      cursor: $clickable-cursor;
-    }
-  } // #menu-icon
-} // #menu-container