`s +hr, +.rule { + height: 0; + // stylelint-disable-next-line primer/spacing + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + // stylelint-disable-next-line primer/borders + border-bottom: $border-width $border-style lighten($gray-300, 5%); + @include clearfix(); +} + +// +// Remove most spacing between table cells. +// + +table { + border-spacing: 0; + border-collapse: collapse; +} + +td, +th { + padding: 0; +} + +button { + cursor: pointer; + // Remove border radius added by Chrome macOS + 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; } + + &:not([open]) { + // Set details content hidden by default for browsers that don't do this + > *:not(summary) { display: none !important; } + } +} diff --git a/assets/scss/_primer/base/index.scss b/assets/scss/_primer/base/index.scss new file mode 100644 index 0000000..2c7f8b9 --- /dev/null +++ b/assets/scss/_primer/base/index.scss @@ -0,0 +1,6 @@ +@import "../support/index.scss"; + +@import "./normalize.scss"; +@import "./base.scss"; +@import "./kbd.scss"; +@import "./typography-base.scss"; diff --git a/assets/scss/_primer/base/kbd.scss b/assets/scss/_primer/base/kbd.scss new file mode 100644 index 0000000..7ee4503 --- /dev/null +++ b/assets/scss/_primer/base/kbd.scss @@ -0,0 +1,21 @@ +// Keyboard shortcuts +// stylelint-disable selector-max-type + +kbd { + display: inline-block; + // stylelint-disable-next-line primer/spacing + padding: ($spacer-1 - 1) ($spacer-1 + 1); + font: 11px $mono-font; + // stylelint-disable-next-line primer/typography + line-height: 10px; + // stylelint-disable-next-line primer/colors + color: $gray-700; + vertical-align: middle; + background-color: $bg-gray-light; + // stylelint-disable-next-line primer/borders + border: $border-style $border-width $border-gray-dark; + border-bottom-color: $border-gray-dark; + border-radius: $border-radius; + // stylelint-disable-next-line primer/box-shadow + box-shadow: inset 0 -1px 0 $border-gray-dark; +} diff --git a/assets/scss/_primer/base/normalize.scss b/assets/scss/_primer/base/normalize.scss new file mode 100644 index 0000000..95931e7 --- /dev/null +++ b/assets/scss/_primer/base/normalize.scss @@ -0,0 +1,421 @@ +// stylelint-disable +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ + +article, +aside, +details, /* 1 */ +figcaption, +figure, +footer, +header, +main, /* 2 */ +menu, +nav, +section { /* 1 */ + display: block; +} + +summary { + display: list-item; +} + +/** + * Add the correct display in IE 9-. + */ + +audio, +canvas, +progress, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { + display: none !important; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; /* 1 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: $text-black; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em $spacer-6; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +select, +textarea { + font: inherit; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Restore the font weight unset by the previous rule. + */ + +optgroup { + font-weight: $font-weight-bold; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: $border-width $border-style #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em $em-spacer-6; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} diff --git a/assets/scss/_primer/base/typography-base.scss b/assets/scss/_primer/base/typography-base.scss new file mode 100644 index 0000000..83eb995 --- /dev/null +++ b/assets/scss/_primer/base/typography-base.scss @@ -0,0 +1,88 @@ +// Headings +// -------------------------------------------------- +// stylelint-disable selector-max-type +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 0; +} + +h1 { @include h1; } +h2 { @include h2; } +h3 { @include h3; } +h4 { @include h4; } +h5 { @include h5; } +h6 { @include h6; } + +// Body text +// -------------------------------------------------- + +p { + margin-top: 0; + // stylelint-disable-next-line primer/spacing + margin-bottom: 10px; +} + +small { + // stylelint-disable-next-line primer/typography + font-size: 90%; +} + +blockquote { + margin: 0; +} + +// Lists +// -------------------------------------------------- + +ul, +ol { + padding-left: 0; + margin-top: 0; + margin-bottom: 0; +} + +ol ol, +ul ol { + list-style-type: lower-roman; +} + +ul ul ol, +ul ol ol, +ol ul ol, +ol ol ol { + list-style-type: lower-alpha; +} + +dd { + margin-left: 0; +} + +// Code +// -------------------------------------------------- + +tt, +code { + font-family: $mono-font; + font-size: $font-size-small; +} + +pre { + margin-top: 0; + margin-bottom: 0; + font-family: $mono-font; + font-size: $font-size-small; +} + +// Octicons +// -------------------------------------------------- + +// Move this over here as a temporary override to the octicons source repo +// instead of updating that upstream. +.octicon { + vertical-align: text-bottom; +} diff --git a/assets/scss/_primer/layout/container.scss b/assets/scss/_primer/layout/container.scss new file mode 100644 index 0000000..7e70a6b --- /dev/null +++ b/assets/scss/_primer/layout/container.scss @@ -0,0 +1,30 @@ +// Fixed-width, centered column for site content. +// Handy container styles that match our breakpoints + +// 544px +.container-sm { + max-width: $width-sm; + margin-right: auto; + margin-left: auto; +} + +// 768px +.container-md { + max-width: $container-md; + margin-right: auto; + margin-left: auto; +} + +// 1004px - this matches the current fixed width: 980px + padding: px-3 +.container-lg { + max-width: $container-lg; + margin-right: auto; + margin-left: auto; +} + +// 1280px +.container-xl { + max-width: $container-xl; + margin-right: auto; + margin-left: auto; +} diff --git a/assets/scss/_primer/layout/grid.scss b/assets/scss/_primer/layout/grid.scss new file mode 100644 index 0000000..5126c6b --- /dev/null +++ b/assets/scss/_primer/layout/grid.scss @@ -0,0 +1,64 @@ +// GRID + +// Columns +.col-1 { width: (1 / 12 * 100%); } +.col-2 { width: (2 / 12 * 100%); } +.col-3 { width: (3 / 12 * 100%); } +.col-4 { width: (4 / 12 * 100%); } +.col-5 { width: (5 / 12 * 100%); } +.col-6 { width: (6 / 12 * 100%); } +.col-7 { width: (7 / 12 * 100%); } +.col-8 { width: (8 / 12 * 100%); } +.col-9 { width: (9 / 12 * 100%); } +.col-10 { width: (10 / 12 * 100%); } +.col-11 { width: (11 / 12 * 100%); } +.col-12 { width: 100%; } + +@each $breakpoint in map-keys($breakpoints) { + @include breakpoint($breakpoint) { + .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); } + .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); } + .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); } + .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); } + .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); } + .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); } + .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); } + .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); } + .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); } + .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); } + .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); } + .col-#{$breakpoint}-12 { width: 100%; } + } +} + +// Gutters +// Apply padding and a negative margin to the outside of the container +@mixin gutters ($gutter-width: $spacer-3) { + margin-right: -$gutter-width; + margin-left: -$gutter-width; + + > [class*="col-"] { + padding-right: $gutter-width !important; + padding-left: $gutter-width !important; + } +} + +.gutter { + @include gutters($spacer-3); +} + +.gutter-condensed { + @include gutters($spacer-2); +} + +.gutter-spacious { + @include gutters($spacer-4); +} + +@each $breakpoint in map-keys($breakpoints) { + @include breakpoint($breakpoint) { + .gutter-#{$breakpoint} { @include gutters($spacer-3); } + .gutter-#{$breakpoint}-condensed { @include gutters($spacer-2); } + .gutter-#{$breakpoint}-spacious { @include gutters($spacer-4); } + } +} diff --git a/assets/scss/_primer/markdown/blob-csv.scss b/assets/scss/_primer/markdown/blob-csv.scss new file mode 100644 index 0000000..e97e447 --- /dev/null +++ b/assets/scss/_primer/markdown/blob-csv.scss @@ -0,0 +1,29 @@ +// stylelint-disable selector-max-type +.markdown-body .csv-data { + td, + th { + // stylelint-disable-next-line primer/spacing + padding: 5px; + overflow: hidden; + font-size: $font-size-small; + line-height: $lh-condensed-ultra; + text-align: left; + white-space: nowrap; + } + + .blob-num { + // stylelint-disable-next-line primer/spacing + padding: 10px $spacer-2 9px; + text-align: right; + background: $bg-white; + border: 0; + } + + tr { border-top: 0; } + + th { + font-weight: $font-weight-bold; + background: $bg-gray; + border-top: 0; + } +} diff --git a/assets/scss/_primer/markdown/code.scss b/assets/scss/_primer/markdown/code.scss new file mode 100644 index 0000000..fbd2d16 --- /dev/null +++ b/assets/scss/_primer/markdown/code.scss @@ -0,0 +1,69 @@ +// stylelint-disable selector-max-type +.markdown-body { + // Inline code snippets + code, + tt { + // stylelint-disable-next-line primer/spacing + padding: 0.2em 0.4em; + margin: 0; + // stylelint-disable-next-line primer/typography + font-size: 85%; + // stylelint-disable-next-line primer/colors + background-color: rgba($black, 0.05); + border-radius: $border-radius; + + br { display: none; } + } + + del code { text-decoration: inherit; } + + pre { + word-wrap: normal; + + // Code tags within code blocks (
s)
+ > code {
+ padding: 0;
+ margin: 0;
+ // stylelint-disable-next-line primer/typography
+ font-size: 100%;
+ word-break: normal;
+ white-space: pre;
+ background: transparent;
+ border: 0;
+ }
+ }
+
+ .highlight {
+ margin-bottom: $spacer-3;
+
+ pre {
+ margin-bottom: 0;
+ word-break: normal;
+ }
+ }
+
+ .highlight pre,
+ pre {
+ padding: $spacer-3;
+ overflow: auto;
+ // stylelint-disable-next-line primer/typography
+ font-size: 85%;
+ // stylelint-disable-next-line primer/typography
+ line-height: 1.45;
+ background-color: $bg-gray;
+ border-radius: $border-radius;
+ }
+
+ pre code,
+ pre tt {
+ display: inline;
+ max-width: auto;
+ padding: 0;
+ margin: 0;
+ overflow: visible;
+ line-height: inherit;
+ word-wrap: normal;
+ background-color: transparent;
+ border: 0;
+ }
+}
diff --git a/assets/scss/_primer/markdown/headings.scss b/assets/scss/_primer/markdown/headings.scss
new file mode 100644
index 0000000..26347bb
--- /dev/null
+++ b/assets/scss/_primer/markdown/headings.scss
@@ -0,0 +1,72 @@
+// Needs refactoring
+// stylelint-disable selector-max-compound-selectors, selector-max-specificity
+// stylelint-disable selector-max-type
+.markdown-body {
+ // Headings
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin-top: $spacer-4;
+ margin-bottom: $spacer-3;
+ font-weight: $font-weight-bold;
+ line-height: $lh-condensed;
+
+ .octicon-link {
+ color: $text-black;
+ vertical-align: middle;
+ visibility: hidden;
+ }
+
+ &:hover .anchor {
+ text-decoration: none;
+
+ .octicon-link {
+ visibility: visible;
+ }
+ }
+
+ tt,
+ code {
+ font-size: inherit;
+ }
+ }
+
+ h1 {
+ // stylelint-disable-next-line primer/spacing
+ padding-bottom: 0.3em;
+ // stylelint-disable-next-line primer/typography
+ font-size: 2em;
+ border-bottom: $border-width $border-style $border-gray-light;
+ }
+
+ h2 {
+ // stylelint-disable-next-line primer/spacing
+ padding-bottom: 0.3em;
+ // stylelint-disable-next-line primer/typography
+ font-size: 1.5em;
+ border-bottom: $border-width $border-style $border-gray-light;
+ }
+
+ h3 {
+ // stylelint-disable-next-line primer/typography
+ font-size: 1.25em;
+ }
+
+ h4 {
+ font-size: 1em;
+ }
+
+ h5 {
+ // stylelint-disable-next-line primer/typography
+ font-size: 0.875em;
+ }
+
+ h6 {
+ // stylelint-disable-next-line primer/typography
+ font-size: 0.85em;
+ color: $text-gray-light;
+ }
+}
diff --git a/assets/scss/_primer/markdown/images.scss b/assets/scss/_primer/markdown/images.scss
new file mode 100644
index 0000000..caea502
--- /dev/null
+++ b/assets/scss/_primer/markdown/images.scss
@@ -0,0 +1,131 @@
+// Need to target base styles
+// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type
+// stylelint-disable selector-max-type
+.markdown-body {
+ // Images & Stuff
+ img {
+ max-width: 100%;
+ // because we put padding on the images to hide header lines, and some people
+ // specify the width of their images in their markdown.
+ box-sizing: content-box;
+ background-color: $bg-white;
+
+ &[align=right] {
+ // stylelint-disable-next-line primer/spacing
+ padding-left: 20px;
+ }
+
+ &[align=left] {
+ // stylelint-disable-next-line primer/spacing
+ padding-right: 20px;
+ }
+ }
+
+ .emoji {
+ max-width: none;
+ vertical-align: text-top;
+ // Override `![]()
` styles so Emjois don't clash with zebra striping in our tables
+ background-color: transparent;
+ }
+
+ // Gollum Image Tags
+
+ // Framed
+ span.frame {
+ display: block;
+ overflow: hidden;
+
+ > span {
+ display: block;
+ float: left;
+ width: auto;
+ // stylelint-disable-next-line primer/spacing
+ padding: 7px;
+ // stylelint-disable-next-line primer/spacing
+ margin: 13px 0 0;
+ overflow: hidden;
+ // stylelint-disable-next-line primer/borders
+ border: $border-width $border-style lighten($gray-300, 5%);
+ }
+
+ span img {
+ display: block;
+ float: left;
+ }
+
+ span span {
+ display: block;
+ // stylelint-disable-next-line primer/spacing
+ padding: 5px 0 0;
+ clear: both;
+ color: $text-gray-dark;
+ }
+ }
+
+ span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+
+ > span {
+ display: block;
+ // stylelint-disable-next-line primer/spacing
+ margin: 13px auto 0;
+ overflow: hidden;
+ text-align: center;
+ }
+
+ span img {
+ margin: 0 auto;
+ text-align: center;
+ }
+ }
+
+ span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+
+ > span {
+ display: block;
+ // stylelint-disable-next-line primer/spacing
+ margin: 13px 0 0;
+ overflow: hidden;
+ text-align: right;
+ }
+
+ span img {
+ margin: 0;
+ text-align: right;
+ }
+ }
+
+ span.float-left {
+ display: block;
+ float: left;
+ // stylelint-disable-next-line primer/spacing
+ margin-right: 13px;
+ overflow: hidden;
+
+ span {
+ // stylelint-disable-next-line primer/spacing
+ margin: 13px 0 0;
+ }
+ }
+
+ span.float-right {
+ display: block;
+ float: right;
+ // stylelint-disable-next-line primer/spacing
+ margin-left: 13px;
+ overflow: hidden;
+
+ > span {
+ display: block;
+ // stylelint-disable-next-line primer/spacing
+ margin: 13px auto 0;
+ overflow: hidden;
+ text-align: right;
+ }
+ }
+}
diff --git a/assets/scss/_primer/markdown/index.scss b/assets/scss/_primer/markdown/index.scss
new file mode 100644
index 0000000..b2e8d3d
--- /dev/null
+++ b/assets/scss/_primer/markdown/index.scss
@@ -0,0 +1,8 @@
+@import "../support/index.scss";
+@import "./markdown-body.scss";
+@import "./headings.scss";
+@import "./lists.scss";
+@import "./tables.scss";
+@import "./images.scss";
+@import "./code.scss";
+@import "./blob-csv.scss";
diff --git a/assets/scss/_primer/markdown/lists.scss b/assets/scss/_primer/markdown/lists.scss
new file mode 100644
index 0000000..b680faf
--- /dev/null
+++ b/assets/scss/_primer/markdown/lists.scss
@@ -0,0 +1,77 @@
+// Base styles
+// stylelint-disable selector-no-qualifying-type
+// stylelint-disable selector-max-type
+.markdown-body {
+
+ // Lists, Blockquotes & Such
+ ul,
+ ol {
+ // stylelint-disable-next-line primer/spacing
+ padding-left: 2em;
+
+ &.no-list {
+ padding: 0;
+ list-style-type: none;
+ }
+ }
+
+ // Did someone complain about list spacing? Encourage them
+ // to create the spacing with their markdown formatting.
+ // List behavior should be controled by the markup, not the css.
+ //
+ // For lists with padding between items, use blank
+ // lines between items. This will generate paragraphs with
+ // padding to space things out.
+ //
+ // - item
+ //
+ // - item
+ //
+ // - item
+ //
+ // For list without padding, don't use blank lines.
+ //
+ // - item
+ // - item
+ // - item
+ //
+ // Modifying the css to emulate these behaviors merely brakes
+ // one case in the process of solving another. Don't change
+ // this unless it's really really a bug.
+ ul ul,
+ ul ol,
+ ol ol,
+ ol ul {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ li {
+ word-wrap: break-all;
+ }
+
+ li > p {
+ margin-top: $spacer-3;
+ }
+
+ li + li {
+ margin-top: $em-spacer-3;
+ }
+
+ dl {
+ padding: 0;
+
+ dt {
+ padding: 0;
+ margin-top: $spacer-3;
+ font-size: 1em;
+ font-style: italic;
+ font-weight: $font-weight-bold;
+ }
+
+ dd {
+ padding: 0 $spacer-3;
+ margin-bottom: $spacer-3;
+ }
+ }
+}
diff --git a/assets/scss/_primer/markdown/markdown-body.scss b/assets/scss/_primer/markdown/markdown-body.scss
new file mode 100644
index 0000000..6581f19
--- /dev/null
+++ b/assets/scss/_primer/markdown/markdown-body.scss
@@ -0,0 +1,99 @@
+// All of our block level items should have the same margin
+// stylelint-disable selector-max-type
+
+// This is styling for generic markdownized text. Anything you put in a
+// container with .markdown-body on it should render generally well. It also
+// includes some GitHub Flavored Markdown specific styling (like @mentions)
+.markdown-body {
+ font-family: $body-font;
+ font-size: $h4-size;
+ line-height: $body-line-height;
+ word-wrap: break-word;
+
+ @import "../base/kbd.scss"; // adds support for keyboard shortcuts
+
+ // Clearfix on the markdown body
+ &::before {
+ display: table;
+ content: "";
+ }
+
+ &::after {
+ display: table;
+ clear: both;
+ content: "";
+ }
+
+ > *:first-child {
+ margin-top: 0 !important;
+ }
+
+ > *:last-child {
+ margin-bottom: 0 !important;
+ }
+
+ // Anchors like . These sometimes end up wrapped around
+ // text when users mistakenly forget to close the tag or use self-closing tag
+ // syntax. We don't want them to appear like links.
+ // FIXME: a:not(:link):not(:visited) would be a little clearer here (and
+ // possibly faster to match), but it breaks styling of elements due
+ // to https://bugs.webkit.org/show_bug.cgi?id=142737.
+ a:not([href]) {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ // Link Colors
+ .absent {
+ color: $text-red;
+ }
+
+ .anchor {
+ float: left;
+ padding-right: $spacer-1;
+ // stylelint-disable-next-line primer/spacing
+ margin-left: -20px;
+ line-height: $lh-condensed-ultra;
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ p,
+ blockquote,
+ ul,
+ ol,
+ dl,
+ table,
+ pre,
+ details {
+ margin-top: 0;
+ margin-bottom: $spacer-3;
+ }
+
+ hr {
+ height: $em-spacer-3;
+ padding: 0;
+ margin: $spacer-4 0;
+ // stylelint-disable-next-line primer/colors
+ background-color: $gray-200;
+ border: 0;
+ }
+
+ blockquote {
+ // stylelint-disable-next-line primer/spacing
+ padding: 0 1em;
+ color: $text-gray-light;
+ // stylelint-disable-next-line primer/borders
+ border-left: 0.25em $border-style lighten($gray-300, 5%);
+
+ > :first-child {
+ margin-top: 0;
+ }
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/assets/scss/_primer/markdown/tables.scss b/assets/scss/_primer/markdown/tables.scss
new file mode 100644
index 0000000..9d73d17
--- /dev/null
+++ b/assets/scss/_primer/markdown/tables.scss
@@ -0,0 +1,36 @@
+// Needs refactoring
+// stylelint-disable selector-max-type
+.markdown-body {
+ // Tables
+ table {
+ display: block;
+ width: 100%;
+ overflow: auto;
+
+ th {
+ font-weight: $font-weight-bold;
+ }
+
+ th,
+ td {
+ // stylelint-disable-next-line primer/spacing
+ padding: 6px 13px;
+ // stylelint-disable-next-line primer/borders
+ border: $border-width $border-style lighten($gray-300, 5%);
+ }
+
+ tr {
+ background-color: $bg-white;
+ // stylelint-disable-next-line primer/borders
+ border-top: $border-width $border-style darken($gray-300, 4%);
+
+ &:nth-child(2n) {
+ background-color: $bg-gray;
+ }
+ }
+
+ img {
+ background-color: transparent;
+ }
+ }
+}
diff --git a/assets/scss/_primer/support/index.scss b/assets/scss/_primer/support/index.scss
new file mode 100644
index 0000000..93f9449
--- /dev/null
+++ b/assets/scss/_primer/support/index.scss
@@ -0,0 +1,11 @@
+// variables
+@import "./variables/typography.scss";
+@import "./variables/colors.scss";
+@import "./variables/layout.scss";
+@import "./variables/misc.scss";
+
+// mixins
+@import "./mixins/typography.scss";
+@import "./mixins/layout.scss";
+@import "./mixins/buttons.scss";
+@import "./mixins/misc.scss";
diff --git a/assets/scss/_primer/support/mixins/buttons.scss b/assets/scss/_primer/support/mixins/buttons.scss
new file mode 100644
index 0000000..4b6cbb3
--- /dev/null
+++ b/assets/scss/_primer/support/mixins/buttons.scss
@@ -0,0 +1,167 @@
+// Button color generator for primary and themed buttons
+
+// New button hotness
+@mixin btn-solid($color, $bg, $bg2) {
+ color: $color;
+ background-color: $bg2;
+ background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
+
+ @if $bg == $gray-000 {
+ &:focus,
+ &.focus {
+ box-shadow: $btn-input-focus-shadow;
+ }
+
+ &:hover,
+ &.hover {
+ background-color: darken($bg2, 3%);
+ background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
+ background-position: 0 -$em-spacer-5;
+ border-color: rgba($black, 0.35);
+ }
+
+ &:active,
+ &.selected,
+ &[aria-selected=true],
+ [open] > & {
+ background-color: darken(desaturate($bg, 10%), 6%);
+ background-image: none;
+ border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
+ box-shadow: $btn-active-shadow;
+ }
+
+ &:disabled,
+ &.disabled,
+ &[aria-disabled=true] {
+ color: rgba($color, 0.4);
+ background-color: $bg2;
+ background-image: none;
+ border-color: $border-color-button;
+ box-shadow: none;
+ }
+
+ }
+ @else {
+ &:focus,
+ &.focus {
+ box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
+ }
+
+ &:hover,
+ &.hover {
+ background-color: darken($bg2, 2%);
+ background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
+ background-position: 0 -$em-spacer-5;
+ border-color: $black-fade-50;
+ }
+
+ &:active,
+ &.selected,
+ &[aria-selected=true],
+ [open] > & {
+ background-color: darken(mix($bg, $bg2, 50%), 7%);
+ background-image: none;
+ border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
+ box-shadow: $btn-active-shadow;
+ }
+
+ &:disabled,
+ &.disabled,
+ &[aria-disabled=true] {
+ color: rgba($color, 0.75);
+ background-color: mix($bg2, $white, 50%);
+ background-image: none;
+ border-color: $border-color-button;
+ box-shadow: none;
+ }
+
+ .Counter {
+ color: darken($bg, 8%);
+ background-color: $white;
+ }
+ }
+}
+
+// Inverse button hover style
+@mixin btn-inverse($color, $bg, $bg2) {
+ color: $color;
+ background-color: $bg;
+ background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
+
+ &:focus {
+ box-shadow: 0 0 0 0.2em rgba($color, 0.4);
+ }
+
+ &:hover {
+ color: $text-white;
+ background-color: $color;
+ background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
+ border-color: $black-fade-50;
+
+ .Counter {
+ color: $text-white;
+ }
+ }
+
+ &:active,
+ &.selected,
+ &[aria-selected=true],
+ [open] > & {
+ color: $text-white;
+ background-color: darken($color, 5%);
+ background-image: none;
+ border-color: $black-fade-50;
+ box-shadow: $btn-active-shadow;
+ }
+
+ &:disabled,
+ &.disabled,
+ &[aria-disabled=true] {
+ color: rgba($color, 0.4);
+ background-color: $bg2;
+ background-image: none;
+ border-color: $border-color-button;
+ box-shadow: none;
+ }
+}
+
+// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
+@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
+ color: $text-color;
+ background-color: $bg-color;
+ background-image: none;
+
+ .Counter {
+ background-color: rgba($black, 0.07);
+ }
+
+ &:hover,
+ &:active,
+ &.selected,
+ &[aria-selected=true],
+ [open] > & {
+ color: $bg-color;
+ background-color: $text-color;
+ background-image: none;
+ border-color: $text-color;
+
+ .Counter {
+ color: $text-color;
+ background-color: $bg-color;
+ }
+ }
+
+ &:focus {
+ border-color: $text-color;
+ box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
+ }
+
+ &:disabled,
+ &.disabled,
+ &[aria-disabled=true] {
+ color: $black-fade-30;
+ background-color: $bg-white;
+ border-color: $black-fade-15;
+ box-shadow: none;
+ }
+}
diff --git a/assets/scss/_primer/support/mixins/layout.scss b/assets/scss/_primer/support/mixins/layout.scss
new file mode 100644
index 0000000..a6d30cf
--- /dev/null
+++ b/assets/scss/_primer/support/mixins/layout.scss
@@ -0,0 +1,58 @@
+// Responsive media queries
+
+@mixin breakpoint($breakpoint) {
+ @if $breakpoint == "" {
+ @content;
+ }
+
+ @else {
+ // 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.";
+ }
+ }
+}
+
+// Retina media query
+
+@mixin retina-media-query {
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 2),
+ only screen and (min--moz-device-pixel-ratio: 2),
+ only screen and (-moz-min-device-pixel-ratio: 2),
+ only screen and (-o-min-device-pixel-ratio: 2/1),
+ only screen and (min-device-pixel-ratio: 2),
+ only screen and (min-resolution: 192dpi),
+ only screen and (min-resolution: 2dppx) {
+ @content;
+ }
+}
+
+// Clearfix
+//
+// Clears floats via mixin.
+
+@mixin clearfix {
+ &::before {
+ display: table;
+ content: "";
+ }
+
+ &::after {
+ display: table;
+ clear: both;
+ content: "";
+ }
+}
diff --git a/assets/scss/_primer/support/mixins/misc.scss b/assets/scss/_primer/support/mixins/misc.scss
new file mode 100644
index 0000000..ebdd32d
--- /dev/null
+++ b/assets/scss/_primer/support/mixins/misc.scss
@@ -0,0 +1,29 @@
+// Generate a two-color caret for any element.
+@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
+ &::after,
+ &::before {
+ position: absolute;
+ top: 11px;
+ right: 100%;
+ left: -16px;
+ display: block;
+ width: 0;
+ height: 0;
+ pointer-events: none;
+ content: " ";
+ border-color: transparent;
+ border-style: solid solid outset;
+ }
+
+ &::after {
+ margin-top: 1px;
+ margin-left: 2px;
+ border-width: 7px;
+ border-right-color: $foreground;
+ }
+
+ &::before {
+ border-width: 8px;
+ border-right-color: $background;
+ }
+}
diff --git a/assets/scss/_primer/support/mixins/typography.scss b/assets/scss/_primer/support/mixins/typography.scss
new file mode 100644
index 0000000..23ec0e3
--- /dev/null
+++ b/assets/scss/_primer/support/mixins/typography.scss
@@ -0,0 +1,84 @@
+// Text hiding for image based text replacement.
+// Higher performance than -9999px because it only renders
+// the size of the actual text, not a full 9999px box.
+@mixin hide-text() {
+ overflow: hidden;
+ text-indent: 100%;
+ white-space: nowrap;
+}
+
+// Heading mixins for use within components
+// These match heading utilities in utilities/typography
+@mixin h1 {
+ font-size: $h1-size;
+ font-weight: $font-weight-bold;
+}
+
+@mixin h2 {
+ font-size: $h2-size;
+ font-weight: $font-weight-bold;
+}
+
+@mixin h3 {
+ font-size: $h3-size;
+ font-weight: $font-weight-bold;
+}
+
+@mixin h4 {
+ font-size: $h4-size;
+ font-weight: $font-weight-bold;
+}
+
+@mixin h5 {
+ font-size: $h5-size;
+ font-weight: $font-weight-bold;
+}
+
+@mixin h6 {
+ font-size: $h6-size;
+ font-weight: $font-weight-bold;
+}
+
+// Responsive heading mixins
+// There are no responsive mixins for h4-h6 because they are small
+// and don't need to be smaller on mobile.
+@mixin f1-responsive {
+ font-size: $h1-size-mobile;
+
+ // 32px on desktop
+ @include breakpoint(md) { font-size: $h1-size; }
+
+}
+
+@mixin f2-responsive {
+ font-size: $h2-size-mobile;
+
+ // 24px on desktop
+ @include breakpoint(md) { font-size: $h2-size; }
+}
+
+@mixin f3-responsive {
+ font-size: $h3-size-mobile;
+
+ // 20px on desktop
+ @include breakpoint(md) { font-size: $h3-size; }
+
+}
+
+// These use the mixins from above for responsive heading sizes.
+// The following mixins can be used where it's convenient or necessary to
+// couple the responsive font-size with the font-weight.
+@mixin h1-responsive {
+ @include f1-responsive;
+ font-weight: $font-weight-bold;
+}
+
+@mixin h2-responsive {
+ @include f2-responsive;
+ font-weight: $font-weight-bold;
+}
+
+@mixin h3-responsive {
+ @include f3-responsive;
+ font-weight: $font-weight-bold;
+}
diff --git a/assets/scss/_primer/support/variables/color-system.scss b/assets/scss/_primer/support/variables/color-system.scss
new file mode 100644
index 0000000..febc58b
--- /dev/null
+++ b/assets/scss/_primer/support/variables/color-system.scss
@@ -0,0 +1,243 @@
+// Black based on same hue as $gray-900
+$black: #1b1f23 !default;
+$white: #fff !default;
+
+//
+//
+// -------- Grays --------
+$gray-000: #fafbfc !default;
+$gray-100: #f6f8fa !default;
+$gray-200: #e1e4e8 !default;
+$gray-300: #d1d5da !default;
+$gray-400: #959da5 !default;
+$gray-500: #6a737d !default;
+$gray-600: #586069 !default;
+$gray-700: #444d56 !default;
+$gray-800: #2f363d !default;
+$gray-900: #24292e !default; // body font color
+
+// -------- Blue --------
+$blue-000: #f1f8ff !default;
+$blue-100: #dbedff !default;
+$blue-200: #c8e1ff !default;
+$blue-300: #79b8ff !default;
+$blue-400: #2188ff !default;
+$blue-500: #0366d6 !default; // Default: Passes AA with #fff
+$blue-600: #005cc5 !default;
+$blue-700: #044289 !default;
+$blue-800: #032f62 !default;
+$blue-900: #05264c !default; // Passes with 1/2/300 blues
+
+// -------- Green --------
+$green-000: #f0fff4 !default;
+$green-100: #dcffe4 !default;
+$green-200: #bef5cb !default;
+$green-300: #85e89d !default;
+$green-400: #34d058 !default;
+$green-500: #28a745 !default; // Default. passes AA Large
+$green-600: #22863a !default; // Text green, passes AA on #fff
+$green-700: #176f2c !default;
+$green-800: #165c26 !default;
+$green-900: #144620 !default;
+
+// -------- Yellow --------
+$yellow-000: #fffdef !default;
+$yellow-100: #fffbdd !default;
+$yellow-200: #fff5b1 !default;
+$yellow-300: #ffea7f !default;
+$yellow-400: #ffdf5d !default;
+$yellow-500: #ffd33d !default;
+$yellow-600: #f9c513 !default;
+$yellow-700: #dbab09 !default;
+$yellow-800: #b08800 !default;
+$yellow-900: #735c0f !default;
+
+// -------- Orange --------
+$orange-000: #fff8f2 !default;
+$orange-100: #ffebda !default;
+$orange-200: #ffd1ac !default;
+$orange-300: #ffab70 !default;
+$orange-400: #fb8532 !default;
+$orange-500: #f66a0a !default; // Default. passes AA Large with #fff
+$orange-600: #e36209 !default;
+$orange-700: #d15704 !default;
+$orange-800: #c24e00 !default;
+$orange-900: #a04100 !default;
+
+// -------- Red --------
+$red-000: #ffeef0 !default;
+$red-100: #ffdce0 !default;
+$red-200: #fdaeb7 !default;
+$red-300: #f97583 !default;
+$red-400: #ea4a5a !default;
+$red-500: #d73a49 !default; // Default. passes AA
+$red-600: #cb2431 !default;
+$red-700: #b31d28 !default;
+$red-800: #9e1c23 !default;
+$red-900: #86181d !default;
+
+// -------- Purple --------
+$purple-000: #f5f0ff !default;
+$purple-100: #e6dcfd !default;
+$purple-200: #d1bcf9 !default;
+$purple-300: #b392f0 !default;
+$purple-400: #8a63d2 !default;
+$purple-500: #6f42c1 !default; // passes AA with #fff
+$purple-600: #5a32a3 !default;
+$purple-700: #4c2889 !default;
+$purple-800: #3a1d6e !default;
+$purple-900: #29134e !default;
+
+// -------- Pink --------
+$pink-000: #ffeef8 !default;
+$pink-100: #fedbf0 !default;
+$pink-200: #f9b3dd !default;
+$pink-300: #f692ce !default;
+$pink-400: #ec6cb9 !default;
+$pink-500: #ea4aaa !default;
+$pink-600: #d03592 !default;
+$pink-700: #b93a86 !default;
+$pink-800: #99306f !default;
+$pink-900: #6d224f !default;
+
+// -------- Fades --------
+$black-fade-15: rgba($black, 0.15) !default;
+$black-fade-30: rgba($black, 0.3) !default;
+$black-fade-50: rgba($black, 0.5) !default;
+$black-fade-70: rgba($black, 0.7) !default;
+$black-fade-85: rgba($black, 0.85) !default;
+
+$white-fade-15: rgba($white, 0.15) !default;
+$white-fade-30: rgba($white, 0.3) !default;
+$white-fade-50: rgba($white, 0.5) !default;
+$white-fade-70: rgba($white, 0.7) !default;
+$white-fade-85: rgba($white, 0.85) !default;
+
+// -------- Color defaults --------
+$red: $red-500 !default;
+$purple: $purple-500 !default;
+$blue: $blue-500 !default;
+$green: $green-500 !default;
+$yellow: $yellow-500 !default;
+$orange: $orange-500 !default;
+
+$gray-dark: $gray-900 !default;
+$gray-light: $gray-400 !default;
+$gray: $gray-500 !default;
+
+// -------- Color gradient maps --------
+
+$grays: (
+ 0: $gray-000,
+ 1: $gray-100,
+ 2: $gray-200,
+ 3: $gray-300,
+ 4: $gray-400,
+ 5: $gray-500,
+ 6: $gray-600,
+ 7: $gray-700,
+ 8: $gray-800,
+ 9: $gray-900,
+) !default;
+
+$blues: (
+ 0: $blue-000,
+ 1: $blue-100,
+ 2: $blue-200,
+ 3: $blue-300,
+ 4: $blue-400,
+ 5: $blue-500,
+ 6: $blue-600,
+ 7: $blue-700,
+ 8: $blue-800,
+ 9: $blue-900,
+) !default;
+
+$greens: (
+ 0: $green-000,
+ 1: $green-100,
+ 2: $green-200,
+ 3: $green-300,
+ 4: $green-400,
+ 5: $green-500,
+ 6: $green-600,
+ 7: $green-700,
+ 8: $green-800,
+ 9: $green-900,
+) !default;
+
+$yellows: (
+ 0: $yellow-000,
+ 1: $yellow-100,
+ 2: $yellow-200,
+ 3: $yellow-300,
+ 4: $yellow-400,
+ 5: $yellow-500,
+ 6: $yellow-600,
+ 7: $yellow-700,
+ 8: $yellow-800,
+ 9: $yellow-900,
+) !default;
+
+$oranges: (
+ 0: $orange-000,
+ 1: $orange-100,
+ 2: $orange-200,
+ 3: $orange-300,
+ 4: $orange-400,
+ 5: $orange-500,
+ 6: $orange-600,
+ 7: $orange-700,
+ 8: $orange-800,
+ 9: $orange-900,
+) !default;
+
+$reds: (
+ 0: $red-000,
+ 1: $red-100,
+ 2: $red-200,
+ 3: $red-300,
+ 4: $red-400,
+ 5: $red-500,
+ 6: $red-600,
+ 7: $red-700,
+ 8: $red-800,
+ 9: $red-900,
+) !default;
+
+$purples: (
+ 0: $purple-000,
+ 1: $purple-100,
+ 2: $purple-200,
+ 3: $purple-300,
+ 4: $purple-400,
+ 5: $purple-500,
+ 6: $purple-600,
+ 7: $purple-700,
+ 8: $purple-800,
+ 9: $purple-900,
+) !default;
+
+$pinks: (
+ 0: $pink-000,
+ 1: $pink-100,
+ 2: $pink-200,
+ 3: $pink-300,
+ 4: $pink-400,
+ 5: $pink-500,
+ 6: $pink-600,
+ 7: $pink-700,
+ 8: $pink-800,
+ 9: $pink-900,
+) !default;
+
+$hue-maps: (
+ "gray": $grays,
+ "blue": $blues,
+ "green": $greens,
+ "yellow": $yellows,
+ "orange": $oranges,
+ "red": $reds,
+ "purple": $purples,
+ "pink": $pinks,
+) !default;
diff --git a/assets/scss/_primer/support/variables/colors.scss b/assets/scss/_primer/support/variables/colors.scss
new file mode 100644
index 0000000..ffbf018
--- /dev/null
+++ b/assets/scss/_primer/support/variables/colors.scss
@@ -0,0 +1,63 @@
+@import "color-system.scss";
+// Color variables
+
+// Border colors
+$border-white: $white !default;
+$border-black-fade: $black-fade-15 !default;
+$border-white-fade: $white-fade-15 !default;
+$border-gray-dark: $gray-300 !default;
+$border-gray-darker: $gray-700 !default;
+$border-gray-light: lighten($gray-200, 3%) !default;
+$border-gray: $gray-200 !default;
+$border-blue: $blue-500 !default;
+$border-blue-light: $blue-200 !default;
+$border-green: $green-400 !default;
+$border-green-light: desaturate($green-300, 40%) !default;
+$border-purple: $purple !default;
+$border-red: $red !default;
+$border-red-light: desaturate($red-300, 60%) !default;
+$border-yellow: desaturate($yellow-300, 60%) !default;
+
+// Buttons have a slightly more opaque border than $border-black-fade (15% alpha)
+$border-color-button: rgba($black, 0.2) !default;
+
+// Background colors
+$bg-white: $white !default;
+$bg-black: $black !default;
+$bg-black-fade: $black-fade-50 !default;
+$bg-blue-light: $blue-000 !default;
+$bg-blue: $blue-500 !default;
+$bg-gray-dark: $gray-900 !default;
+$bg-gray-light: $gray-000 !default;
+$bg-gray: $gray-100 !default;
+$bg-green: $green-500 !default;
+$bg-green-light: $green-100 !default;
+$bg-orange: $orange-700 !default;
+$bg-purple: $purple-500 !default;
+$bg-purple-light: $purple-000 !default;
+$bg-pink: $pink-500 !default;
+$bg-red: $red-500 !default;
+$bg-red-light: $red-100 !default;
+$bg-yellow: $yellow-500 !default;
+$bg-yellow-light: $yellow-200 !default;
+$bg-yellow-dark: $yellow-700 !default;
+
+// diffstat background colors
+$bg-diffstat-added: darken($green-400, 5%) !default;
+$bg-diffstat-deleted: $red-600 !default;
+$bg-diffstat-neutral: $gray-300 !default;
+
+// Text colors
+$text-black: $black !default;
+$text-white: $white !default;
+$text-blue: $blue-500 !default;
+$text-gray-dark: $gray-900 !default;
+$text-gray-light: $gray-500 !default;
+$text-gray: $gray-600 !default;
+$text-green: $green-500 !default;
+$text-orange: $orange-900 !default;
+$text-orange-light: $orange-600 !default;
+$text-purple: $purple !default;
+$text-pink: $pink-500 !default;
+$text-red: $red-600 !default;
+$text-yellow: $yellow-800 !default;
diff --git a/assets/scss/_primer/support/variables/layout.scss b/assets/scss/_primer/support/variables/layout.scss
new file mode 100644
index 0000000..cec508c
--- /dev/null
+++ b/assets/scss/_primer/support/variables/layout.scss
@@ -0,0 +1,129 @@
+// Layout variables
+
+// these are values for the display CSS property
+$display-values: (
+ block,
+ flex,
+ inline,
+ inline-block,
+ inline-flex,
+ none,
+ table,
+ table-cell
+) !default;
+
+// maps edges to respective corners for border-radius
+$edges: (
+ top: (top-left, top-right),
+ right: (top-right, bottom-right),
+ bottom: (bottom-right, bottom-left),
+ left: (bottom-left, top-left)
+) !default;
+
+// These are our margin and padding utility spacers. The default step size we
+// use is 8px. This gives us a key of:
+// 0 => 0px
+// 1 => 4px
+// 2 => 8px
+// 3 => 16px
+// 4 => 24px
+// 5 => 32px
+// 6 => 40px
+$spacer: 8px !default;
+
+// Our spacing scale
+$spacer-0: 0 !default; // 0
+$spacer-1: round($spacer / 2) !default; // 4px
+$spacer-2: $spacer !default; // 8px
+$spacer-3: $spacer * 2 !default; // 16px
+$spacer-4: $spacer * 3 !default; // 24px
+$spacer-5: $spacer * 4 !default; // 32px
+$spacer-6: $spacer * 5 !default; // 40px
+
+// The list of spacer values
+$spacers: (
+ $spacer-0,
+ $spacer-1,
+ $spacer-2,
+ $spacer-3,
+ $spacer-4,
+ $spacer-5,
+ $spacer-6,
+) !default;
+
+// And the map of spacers, for easier looping:
+// @each $scale, $length in $spacer-map { ... }
+$spacer-map: (
+ 0: $spacer-0,
+ 1: $spacer-1,
+ 2: $spacer-2,
+ 3: $spacer-3,
+ 4: $spacer-4,
+ 5: $spacer-5,
+ 6: $spacer-6,
+) !default;
+
+// Em spacer variables
+$em-spacer-1: 0.0625em !default; // 1/16
+$em-spacer-2: 0.125em !default; // 1/8
+$em-spacer-3: 0.25em !default; // 1/4
+$em-spacer-4: 0.375em !default; // 3/8
+$em-spacer-5: 0.5em !default; // 1/2
+$em-spacer-6: 0.75em !default; // 3/4
+
+// Fixed-width container variables
+$container-width: 980px !default;
+$grid-gutter: 10px !default;
+
+// Breakpoint widths
+$width-xs: 0 !default;
+// Small screen / phone
+$width-sm: 544px !default;
+// Medium screen / tablet
+$width-md: 768px !default;
+// Large screen / desktop (980 + (16 * 2)) <= container + gutters
+$width-lg: 1012px !default;
+// Extra large screen / wide desktop
+$width-xl: 1280px !default;
+
+// Responsive container widths
+$container-sm: $width-sm !default;
+$container-md: $width-md !default;
+$container-lg: $width-lg !default;
+$container-xl: $width-xl !default;
+
+// Breakpoints in the form (name: length)
+$breakpoints: (
+ sm: $width-sm,
+ md: $width-md,
+ lg: $width-lg,
+ xl: $width-xl
+) !default;
+
+// This map in the form (breakpoint: variant) is used to iterate over
+// breakpoints and create both responsive and non-responsive classes in one
+// loop:
+//
+// ```scss
+// @each $breakpoint, $variant of $responsive-variants {
+// @include breakpoint($breakpoint) {
+// .foo#{$variant}-bar { foo: bar !important; }
+// }
+// }
+// ```
+$responsive-variants: (
+ "": "",
+ sm: "-sm",
+ md: "-md",
+ lg: "-lg",
+ xl: "-xl",
+) !default;
+
+// responive utility position values
+$responsive-positions: (
+ static,
+ relative,
+ absolute,
+ fixed,
+ sticky
+) !default;
diff --git a/assets/scss/_primer/support/variables/misc.scss b/assets/scss/_primer/support/variables/misc.scss
new file mode 100644
index 0000000..30a8363
--- /dev/null
+++ b/assets/scss/_primer/support/variables/misc.scss
@@ -0,0 +1,26 @@
+// Miscellaneous variables
+
+// Border size
+$border-width: 1px !default;
+$border-color: $border-gray !default;
+$border-style: solid !default;
+$border: $border-width $border-color $border-style !default;
+$border-radius: 3px !default;
+
+// Box shadow
+$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
+$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
+$box-shadow-large: 0 1px 15px $black-fade-15 !default;
+$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
+
+// Button and form variables
+$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
+$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default;
+$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default;
+
+// Tooltips
+$tooltip-max-width: 250px !default;
+$tooltip-background-color: $black !default;
+$tooltip-text-color: $white !default;
+$tooltip-delay: 0.4s !default;
+$tooltip-duration: 0.1s !default;
diff --git a/assets/scss/_primer/support/variables/typography.scss b/assets/scss/_primer/support/variables/typography.scss
new file mode 100644
index 0000000..dcb57a7
--- /dev/null
+++ b/assets/scss/_primer/support/variables/typography.scss
@@ -0,0 +1,42 @@
+// Typography variables
+
+// Heading sizes - mobile
+// h4-h6 remain the same size on both mobile & desktop
+$h00-size-mobile: 40px !default;
+$h0-size-mobile: 32px !default;
+$h1-size-mobile: 26px !default;
+$h2-size-mobile: 22px !default;
+$h3-size-mobile: 18px !default;
+
+// Heading sizes - desktop
+$h00-size: 48px !default;
+$h0-size: 40px !default;
+$h1-size: 32px !default;
+$h2-size: 24px !default;
+$h3-size: 20px !default;
+$h4-size: 16px !default;
+$h5-size: 14px !default;
+$h6-size: 12px !default;
+
+$font-size-small: 12px !default;
+
+// Font weights
+$font-weight-bold: 600 !default;
+$font-weight-semibold: 500 !default;
+$font-weight-normal: 400 !default;
+$font-weight-light: 300 !default;
+
+// Line heights
+$lh-condensed-ultra: 1 !default;
+$lh-condensed: 1.25 !default;
+$lh-default: 1.5 !default;
+
+// Font stacks
+$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;
+
+// Monospace font stack
+$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !default;
+
+// The base body size
+$body-font-size: 14px !default;
+$body-line-height: $lh-default !default;
diff --git a/assets/scss/_primer/utilities/layout.scss b/assets/scss/_primer/utilities/layout.scss
new file mode 100644
index 0000000..1b4da95
--- /dev/null
+++ b/assets/scss/_primer/utilities/layout.scss
@@ -0,0 +1,87 @@
+// Layout
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
+
+// Loop through the breakpoint values
+@each $breakpoint, $variant in $responsive-variants {
+ @include breakpoint($breakpoint) {
+ @each $position in $responsive-positions {
+ .position#{$variant}-#{$position} {
+ position: $position !important;
+ }
+ }
+ }
+}
+
+/* Set top 0 */
+.top-0 { top: 0 !important; }
+/* Set right 0 */
+.right-0 { right: 0 !important; }
+/* Set bottom 0 */
+.bottom-0 { bottom: 0 !important; }
+/* Set left 0 */
+.left-0 { left: 0 !important; }
+
+/* Vertical align middle */
+.v-align-middle { vertical-align: middle !important; }
+/* Vertical align top */
+.v-align-top { vertical-align: top !important; }
+/* Vertical align bottom */
+.v-align-bottom { vertical-align: bottom !important; }
+/* Vertical align to the top of the text */
+.v-align-text-top { vertical-align: text-top !important; }
+/* Vertical align to the bottom of the text */
+.v-align-text-bottom { vertical-align: text-bottom !important; }
+/* Vertical align to the parent's baseline */
+.v-align-baseline { vertical-align: baseline !important; }
+
+// Overflow utilities
+@each $overflow in (visible, hidden, auto, scroll) {
+ .overflow-#{$overflow} { overflow: $overflow !important; }
+ .overflow-x-#{$overflow} { overflow-x: $overflow !important; }
+ .overflow-y-#{$overflow} { overflow-y: $overflow !important; }
+}
+
+// Clear floats
+/* Clear floats around the element */
+.clearfix {
+ @include clearfix;
+}
+
+// Floats
+@each $breakpoint, $variant in $responsive-variants {
+ @include breakpoint($breakpoint) {
+ /* Float to the left */
+ .float#{$variant}-left { float: left !important; }
+ /* Float to the right */
+ .float#{$variant}-right { float: right !important; }
+ /* No float */
+ .float#{$variant}-none { float: none !important; }
+ }
+}
+
+// Width and height utilities, helpful in combination
+// with display-table utilities and images
+/* Max width 100% */
+.width-fit { max-width: 100% !important; }
+/* Set the width to 100% */
+.width-full { width: 100% !important; }
+/* Max height 100% */
+.height-fit { max-height: 100% !important; }
+/* Set the height to 100% */
+.height-full { height: 100% !important; }
+
+/* Remove min-width from element */
+.min-width-0 { min-width: 0 !important; }
+
+@each $breakpoint, $variant in $responsive-variants {
+ @include breakpoint($breakpoint) {
+
+ // Auto varients
+ .width#{$variant}-auto { width: auto !important; }
+
+ /* Set the direction to rtl */
+ .direction#{$variant}-rtl { direction: rtl !important; }
+ /* Set the direction to ltr */
+ .direction#{$variant}-ltr { direction: ltr !important; }
+ }
+}
diff --git a/assets/scss/_var.scss b/assets/scss/_var.scss
new file mode 100644
index 0000000..d473787
--- /dev/null
+++ b/assets/scss/_var.scss
@@ -0,0 +1,35 @@
+$font-size-0: 2rem !default; // 16px->32px
+$font-size-1: 1.75rem !default; // 16px->28px #
+$font-size-2: 1.5rem !default; // 16px->24px ##
+$font-size-3: 1.25rem !default; // 16px->20px ###
+$font-size-4: 1rem !default; // 16px->16px ####
+
+// used primer variables
+// @primer/css/support/variables/misc.scss
+$font-weight-bold: 600;
+$font-weight-semibold: 600;
+$font-weight-normal: 400;
+$font-weight-light: 400;
+$body-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC',
+ 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif !default;
+$mono-font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Consolas', $body-font !default;
+$body-font-size: 16px !default;
+
+@font-face {
+ font-family: 'Product Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Product Sans Bold'), local('ProductSans-Bold'),
+ url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.4.5/product-sans/product-sans-bold.woff2') format('woff2');
+ unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Cascadia Code';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Cascadia Code Regular'),
+ url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.4.5/cascadia-code/cascadia.woff2') format('woff2');
+}
diff --git a/assets/scss/fuji.scss b/assets/scss/fuji.scss
new file mode 100644
index 0000000..b9982c5
--- /dev/null
+++ b/assets/scss/fuji.scss
@@ -0,0 +1,24 @@
+@import '_custom';
+
+// var & global
+@import '_var';
+@import '_global';
+
+// primer
+@import '_primer/support/index.scss'; // support
+@import '_primer/base/index.scss'; // base
+@import '_primer/layout/container.scss'; // containers
+@import '_primer/layout/grid.scss'; // grid system
+@import '_primer/markdown/index.scss'; // markdown parsing system
+@import '_primer/utilities/layout.scss'; // float and clearfix
+
+// style
+@import '_fuji-style/_header';
+@import '_fuji-style/_content';
+@import '_fuji-style/_sidebar';
+@import '_fuji-style/_footer';
+@import '_fuji-style/_components';
+
+// theme
+@import '_fuji-theme/_light';
+@import '_fuji-theme/_dark';
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index f648160..7141a40 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -33,7 +33,7 @@
{{ template "_internal/twitter_cards.html" . }}
-{{ $sass := resources.Get "fuji.scss" }}
+{{ $sass := resources.Get "scss/fuji.scss" }}
{{ $options := (dict "targetPath" "assets/css/fuji.min.css" "outputStyle" "compressed" "enableSourceMap" true) }}
{{ $style := $sass | resources.ToCSS $options }}
diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html
index 220ee93..1e02812 100644
--- a/layouts/partials/scripts-end.html
+++ b/layouts/partials/scripts-end.html
@@ -1,11 +1,8 @@
-{{ if .Site.Params.customHighlight }}
-
-{{ else }}
-
-{{ end }}
-
+
+
+
{{ with .Params.playerURL }}
diff --git a/static/assets/js/fuji.dev.js b/static/assets/js/fuji.dev.js
deleted file mode 100644
index d6917a3..0000000
--- a/static/assets/js/fuji.dev.js
+++ /dev/null
@@ -1,130 +0,0 @@
-'use strict';
-
-// toggle theme
-function toggleTheme() {
- $('body').attr('data-theme', (index, attr) => {
- if (attr === 'light') {
- localStorage.setItem('fuji_theme', 'dark');
- return 'dark';
- } else {
- localStorage.setItem('fuji_theme', 'light');
- return 'light';
- }
- });
-}
-
-// update medium-zoom theme
-// @params targetTheme, mediumInst
-function updateMeidumTheme(targetTheme, mediumInst) {
- if (targetTheme && mediumInst) {
- mediumInst.detach();
- if (targetTheme === 'dark') {
- mediumInst = mediumZoom('.img-zoomable', {
- background: '#2f3136',
- });
- } else {
- mediumInst = mediumZoom('.img-zoomable', {
- background: '#fffffd',
- });
- }
- }
-}
-
-// update utterances theme
-// @params targetTheme, utterancesFrame
-function updateUtterancesTheme(targetTheme, utterancesFrame) {
- if (targetTheme && utterancesFrame) {
- if (targetTheme === 'dark') {
- utterancesFrame.contentWindow.postMessage(
- {
- type: 'set-theme',
- theme: 'photon-dark',
- },
- 'https://utteranc.es'
- );
- } else {
- utterancesFrame.contentWindow.postMessage(
- {
- type: 'set-theme',
- theme: 'github-light',
- },
- 'https://utteranc.es'
- );
- }
- }
-}
-
-// to-top button
-$('.btn .btn-scroll-top').on('click', () => {
- $('html, body').animate({
- scrollTop: 0,
- });
-});
-
-// toc anchors
-$('.sidebar-toc a').on('click', (event) => {
- $('html, body').animate({
- scrollTop: $($(event.currentTarget).attr('href')).offset().top,
- });
-});
-
-// remove empty ul in toc if article only have ## and ###
-if ($('.sidebar-toc ul ul').length > 0 && $('.sidebar-toc ul ul li').text() === '') {
- $('.sidebar-toc ul ul').hide();
-}
-
-// init medium-zoom
-var mediumInst; // medium-zoom instance
-if ($('body').attr('data-theme') === 'dark') {
- mediumInst = mediumZoom('.img-zoomable', {
- background: '#2f3136',
- });
-} else {
- mediumInst = mediumZoom('.img-zoomable', {
- background: '#fffffd',
- });
-}
-
-// init highlight.js
-hljs.initHighlighting();
-
-// if in post page and using utterances
-// add utterances comment loading indicator
-if ($('.post-loading').length >= 1) {
- var commentStatus; // utterence status
- var commentLoadingTime = 0; // loading time passed
- var commentCheckInterval = self.setInterval(checkUtterances, 500);
-
- function checkUtterances() {
- commentStatus = $('.post-comment .utterances').attr('style');
- if (commentStatus) {
- clearInterval(commentCheckInterval);
- updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]);
- $('.post-loading').hide();
- } else {
- if (++commentLoadingTime > 20) {
- clearInterval(commentCheckInterval);
- $('.post-comment').hide();
- $('.post-loading i').attr('class', 'far fa-times-circle');
- }
- }
- }
-}
-
-// init theme switch button
-$('.btn .btn-toggle-mode').on('click', () => {
- // toggle theme
- toggleTheme();
- // update medium background
- updateMeidumTheme($('body').attr('data-theme'), mediumInst);
- // switch comment area theme
- // only works after comment area are initialized
- if ($('.post-loading').length >= 1 && commentStatus) {
- updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]);
- }
- if ($('#disqus_thread').length >= 1 && typeof DISQUS !== 'undefined') {
- DISQUS.reset({
- reload: true,
- });
- }
-});
diff --git a/static/assets/js/fuji.js b/static/assets/js/fuji.js
new file mode 100644
index 0000000..0a81db2
--- /dev/null
+++ b/static/assets/js/fuji.js
@@ -0,0 +1,127 @@
+'use strict';
+
+// toggle theme
+function toggleTheme() {
+ $('body').attr('data-theme', (index, attr) => {
+ if (attr === 'light') {
+ localStorage.setItem('fuji_theme', 'dark');
+ return 'dark';
+ } else {
+ localStorage.setItem('fuji_theme', 'light');
+ return 'light';
+ }
+ });
+}
+
+// update medium-zoom theme
+// @params targetTheme, mediumInst
+function updateMeidumTheme(targetTheme, mediumInst) {
+ if (targetTheme && mediumInst) {
+ mediumInst.detach();
+ if (targetTheme === 'dark') {
+ mediumInst = mediumZoom('.img-zoomable', {
+ background: '#2f3136',
+ });
+ } else {
+ mediumInst = mediumZoom('.img-zoomable', {
+ background: '#fffffd',
+ });
+ }
+ }
+}
+
+// update utterances theme
+// @params targetTheme, utterancesFrame
+function updateUtterancesTheme(targetTheme, utterancesFrame) {
+ if (targetTheme && utterancesFrame) {
+ if (targetTheme === 'dark') {
+ utterancesFrame.contentWindow.postMessage(
+ {
+ type: 'set-theme',
+ theme: 'photon-dark',
+ },
+ 'https://utteranc.es'
+ );
+ } else {
+ utterancesFrame.contentWindow.postMessage(
+ {
+ type: 'set-theme',
+ theme: 'github-light',
+ },
+ 'https://utteranc.es'
+ );
+ }
+ }
+}
+
+// to-top button
+$('.btn .btn-scroll-top').on('click', () => {
+ $('html, body').animate({
+ scrollTop: 0,
+ });
+});
+
+// toc anchors
+$('.sidebar-toc a').on('click', (event) => {
+ $('html, body').animate({
+ scrollTop: $($(event.currentTarget).attr('href')).offset().top,
+ });
+});
+
+// remove empty ul in toc if article only have ## and ###
+if ($('.sidebar-toc ul ul').length > 0 && $('.sidebar-toc ul ul li').text() === '') {
+ $('.sidebar-toc ul ul').hide();
+}
+
+// init medium-zoom
+var mediumInst; // medium-zoom instance
+if ($('body').attr('data-theme') === 'dark') {
+ mediumInst = mediumZoom('.img-zoomable', {
+ background: '#2f3136',
+ });
+} else {
+ mediumInst = mediumZoom('.img-zoomable', {
+ background: '#fffffd',
+ });
+}
+
+// if in post page and using utterances
+// add utterances comment loading indicator
+if ($('.post-loading').length >= 1) {
+ var commentStatus; // utterence status
+ var commentLoadingTime = 0; // loading time passed
+ var commentCheckInterval = self.setInterval(checkUtterances, 500);
+
+ function checkUtterances() {
+ commentStatus = $('.post-comment .utterances').attr('style');
+ if (commentStatus) {
+ clearInterval(commentCheckInterval);
+ updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]);
+ $('.post-loading').hide();
+ } else {
+ if (++commentLoadingTime > 20) {
+ clearInterval(commentCheckInterval);
+ $('.post-comment').hide();
+ $('.post-loading i').attr('class', 'far fa-times-circle');
+ }
+ }
+ }
+}
+
+// init theme switch button
+$('.btn .btn-toggle-mode').on('click', () => {
+ // toggle theme
+ toggleTheme();
+ // update medium background
+ updateMeidumTheme($('body').attr('data-theme'), mediumInst);
+ // switch comment area theme
+ // only works after comment area are initialized
+ if ($('.post-loading').length >= 1 && commentStatus) {
+ updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]);
+ }
+ if ($('#disqus_thread').length >= 1 && typeof DISQUS !== 'undefined') {
+ DISQUS.reset({
+ reload: true,
+ });
+ }
+});
--
cgit v1.2.3