diff --git a/src/_layouts/base.html b/src/_layouts/base.html index 425001a..582f794 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -11,7 +11,7 @@ {% include "partials/header.html" %} -
{{ content | safe }}
+
{{ content | safe }}
{% include "partials/footer.html" %} diff --git a/src/assets/css/global.css b/src/assets/css/global.css index 3180914..7333a2d 100644 --- a/src/assets/css/global.css +++ b/src/assets/css/global.css @@ -1,5 +1,6 @@ @import "global/reset.css"; @import "global/fonts.css"; +@import "global/variables.css"; @import "global/global-styles.css"; diff --git a/src/assets/css/global/global-styles.css b/src/assets/css/global/global-styles.css index 2443682..2062c87 100644 --- a/src/assets/css/global/global-styles.css +++ b/src/assets/css/global/global-styles.css @@ -4,41 +4,105 @@ Low-specificity, global styles that apply to the whole project: https://cube.fyi/css.html */ +html { + scrollbar-color: var(--color-primary) var(--color-indiglo-800); +} + body { - font-family: - Quattro, - ui-sans-serif, - system-ui, - -apple-system, - "system-ui", - "Segoe UI", - Roboto, - "Helvetica Neue", - Arial, - "Noto Sans", - sans-serif, - "Apple Color Emoji", - "Segoe UI Emoji", - "Segoe UI Symbol", - "Noto Color Emoji"; + accent-color: var(--color-primary); + background-color: var(--color-bg); + color: var(--color-text); + font-family: var(--font-body), var(--font-fallback); + font-size: var(--font-size-body); + font-weight: var(--font-weight-body); + letter-spacing: var(--font-tracking-body); + line-height: var(--font-line-height-body); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--font-display); } h1 { - font-family: AnekLatin; - font-weight: 800; + font-size: var(--font-size-heading-1); + font-weight: var(--font-weight-heading-1); + letter-spacing: var(--font-tracking-heading-1); } -h2, -h3 { - font-family: AnekLatin; - font-weight: 700; +h2 { + font-size: var(--font-size-heading-2); + font-weight: var(--font-weight-heading-2); + letter-spacing: var(--font-tracking-heading-2); } h3 { + font-size: var(--font-size-heading-3); + font-weight: var(--font-weight-heading-3); + letter-spacing: var(--font-tracking-heading-3); text-transform: uppercase; } a { - text-decoration-color: black; + color: currentColor; + text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; } + +a:hover, +a:active, +a:focus-visible { + text-decoration-color: var(--color-primary-highlight); +} + +a:visited { + text-decoration-color: var(--color-primary-subtle); +} + +ul li::marker { + color: var(--color-primary-faded); +} + +ol li::marker { + color: rgba(0, 0, 0, 0.6); +} + +blockquote { + border-inline-start: 2px solid var(--color-primary-faded); + margin-inline-start: 0; + padding-inline: 1rem; +} + +blockquote > * + * { + margin-block-start: 1rem; + margin-inline-start: 1rem; +} + +:focus-visible { + outline: 3px solid; + outline-color: var(--color-primary); + outline-offset: 0.3ch; +} + +strong { + font-weight: 650; +} + +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + ::after, + ::before { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + } +} diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/variables.css index e32a219..9c4a1ec 100644 --- a/src/assets/css/global/variables.css +++ b/src/assets/css/global/variables.css @@ -2,4 +2,65 @@ :root { --transition-duration: 250ms; --transition-timing: ease; + + --color-indiglo-50: #aae9d2; + --color-indiglo-100: #99e5ce; + --color-indiglo-200: #79ddcc; + --color-indiglo-300: #58d4d0; + --color-indiglo-400: #38bdcc; + --color-indiglo-500: #2c8daa; + --color-indiglo-600: #226186; + --color-indiglo-700: #193d61; + --color-indiglo-800: #10203d; + --color-indiglo-900: #060a18; + --color-indiglo-950: #020206; + + --color-light: white; + --color-dark: black; + + --color-bg: var(--color-light); + --color-text: var(--color-dark); + --color-primary: var(--color-indiglo-400); + --color-primary-highlight: var(--color-indiglo-300); + --color-primary-subtle: var(--color-indiglo-500); + --color-primary-faded: var(--color-indiglo-600); + --color-secondary: #ed5215; + + --font-display: AnekLatin; + --font-body: Quattro; + --font-fallback: ui-sans-serif, system-ui, -apple-system, "system-ui", + "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + + --font-size-heading-1: 3rem; + --font-size-heading-2: 2rem; + --font-size-heading-3: 1.5rem; + --font-size-body: 1.125rem; + + --font-weight-heading-1: 800; + --font-weight-heading-2: 700; + --font-weight-heading-3: 700; + --font-weight-body: 450; + + --font-tracking-heading-1: -5%; + --font-tracking-heading-2: -5%; + --font-tracking-heading-3: -5%; + --font-tracking-body: -3%; + + --font-line-height-heading-1: 3rem; + --font-line-height-heading-2: 2rem; + --font-line-height-heading-3: 1.5rem; + --font-line-height-body: 2rem; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-bg: var(--color-dark); + --color-text: var(--color-light); + + --color-primary: var(--color-indiglo-300); + --color-primary-highlight: var(--color-indiglo-200); + --color-primary-subtle: var(--color-indiglo-400); + --color-primary-faded: var(--color-indiglo-100); + } } diff --git a/src/pages/index.md b/src/pages/index.md index c282823..a9d54f8 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -3,7 +3,7 @@ layout: "base" permalink: /index.html --- -# Hello from index +# Hello from index. This is going to be a very large title so that it wraps around to the next line. Here I am typing a long title. Do you see how long this is? Holy moly it's going to be long. This is the root page. @@ -18,3 +18,238 @@ _**This is bold and italic text.**_ ### Subsubheading Here is [a link](https://wonderfulfrog.com) + +--- + +**Advertisement :)** + +- **[pica](https://nodeca.github.io/pica/demo/)** - high quality and fast image + resize in browser. +- **[babelfish](https://github.com/nodeca/babelfish/)** - developer friendly + i18n with plurals support and easy syntax. + +You will like those projects! + +--- + +# h1 Heading 8-) + +## h2 Heading + +### h3 Heading + +#### h4 Heading + +##### h5 Heading + +###### h6 Heading + +## Horizontal Rules + +--- + +--- + +--- + +## Typographic replacements + +Enable typographer option to see result. + +(c) (C) (r) (R) (tm) (TM) (p) (P) +- + +test.. test... test..... test?..... test!.... + +!!!!!! ???? ,, -- --- + +"Smartypants, double quotes" and 'single quotes' + +## Emphasis + +**This is bold text** + +**This is bold text** + +_This is italic text_ + +_This is italic text_ + +~~Strikethrough~~ + +## Blockquotes + +> Blockquotes can also be nested... +> +> > ...by using additional greater-than signs right next to each other... +> > +> > > ...or with spaces between arrows. + +## Lists + +Unordered + +- Create a list by starting a line with `+`, `-`, or `*` +- Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + - Ac tristique libero volutpat at + * Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit +- Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + +4. You can use sequential numbers... +5. ...or keep all the numbers as `1.` + +Start numbering with offset: + +57. foo +1. bar + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + +Block code "fences" + +``` +Sample text here... +``` + +Syntax highlighting + +```js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +## Tables + +| Option | Description | +| ------ | ------------------------------------------------------------------------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| -----: | ------------------------------------------------------------------------: | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +## Links + +[link text](http://dev.nodeca.com) + +[link with title](http://nodeca.github.io/pica/demo/ "title text!") + +Autoconverted link https://github.com/nodeca/pica (enable linkify to see) + +## Images + +![Minion](https://octodex.github.com/images/minion.png) +![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") + +Like links, Images also have a footnote style syntax + +![Alt text][id] + +With a reference later in the document defining the URL location: + +[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" + +## Plugins + +The killer feature of `markdown-it` is very effective support of +[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin). + +### [Emojies](https://github.com/markdown-it/markdown-it-emoji) + +> Classic markup: :wink: :cry: :laughing: :yum: +> +> Shortcuts (emoticons): :-) :-( 8-) ;) + +see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji. + +### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup) + +- 19^th^ +- H~2~O + +### [\](https://github.com/markdown-it/markdown-it-ins) + +++Inserted text++ + +### [\](https://github.com/markdown-it/markdown-it-mark) + +==Marked text== + +### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) + +Footnote 1 link[^first]. + +Footnote 2 link[^second]. + +Inline footnote^[Text of inline footnote] definition. + +Duplicated footnote reference[^second]. + +[^first]: Footnote **can have markup** + + and multiple paragraphs. + +[^second]: Footnote text. + +### [Definition lists](https://github.com/markdown-it/markdown-it-deflist) + +Term 1 + +: Definition 1 +with lazy continuation. + +Term 2 with _inline markup_ + +: Definition 2 + + { some code, part of Definition 2 } + + Third paragraph of definition 2. + +_Compact style:_ + +Term 1 +~ Definition 1 + +Term 2 +~ Definition 2a +~ Definition 2b + +### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr) + +This is HTML abbreviation example. + +It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. + +\*[HTML]: Hyper Text Markup Language + +### [Custom containers](https://github.com/markdown-it/markdown-it-container) + +::: warning +_here be dragons_ +:::