From c24a6b095ae1a9ccd0188498cf9ce8f87c2e9c32 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Wed, 7 Sep 2022 12:20:38 +0200 Subject: [PATCH] WIP --- _sass/_typography.scss | 4 - _sass/_variables.scss | 31 ++- _sass/{_base.scss => base/base.scss} | 9 - _sass/base/normalize.scss | 349 +++++++++++++++++++++++++ _sass/base/typography.scss | 47 ++++ _sass/component/_syntax-highlight.scss | 68 +++++ _sass/component/markdown.scss | 32 +++ _sass/layout/_container.scss | 16 ++ _sass/layout/_header.scss | 2 +- _sass/main.scss | 10 +- _sass/variables/_colors.scss | 52 ++++ assets/css/style.scss | 4 - 12 files changed, 603 insertions(+), 21 deletions(-) delete mode 100644 _sass/_typography.scss rename _sass/{_base.scss => base/base.scss} (73%) create mode 100644 _sass/base/normalize.scss create mode 100644 _sass/base/typography.scss create mode 100644 _sass/component/_syntax-highlight.scss create mode 100644 _sass/component/markdown.scss create mode 100644 _sass/layout/_container.scss create mode 100644 _sass/variables/_colors.scss diff --git a/_sass/_typography.scss b/_sass/_typography.scss deleted file mode 100644 index 7343c59..0000000 --- a/_sass/_typography.scss +++ /dev/null @@ -1,4 +0,0 @@ - -.text-mono { - font-family: $mono-font; -} diff --git a/_sass/_variables.scss b/_sass/_variables.scss index a95b8e6..691b16b 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -1,6 +1,6 @@ @charset "utf-8"; -// Colors +// Branding // ------------------------------ $green: #00b00b; $brand-color: $green; @@ -12,6 +12,17 @@ $body-font: -apple-system, BlinkMacSystemFont, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + +$font-size-normal: 16px; +$font-size-small: 14px; + +$spacer-1: 4px; +$spacer-2: 8px; +$spacer-3: 16px; +$spacer-4: 24px; +$spacer-5: 32px; +$spacer-6: 40px; // Heading sizes - mobile $h0-size-mobile: 31px; @@ -27,3 +38,21 @@ $h3-size: 19px; $h4-size: 15px; $h5-size: 13px; $h6-size: 12px; + +// Container + +$container-max-sm: 540px; +$container-max-md: 720px; +$container-max-lg: 960px; +$container-max-xl: 1140px; + +$border-radius: 4px; + +// Colors +// ------------------------------ + +$bg-gray-light: $gray-200; +$border-gray: $gray-500; +$border-gray-light: $gray-300; + +$text-gray: $gray-900; diff --git a/_sass/_base.scss b/_sass/base/base.scss similarity index 73% rename from _sass/_base.scss rename to _sass/base/base.scss index 35929c9..96b313e 100644 --- a/_sass/_base.scss +++ b/_sass/base/base.scss @@ -1,13 +1,4 @@ -a { - color: $brand-color !important; -} - -figure { - margin: 1em 0 !important; -} - - .container-sm { max-width: 512px; margin-right: auto; diff --git a/_sass/base/normalize.scss b/_sass/base/normalize.scss new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/_sass/base/normalize.scss @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * 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; +} + +/* Grouping content + ========================================================================== */ + +/** + * 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 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 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 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * 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; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * 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; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * 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; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 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 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +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 in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 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 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/_sass/base/typography.scss b/_sass/base/typography.scss new file mode 100644 index 0000000..ab8bcaa --- /dev/null +++ b/_sass/base/typography.scss @@ -0,0 +1,47 @@ + +body { + font-family: $body-font; + font-size: $font-size-normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +// Text + +.text-red { + color: $red-900; +} + +// Links + +a { + color: $brand-color; +} + +// Code + +pre { + padding: $spacer-3; + overflow: auto; + // font-size: 85%; + // line-height: 1.45; + background-color: $gray-100; + border-radius: $border-radius; + + > code { + // Abit of a hack, need to reset some things as markdown inline code blocks does not set a class. + background: transparent !important; + padding: 0 !important; + border-radius: 0 !important; + } +} + +pre, +code, +.text-mono { + font-family: $mono-font; +} + +figure { + margin: 1em 0 !important; +} diff --git a/_sass/component/_syntax-highlight.scss b/_sass/component/_syntax-highlight.scss new file mode 100644 index 0000000..d1dc314 --- /dev/null +++ b/_sass/component/_syntax-highlight.scss @@ -0,0 +1,68 @@ +// https://github.com/rouge-ruby/rouge/wiki/List-of-tokens + +.highlight { + + .n, // Name + .na, // Name.Attribute + .nb, // Name.Builtin + .bp, // Name.Builtin.Pseudo + .nc, // Name.Class + .no, // Name.Constant + .nd, // Name.Decorator + .ni, // Name.Entity + .ne, // Name.Exception + .nf, // Name.Function + .py, // Name.Property + .nl, // Name.Label + .nn, // Name.Namespace + .nx // Name.Other + { + color: $blue-400; + } + + .nt, // Name.Tag + .nv, // Name.Variable + .vc, // Name.Variable.Class + .vg, // Name.Variable.Global + .vi // Name.Variable.Instance + { + color: $indigo-900; + } + + // Strings + + .s, // Literal.String + .sb, // Literal.String.Backtick + .sc, // Literal.String.Char + .sd, // Literal.String.Doc + .s2, // Literal.String.Double + .se, // Literal.String.Escape + .sh, // Literal.String.Haredoc + .si, // Literal.String.Interpol + .sx, // Literal.String.Other + .sr, // Literal.String.Regex + .s1, // Literal.String.Single + .ss // Literal.String.Symbol + { + color: $red-900; + } + + // Numbers + + .m, // Literal.Number + .mf, // Literal.Number.Float + .mh, // Literal.Number.Hex + .mi, // Literal.Number.Integer + .il, // Literal.Number.Integer.Long + .mo, // Literal.Number.Oct + .mx, // Literal.Number.Hex + .mb // Literal.Number.Bin + { + color: $blue-400; + } + + // Operator + //.o { + // color: $syntax-operator; + //} +} diff --git a/_sass/component/markdown.scss b/_sass/component/markdown.scss new file mode 100644 index 0000000..9c81111 --- /dev/null +++ b/_sass/component/markdown.scss @@ -0,0 +1,32 @@ + +.markdown-body { + + h1,h2,h3,h4,h5,h6 { + padding-top: .4em; + padding-bottom: .4em; + } + + h1,h2 { + border-bottom: solid 1px $border-gray-light; + } + + code { + background: $gray-200; + padding: .2em .4em; + border-radius: $border-radius; + } + + table { + width: 100%; + border-collapse: collapse; + + th, td { + border: solid 1px $border-gray-light; + padding: .4em .8em; + } + + tr:nth-child(even) > td { + background: $gray-100; + } + } +} diff --git a/_sass/layout/_container.scss b/_sass/layout/_container.scss new file mode 100644 index 0000000..95dd8ad --- /dev/null +++ b/_sass/layout/_container.scss @@ -0,0 +1,16 @@ + +.container { + width: 100%; + margin-left: auto; + margin-right: auto; + + &-lg { + @extend .container; + max-width: $container-max-lg; + } + + &-xl { + @extend .container; + max-width: $container-max-xl; + } +} diff --git a/_sass/layout/_header.scss b/_sass/layout/_header.scss index 8a054eb..3b81962 100644 --- a/_sass/layout/_header.scss +++ b/_sass/layout/_header.scss @@ -7,7 +7,7 @@ margin-bottom: $spacer-4; border-bottom: solid 1px $border-gray-light; - &-title a:hover { + &-title a { text-decoration: none; } diff --git a/_sass/main.scss b/_sass/main.scss index 4b5b44d..9242d9a 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -1,15 +1,21 @@ @import 'https://unpkg.com/tippy.js@5.2.1/dist/tippy.css'; +@import "variables/colors"; @import "variables"; -@import "base"; -@import "typography"; +@import "base/normalize"; +@import "base/base"; +@import "base/typography"; + +@import "layout/container"; @import "layout/header"; @import "layout/package"; @import "layout/footer"; @import "component/button"; @import "component/search"; +@import "component/markdown"; +@import "component/syntax-highlight"; @import "misc"; diff --git a/_sass/variables/_colors.scss b/_sass/variables/_colors.scss new file mode 100644 index 0000000..5275ded --- /dev/null +++ b/_sass/variables/_colors.scss @@ -0,0 +1,52 @@ + +// Color system + +// Gray (almost 50 of them) + +$gray-100: #f1f3f5; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #868e96; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; + +// Indigo + +$indigo-000: #edf2ff; +$indigo-100: #dbe4ff; +$indigo-200: #bac8ff; +$indigo-300: #91a7ff; +$indigo-400: #748ffc; +$indigo-500: #5c7cfa; +$indigo-600: #4c6ef5; +$indigo-700: #4263eb; +$indigo-800: #3b5bdb; +$indigo-900: #364fc7; + +// Blue + +$blue-100: #d0ebff; +$blue-200: #a5d8ff; +$blue-300: #74c0fc; +$blue-400: #4dabf7; +$blue-500: #339af0; +$blue-600: #228be6; +$blue-700: #1c7ed6; +$blue-800: #1971c2; +$blue-900: #1864ab; + +// Red + +$red-000: #fff5f5; +$red-100: #ffe3e3; +$red-200: #ffc9c9; +$red-300: #ffa8a8; +$red-400: #ff8787; +$red-500: #ff6b6b; +$red-600: #fa5252; +$red-700: #f03e3e; +$red-800: #e03131; +$red-900: #c92a2a; diff --git a/assets/css/style.scss b/assets/css/style.scss index c96dd2c..abf9a41 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -3,8 +3,4 @@ # only Main files contain this front matter, not partials. --- -{% if site.theme == "jekyll-theme-primer" %} -@import "primer-support/index"; -{% endif %} @import "main"; -@import "{{ site.theme }}";