pages_core 3.12.0 → 3.12.2

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/base.css

@@ -0,0 +1,24 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+.responsive-embed,
+figure.image {
+  margin: 2rem 0rem;
+  @mixin child-margins;
+}
+
+figure.image {
+  width: 100%;
+  padding: 0rem;
+
+  & img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}
+
+img {
+  display: block;
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/layout.css

@@ -0,0 +1,21 @@
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+footer {
+  margin-top: auto;
+}
+
+header,
+main,
+footer {
+  padding-left: var(--outer-padding);
+  padding-right: var(--outer-padding);
+  & .inner {
+    @mixin grid-container;
+    max-width: var(--grid-limit, 100%);
+    margin: 0px auto;
+  }
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/config.css

@@ -0,0 +1,5 @@
+$breakpoint-mobile-small: 479;
+
+@custom-media --tablet screen and (max-width: 991px);
+@custom-media --mobile screen and (max-width: 767px);
+@custom-media --mobile-small screen and (max-width: $(breakpoint-mobile-small)px);

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/animation.css

@@ -0,0 +1,5 @@
+:root {
+  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-back: cubic-bezier(.35,1.47,.64,1);
+  scroll-behavior: smooth;
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/colors.css

@@ -0,0 +1,18 @@
+:root {
+  --black: #000000;
+  --white: #ffffff;
+  --blue:  #0000ff;
+
+  --background-color:  var(--white);
+  --text-color:        var(--black);
+  --link-color:        var(--blue);
+}
+
+body {
+  background: var(--background-color);
+  color: var(--text-color);
+}
+
+a, a:visited {
+  color: var(--link-color);
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/fonts.css

@@ -0,0 +1,6 @@
+/*
+@font-face { font-family: "Example";
+             font-style: normal;
+             font-weight: 300;
+             src: url("Example-Regular.woff") format("woff"); }
+*/

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/grid.css

@@ -0,0 +1,65 @@
+@define-mixin grid-container {
+  display: grid;
+  grid-template-columns: repeat(var(--columns), 1fr);
+  grid-column-gap: var(--gutter);
+}
+
+@define-mixin grid-limit $limit {
+  @media screen and (min-width: $limit) {
+    --grid-limit: calc($limit - (var(--outer-padding) * 2));
+  }
+}
+
+:root {
+  --columns: 12;
+  --gutter: 2rem;
+  --outer-padding: 2rem;
+
+  @media (--tablet) {
+    //--columns: 9;
+    --gutter: 1.5rem;
+    --outer-padding: 1.5rem;
+  }
+
+  @media (--mobile) {
+    --columns: 4;
+    --outer-padding: 1rem;
+  }
+
+  @media print {
+    --outer-padding: 0px;
+  }
+
+  --column-width: calc(
+    (100% -
+     ((var(--gutter) * (var(--columns) - 1)) + (var(--outer-padding) * 2))) /
+    var(--columns)
+  );
+
+  /* @mixin grid-limit 1400px; */
+}
+
+.grid-overlay {
+  display: none;
+}
+
+.grid-overlay--active {
+  --grid-overlay-width: var(--grid-limit,
+                            calc(100% - (var(--outer-padding) * 2)));
+  display: block;
+  position: fixed;
+  z-index: 9000;
+  top: 0px;
+  width: var(--grid-overlay-width);
+  left: 50%;
+  margin-left: calc(var(--grid-overlay-width) / 2 * -1);
+  height: 100%;
+  pointer-events: none;
+  background: linear-gradient(
+    to right,
+    var(--grid-overlay-gutter, transparent) var(--gutter),
+    var(--grid-overlay-column, rgba(255, 0, 255, 0.05)) var(--gutter)
+  );
+  background-size: calc((100% + var(--gutter)) / var(--columns, 12)) 100%;
+  background-position: top 0px left calc(var(--gutter) * -1);
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/typography.css

@@ -0,0 +1,131 @@
+/* ---- Mixins ------------------------------------------------------------- */
+
+@define-mixin child-margins {
+  &:first-child {
+    margin-top: 0px;
+  }
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+@define-mixin font-scale-base {
+  --font-scale-coeff: calc((var(--font-scale-to) - var(--font-scale-from)) /
+                           ((var(--font-scale-end) / 100) -
+                            (var(--font-scale-start) / 100)));
+
+  font-size: calc(calc((var(--font-scale-from) -
+                        (var(--font-scale-start) / 100) *
+                        var(--font-scale-coeff)) /
+                       16) * 1rem +
+                  var(--font-scale-coeff) * 1vw);
+}
+
+@define-mixin font-scale $from, $to, $start, $end {
+  --font-scale-from: $from;
+  --font-scale-to: $to;
+  --font-scale-start: $start;
+  --font-scale-end: $end;
+}
+
+
+/* ---- Definitions -------------------------------------------------------- */
+
+:root {
+  --font-sans: Helvetica, sans-serif;
+
+  --font-larger:   500     2.0rem/1.1 var(--font-sans);
+  --font-large:    500     1.5rem/1.1 var(--font-sans);
+  --font-medium:   500     1.5rem/1.1 var(--font-sans);
+  --font-normal:   normal 1.25rem/1.1 var(--font-sans);
+  --font-small:    normal  1.0rem/1.1 var(--font-sans);
+
+  @media (--tablet) {
+    /*
+    --font-larger:   500     1.5rem/1.1 var(--font-sans);
+    --font-large:    500     1.5rem/1.1 var(--font-sans);
+    --font-medium:   500     1.125rem/1.1 var(--font-sans);
+    */
+  }
+}
+
+
+/* ---- Font scale --------------------------------------------------------- */
+
+html {
+  @mixin font-scale-base;
+  @mixin font-scale 16, 18, 1440, 1920;
+  @media screen and (max-width: 1440px) {
+    @mixin font-scale 14, 16, $breakpoint-mobile-small, 1440;
+  }
+  @media --mobile-small {
+    @mixin font-scale 12, 16, 1, $breakpoint-mobile-small;
+  }
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: 100%;
+}
+
+
+/* ---- Rules -------------------------------------------------------------- */
+
+h1, h2, h3, h4, h5, h6, p, ul, ol {
+  margin: 1rem 0rem;
+  @mixin child-margins;
+}
+
+h1, h2, h3, h4, h5, h6, p, ul, ol,
+figcaption, blockquote {
+  max-width: 60ch;
+}
+
+ul, ol, blockquote {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  @mixin child-margins;
+}
+
+main {
+  font: var(--font-normal);
+}
+
+h1 {
+  font: var(--font-larger);
+}
+
+h2 {
+  font: var(--font-large);
+  margin-top: 2rem;
+  @mixin child-margins;
+}
+
+h3 {
+  font: var(--font-medium);
+  margin-top: 2rem;
+  @mixin child-margins;
+}
+
+h4 {
+  font: var(--font-normal);
+}
+
+h5 {
+  font: var(--font-smaller);
+}
+
+h6 {
+  font: var(--font-smallest);
+}
+
+blockquote {
+  font: var(--font-medium);
+  margin: 2rem 0rem;
+  @mixin child-margins;
+}
+
+figcaption {
+  margin-top: 0.5rem;
+  font: var(--font-small);
+}

data/lib/rails/generators/pages_core/install/templates/pages_initializer.rb

@@ -13,9 +13,6 @@ PagesCore.configure do |config|
   # Locales and names
   # config.locales(nb: 'Norwegian', en: 'English')
 
-  # Fulltext in RSS feeds (default: disabled)
-  # config.rss_fulltext :disabled
-
   # New pages will be created by the user with this email address:
   # config.default_author "email@example.com"