jekyll-theme-primer 0.5.3 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ec5a67e45b9e2b321b41ef5dd227b9c377a0146810029fabd0a3e484d1071a30
-  data.tar.gz: 289173407e1deedb5a1fdfe42cad3699f988d110a26d0e12fcbcd3c4bb34f741
+  metadata.gz: 16e730cf781c1ca7e6207cf9997e7208244de27b37c0e603e4e4309fa3db0be0
+  data.tar.gz: 25ca151cf575a9bf828f7db9f1edbab4f7a8183432b36b99bdc2b4a3e2899efe
 SHA512:
-  metadata.gz: 077e5dd00dec2db8a39ae2e905ecc7bf02a9d24bcff13756870be85ea46b63fc4e991359c2ade2323fb2de96cd04e75d532cc1fa2de0556d08fbaee93332e331
-  data.tar.gz: 5034d1ede97ed04a2b39ffeb2adbefafe5fe1fd948c47255e71b08f75d405b532f9da9904f8c8d90d8571c0ee964ae0e29e1743eaad427846d9ec62283baf67e
+  metadata.gz: 796102aa486c59b5dd67dc5a72128785de7ab45bf56c9075db425fd3504ff5bb8b7efa3c7096265999302b7d166813ba731fe7c92b0ff52ffda6f35db2ca623c
+  data.tar.gz: daa0adf9f486eda1bff2007ff39d03b23d87d940b6cb8ec8761bdb48355246d2131d0edb983a0df88f49a21ad4947fcda8c27f4adba1c2a429206c293c5c9240

data/README.md

@@ -6,6 +6,8 @@
 
 ## Usage
 
+> **_NOTE:_** Primer is now the default theme for GitHub Pages, but you can still specify the theme you're using as below.
+
 To use the Primer theme:
 
 1. Add the following to your site's `_config.yml`:
@@ -72,7 +74,7 @@ The Primer theme is intended to make it quick and easy for GitHub Pages users to
 
 ## Contributing
 
-Interested in contributing to Primer? We'd love your help. Primer is an open source project, built one contribution at a time by users like you. See [the CONTRIBUTING file](CONTRIBUTING.md) for instructions on how to contribute.
+Interested in contributing to Primer? We'd love your help. Primer is an open source project, built one contribution at a time by users like you. See [the CONTRIBUTING file](docs/CONTRIBUTING.md) for instructions on how to contribute.
 
 ### Previewing the theme locally
 

data/_layouts/home.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+{{ content }}

data/_layouts/page.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+{{ content }}

data/_sass/primer-base/lib/base.scss

@@ -68,6 +68,12 @@ button {
   border-radius: 0;
 }
 
