From 2338da969d3bc1b2bc26df9f7192dd20a0906c5b Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Sun, 31 May 2020 23:06:44 +0800
Subject: Switch to prism.js
---
assets/scss/_custom.scss | 1 +
assets/scss/_fuji-style/_components.scss | 35 ++
assets/scss/_fuji-style/_content.scss | 161 ++++++++
assets/scss/_fuji-style/_footer.scss | 10 +
assets/scss/_fuji-style/_header.scss | 25 ++
assets/scss/_fuji-style/_sidebar.scss | 69 ++++
assets/scss/_fuji-theme/_dark.scss | 171 +++++++++
assets/scss/_fuji-theme/_light.scss | 135 +++++++
assets/scss/_global.scss | 21 +
assets/scss/_primer/base/base.scss | 86 +++++
assets/scss/_primer/base/index.scss | 6 +
assets/scss/_primer/base/kbd.scss | 21 +
assets/scss/_primer/base/normalize.scss | 421 +++++++++++++++++++++
assets/scss/_primer/base/typography-base.scss | 88 +++++
assets/scss/_primer/layout/container.scss | 30 ++
assets/scss/_primer/layout/grid.scss | 64 ++++
assets/scss/_primer/markdown/blob-csv.scss | 29 ++
assets/scss/_primer/markdown/code.scss | 69 ++++
assets/scss/_primer/markdown/headings.scss | 72 ++++
assets/scss/_primer/markdown/images.scss | 131 +++++++
assets/scss/_primer/markdown/index.scss | 8 +
assets/scss/_primer/markdown/lists.scss | 77 ++++
assets/scss/_primer/markdown/markdown-body.scss | 99 +++++
assets/scss/_primer/markdown/tables.scss | 36 ++
assets/scss/_primer/support/index.scss | 11 +
assets/scss/_primer/support/mixins/buttons.scss | 167 ++++++++
assets/scss/_primer/support/mixins/layout.scss | 58 +++
assets/scss/_primer/support/mixins/misc.scss | 29 ++
assets/scss/_primer/support/mixins/typography.scss | 84 ++++
.../_primer/support/variables/color-system.scss | 243 ++++++++++++
assets/scss/_primer/support/variables/colors.scss | 63 +++
assets/scss/_primer/support/variables/layout.scss | 129 +++++++
assets/scss/_primer/support/variables/misc.scss | 26 ++
.../scss/_primer/support/variables/typography.scss | 42 ++
assets/scss/_primer/utilities/layout.scss | 87 +++++
assets/scss/_var.scss | 35 ++
assets/scss/fuji.scss | 24 ++
37 files changed, 2863 insertions(+)
create mode 100644 assets/scss/_custom.scss
create mode 100644 assets/scss/_fuji-style/_components.scss
create mode 100644 assets/scss/_fuji-style/_content.scss
create mode 100644 assets/scss/_fuji-style/_footer.scss
create mode 100644 assets/scss/_fuji-style/_header.scss
create mode 100644 assets/scss/_fuji-style/_sidebar.scss
create mode 100644 assets/scss/_fuji-theme/_dark.scss
create mode 100644 assets/scss/_fuji-theme/_light.scss
create mode 100644 assets/scss/_global.scss
create mode 100644 assets/scss/_primer/base/base.scss
create mode 100644 assets/scss/_primer/base/index.scss
create mode 100644 assets/scss/_primer/base/kbd.scss
create mode 100644 assets/scss/_primer/base/normalize.scss
create mode 100644 assets/scss/_primer/base/typography-base.scss
create mode 100644 assets/scss/_primer/layout/container.scss
create mode 100644 assets/scss/_primer/layout/grid.scss
create mode 100644 assets/scss/_primer/markdown/blob-csv.scss
create mode 100644 assets/scss/_primer/markdown/code.scss
create mode 100644 assets/scss/_primer/markdown/headings.scss
create mode 100644 assets/scss/_primer/markdown/images.scss
create mode 100644 assets/scss/_primer/markdown/index.scss
create mode 100644 assets/scss/_primer/markdown/lists.scss
create mode 100644 assets/scss/_primer/markdown/markdown-body.scss
create mode 100644 assets/scss/_primer/markdown/tables.scss
create mode 100644 assets/scss/_primer/support/index.scss
create mode 100644 assets/scss/_primer/support/mixins/buttons.scss
create mode 100644 assets/scss/_primer/support/mixins/layout.scss
create mode 100644 assets/scss/_primer/support/mixins/misc.scss
create mode 100644 assets/scss/_primer/support/mixins/typography.scss
create mode 100644 assets/scss/_primer/support/variables/color-system.scss
create mode 100644 assets/scss/_primer/support/variables/colors.scss
create mode 100644 assets/scss/_primer/support/variables/layout.scss
create mode 100644 assets/scss/_primer/support/variables/misc.scss
create mode 100644 assets/scss/_primer/support/variables/typography.scss
create mode 100644 assets/scss/_primer/utilities/layout.scss
create mode 100644 assets/scss/_var.scss
create mode 100644 assets/scss/fuji.scss
(limited to 'assets/scss')
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
new file mode 100644
index 0000000..ca09079
--- /dev/null
+++ b/assets/scss/_custom.scss
@@ -0,0 +1 @@
+// wtb covered
diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss
new file mode 100644
index 0000000..429d869
--- /dev/null
+++ b/assets/scss/_fuji-style/_components.scss
@@ -0,0 +1,35 @@
+.btn {
+ position: fixed;
+ right: 1.5rem;
+ bottom: 1.5rem;
+ width: 2.5rem;
+ height: 5rem;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+
+ div {
+ flex: 0 1 auto;
+ width: 2.5rem;
+ height: 2.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ &:first-child {
+ border-radius: 0.25rem 0.25rem 0 0;
+ font-size: 1.25rem;
+ }
+
+ &:last-child {
+ border-radius: 0 0 0.25rem 0.25rem;
+ font-size: 1.3rem;
+ }
+ }
+}
+
+#post-aplayer {
+ margin: 0 0.125rem 1.25rem 0.125rem;
+ font-family: inherit;
+}
diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss
new file mode 100644
index 0000000..fcb4f3b
--- /dev/null
+++ b/assets/scss/_fuji-style/_content.scss
@@ -0,0 +1,161 @@
+.content {
+ padding: 1.5rem 1.5rem 0 1.5rem; // same as sidebar
+}
+
+.post {
+ // paddings between posts
+ &:not(:first-child) {
+ padding: 1.5rem 0;
+ }
+
+ &:first-child {
+ padding: 0 0 1.5rem 0;
+ }
+}
+
+.post-title {
+ font-size: $font-size-1;
+}
+
+.post-meta {
+ margin: 0.5rem 0.25rem 1rem 0.25rem; // little space
+ white-space: nowrap;
+ overflow-x: scroll;
+
+ time,
+ span:not(:last-child) {
+ padding-right: 1.5rem;
+ }
+
+ &::-webkit-scrollbar {
+ display: none; // WebKit
+ }
+
+ scrollbar-width: none; // Firefox
+ -ms-overflow-style: none; // Microsoft
+
+ i {
+ font-size: 0.875rem;
+ }
+}
+
+.post-summary {
+ margin: 0 0.1rem; // little space
+
+ p:last-child {
+ margin-bottom: 0; // remove margin-bottom of last para in summary
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ display: none; // hide h1-h6 in post summary
+ }
+}
+
+.post-meta-archive {
+ margin: 0.5rem 0.25rem 0 0.25rem; // little space
+ white-space: nowrap;
+ overflow-x: scroll;
+
+ time,
+ span:not(:last-child) {
+ padding-right: 1.5rem;
+ }
+
+ &::-webkit-scrollbar {
+ display: none; // WebKit
+ }
+
+ scrollbar-width: none; // Firefox
+ -ms-overflow-style: none; // Microsoft
+}
+
+.pagination {
+ text-align: center;
+ padding: 1rem 0;
+ font-size: 1.125rem;
+
+ & > div {
+ display: inline-block;
+ width: 2rem;
+ height: 2rem;
+
+ &.pag-item {
+ padding: 0 0.25rem;
+
+ a {
+ vertical-align: middle;
+ }
+ }
+ }
+
+ i {
+ padding: 0 0.25rem;
+ vertical-align: middle;
+ }
+}
+
+.page-info {
+ padding: 0 0.1rem 1.5rem 0.1rem;
+}
+
+// single page part
+article {
+ padding-bottom: 1.5rem;
+
+ .post-content {
+ margin: 1.25rem 0.1rem 0 0.1rem;
+ }
+}
+
+.license {
+ margin-bottom: 1.5rem;
+}
+
+.post-loading {
+ margin: 0 0 1.5rem 0;
+ padding-top: 1.5rem;
+ text-align: center;
+
+ i {
+ font-size: 1.25rem;
+ }
+
+ p {
+ margin: 0.5rem 0 0 0;
+ }
+}
+
+.markdown-body {
+ h1 {
+ font-size: $font-size-1;
+ margin-top: 1.5rem;
+ }
+
+ h2 {
+ font-size: $font-size-2;
+ margin-top: 1.375rem;
+ }
+
+ h3 {
+ font-size: $font-size-3;
+ margin-top: 1.25rem;
+ }
+
+ h4 {
+ margin-top: 1.25rem;
+ }
+
+ ul {
+ list-style-type: circle;
+ }
+
+ img {
+ max-width: 98%;
+ margin: 0 0.25rem 0.5rem 0.25rem;
+ }
+}
diff --git a/assets/scss/_fuji-style/_footer.scss b/assets/scss/_fuji-style/_footer.scss
new file mode 100644
index 0000000..ab1bde1
--- /dev/null
+++ b/assets/scss/_fuji-style/_footer.scss
@@ -0,0 +1,10 @@
+footer {
+ .footer {
+ padding: 2rem 1.5rem;
+ text-align: center;
+
+ i {
+ font-size: 0.875rem;
+ }
+ }
+}
diff --git a/assets/scss/_fuji-style/_header.scss b/assets/scss/_fuji-style/_header.scss
new file mode 100644
index 0000000..29afe07
--- /dev/null
+++ b/assets/scss/_fuji-style/_header.scss
@@ -0,0 +1,25 @@
+header {
+ .header {
+ padding: 1.75rem 1.5rem 2rem 1.5rem;
+ }
+
+ .title-main {
+ font-size: 2.5rem;
+ font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, monospace;
+ font-weight: 700;
+ white-space: nowrap;
+ }
+
+ .title-sub {
+ margin: 0 0.1rem;
+ display: block;
+ white-space: nowrap;
+
+ &::-webkit-scrollbar {
+ display: none; // WebKit
+ }
+
+ scrollbar-width: none; // Firefox
+ -ms-overflow-style: none; // Microsoft
+ }
+}
diff --git a/assets/scss/_fuji-style/_sidebar.scss b/assets/scss/_fuji-style/_sidebar.scss
new file mode 100644
index 0000000..132a22f
--- /dev/null
+++ b/assets/scss/_fuji-style/_sidebar.scss
@@ -0,0 +1,69 @@
+.sidebar {
+ padding: 1.5rem 1.5rem 1.5rem 0; // no left padding on big screen
+}
+
+.sidebar-item {
+ &:not(:last-child) {
+ margin-bottom: 1rem; // space betreen sidebar items
+ }
+
+ h3 {
+ margin-bottom: 0.25rem; // space betreen head3 & lists
+ }
+
+ ul {
+ list-style-type: none;
+ margin: 0 0.1rem; // little space
+ }
+
+ & > div,
+ & > nav {
+ margin: 0 0.1rem; // little space
+ }
+
+ & > img {
+ margin: 0.5rem 0.25rem 0 0.25rem;
+ width: 100%;
+ border-radius: 2px;
+ }
+}
+
+@media screen and (max-width: $width-md) {
+ .sidebar {
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ }
+
+ .sidebar-item {
+ width: 40%; // max 2 modules per line
+
+ // space only at first 2 modules
+ .sidebar-pages,
+ .sidebar-tags {
+ margin-bottom: 1rem;
+ }
+
+ .sidebar-links,
+ .sidebar-bgm {
+ margin-bottom: 0;
+ }
+
+ & > img {
+ margin: 0.5rem 0.25rem 0 0.25rem;
+ width: 75%;
+ border-radius: 0.25rem;
+ }
+ }
+}
+
+// single page part
+.sidebar-toc {
+ ul ul {
+ font-size: 0.875rem;
+ padding-left: 0.5rem;
+ margin-bottom: 0.25rem;
+ }
+}
diff --git a/assets/scss/_fuji-theme/_dark.scss b/assets/scss/_fuji-theme/_dark.scss
new file mode 100644
index 0000000..9be3b61
--- /dev/null
+++ b/assets/scss/_fuji-theme/_dark.scss
@@ -0,0 +1,171 @@
+$color-primary-dark: #8aa2d3; // https://irocore.com/aofuji/
+$color-primary-dark-dark: #e6e6e6; // https://irocore.com/shironezumi/
+$color-secondary-dark: #bab1df; // https://irocore.com/fujimurasaki/
+$color-mute-dark: #9ea1a3; // https://irocore.com/suzu-iro/
+$color-font-dark: #c0c0c0; // https://irocore.com/gin-iro/
+$color-divider-dark: #4d5158; // discord
+$color-bg-dark: #2f3136; // discord
+
+$divider-dark: 2px solid $color-divider-dark;
+
+@mixin link-1 {
+ a {
+ color: $color-primary-dark;
+ }
+
+ a:hover {
+ color: $color-secondary-dark;
+ }
+}
+
+@mixin link-2 {
+ a {
+ color: $color-secondary-dark;
+ }
+
+ a:hover {
+ color: $color-primary-dark-dark;
+ }
+}
+
+body[data-theme='dark'] {
+ background-color: $color-bg-dark;
+ color: $color-font-dark;
+
+ @include link-1();
+
+ .post-summary,
+ .post-meta {
+ @include link-2();
+ }
+
+ .pag-current a,
+ .pag-current a:hover {
+ color: $color-primary-dark-dark;
+ }
+
+ .title-sub,
+ .post-meta {
+ color: $color-mute-dark;
+ }
+
+ header,
+ .page-info {
+ border-bottom: $divider-dark;
+ }
+
+ .post + .post,
+ .pagination,
+ footer {
+ border-top: $divider-dark;
+ }
+
+ .post-meta-archive {
+ @include link-2();
+
+ color: $color-mute-dark;
+ }
+
+ @media screen and (max-width: $width-md) {
+ .sidebar {
+ border-top: $divider-dark;
+ }
+ }
+
+ // single page part
+ .post-content {
+ @include link-2();
+ }
+
+ .markdown-body {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: $color-primary-dark;
+ }
+
+ h1,
+ h2 {
+ border-bottom: $divider-dark;
+ }
+
+ blockquote {
+ color: $color-mute;
+ }
+
+ img {
+ border-radius: 2px;
+ background-color: inherit; // fix white pixels under border-radius
+ }
+
+ hr {
+ height: 2px;
+ }
+ }
+
+ .post-loading,
+ .post-comment .utterances-frame,
+ .post-comment #disqus_thread {
+ border-top: $divider-dark;
+ }
+
+ // components
+ .btn {
+ div {
+ background-color: $color-divider-dark;
+ color: $color-primary-dark;
+ }
+
+ div:hover {
+ background-color: $color-primary-dark;
+ color: $color-divider-dark;
+ }
+
+ div + div {
+ border-top: 2px solid $color-bg-dark;
+ }
+ }
+
+ // prism.js theme [tomorrow-dark]
+ @import '../../css/prism-solarizeddark';
+
+ // diff from light
+ img {
+ filter: brightness(60%);
+ }
+
+ table {
+ th,
+ td {
+ border-color: $color-font-dark;
+ }
+
+ tr {
+ background-color: $color-bg-dark;
+ border-color: $color-font-dark;
+
+ &:nth-child(2n) {
+ background-color: $color-divider-dark;
+ }
+ }
+ }
+
+ #post-aplayer {
+ background-color: $color-divider-dark;
+ }
+
+ .aplayer .aplayer-info .aplayer-music .aplayer-author {
+ color: $color-font-dark !important;
+ }
+
+ .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
+ fill: $color-font-dark !important;
+ }
+
+ .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
+ fill: $color-primary-dark-dark !important;
+ }
+}
diff --git a/assets/scss/_fuji-theme/_light.scss b/assets/scss/_fuji-theme/_light.scss
new file mode 100644
index 0000000..02749ed
--- /dev/null
+++ b/assets/scss/_fuji-theme/_light.scss
@@ -0,0 +1,135 @@
+$color-primary: #8aa2d3; // https://irocore.com/aofuji/
+$color-primary-dark: #3b469b; // https://irocore.com/aomurasaki/
+$color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/
+$color-mute: #9ea1a3; // https://irocore.com/suzu-iro/
+$color-font: #3f4551; // https://irocore.com/konnezu/
+$color-divider: #e5e2e4; // https://irocore.com/komachinezu/
+$color-bg: #fffffd; // https://irocore.com/shiro/
+
+$divider: 2px solid $color-divider;
+
+@mixin link-1 {
+ a {
+ color: $color-primary;
+ }
+
+ a:hover {
+ color: $color-secondary;
+ }
+}
+
+@mixin link-2 {
+ a {
+ color: $color-secondary;
+ }
+
+ a:hover {
+ color: $color-primary-dark;
+ }
+}
+
+body[data-theme='light'] {
+ background-color: $color-bg;
+ color: $color-font;
+
+ @include link-1();
+
+ .post-summary,
+ .post-meta {
+ @include link-2();
+ }
+
+ .pag-current a,
+ .pag-current a:hover {
+ color: $color-primary-dark;
+ }
+
+ .title-sub,
+ .post-meta {
+ color: $color-mute;
+ }
+
+ header,
+ .page-info {
+ border-bottom: $divider;
+ }
+
+ .post + .post,
+ .pagination,
+ footer {
+ border-top: $divider;
+ }
+
+ .post-meta-archive {
+ @include link-2();
+
+ color: $color-mute;
+ }
+
+ @media screen and (max-width: $width-md) {
+ .sidebar {
+ border-top: $divider;
+ }
+ }
+
+ // single page part
+ .post-content {
+ @include link-2();
+ }
+
+ .markdown-body {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: $color-primary;
+ }
+
+ h1,
+ h2 {
+ border-bottom: $divider;
+ }
+
+ blockquote {
+ color: $color-mute;
+ }
+
+ img {
+ border-radius: 2px;
+ background-color: inherit; // fix white pixels under border-radius
+ }
+
+ hr {
+ height: 2px;
+ }
+ }
+
+ .post-loading,
+ .post-comment .utterances-frame,
+ .post-comment #disqus_thread {
+ border-top: $divider;
+ }
+
+ // components
+ .btn {
+ div {
+ background-color: $color-divider;
+
+ color: $color-primary;
+ }
+
+ div:hover {
+ background-color: $color-primary;
+ color: $color-divider;
+ }
+
+ div + div {
+ border-top: 2px solid $color-bg;
+ }
+ }
+
+ // prism.js theme [olarized-light]
+ @import '../../css/prism-solarizedlight';
+}
diff --git a/assets/scss/_global.scss b/assets/scss/_global.scss
new file mode 100644
index 0000000..fb2c3f9
--- /dev/null
+++ b/assets/scss/_global.scss
@@ -0,0 +1,21 @@
+* {
+ box-sizing: border-box;
+}
+
+// sticky footer
+html {
+ height: 100%;
+}
+body {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+main {
+ flex: 1 1 auto;
+}
+
+// remove text decoration
+a:hover {
+ text-decoration: none !important;
+}
diff --git a/assets/scss/_primer/base/base.scss b/assets/scss/_primer/base/base.scss
new file mode 100644
index 0000000..381fa89
--- /dev/null
+++ b/assets/scss/_primer/base/base.scss
@@ -0,0 +1,86 @@
+// stylelint-disable selector-max-type
+* {
+ box-sizing: border-box;
+}
+
+input,
+select,
+textarea,
+button {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+}
+
+body {
+ font-family: $body-font;
+ font-size: $body-font-size;
+ line-height: $body-line-height;
+ color: $text-gray-dark;
+ background-color: $bg-white;
+}
+
+a {
+ color: $text-blue;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+b,
+strong {
+ font-weight: $font-weight-bold;
+}
+
+// Horizontal lines
+//
+// TODO-MDO: Remove `.rule` from everywhere and replace with `
`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';
--
cgit v1.2.3
From 02c3891865c7741b8f772aea75cc01564d2f0ff4 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Mon, 1 Jun 2020 15:44:04 +0800
Subject: Remove jQuery
---
assets/scss/_fuji-theme/_base.scss | 63 ++++++++++
assets/scss/_fuji-theme/_dark-diff.scss | 35 ++++++
assets/scss/_fuji-theme/_dark.scss | 171 ---------------------------
assets/scss/_fuji-theme/_light.scss | 135 ---------------------
assets/scss/_fuji-theme/_style.scss | 203 ++++++++++++++++++++++++++++++++
assets/scss/_global.scss | 2 +
assets/scss/fuji.scss | 4 +-
7 files changed, 305 insertions(+), 308 deletions(-)
create mode 100644 assets/scss/_fuji-theme/_base.scss
create mode 100644 assets/scss/_fuji-theme/_dark-diff.scss
delete mode 100644 assets/scss/_fuji-theme/_dark.scss
delete mode 100644 assets/scss/_fuji-theme/_light.scss
create mode 100644 assets/scss/_fuji-theme/_style.scss
(limited to 'assets/scss')
diff --git a/assets/scss/_fuji-theme/_base.scss b/assets/scss/_fuji-theme/_base.scss
new file mode 100644
index 0000000..d35d8b6
--- /dev/null
+++ b/assets/scss/_fuji-theme/_base.scss
@@ -0,0 +1,63 @@
+@mixin light {
+ --color-mode: 'light';
+ --color-primary: #8aa2d3; // https://irocore.com/aofuji/
+ --color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/
+ --color-focus: #3b469b; // https://irocore.com/aomurasaki/
+ --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/
+ --color-font: #3f4551; // https://irocore.com/konnezu/
+ --color-divider: #e5e2e4; // https://irocore.com/komachinezu/
+ --color-bg: #fffffd; // https://irocore.com/shiro/
+ --color-codebg: #f6f8fa; // GitHub
+}
+
+@mixin dark {
+ --color-mode: 'dark';
+ --color-primary: #8aa2d3; // https://irocore.com/aofuji/
+ --color-secondary: #bab1df; // kai https://irocore.com/fujimurasaki/
+ --color-focus: #e6e6e6; // https://irocore.com/shironezumi/
+ --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/
+ --color-font: #c0c0c0; // https://irocore.com/gin-iro/
+ --color-divider: #4d5158; // Discord
+ --color-bg: #2f3136; // Discord
+ --color-codebg: #414449; // kai GitHub
+}
+
+body[data-theme='auto'] {
+ @include light();
+
+ @media (prefers-color-scheme: dark) {
+ @include dark();
+ @import '_dark-diff'; // things different from light
+ }
+}
+
+body[data-theme='light'] {
+ @include light();
+}
+
+body[data-theme='dark'] {
+ @include dark();
+ @import '_dark-diff'; // things different from light
+}
+
+@mixin link-1 {
+ a {
+ color: var(--color-primary);
+ }
+
+ a:hover {
+ color: var(--color-secondary);
+ }
+}
+
+@mixin link-2 {
+ a {
+ color: var(--color-secondary);
+ }
+
+ a:hover {
+ color: var(--color-focus);
+ }
+}
+
+$divider: 2px solid var(--color-divider);
diff --git a/assets/scss/_fuji-theme/_dark-diff.scss b/assets/scss/_fuji-theme/_dark-diff.scss
new file mode 100644
index 0000000..55f596f
--- /dev/null
+++ b/assets/scss/_fuji-theme/_dark-diff.scss
@@ -0,0 +1,35 @@
+img {
+ filter: brightness(60%);
+}
+
+table {
+ th,
+ td {
+ border-color: var(--color-font);
+ }
+
+ tr {
+ background-color: var(--color-bg);
+ border-color: var(--color-font);
+
+ &:nth-child(2n) {
+ background-color: var(--color-divider);
+ }
+ }
+}
+
+#post-aplayer {
+ background-color: var(--color-divider);
+}
+
+.aplayer .aplayer-info .aplayer-music .aplayer-author {
+ color: var(--color-font) !important;
+}
+
+.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
+ fill: var(--color-font) !important;
+}
+
+.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
+ fill: var(--color-focus) !important;
+}
diff --git a/assets/scss/_fuji-theme/_dark.scss b/assets/scss/_fuji-theme/_dark.scss
deleted file mode 100644
index 9be3b61..0000000
--- a/assets/scss/_fuji-theme/_dark.scss
+++ /dev/null
@@ -1,171 +0,0 @@
-$color-primary-dark: #8aa2d3; // https://irocore.com/aofuji/
-$color-primary-dark-dark: #e6e6e6; // https://irocore.com/shironezumi/
-$color-secondary-dark: #bab1df; // https://irocore.com/fujimurasaki/
-$color-mute-dark: #9ea1a3; // https://irocore.com/suzu-iro/
-$color-font-dark: #c0c0c0; // https://irocore.com/gin-iro/
-$color-divider-dark: #4d5158; // discord
-$color-bg-dark: #2f3136; // discord
-
-$divider-dark: 2px solid $color-divider-dark;
-
-@mixin link-1 {
- a {
- color: $color-primary-dark;
- }
-
- a:hover {
- color: $color-secondary-dark;
- }
-}
-
-@mixin link-2 {
- a {
- color: $color-secondary-dark;
- }
-
- a:hover {
- color: $color-primary-dark-dark;
- }
-}
-
-body[data-theme='dark'] {
- background-color: $color-bg-dark;
- color: $color-font-dark;
-
- @include link-1();
-
- .post-summary,
- .post-meta {
- @include link-2();
- }
-
- .pag-current a,
- .pag-current a:hover {
- color: $color-primary-dark-dark;
- }
-
- .title-sub,
- .post-meta {
- color: $color-mute-dark;
- }
-
- header,
- .page-info {
- border-bottom: $divider-dark;
- }
-
- .post + .post,
- .pagination,
- footer {
- border-top: $divider-dark;
- }
-
- .post-meta-archive {
- @include link-2();
-
- color: $color-mute-dark;
- }
-
- @media screen and (max-width: $width-md) {
- .sidebar {
- border-top: $divider-dark;
- }
- }
-
- // single page part
- .post-content {
- @include link-2();
- }
-
- .markdown-body {
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- color: $color-primary-dark;
- }
-
- h1,
- h2 {
- border-bottom: $divider-dark;
- }
-
- blockquote {
- color: $color-mute;
- }
-
- img {
- border-radius: 2px;
- background-color: inherit; // fix white pixels under border-radius
- }
-
- hr {
- height: 2px;
- }
- }
-
- .post-loading,
- .post-comment .utterances-frame,
- .post-comment #disqus_thread {
- border-top: $divider-dark;
- }
-
- // components
- .btn {
- div {
- background-color: $color-divider-dark;
- color: $color-primary-dark;
- }
-
- div:hover {
- background-color: $color-primary-dark;
- color: $color-divider-dark;
- }
-
- div + div {
- border-top: 2px solid $color-bg-dark;
- }
- }
-
- // prism.js theme [tomorrow-dark]
- @import '../../css/prism-solarizeddark';
-
- // diff from light
- img {
- filter: brightness(60%);
- }
-
- table {
- th,
- td {
- border-color: $color-font-dark;
- }
-
- tr {
- background-color: $color-bg-dark;
- border-color: $color-font-dark;
-
- &:nth-child(2n) {
- background-color: $color-divider-dark;
- }
- }
- }
-
- #post-aplayer {
- background-color: $color-divider-dark;
- }
-
- .aplayer .aplayer-info .aplayer-music .aplayer-author {
- color: $color-font-dark !important;
- }
-
- .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
- fill: $color-font-dark !important;
- }
-
- .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
- fill: $color-primary-dark-dark !important;
- }
-}
diff --git a/assets/scss/_fuji-theme/_light.scss b/assets/scss/_fuji-theme/_light.scss
deleted file mode 100644
index 02749ed..0000000
--- a/assets/scss/_fuji-theme/_light.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-$color-primary: #8aa2d3; // https://irocore.com/aofuji/
-$color-primary-dark: #3b469b; // https://irocore.com/aomurasaki/
-$color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/
-$color-mute: #9ea1a3; // https://irocore.com/suzu-iro/
-$color-font: #3f4551; // https://irocore.com/konnezu/
-$color-divider: #e5e2e4; // https://irocore.com/komachinezu/
-$color-bg: #fffffd; // https://irocore.com/shiro/
-
-$divider: 2px solid $color-divider;
-
-@mixin link-1 {
- a {
- color: $color-primary;
- }
-
- a:hover {
- color: $color-secondary;
- }
-}
-
-@mixin link-2 {
- a {
- color: $color-secondary;
- }
-
- a:hover {
- color: $color-primary-dark;
- }
-}
-
-body[data-theme='light'] {
- background-color: $color-bg;
- color: $color-font;
-
- @include link-1();
-
- .post-summary,
- .post-meta {
- @include link-2();
- }
-
- .pag-current a,
- .pag-current a:hover {
- color: $color-primary-dark;
- }
-
- .title-sub,
- .post-meta {
- color: $color-mute;
- }
-
- header,
- .page-info {
- border-bottom: $divider;
- }
-
- .post + .post,
- .pagination,
- footer {
- border-top: $divider;
- }
-
- .post-meta-archive {
- @include link-2();
-
- color: $color-mute;
- }
-
- @media screen and (max-width: $width-md) {
- .sidebar {
- border-top: $divider;
- }
- }
-
- // single page part
- .post-content {
- @include link-2();
- }
-
- .markdown-body {
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- color: $color-primary;
- }
-
- h1,
- h2 {
- border-bottom: $divider;
- }
-
- blockquote {
- color: $color-mute;
- }
-
- img {
- border-radius: 2px;
- background-color: inherit; // fix white pixels under border-radius
- }
-
- hr {
- height: 2px;
- }
- }
-
- .post-loading,
- .post-comment .utterances-frame,
- .post-comment #disqus_thread {
- border-top: $divider;
- }
-
- // components
- .btn {
- div {
- background-color: $color-divider;
-
- color: $color-primary;
- }
-
- div:hover {
- background-color: $color-primary;
- color: $color-divider;
- }
-
- div + div {
- border-top: 2px solid $color-bg;
- }
- }
-
- // prism.js theme [olarized-light]
- @import '../../css/prism-solarizedlight';
-}
diff --git a/assets/scss/_fuji-theme/_style.scss b/assets/scss/_fuji-theme/_style.scss
new file mode 100644
index 0000000..b2266e6
--- /dev/null
+++ b/assets/scss/_fuji-theme/_style.scss
@@ -0,0 +1,203 @@
+::selection,
+::-moz-selection {
+ color: var(--color-bg);
+ background-color: var(--color-primary);
+}
+
+body {
+ background-color: var(--color-bg);
+ color: var(--color-font);
+
+ @include link-1();
+}
+
+.post-summary,
+.post-meta {
+ @include link-2();
+}
+
+.pag-current a,
+.pag-current a:hover {
+ color: var(--color-focus);
+}
+
+.title-sub,
+.post-meta {
+ color: var(--color-mute);
+}
+
+header,
+.page-info {
+ border-bottom: $divider;
+}
+
+.post + .post,
+.pagination,
+footer {
+ border-top: $divider;
+}
+
+.post-meta-archive {
+ @include link-2();
+
+ color: var(--color-mute);
+}
+
+@media screen and (max-width: $width-md) {
+ .sidebar {
+ border-top: $divider;
+ }
+}
+
+// single page part
+.post-content {
+ @include link-2();
+}
+
+.markdown-body {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--color-primary);
+ }
+
+ h1,
+ h2 {
+ border-bottom: $divider;
+ }
+
+ blockquote {
+ color: var(--color-mute);
+ }
+
+ img {
+ border-radius: 2px;
+ background-color: inherit; // fix white pixels under border-radius
+ }
+
+ hr {
+ height: 2px;
+ }
+
+ pre,
+ code {
+ background-color: var(--color-codebg);
+ }
+}
+
+.post-loading,
+.post-comment .utterances-frame,
+.post-comment #disqus_thread {
+ border-top: $divider;
+}
+
+// components
+.btn {
+ div {
+ background-color: var(--color-divider);
+
+ color: var(--color-primary);
+ }
+
+ div:hover {
+ background-color: var(--color-primary);
+ color: var(--color-divider);
+ }
+
+ div + div {
+ border-top: 2px solid var(--color-bg);
+ }
+}
+
+// prism.js theme [solarized-light]
+
+code[class*='language-'],
+pre[class*='language-'] {
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #93a1a1; /* base1 */
+}
+
+.token.punctuation {
+ color: #586e75; /* base01 */
+}
+
+.token.namespace {
+ opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #268bd2; /* blue */
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.url,
+.token.inserted {
+ color: #2aa198; /* cyan */
+}
+
+.token.entity {
+ color: #657b83; /* base00 */
+ background: #eee8d5; /* base2 */
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #859900; /* green */
+}
+
+.token.function,
+.token.class-name {
+ color: #b58900; /* yellow */
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #cb4b16; /* orange */
+}
+
+.token.important,
+.token.bold {
+ font-weight: 600;
+}
+.token.italic {
+ font-style: italic;
+}
+
+// fix conflicts of primer css & prism.js style
+pre,
+code {
+ .rule {
+ margin: 0;
+ border-bottom: none;
+ overflow: inherit;
+
+ &::before,
+ &::after {
+ display: inherit;
+ clear: inherit;
+ }
+ }
+}
diff --git a/assets/scss/_global.scss b/assets/scss/_global.scss
index fb2c3f9..bca74b3 100644
--- a/assets/scss/_global.scss
+++ b/assets/scss/_global.scss
@@ -6,11 +6,13 @@
html {
height: 100%;
}
+
body {
display: flex;
flex-direction: column;
height: 100%;
}
+
main {
flex: 1 1 auto;
}
diff --git a/assets/scss/fuji.scss b/assets/scss/fuji.scss
index b9982c5..b5538e6 100644
--- a/assets/scss/fuji.scss
+++ b/assets/scss/fuji.scss
@@ -20,5 +20,5 @@
@import '_fuji-style/_components';
// theme
-@import '_fuji-theme/_light';
-@import '_fuji-theme/_dark';
+@import '_fuji-theme/_base';
+@import '_fuji-theme/_style';
--
cgit v1.2.3
From da23836b5dfe2d39cda0d89768dadd59b22a9baf Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Mon, 1 Jun 2020 21:49:10 +0800
Subject: DisqusJS support added
---
assets/scss/_fuji-style/_content.scss | 4 ++++
1 file changed, 4 insertions(+)
(limited to 'assets/scss')
diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss
index fcb4f3b..e45658b 100644
--- a/assets/scss/_fuji-style/_content.scss
+++ b/assets/scss/_fuji-style/_content.scss
@@ -159,3 +159,7 @@ article {
margin: 0 0.25rem 0.5rem 0.25rem;
}
}
+
+#disqus_thread {
+ padding: 1.25rem 0;
+}
--
cgit v1.2.3
From 5f049d78bf1a3fd020fe2725c46dbbb24ff7380e Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Tue, 2 Jun 2020 12:05:49 +0800
Subject: Cover DisqusJS style
---
assets/scss/_fuji-theme/_style.scss | 94 +++++++++++++++++++++++++++++++++++++
1 file changed, 94 insertions(+)
(limited to 'assets/scss')
diff --git a/assets/scss/_fuji-theme/_style.scss b/assets/scss/_fuji-theme/_style.scss
index b2266e6..56a61e7 100644
--- a/assets/scss/_fuji-theme/_style.scss
+++ b/assets/scss/_fuji-theme/_style.scss
@@ -201,3 +201,97 @@ code {
}
}
}
+
+// disqus js styles
+
+#dsqjs {
+ a {
+ text-decoration: none !important;
+ color: var(--color-secondary) !important;
+ }
+
+ a:hover {
+ color: var(--color-focus) !important;
+ }
+
+ .dsqjs-bullet::after {
+ color: var(--color-mute) !important;
+ font-weight: 600 !important;
+ }
+
+ .dsqjs-no-comment {
+ color: var(--color-font) !important;
+ }
+
+ .dsqjs-nav-tab {
+ color: var(--color-mute) !important;
+ }
+
+ .dsqjs-tab-active {
+ color: var(--color-font) !important;
+
+ & > span:after {
+ background-color: var(--color-secondary) !important;
+ }
+ }
+
+ .dsqjs-post-list {
+ .dsqjs-post-avatar {
+ background: var(--color-bg) !important;
+ }
+
+ .dsqjs-post-header {
+ .dsqjs-post-author {
+ color: var(--color-mute) !important;
+ font-weight: 600;
+ }
+
+ .dsqjs-admin-badge {
+ color: var(--color-font) !important;
+ background: var(--color-codebg) !important;
+ }
+
+ .dsqjs-meta {
+ color: var(--color-mute) !important;
+ }
+ }
+ }
+
+ .dsqjs-post-body {
+ color: var(--color-font) !important;
+
+ code,
+ pre {
+ background: var(--color-codebg) !important;
+ }
+
+ blockquote {
+ color: var(--color-codebg) !important;
+ border-left: 0.25em solid var(--color-divider) !important;
+ }
+ }
+
+ .dsqjs-load-more {
+ background: var(--color-mute) !important;
+ color: var(--color-bg) !important;
+ }
+
+ footer {
+ border-top: 2px solid var(--color-divider) !important;
+ font-weight: 600 !important;
+ color: var(--color-mute) !important;
+ }
+
+ .dsqjs-order-radio:checked + .dsqjs-order-label {
+ color: var(--color-font) !important;
+ background-color: var(--color-divider) !important;
+ }
+
+ .dsqjs-order-label {
+ background-color: var(--color-bg) !important;
+ }
+
+ p.dsqjs-has-more a.dsqjs-has-more-btn {
+ color: var(--color-mute) !important;
+ }
+}
--
cgit v1.2.3
From 3df71601ae866aff9c2ae060ed1ac7407807fcc4 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Wed, 3 Jun 2020 13:58:49 +0800
Subject: New comment area & opt out of font awesome
---
assets/scss/_fuji-style/_components.scss | 2 +-
assets/scss/_fuji-style/_content.scss | 76 ++++++++++++++------------------
assets/scss/_fuji-theme/_style.scss | 18 ++++++--
3 files changed, 50 insertions(+), 46 deletions(-)
(limited to 'assets/scss')
diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss
index 429d869..88af65a 100644
--- a/assets/scss/_fuji-style/_components.scss
+++ b/assets/scss/_fuji-style/_components.scss
@@ -24,7 +24,7 @@
&:last-child {
border-radius: 0 0 0.25rem 0.25rem;
- font-size: 1.3rem;
+ font-size: 1.5rem;
}
}
}
diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss
index e45658b..92190a6 100644
--- a/assets/scss/_fuji-style/_content.scss
+++ b/assets/scss/_fuji-style/_content.scss
@@ -18,24 +18,18 @@
}
.post-meta {
- margin: 0.5rem 0.25rem 1rem 0.25rem; // little space
- white-space: nowrap;
- overflow-x: scroll;
+ display: flex;
+ align-items: center;
+ margin: 0.5rem 0.1rem 1rem 0.1rem; // little space
+ flex-wrap: wrap;
- time,
- span:not(:last-child) {
- padding-right: 1.5rem;
+ span {
+ display: flex;
+ align-items: center;
}
- &::-webkit-scrollbar {
- display: none; // WebKit
- }
-
- scrollbar-width: none; // Firefox
- -ms-overflow-style: none; // Microsoft
-
- i {
- font-size: 0.875rem;
+ span:not(:last-child) {
+ padding-right: 1.5rem;
}
}
@@ -57,46 +51,36 @@
}
.post-meta-archive {
- margin: 0.5rem 0.25rem 0 0.25rem; // little space
- white-space: nowrap;
- overflow-x: scroll;
+ display: flex;
+ align-items: center;
+ margin: 0.5rem 0.1rem 1rem 0.1rem; // little space
+ flex-wrap: wrap;
- time,
span:not(:last-child) {
padding-right: 1.5rem;
}
-
- &::-webkit-scrollbar {
- display: none; // WebKit
- }
-
- scrollbar-width: none; // Firefox
- -ms-overflow-style: none; // Microsoft
}
.pagination {
- text-align: center;
- padding: 1rem 0;
- font-size: 1.125rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.25rem;
+ line-height: 1.25rem;
+ padding: 1.25rem 0;
- & > div {
- display: inline-block;
+ div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
width: 2rem;
height: 2rem;
- &.pag-item {
- padding: 0 0.25rem;
-
- a {
- vertical-align: middle;
- }
+ a {
+ display: flex;
+ align-items: center;
}
}
-
- i {
- padding: 0 0.25rem;
- vertical-align: middle;
- }
}
.page-info {
@@ -160,6 +144,14 @@ article {
}
}
+.post-comment {
+ span.post-comment-notloaded {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
#disqus_thread {
padding: 1.25rem 0;
}
diff --git a/assets/scss/_fuji-theme/_style.scss b/assets/scss/_fuji-theme/_style.scss
index 56a61e7..c70f169 100644
--- a/assets/scss/_fuji-theme/_style.scss
+++ b/assets/scss/_fuji-theme/_style.scss
@@ -88,12 +88,24 @@ footer {
}
}
-.post-loading,
-.post-comment .utterances-frame,
-.post-comment #disqus_thread {
+.post-loading {
border-top: $divider;
}
+.post-comment {
+ border-top: $divider;
+
+ span.post-comment-notloaded {
+ padding: 1.5rem 0;
+ color: var(--color-secondary);
+ cursor: pointer;
+
+ &:hover {
+ color: var(--color-focus);
+ }
+ }
+}
+
// components
.btn {
div {
--
cgit v1.2.3
From 2cbde93423c7792929809e95a908913060d786cf Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Wed, 3 Jun 2020 19:33:30 +0800
Subject: Update strong & em styles
---
assets/scss/_fuji-theme/_style.scss | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
(limited to 'assets/scss')
diff --git a/assets/scss/_fuji-theme/_style.scss b/assets/scss/_fuji-theme/_style.scss
index c70f169..08359a8 100644
--- a/assets/scss/_fuji-theme/_style.scss
+++ b/assets/scss/_fuji-theme/_style.scss
@@ -60,7 +60,9 @@ footer {
h3,
h4,
h5,
- h6 {
+ h6,
+ strong,
+ em {
color: var(--color-primary);
}
--
cgit v1.2.3
From 8e1c40916aa880388fbac104641f3e7c84335847 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Thu, 4 Jun 2020 18:10:44 +0800
Subject: Update metadata & fix comment checker
---
assets/scss/_fuji-style/_content.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'assets/scss')
diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss
index 92190a6..03add33 100644
--- a/assets/scss/_fuji-style/_content.scss
+++ b/assets/scss/_fuji-style/_content.scss
@@ -53,7 +53,7 @@
.post-meta-archive {
display: flex;
align-items: center;
- margin: 0.5rem 0.1rem 1rem 0.1rem; // little space
+ margin: 0.5rem 0.1rem 0 0.1rem; // little space
flex-wrap: wrap;
span:not(:last-child) {
--
cgit v1.2.3
From 914bf54c493b299268c293be33a8babf99b1cce2 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Thu, 4 Jun 2020 20:08:43 +0800
Subject: Custom scss variable support
---
assets/scss/_fuji-theme/_base.scss | 32 ++++++++++++++++----------------
assets/scss/_var.scss | 18 ++++++++++++++++++
2 files changed, 34 insertions(+), 16 deletions(-)
(limited to 'assets/scss')
diff --git a/assets/scss/_fuji-theme/_base.scss b/assets/scss/_fuji-theme/_base.scss
index d35d8b6..d9a6f7e 100644
--- a/assets/scss/_fuji-theme/_base.scss
+++ b/assets/scss/_fuji-theme/_base.scss
@@ -1,25 +1,25 @@
@mixin light {
--color-mode: 'light';
- --color-primary: #8aa2d3; // https://irocore.com/aofuji/
- --color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/
- --color-focus: #3b469b; // https://irocore.com/aomurasaki/
- --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/
- --color-font: #3f4551; // https://irocore.com/konnezu/
- --color-divider: #e5e2e4; // https://irocore.com/komachinezu/
- --color-bg: #fffffd; // https://irocore.com/shiro/
- --color-codebg: #f6f8fa; // GitHub
+ --color-primary: #{$light-color-primary};
+ --color-secondary: #{$light-color-secondary};
+ --color-focus: #{$light-color-focus};
+ --color-mute: #{$light-color-mute};
+ --color-font: #{$light-color-font};
+ --color-divider: #{$light-color-divider};
+ --color-bg: #{$light-color-bg};
+ --color-codebg: #{$light-color-codebg};
}
@mixin dark {
--color-mode: 'dark';
- --color-primary: #8aa2d3; // https://irocore.com/aofuji/
- --color-secondary: #bab1df; // kai https://irocore.com/fujimurasaki/
- --color-focus: #e6e6e6; // https://irocore.com/shironezumi/
- --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/
- --color-font: #c0c0c0; // https://irocore.com/gin-iro/
- --color-divider: #4d5158; // Discord
- --color-bg: #2f3136; // Discord
- --color-codebg: #414449; // kai GitHub
+ --color-primary: #{$dark-color-primary};
+ --color-secondary: #{$dark-color-secondary};
+ --color-focus: #{$dark-color-focus};
+ --color-mute: #{$dark-color-mute};
+ --color-font: #{$dark-color-font};
+ --color-divider: #{$dark-color-divider};
+ --color-bg: #{$dark-color-bg};
+ --color-codebg: #{$dark-color-codebg};
}
body[data-theme='auto'] {
diff --git a/assets/scss/_var.scss b/assets/scss/_var.scss
index d473787..4cbd256 100644
--- a/assets/scss/_var.scss
+++ b/assets/scss/_var.scss
@@ -15,6 +15,24 @@ $body-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue',
$mono-font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Consolas', $body-font !default;
$body-font-size: 16px !default;
+$light-color-primary: #8aa2d3 !default; // https://irocore.com/aofuji/
+$light-color-secondary: #8f82bc !default; // https://irocore.com/fujimurasaki/
+$light-color-focus: #3b469b !default; // https://irocore.com/aomurasaki/
+$light-color-mute: #9ea1a3 !default; // https://irocore.com/suzu-iro/
+$light-color-font: #3f4551 !default; // https://irocore.com/konnezu/
+$light-color-divider: #e5e2e4 !default; // https://irocore.com/komachinezu/
+$light-color-bg: #fffffd !default; // https://irocore.com/shiro/
+$light-color-codebg: #f6f8fa !default; // GitHub
+
+$dark-color-primary: #8aa2d3 !default; // https://irocore.com/aofuji/
+$dark-color-secondary: #bab1df !default; // kai https://irocore.com/fujimurasaki/
+$dark-color-focus: #e6e6e6 !default; // https://irocore.com/shironezumi/
+$dark-color-mute: #9ea1a3 !default; // https://irocore.com/suzu-iro/
+$dark-color-font: #c0c0c0 !default; // https://irocore.com/gin-iro/
+$dark-color-divider: #4d5158 !default; // Discord
+$dark-color-bg: #2f3136 !default; // Discord
+$dark-color-codebg: #414449 !default; // kai GitHub
+
@font-face {
font-family: 'Product Sans';
font-style: normal;
--
cgit v1.2.3