minima-gutenberg 0.1.0

data/_layouts/page.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+<article class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title | escape }}</h1>
+  </header>
+
+  <div class="post-content">
+    {{ content }}
+  </div>
+
+</article>

data/_layouts/post.html

@@ -0,0 +1,27 @@
+---
+layout: default
+---
+<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+    <p class="post-meta">
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+        {{ page.date | date: date_format }}
+      </time>
+      {%- if page.author -%}
+        • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
+      {%- endif -%}</p>
+  </header>
+
+  <div class="post-content e-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  {%- if site.disqus.shortname -%}
+    {%- include disqus_comments.html -%}
+  {%- endif -%}
+
+  <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
+</article>

data/_sass/_gutenberg.scss

@@ -0,0 +1,125 @@
+/* Configuration
+   ========================================================================== */
+
+$edit-mode: true !default; // [ true / false ] - Enables/disables the grid toggle button.
+
+// Theme / Fonts
+$theme: Merriweather !default; // [ Merriweather / OpenSans / custom ]
+$custom-font-body: null !default; // [ "Libre Baskerville", Georgia, serif ]
+$custom-font-headings: null !default;
+
+// Paragraph indenting
+$paragraph-indent: false !default; // [ true / false ]
+
+// Base sizes
+$base-font-size: 100 !default; // In %. Also used for mobile. Number only, no units.
+$base-font-size-desktop: 112.5 !default; // In %. Used to calculate the desktop font size. Number only, no units.
+$line-height: 1.625 !default;
+$line-height-desktop: 1.7 !default;
+$max-width: 35 !default; // Number only, no units. Gets converted to REMs and pixels.
+
+// Modular Scale
+$modular-scale: (
+  xxxl: 4.3,
+  xxl: 3.5,
+  xl: 3,
+  l: 2.5,
+  m: 2,
+  s: 1.6875,
+  xs: 1.4375,
+  xxs: 1.2,
+  xxxs: 1,
+  xxxxs: 0.8125
+) !default;
+
+// Colors
+$color-font-body: #222 !default;
+$color-font-headings: $color-font-body !default;
+$color-font-light: #888 !default;
+$color-font-figcaption: $color-font-body !default;
+
+/* Calculations
+   ========================================================================== */
+
+// Mobile base & leading
+$base: 16 * ($base-font-size / 100);
+$leading: round($base * $line-height);
+$leading-rem: $leading / $base;
+
+// Desktop base & leading
+$base-desktop: 16 * ($base-font-size-desktop / 100);
+$leading-desktop: round($base-desktop * $line-height-desktop);
+$leading-rem-desktop: $leading-desktop / $base-desktop;
+
+/* Font themes
+   ========================================================================== */
+
+$font-body: null;
+$font-headings: null;
+
+@if $theme == Merriweather {
+
+  // Import Merriweather
+  @import url("https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic");
+
+  // Set body font
+  $font-body: Merriweather, Georgia, serif;
+
+}
+@else if $theme == OpenSans {
+
+  // Import Open Sans
+  @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic");
+
+  // Set body font
+  $font-body: Open Sans, Arial, Helvetica, Sans-serif;
+
+}
+@else if $theme == custom {
+
+  // Set custom body font
+  $font-body: $custom-font-body;
+
+  // Set custom headings font
+  @if $custom-font-headings != $custom-font-body {
+    $font-headings: $custom-font-headings;
+  }
+}
+
+// Import partials.
+@import
+  "gutenberg/mixins/font-size",
+  "gutenberg/mixins/line-height",
+  "gutenberg/mixins/margin",
+  "gutenberg/mixins/padding",
+
+  "gutenberg/helpers/alignment",
+  "gutenberg/helpers/grid",
+
+  "gutenberg/layout/aside",
+  "gutenberg/layout/base",
+  "gutenberg/layout/footer",
+  "gutenberg/layout/header",
+  "gutenberg/layout/main",
+  "gutenberg/layout/section",
+
+  "gutenberg/modules/anchor",
+  "gutenberg/modules/article",
+  "gutenberg/modules/audio",
+  "gutenberg/modules/canvas",
+  "gutenberg/modules/code",
+  "gutenberg/modules/details",
+  "gutenberg/modules/figure",
+  "gutenberg/modules/form",
+  "gutenberg/modules/heading",
+  "gutenberg/modules/horizontal-rule",
+  "gutenberg/modules/image",
+  "gutenberg/modules/list",
+  "gutenberg/modules/navigation",
+  "gutenberg/modules/progress",
+  "gutenberg/modules/quote",
+  "gutenberg/modules/table",
+  "gutenberg/modules/template",
+  "gutenberg/modules/text",
+  "gutenberg/modules/video"
+;