+// increase the selector specificity for [hidden]
+// so that it always overrides utility classes (.d-block, etc.)
+[hidden][hidden] {
+  display: none !important;
+}
+
 details {
   summary { cursor: pointer; }
 

data/_sass/primer-base/lib/normalize.scss

@@ -82,7 +82,7 @@ progress {
 
 template, /* 1 */
 [hidden] {
-  display: none;
+  display: none !important;
 }
 
 /* Links

data/_sass/primer-layout/lib/grid-offset.scss

@@ -1,30 +1,19 @@
 // Optional offset options to work with grid.scss
 
 // Offset Columns
-.offset-1 { margin-left: (1 / 12 * 100%); }
-.offset-2 { margin-left: (2 / 12 * 100%); }
-.offset-3 { margin-left: (3 / 12 * 100%); }
-.offset-4 { margin-left: (4 / 12 * 100%); }
-.offset-5 { margin-left: (5 / 12 * 100%); }
-.offset-6 { margin-left: (6 / 12 * 100%); }
-.offset-7 { margin-left: (7 / 12 * 100%); }
-.offset-8 { margin-left: (8 / 12 * 100%); }
-.offset-9 { margin-left: (9 / 12 * 100%); }
-.offset-10 { margin-left: (10 / 12 * 100%); }
-.offset-11 { margin-left: (11 / 12 * 100%); }
 
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    .offset-#{$breakpoint}-1 { margin-left: (1 / 12 * 100%); }
-    .offset-#{$breakpoint}-2 { margin-left: (2 / 12 * 100%); }
-    .offset-#{$breakpoint}-3 { margin-left: (3 / 12 * 100%); }
-    .offset-#{$breakpoint}-4 { margin-left: (4 / 12 * 100%); }
-    .offset-#{$breakpoint}-5 { margin-left: (5 / 12 * 100%); }
-    .offset-#{$breakpoint}-6 { margin-left: (6 / 12 * 100%); }
-    .offset-#{$breakpoint}-7 { margin-left: (7 / 12 * 100%); }
-    .offset-#{$breakpoint}-8 { margin-left: (8 / 12 * 100%); }
-    .offset-#{$breakpoint}-9 { margin-left: (9 / 12 * 100%); }
-    .offset-#{$breakpoint}-10 { margin-left: (10 / 12 * 100%); }
-    .offset-#{$breakpoint}-11 { margin-left: (11 / 12 * 100%); }
+    .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
+    .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
+    .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
+    .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
+    .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
+    .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
+    .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
+    .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
+    .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
+    .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
+    .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
   }
 }

data/_sass/primer-support/lib/mixins/layout.scss

@@ -1,21 +1,27 @@
 // Responsive media queries
 
 @mixin breakpoint($breakpoint) {
-  // Retrieves the value from the key
-  $value: map-get($breakpoints, $breakpoint);
-
-  // If the key exists in the map
-  @if $value != null {
-    // Prints a media query based on the value
-    @media (min-width: $value) {
-      @content;
-    }
+  @if $breakpoint == "" {
+    @content;
   }
 
-  // If the key doesn't exist in the map
   @else {
-    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-      + "Please make sure it is defined in `$breakpoints` map.";
+    // Retrieves the value from the key
+    $value: map-get($breakpoints, $breakpoint);
+
+    // If the key exists in the map
+    @if $value != null {
+      // Prints a media query based on the value
+      @media (min-width: $value) {
+        @content;
+      }
+    }
+
+    // If the key doesn't exist in the map
+    @else {
+      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Please make sure it is defined in `$breakpoints` map.";
+    }
   }
 }
 

data/_sass/primer-support/lib/variables/layout.scss

@@ -22,6 +22,7 @@ $spacers: (
 ) !default;
 
 // Aliases for easy use
+$spacer-0: nth($spacers, 1) !default; // 0
 $spacer-1: nth($spacers, 2) !default; // 4px
 $spacer-2: nth($spacers, 3) !default; // 8px
 $spacer-3: nth($spacers, 4) !default; // 16px
@@ -59,8 +60,13 @@ $breakpoints: (
   sm: $width-sm,
   // Medium screen / tablet
   md: $width-md,
-  // Large screen / desktop (980 + (12 * 2)) <= container + gutters
+  // Large screen / desktop (980 + (16 * 2)) <= container + gutters
   lg: $width-lg,
   // Extra large screen / wide desktop
   xl: $width-xl
 ) !default;
+
+$responsive-variants: ("": "");
+@each $key in map-keys($breakpoints) {
+  $responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
+}

data/_sass/primer-utilities/index.scss

@@ -4,6 +4,7 @@
 @import "./lib/borders.scss";
 @import "./lib/box-shadow.scss";
 @import "./lib/colors.scss";
+@import "./lib/details.scss";
 @import "./lib/flexbox.scss";
 @import "./lib/layout.scss";
 @import "./lib/margin.scss";

data/_sass/primer-utilities/lib/animations.scss

@@ -176,6 +176,7 @@
 /* Increase scale of an element on hover */
 .hover-grow {
   transition: transform 0.3s;
+  backface-visibility: hidden;
 
   &:hover {
     transform: scale(1.025);

data/_sass/primer-utilities/lib/borders.scss

@@ -1,65 +1,100 @@
 // Border utilities
 // stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
 
-/* Add a gray border */
-.border        { border: $border !important; }
-/* Add a gray border to the top */
-.border-top    { border-top: $border !important; }
-/* Add a gray border to the right */
-.border-right  { border-right: $border !important; }
-/* Add a gray border to the bottom */
-.border-bottom { border-bottom: $border !important; }
-/* Add a gray border to the left */
-.border-left   { border-left: $border !important; }
+/* Add a gray border on all sides */
+.border { border: $border !important; }
+
 /* Add a gray border to the left and right */
 .border-y {
   border-top: $border !important;
   border-bottom: $border !important;
 }
 
+/* Remove borders from all sides */
+.border-0 { border: 0 !important; }
+
 .border-dashed { border-style: dashed !important; }
 
 /* Use with .border to turn the border blue */
-.border-blue       { border-color: $border-blue !important; }
+.border-blue        { border-color: $border-blue !important; }
 /* Use with .border to turn the border blue-light */
 .border-blue-light  { border-color: $border-blue-light !important; }
 /* Use with .border to turn the border green */
-.border-green        { border-color: $border-green !important; }
+.border-green       { border-color: $border-green !important; }
 /* Use with .border to turn the border green light */
 .border-green-light { border-color: $border-green-light !important; }
 /* Use with .border to turn the border red */
-.border-red        { border-color: $border-red !important; }
+.border-red         { border-color: $border-red !important; }
 /* Use with .border to turn the border red-light */
 .border-red-light   { border-color: $border-red-light !important; }
 /* Use with .border to turn the border purple */
-.border-purple  { border-color: $border-purple !important; }
+.border-purple      { border-color: $border-purple !important; }
 /* Use with .border to turn the border yellow */
-.border-yellow  { border-color: $border-yellow !important; }
+.border-yellow      { border-color: $border-yellow !important; }
 /* Use with .border to turn the border gray-light */
-.border-gray-light { border-color: $border-gray-light !important; }
+.border-gray-light  { border-color: $border-gray-light !important; }
 /* Use with .border to turn the border gray-dark */
-.border-gray-dark  { border-color: $border-gray-dark !important; }
+.border-gray-dark   { border-color: $border-gray-dark !important; }
 /* Use with .border to turn the border rgba black 0.15 */
-.border-black-fade { border-color: $border-black-fade !important; }
+.border-black-fade  { border-color: $border-black-fade !important; }
+
+$edges: (
+  top: (top-left, top-right),
+  right: (top-right, bottom-right),
+  bottom: (bottom-right, bottom-left),
+  left: (bottom-left, top-left)
+);
+
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* Add a gray border */
+    /* Add a gray border to the top */
+    .border#{$variant}-top    { border-top: $border !important; }
+    /* Add a gray border to the right */
+    .border#{$variant}-right  { border-right: $border !important; }
+    /* Add a gray border to the bottom */
+    .border#{$variant}-bottom { border-bottom: $border !important; }
+    /* Add a gray border to the left */
+    .border#{$variant}-left   { border-left: $border !important; }
+
+    /* Remove the top border */
+    .border#{$variant}-top-0    { border-top: 0 !important; }
+    /* Remove the right border */
+    .border#{$variant}-right-0  { border-right: 0 !important; }
+    /* Remove the bottom border */
+    .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
+    /* Remove the left border */
+    .border#{$variant}-left-0   { border-left: 0 !important; }
 
-// Without borders
-/* Remove all borders */
-.border-0        { border: 0 !important; }
-/* Remove the top border */
-.border-top-0    { border-top: 0 !important; }
-/* Remove the right border */
-.border-right-0  { border-right: 0 !important; }
-/* Remove the bottom border */
-.border-bottom-0 { border-bottom: 0 !important; }
-/* Remove the left border */
-.border-left-0   { border-left: 0 !important; }
+    // Rounded corners
+    /* Remove the border-radius */
+    .rounded#{$variant}-0 { border-radius: 0 !important; }
+    /* Add a border-radius to all corners */
+    .rounded#{$variant}-1 { border-radius: $border-radius !important; }
+    /* Add a 2x border-radius to all corners */
+    .rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
+
+    @each $edge, $corners in $edges {
+      .rounded#{$variant}-#{$edge}-0 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: 0 !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-1 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-2 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius * 2 !important;
+        }
+      }
+    }
+  }
+}
 
