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

pages_core 3.9.0 → 3.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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);
+}