data/_sass/gutenberg/helpers/_alignment.scss

@@ -0,0 +1,25 @@
+// Float defaults
+.floatLeft {
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    float: left;
+  }
+
+}
+
+.floatCenter {
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+}
+
+.floatRight {
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    float: right;
+  }
+
+}

data/_sass/gutenberg/helpers/_grid.scss

@@ -0,0 +1,95 @@
+/* Grid
+   ========================================================================== */
+
+// Grid background
+.grid {
+  background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px);
+  background-position: left top;
+  background-repeat: repeat;
+  background-size: 100% #{$leading + 'px'};
+  background-size: 100% #{$leading-rem + 'rem'};
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    $leading: $leading-desktop;
+    $leading-rem: $leading-rem-desktop;
+
+    background-size: 100% #{$leading + 'px'};
+    background-size: 100% #{$leading-rem + 'rem'};
+  }
+
+}
+
+// Double grid background
+.grid-double {
+  @extend .grid;
+  background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px, transparent #{ .5 * $leading + 'px'}, hsla(200, 100%, 50%, .2) #{ .5 * $leading + 'px'}, transparent #{ .5 * $leading + 1 + 'px'}, transparent #{$leading + 'px'});
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    $leading: $leading-desktop;
+    $leading-rem: $leading-rem-desktop;
+
+    background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px, transparent #{ .5 * $leading + 'px'},  hsla(200, 100%, 50%, .2) #{ .5 * $leading + 'px'}, transparent #{ 0.5 * $leading + 1 + 'px'}, transparent #{$leading + 'px'});
+  }
+
+}
+
+// Grid button
+.toggleWrapper {
+  @if $edit-mode == true {
+    display: block;
+  } @else if $edit-mode == false {
+    display: none;
+  }
+  position: fixed;
+  top: #{$leading + 'px'};
+  right: #{$leading + 'px'};
+  background-color: #231F20;
+  border-radius: 25px;
+  padding: 0 10px 0 20px;
+  height: 32px;
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    right: #{$leading-desktop + 'px'};
+    top: #{$leading-desktop + 'px'};
+  }
+
+}
+
+.btnToggleGrid {
+  background: url("../../assets/images/grid-icons.png") top right no-repeat;
+  background-size: 32px;
+  display: block;
+  font-size: 14px;
+  text-decoration: none;
+  padding-right: 35px;
+  height: 32px;
+  line-height: 34px;
+  font-family: Helvetica, Arial, sans-serif;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: #fff;
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    $leading: $leading-desktop;
+    $leading-rem: $leading-rem-desktop;
+
+    top: #{$leading + 'px'};
+    right: #{$leading + 'px'};
+  }
+
+  &:hover {
+    color: #fff;
+  }
+
+  &:active {
+    color: #f00;
+  }
+}
+
+.double-grid {
+  background-position-y: -32px;
+}
+
+.grid-off {
+  background-position-y: -64px;
+}

data/_sass/gutenberg/layout/_aside.scss

@@ -0,0 +1,3 @@
+aside {
+  display: block;
+}

data/_sass/gutenberg/layout/_base.scss

@@ -0,0 +1,62 @@
+/* Defaults
+   ========================================================================== */
+
+body,
+html {
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    margin: 0;
+    width: 100%;
+    max-width: none;
+  }
+
+}
+
+// Font defaults
+html {
+  box-sizing: border-box;
+  font-size: #{$base + 'px'};
+  font-size: #{$base-font-size + '%'};
+  font-family: $font-body;
+  color: $color-font-body;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    font-size: #{$base-desktop + 'px'};
+    font-size: #{$base-font-size-desktop / 100 + 'rem'};
+  }
+
+}
+
+// Line-height & margin reset
+* {
+  @include line-height(1);
+  @include margin(0, 0, 1);
+
+  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
+    $leading: $leading-desktop;
+    $leading-rem: $leading-rem-desktop;
+
+    @import '../mixins/line-height';
+    @import '../mixins/margin';
+
+    @include line-height(1);
+    @include margin-bottom(1);
+    max-width: #{$max-width * $base-desktop + 'px'};
+    max-width: #{$max-width + 'rem'};
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+}