-// Rounded corners
-/* Remove the border-radius */
-.rounded-0 { border-radius: 0 !important; }
-/* Add a border-radius to all corners */
-.rounded-1 { border-radius: $border-radius !important; }
-/* Add a 2x border-radius to all corners */
-.rounded-2 { border-radius: $border-radius * 2 !important; }
 /* Add a 50% border-radius to make something into a circle */
 .circle { border-radius: 50% !important; }

data/_sass/primer-utilities/lib/details.scss

@@ -0,0 +1,18 @@
+// stylelint-disable selector-max-type
+.details-overlay[open] > summary::before {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 80;
+  display: block;
+  cursor: default;
+  content: " ";
+  background: transparent;
+}
+
+.details-overlay-dark[open] > summary::before {
+  z-index: 99;
+  background: $black-fade-50;
+}

data/_sass/primer-utilities/lib/flexbox.scss

@@ -1,80 +1,52 @@
 // Flex utility classes
-
 // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
 // stylelint-disable comment-empty-line-before
 
-// - - - - - - - - - - - - - - - - - - - - - - -
-// This is a template for generating the flex utility classes.
-// A version of each class will be generated without a breakpoint,
-// along with a variant for each breakpoint.
-// - - - - - - - - - - - - - - - - - - - - - - -
-
-@mixin flexUtility($breakpoint: 0) {
-
-  // This is the breakpoint that will be inserted into class names
-  $breakstring: -#{$breakpoint}; // example: `.d-sm-flex`
-
-  // If there's no breakpoint, the $breakstring value will be blank.
-  @if $breakpoint == 0 {
-    $breakstring: ""; // example: `.d-flex`
-  }
-
-  // Flexbox classes
-  // Container
-
-  .flex#{$breakstring}-row         { flex-direction: row !important; }
-  .flex#{$breakstring}-row-reverse { flex-direction: row-reverse !important; }
-  .flex#{$breakstring}-column      { flex-direction: column !important; }
-
-  .flex#{$breakstring}-wrap     { flex-wrap: wrap !important; }
-  .flex#{$breakstring}-nowrap   { flex-wrap: nowrap !important; }
-
-  .flex#{$breakstring}-justify-start    { justify-content: flex-start !important; }
-  .flex#{$breakstring}-justify-end      { justify-content: flex-end !important; }
-  .flex#{$breakstring}-justify-center   { justify-content: center !important; }
-  .flex#{$breakstring}-justify-between  { justify-content: space-between !important; }
-  .flex#{$breakstring}-justify-around   { justify-content: space-around !important; }
-
-  .flex#{$breakstring}-items-start      { align-items: flex-start !important; }
-  .flex#{$breakstring}-items-end        { align-items: flex-end !important; }
-  .flex#{$breakstring}-items-center     { align-items: center !important; }
-  .flex#{$breakstring}-items-baseline   { align-items: baseline !important; }
-  .flex#{$breakstring}-items-stretch    { align-items: stretch !important; }
-
-  .flex#{$breakstring}-content-start    { align-content: flex-start !important; }
-  .flex#{$breakstring}-content-end      { align-content: flex-end !important; }
-  .flex#{$breakstring}-content-center   { align-content: center !important; }
-  .flex#{$breakstring}-content-between  { align-content: space-between !important; }
-  .flex#{$breakstring}-content-around   { align-content: space-around !important; }
-  .flex#{$breakstring}-content-stretch  { align-content: stretch !important; }
-
-  // Item
-  .flex#{$breakstring}-auto { flex: 1 1 auto !important; }
-  .flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; }
-
-  .flex#{$breakstring}-self-auto        { align-self: auto !important; }
-  .flex#{$breakstring}-self-start       { align-self: flex-start !important; }
-  .flex#{$breakstring}-self-end         { align-self: flex-end !important; }
-  .flex#{$breakstring}-self-center      { align-self: center !important; }
-  .flex#{$breakstring}-self-baseline    { align-self: baseline !important; }
-  .flex#{$breakstring}-self-stretch     { align-self: stretch !important; }
-
-  // Shorthand for equal width and height cols
-  .flex#{$breakstring}-item-equal {
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-}
-
-// Generate basic flexbox classes
-@include flexUtility();
-
-// Loop through the breakpoint values to create responsive classes
-@each $breakpoint in map-keys($breakpoints) {
-
-  // Loop through the spacer values
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    @include flexUtility($breakpoint);
+    // Flexbox classes
+    // Container
+    .flex#{$variant}-row         { flex-direction: row !important; }
+    .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; }
+    .flex#{$variant}-column      { flex-direction: column !important; }
+
+    .flex#{$variant}-wrap     { flex-wrap: wrap !important; }
+    .flex#{$variant}-nowrap   { flex-wrap: nowrap !important; }
+
+    .flex#{$variant}-justify-start    { justify-content: flex-start !important; }
+    .flex#{$variant}-justify-end      { justify-content: flex-end !important; }
+    .flex#{$variant}-justify-center   { justify-content: center !important; }
+    .flex#{$variant}-justify-between  { justify-content: space-between !important; }
+    .flex#{$variant}-justify-around   { justify-content: space-around !important; }
+
+    .flex#{$variant}-items-start      { align-items: flex-start !important; }
+    .flex#{$variant}-items-end        { align-items: flex-end !important; }
+    .flex#{$variant}-items-center     { align-items: center !important; }
+    .flex#{$variant}-items-baseline   { align-items: baseline !important; }
+    .flex#{$variant}-items-stretch    { align-items: stretch !important; }
+
+    .flex#{$variant}-content-start    { align-content: flex-start !important; }
+    .flex#{$variant}-content-end      { align-content: flex-end !important; }
+    .flex#{$variant}-content-center   { align-content: center !important; }
+    .flex#{$variant}-content-between  { align-content: space-between !important; }
+    .flex#{$variant}-content-around   { align-content: space-around !important; }
+    .flex#{$variant}-content-stretch  { align-content: stretch !important; }
+
+    // Item
+    .flex#{$variant}-auto { flex: 1 1 auto !important; }
+    .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
+
+    .flex#{$variant}-self-auto        { align-self: auto !important; }
+    .flex#{$variant}-self-start       { align-self: flex-start !important; }
+    .flex#{$variant}-self-end         { align-self: flex-end !important; }
+    .flex#{$variant}-self-center      { align-self: center !important; }
+    .flex#{$variant}-self-baseline    { align-self: baseline !important; }
+    .flex#{$variant}-self-stretch     { align-self: stretch !important; }
+
+    // Shorthand for equal width and height cols
+    .flex#{$variant}-item-equal {
+      flex-grow: 1;
+      flex-basis: 0;
+    }
   }
-
 }