RubyGems - pages_core - Versions diffs - 3.9.0 → 3.10.1 - Mend

pages_core 3.9.0 → 3.10.1

Files changed (54) hide show

data/lib/rails/generators/pages_core/frontend/templates/{layout.html.erb → application.html.erb} RENAMED Viewed

@@ -7,6 +7,9 @@
   <%# google_analytics_tags "UA-xxxxxxxx-1" %>
 <% end %>
 <body>
+  <% if Rails.env.development? %>
+    <div class="grid-overlay"></div>
+  <% end %>
   <%= yield %>
 </body>
 </html>

data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/GridOverlay.js ADDED Viewed

@@ -0,0 +1,66 @@
+class GridOverlay {
+  constructor() {
+    this.gridOverlay = null;
+    this.showGrid = false;
+    this.init = this.init.bind(this);
+  }
+  bindHotkey() {
+    document.addEventListener("keyup", (evt) => {
+      if (evt.ctrlKey && evt.which == 71) {
+        this.toggle();
+      }
+    });
+  }
+  init() {
+    this.gridOverlay = document.querySelector(".grid-overlay");
+    if (this.gridOverlay) {
+      this.restoreState();
+      this.bindHotkey();
+      this.updateDOM();
+    }
+  }
+  ready(callback) {
+    if (document.readyState === "complete" ||
+        (document.readyState !== "loading" &&
+         !document.documentElement.doScroll)) {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
+  }
+  restoreState() {
+    this.showGrid = window.localStorage.getItem("showGrid");
+  }
+  saveState() {
+    if (this.showGrid) {
+      window.localStorage.setItem("showGrid", "true");
+    } else {
+      window.localStorage.removeItem("showGrid");
+    }
+  }
+  start() {
+    this.ready(this.init);
+  }
+  toggle() {
+    this.showGrid = !this.showGrid;
+    this.saveState();
+    this.updateDOM();
+  }
+  updateDOM() {
+    if (this.showGrid) {
+      this.gridOverlay.classList.add("grid-overlay--active");
+    } else {
+      this.gridOverlay.classList.remove("grid-overlay--active");
+    }
+  }
+}
+export default new GridOverlay();

data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/ResponsiveEmbeds.js ADDED Viewed

@@ -0,0 +1,72 @@
+class ResponsiveEmbeds {
+  readyHandler(fn) {
+    if (document.readyState === "complete" || document.readyState === "interactive") {
+      setTimeout(fn, 1);
+    } else {
+      document.addEventListener("DOMContentLoaded", fn);
+    }
+  }
+  wrapEmbeds() {
+    let selectors = [ "iframe[src*=\"bandcamp.com\"]",
+                      "iframe[src*=\"player.vimeo.com\"]",
+                      "iframe[src*=\"youtube.com\"]",
+                      "iframe[src*=\"youtube-nocookie.com\"]",
+                      "iframe[src*=\"spotify.com\"]",
+                      "iframe[src*=\"kickstarter.com\"][src*=\"video.html\"]" ];
+    let embeds = Array.prototype.slice.call(
+      document.querySelectorAll(selectors.join(","))
+    );
+    function wrapEmbed(embed) {
+      const parent = embed.parentNode;
+      // Recycle the existing container if the embed is already responsive.
+      if (parent.tagName === "DIV" &&
+          parent.childNodes.length === 1 &&
+          parent.style.position === "relative") {
+        return parent;
+      }
+      let wrapper = document.createElement("div");
+      if (parent.tagName === "P") {
+        parent.parentNode.replaceChild(wrapper, parent);
+      } else {
+        parent.replaceChild(wrapper, embed);
+      }
+      wrapper.appendChild(embed);
+      return wrapper;
+    }
+    embeds.forEach(function (embed) {
+      if (embed.parentNode &&
+          embed.parentNode.classList.contains("responsive-embed")) {
+        return;
+      }
+      let width = embed.offsetWidth;
+      let height = embed.offsetHeight;
+      let ratio = height / width;
+      let wrapper = wrapEmbed(embed);
+      wrapper.classList.add("responsive-embed");
+      wrapper.style.position = "relative";
+      wrapper.style.width = "100%";
+      wrapper.style.paddingTop = 0;
+      wrapper.style.paddingBottom = (ratio * 100) + "%";
+      embed.style.position = "absolute";
+      embed.style.width = "100%";
+      embed.style.height = "100%";
+      embed.style.top = "0";
+      embed.style.left = "0";
+    });
+  }
+  start() {
+    this.readyHandler(() => this.wrapEmbeds());
+  }
+}
+export default new ResponsiveEmbeds();

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/application.sass.scss ADDED Viewed

@@ -0,0 +1,15 @@
+// Entry point for your Sass build
+@import
+'vendor/normalize',
+'config',
+'framework/breakpoints',
+'framework/clearfix',
+'framework/grid',
+'framework/grid_overlay',
+'framework/fonts',
+'global/colors',
+'global/typography',
+'components/base';

data/lib/rails/generators/pages_core/frontend/templates/{base.scss.erb → stylesheets/components/base.scss} RENAMED Viewed

@@ -1,3 +1,12 @@
 *, *:before, *:after {
   -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
+figure {
+  padding: 0px;
+  margin: 0px;
+}
+img {
+  display: block;
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/config.scss ADDED Viewed

@@ -0,0 +1,26 @@
+$breakpoints: (mobile: 900px,
+               large: 1400px);
+$grids : (default: (column-count: 12,
+                    column: 94px,
+                    gutter: 24px,
+                    padding: 24px),
+          mobile: (column-count: 4,
+                   column: 60px,
+                   gutter: 16px,
+                   padding: 16px));
+$spacings: (1: 8px,
+            2: 16px,
+            3: 24px,
+            4: 32px,
+            5: 40px,
+            6: 48px,
+            8: 64px,
+            9: 72px,
+            10: 80px,
+            16: 128px,
+            20: 160px);
+// Uncomment to limit full width
+// $limit-width: 1600px;

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/breakpoints.scss ADDED Viewed

@@ -0,0 +1,42 @@
+// ---- Defaults --------------------------------------------------------------
+$breakpoints: (mobile: 900px,
+               large: 1400px) !default;
+// ---- Mixins ----------------------------------------------------------------
+@function breakpoint-value($value) {
+  @if type-of($value) == "string" {
+    @return map-get($breakpoints, $value);
+  }
+  @else {
+    @return $value;
+  }
+}
+@mixin breakpoint($min: "", $max: "", $orientation: "") {
+  $query: "screen";
+  @if $min != "" {
+    $query: $query + ' and (min-width: #{breakpoint-value($min)})';
+  }
+  @if $max != "" {
+    $query: $query + ' and (max-width: #{breakpoint-value($max)})';
+  }
+  @if $orientation != "" {
+    $query: $query + ' and (orientation: #{$orientation})';
+  }
+  @media #{$query} {
+    @content;
+  }
+}
+@mixin mobile {
+  @include breakpoint($max: mobile) {
+    @content
+  }
+}

data/lib/rails/generators/pages_core/frontend/templates/{clearfix.scss.erb → stylesheets/framework/clearfix.scss} RENAMED Viewed

File without changes

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/fonts.scss ADDED Viewed

@@ -0,0 +1,32 @@
+@use "sass:list";
+@function font-extension($format) {
+  $font-extensions: (opentype: "otf", truetype: "ttf");
+  $value: map-get($font-extensions, $format);
+  @if $value {
+    @return $value;
+  }
+  @else {
+    @return $format;
+  }
+}
+@function font-sources($filename, $formats: ()) {
+  $urls: ();
+  @each $f in list.join((woff2 woff), $formats) {
+    $urls: list.append(
+      $urls,
+      url("#{$filename}.#{font-extension($f)}") format("#{$f}")
+    );
+  }
+  @return list.join($urls, (), comma);
+}
+@mixin font-face($name, $filename, $weight: 400, $style: normal, $formats: ()) {
+  @font-face {
+    font-family: $name;
+    font-style: $style;
+    font-weight: $weight;
+    src: font-sources($filename, $formats);
+  }
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/grid.scss ADDED Viewed

@@ -0,0 +1,168 @@
+@use "sass:math";
+// ---- Defaults --------------------------------------------------------------
+$base-font-size: 16px !default;
+$grids : (default: (column-count: 12,
+                    column: 94px,
+                    gutter: 24px,
+                    padding: 24px),
+          mobile: (column-count: 4,
+                   column: 60px,
+                   gutter: 16px,
+                   padding: 16px)) !default;
+$spacings: (1: 12px,
+            2: 24px,
+            4: 40px,
+            8: 80px) !default;
+// Uncomment to limit full width
+// $limit-width: 1600px !default;
+// ---- Grid and sizing -------------------------------------------------------
+@function grid-value($grid, $name) {
+  @return map-get(map-get($grids, $grid), $name);
+}
+// Inner width: Size of $grid in px, excluding outer padding
+@function inner-width($grid: default) {
+  @return (grid-value($grid, column-count) * grid-value($grid, column)) +
+          ((grid-value($grid, column-count) - 1) * grid-value($grid, gutter));
+}
+// Full width in px including padding
+@function full-width($grid: default) {
+  @return inner-width($grid) + (grid-value($grid, padding) * 2);
+}
+@function px-to-percent($size, $grid: default) {
+  @return percentage(math.div($size, full-width($grid)));
+}
+@function px-to-vw($size, $grid: default) {
+  @return (math.div($size, full-width($grid)) * 100) * 1vw;
+}
+@function relative-size($size-px, $container: 100%, $grid: default) {
+  @if unit($container) == '%' {
+    $container: (inner-width($grid) * math.div($container, 100%));
+  }
+  @if (unit($container) != "px") {
+    $container: columns-px($container, $grid: $grid);
+  }
+  @return percentage(math.div($size-px, $container));
+}
+@function rem-calc($value, $grid: default) {
+  @if unit($value) == "rem" {
+    @return $value;
+  }
+  // Assume px for values without units
+  @if unit($value) == "" {
+    $value: $value * 1px;
+  }
+  // Convert percentage to px
+  @if unit($value) == "%" {
+    $value: full-width($grid) * math.div($value, 100%);
+  }
+  @return math.div($value, $base-font-size) * 1rem;
+}
+@function spacing($key) {
+  @return rem-calc(map-get($spacings, $key));
+}
+// Width of gutter in px
+@function gutter-px($grid: default) {
+  @return grid-value($grid, gutter);
+}
+// Width of $n columns in px
+@function columns-px($n: 1, $grid: default) {
+  @return grid-value($grid, column) * $n + ((ceil($n) - 1) * gutter-px($grid));
+}
+// Gutter width, optionally relative to size of $container
+@function gutter($container: 100%, $grid: default) {
+  @return relative-size(gutter-px($grid: $grid), $container, $grid: $grid);
+}
+// Width of $n columns as a percentage of $container.
+@function columns($n: 1, $container: 100%, $grid: default) {
+  @return relative-size(columns-px($n, $grid: $grid), $container, $grid: $grid);
+}
+// Equal to columns($n) + gutter()
+@function columns-and-gutter($n: 1, $container: 100%, $grid: default) {
+  @return columns($n, $container, $grid) + gutter($container, $grid);
+}
+@function grid-adjust($size, $columns: $total-columns, $grid: default) {
+  @return math.div($sizem math.div(columns($columns, $grid: $grid), 100%));
+}
+@function outer-padding($grid: default) {
+  @return px-to-percent(grid-value($grid, padding), $grid: $grid);
+}
+@function limit-width-scale($value) {
+  @return $value * math.div($limit-width, full-width());
+}
+// ---- Styles ----------------------------------------------------------------
+@mixin mobile-full {
+  @include mobile {
+    width: 100%;
+    margin-left: 0px;
+    margin-right: 0px;
+    float: none;
+    @content;
+  }
+}
+@mixin mobile-offset {
+  @include mobile {
+    $offset: px-to-percent(grid-value(mobile, padding), $grid: mobile);
+    width: 100% + $offset;
+    margin-left: 0 - math.div($offset, 2);
+    margin-right: 0 - math.div($offset, 2);
+  }
+}
+@mixin grid-container-inner {
+  margin: 0px auto;
+  @if variable-exists(limit-width) {
+    @include breakpoint($min: rem-calc($limit-width)) {
+      max-width: rem-calc(limit-width-scale(inner-width()));
+    }
+  }
+}
+@mixin grid-container {
+  padding-left: outer-padding();
+  padding-right: outer-padding();
+  @include mobile {
+    padding-left: outer-padding(mobile);
+    padding-right: outer-padding(mobile);
+  }
+  @media print {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+  .inner {
+    @include grid-container-inner;
+  }
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/grid_overlay.scss ADDED Viewed

@@ -0,0 +1,44 @@
+$grid-overlay-color: rgba(255, 0, 255, 0.05) !default;
+@function grid-background($grid: default) {
+  $gradient: ();
+  @for $i from 1 to grid-value($grid, column-count) {
+    $gradient: join($gradient,
+                    ($grid-overlay-color columns($i, $grid: $grid),
+                     transparent columns($i, $grid: $grid),
+                     transparent columns-and-gutter($i, $grid: $grid),
+                     $grid-overlay-color (columns-and-gutter($i, $grid: $grid))),
+                    comma);
+  }
+  @return linear-gradient(to right, #{$gradient});
+}
+.grid-overlay {
+  position: fixed;
+  z-index: 9000;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-image: grid-background(default);
+  background-size: px-to-percent(inner-width(default)) 100%;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  pointer-events: none;
+  display: none;
+  @if variable-exists(limit-width) {
+    @include breakpoint($min: rem-calc($limit-width)) {
+      background-size: rem-calc(limit-width-scale(inner-width())) 100%;
+    }
+  }
+  @include mobile {
+    background-image: grid-background(mobile);
+    background-size: px-to-percent(inner-width(mobile), $grid: mobile) 100%;
+  }
+  &--active {
+    display: block;
+  }
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/colors.scss ADDED Viewed

@@ -0,0 +1,8 @@
+$colors: (background:        #ffffff,
+          text:              #000000,
+          text-light:        #a1a1a1,
+          border:            #e0e0e0);
+@function color($name) {
+  @return map-get($colors, $name);
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/typography.scss ADDED Viewed

@@ -0,0 +1,90 @@
+$font-sans: 'Helvetica', sans-serif;
+// ---- Mixins ----------------------------------------------------------------
+@mixin child-margins {
+  &:first-child {
+    margin-top: 0px;
+  }
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+// ---- Definitions -----------------------------------------------------------
+%text-larger { font: normal 72px/1.00 $font-sans; }
+%text-large  { font: normal 54px/1.04 $font-sans; }
+%text-medium { font: normal 24px/1.25 $font-sans; }
+%text-normal { font: normal 16px/1.50 $font-sans; }
+%text-small  { font: normal 14px/1.5 $font-sans; }
+@include mobile {
+  %text-large  { font: normal 32px/1.13 $font-sans; }
+  %text-medium { font: normal 22px/1.27 $font-sans; }
+  %text-normal { font: normal 16px/1.31 $font-sans; }
+  %text-small-mobile,
+  %text-small { font: normal 13px/1.31 $font-sans; }
+}
+// ---- Rules -----------------------------------------------------------------
+body {
+  @extend %text-normal;
+}
+h1, h2, h3, h4, h5, h6, ul, ol, p {
+  margin: 0px 0px spacing(2) 0px;
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+h1 {
+  @extend %text-larger;
+}
+h2 {
+  @extend %text-large;
+  margin-top: spacing(10);
+  margin-bottom: spacing(10);
+  @include mobile {
+    margin-top: spacing(5);
+    margin-bottom: spacing(5);
+  }
+  @include child-margins;
+}
+h3 {
+  @extend %text-medium;
+  margin-top: spacing(5);
+  margin-bottom: spacing(5);
+  @include child-margins;
+}
+h4 {
+  font: inherit;
+  margin-top: spacing(5);
+  margin-bottom: 0px;
+  @include child-margins;
+}
+a, a:visited {
+  text-decoration: underline;
+}
+h1, h2, h3 {
+  a, a:visited {
+    text-decoration: none;
+  }
+  a:hover, a:focus {
+    text-decoration: underline;
+  }
+}
+figcaption {
+  @extend %text-small;
+  margin-top: spacing(2);
+}