data/_sass/gutenberg/layout/_footer.scss

@@ -0,0 +1,9 @@
+footer {
+  display: block;
+
+  body > & {
+    margin: 0 auto;
+    width: 80%;
+  }
+
+}

data/_sass/gutenberg/layout/_header.scss

@@ -0,0 +1,3 @@
+header {
+  display: block;
+}

data/_sass/gutenberg/layout/_main.scss

@@ -0,0 +1,3 @@
+main {
+  display: block;
+}

data/_sass/gutenberg/layout/_section.scss

@@ -0,0 +1,3 @@
+section {
+  display: block;
+}

data/_sass/gutenberg/mixins/_font-size.scss

@@ -0,0 +1,5 @@
+// Font-size
+@mixin font-size($number) {
+  font-size: #{ $number * $base + 'px'};
+  font-size: #{ $number + 'rem'};
+}

data/_sass/gutenberg/mixins/_line-height.scss

@@ -0,0 +1,5 @@
+// Line-height
+@mixin line-height($number) {
+  line-height: #{ $number * $leading + 'px'};
+  line-height: #{ $number * $leading-rem + 'rem'};
+}

data/_sass/gutenberg/mixins/_margin.scss

@@ -0,0 +1,25 @@
+// Margin-top
+@mixin margin-top($number) {
+  margin-top: #{ $number * $leading + 'px'};
+  margin-top: #{ $number * $leading-rem + 'rem'};
+}
+
+// Margin-bottom
+@mixin margin-bottom($number) {
+  margin-bottom: #{ $number * $leading + 'px'};
+  margin-bottom: #{ $number * $leading-rem + 'rem'};
+}
+
+// Margin
+@mixin margin($top, $right, $bottom:null, $left:null) {
+  @if $left == null and $bottom == null {
+    margin: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'};
+    margin: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'};
+  } @else if $left == null or $left == $right {
+    margin: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'} #{ $bottom * $leading + 'px'};
+    margin: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'} #{ $bottom * $leading-rem + 'rem'};
+  } @else {
+    margin: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'} #{ $bottom * $leading + 'px'} #{ $left * $leading + 'px'};
+    margin: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'} #{ $bottom * $leading-rem + 'rem'} #{ $left * $leading-rem + 'rem'};
+  }
+}

data/_sass/gutenberg/mixins/_padding.scss

@@ -0,0 +1,27 @@
+// padding
+@mixin padding($top, $right, $bottom:null, $left:null) {
+  @if $left == null and $bottom == null {
+    padding: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'};
+    padding: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'};
+  } @else if $left == null or $left == $right {
+    padding: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'} #{ $bottom * $leading + 'px'};
+    padding: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'} #{ $bottom * $leading-rem + 'rem'};
+  } @else {
+    padding: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'} #{ $bottom * $leading + 'px'} #{ $left * $leading + 'px'};
+    padding: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'} #{ $bottom * $leading-rem + 'rem'} #{ $left * $leading-rem + 'rem'};
+  }
+
+  // padding-top: #{ $top * $leading + 'px'};
+ //    padding-top: #{ $top * $leading-rem + 'rem'};
+ //    padding-right: #{ $right * $leading + 'px'};
+ //    padding-right: #{ $right * $leading-rem + 'rem'};
+  // padding-bottom: #{ $bottom * $leading + 'px'};
+ //    padding-bottom: #{ $bottom * $leading-rem + 'rem'};
+ //    padding-left: #{ $left * $leading + 'px'};
+ //    padding-left: #{ $left * $leading-rem + 'rem'};
+}
+
+@mixin padding-equal($number) {
+  padding: #{ $number * $leading + 'px'};
+  padding: #{ $number * $leading-rem + 'rem'};
+}