From 7505550ad314cda9214696b26ebc49eb65995e66 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Wed, 8 May 2019 13:41:33 -0600 Subject: [PATCH] WIP new brand, added new colors, updated most of the dark theme --- assets/styles/layouts/_article.scss | 13 +++- assets/styles/layouts/_sidebar.scss | 8 ++- assets/styles/layouts/_top-nav.scss | 1 + assets/styles/themes/_theme-dark.scss | 38 +++++------ assets/styles/themes/_theme-light.scss | 8 +-- assets/styles/tools/_color-palette.scss | 83 ++++++++++++++++++------- content/v2.0/example.md | 46 +++++++++----- 7 files changed, 130 insertions(+), 67 deletions(-) diff --git a/assets/styles/layouts/_article.scss b/assets/styles/layouts/_article.scss index 139f38d05..0fbed9121 100644 --- a/assets/styles/layouts/_article.scss +++ b/assets/styles/layouts/_article.scss @@ -10,6 +10,7 @@ color: $article-heading; a { color: inherit !important; + font-weight: inherit !important; text-decoration: none; code:after { border: none; @@ -32,6 +33,7 @@ } h3 { font-size: 1.65rem; + font-weight: $medium; margin: -1rem 0 .5rem; padding-top: 1.75rem; color: $article-heading-alt; @@ -39,6 +41,7 @@ h4 { font-size: 1.25rem; font-style: italic; + font-weight: $medium; margin: -1.25rem 0 .5rem; padding-top: 1.75rem; } @@ -65,7 +68,7 @@ a { color: $article-link; - font-weight: bold; + font-weight: $medium; text-decoration: none; &:hover { color: $article-link-hover; @@ -131,9 +134,12 @@ li { margin: .25rem 0; &:not(:last-child) { - > p:only-child{ margin-bottom: 0; } + > p:only-child { margin-bottom: 0; } + } + p + ul, + p + ol { + margin: -.9rem 0 .5rem; } - ul,ol { margin: -.5rem 0 1rem;} } //////////////////////////////////// Code //////////////////////////////////// @@ -150,6 +156,7 @@ border-radius: $radius; color: $article-code; white-space: nowrap; + font-size: .95rem; font-style: normal; } } diff --git a/assets/styles/layouts/_sidebar.scss b/assets/styles/layouts/_sidebar.scss index dc23e18e4..3f92b9be6 100644 --- a/assets/styles/layouts/_sidebar.scss +++ b/assets/styles/layouts/_sidebar.scss @@ -27,7 +27,7 @@ border: 1px solid $sidebar-search-bg; padding: .5em 2.15rem .5rem .5rem; width: 100%; - color: $article-text; + color: $sidebar-search-text; transition-property: border, box-shadow; transition-duration: .2s; box-shadow: 2px 2px 6px $sidebar-search-shadow; @@ -38,7 +38,9 @@ border-radius: $radius; } &::placeholder { - color: rgba($article-text, .45); + color: rgba($sidebar-search-text, .45); + font-weight: normal; + font-style: italic; } } } @@ -235,7 +237,7 @@ // Reference title styles h4 { margin: 2rem 0 0 -1rem; - color: rgba($article-heading, .8); + color: rgba($article-heading, .7); font-style: italic; font-weight: 700; text-transform: uppercase; diff --git a/assets/styles/layouts/_top-nav.scss b/assets/styles/layouts/_top-nav.scss index 8b54ea856..8aeadd6b0 100644 --- a/assets/styles/layouts/_top-nav.scss +++ b/assets/styles/layouts/_top-nav.scss @@ -106,6 +106,7 @@ display: inline-block; padding: 0; font-size: 1.8rem; + line-height: 0; color: rgba($topnav-link, .5); background: none; height: 30px; diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index 0c9f96e56..c8fcf9b8c 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -14,41 +14,41 @@ @import "tools/color-palette"; -$body-bg: $cp-deepnight; -$body-gradient-top: rgba($wp-magenta, .15); -$body-gradient-bottom: $cp-deepnight; +$body-bg: $np-deepnight; +$body-gradient-top: rgba($m-magenta, .2); +$body-gradient-bottom: $np-deepnight; // TopNav Colors $topnav-link: $g20-white; $topnav-link-hover: $b-pool; $version-selector-top: $b-pool; -$version-selector-bottom: $wp-seance; +$version-selector-bottom: $cp-victoria; $theme-switch-light: inline-block; $theme-switch-dark: none; // Sidebar -$sidebar-search-bg: $wp-violet; -$sidebar-search-shadow: #0f001d; +$sidebar-search-bg: $np-deepnight; +$sidebar-search-shadow: rgba($m-magenta, .05); $sidebar-search-highlight: $b-pool; $sidebar-search-text: $g20-white; // Article Content -$article-bg: $wp-violet; +$article-bg: $wp-violentdark; $article-heading: $g20-white; $article-heading-alt: $g19-ghost; -$article-text: $g14-chromium; +$article-text: $np-mischka; $article-bold: $g18-cloud; $article-link: #2aa3ff; $article-link-hover: $g20-white; -$article-hr: $g6-smoke; -$article-shadow: #191a1b; +$article-hr: $wp-seance; +$article-shadow: $np-deepnight; $article-note-shadow: #191a1b; $article-warn-shadow: #191a1b; // Article Code -$article-code: $p-potassium; -$article-code-bg: $cp-deepnight; -$article-code-accent1: $g9-mountain; +$article-code: $cp-munchkin; +$article-code-bg: $np-deepnight; +$article-code-accent1: $np-smokey; $article-code-accent2: $b-pool; $article-code-accent3: $gr-viridian; $article-code-accent4: $o-ruby; @@ -58,12 +58,12 @@ $article-code-accent7: #e90; $article-code-select: $b-pool; $article-code-link: #2aa3ff; $article-code-link-hover: $g20-white; -$article-code-scrollbar: $g7-graphite; +$article-code-scrollbar: $np-martinique; // Article Tables $article-table-header-left: $p-planet; $article-table-header-right: $b-sapphire; -$article-table-row-alt: $g2-kevlar; +$article-table-row-alt: rgba($wp-jagger, .75); // Article Notes, Warnings, & Messages $article-note-base: $gr-viridian; @@ -116,12 +116,12 @@ $article-cloud-code-bg: $b-abyss; // Article Tabs for tabbed content $article-tab-text: $g12-forge; -$article-tab-bg: rgba($cp-deepnight, .6); +$article-tab-bg: rgba($np-deepnight, .6); $article-tab-active-text: $g20-white; $article-tab-active-bg: $b-ocean; $article-tab-code-text: $g9-mountain; -$article-tab-code-bg: rgba($cp-deepnight, .4); +$article-tab-code-bg: rgba($np-deepnight, .4); $article-tab-code-text-hover: $g20-white; $article-tab-code-bg-hover: $b-ocean; $article-tab-code-active-text: $g20-white; @@ -137,11 +137,11 @@ $nav-category: $b-pool; $nav-category-hover: $g20-white; $nav-item: $g16-pearl; $nav-item-hover: $b-pool; -$nav-border: $wp-seance; +$nav-border: $wp-jango; $nav-toggle: $g16-pearl; $nav-toggle-hover: $g16-pearl; $nav-toggle-bg-hover: $b-pool; -$nav-active: $c-neon; +$nav-active: $ch-chartreuse; // Error Page Colors $error-page-btn: $b-ocean; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index cc0933e84..6783f65c7 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -23,7 +23,7 @@ $radius: 3px !default; $topnav-link: $g7-graphite !default; $topnav-link-hover: $b-pool !default; $version-selector-top: $b-pool !default; -$version-selector-bottom: $p-comet !default; +$version-selector-bottom: $cp-comet !default; $theme-switch-light: none !default; $theme-switch-dark: inline-block !default; @@ -103,7 +103,7 @@ $article-warn-code-accent6: #357ae8 !default; $article-warn-code-accent7: #e90 !default; $article-warn-code-scrollbar: #FFB1B1 !default; -$article-enterprise-base: $p-comet !default; +$article-enterprise-base: $cp-comet !default; $article-enterprise-text: $p-star !default; $article-enterprise-link: $p-star !default; $article-enterprise-link-hover: $b-ocean !default; @@ -124,7 +124,7 @@ $article-tab-active-bg: $b-pool !default; $article-tab-code-text: $p-potassium !default; $article-tab-code-bg: $g20-white !default; $article-tab-code-text-hover: $g20-white !default; -$article-tab-code-bg-hover: $p-comet !default; +$article-tab-code-bg-hover: $cp-comet !default; $article-tab-code-active-text: $p-star !default; // Article page buttons @@ -154,5 +154,5 @@ $error-page-btn-hover-text: $g20-white !default; $landing-lg-gradient-left: $b-ocean !default; $landing-lg-gradient-right: $b-pool !default; $landing-sm-gradient-left: $p-star !default; -$landing-sm-gradient-right: $p-comet !default; +$landing-sm-gradient-right: $cp-comet !default; $landing-sm-gradient-overlay: $p-planet !default; diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss index d6a420789..c9d3eb894 100644 --- a/assets/styles/tools/_color-palette.scss +++ b/assets/styles/tools/_color-palette.scss @@ -2,9 +2,6 @@ // Primary Brand Colors $p-deep: #1F0A23; -$b-pool: #22ADF6; -$c-neon: #D6F622; -$p-comet: #9394FF; // Oranges (Dark to Light) $o-basalt: #2F1F29; @@ -20,11 +17,8 @@ $o-flan: #FFF7F4; // Blues (Dark to Light) $b-abyss: #182838; -$cp-deepnightsea: #32547F; $b-sapphire: #326BBA; $b-ocean: #4591ED; -// $b-pool -$b-laser: #00C9FF; $b-hydrogen: #6BDFFF; $b-neutrino: #BEF0FF; $b-snow: #C9E0ED; @@ -36,7 +30,7 @@ $p-void: #311F94; $p-purplerain: #484281; $p-planet: #513CC6; $p-star: #7A65F2; -// $p-comet + $p-potassium: #B1B6FF; $p-moonstone: #C9D0FF; $p-quartz: #D6D5ED; @@ -80,26 +74,71 @@ $g18-cloud: #F2F2F5; $g19-ghost: #FAFAFC; $g20-white: #FFFFFF; // Brand color -// Cool Purples -$cp-deepnight: #13002d; // Brand color -$cp-valhalla: #27153F; -$cp-martinique: #3A2B50; -$cp-wine: #4E4062; -$cp-smokey: #625573; -$cp-rum: #756A85; -$cp-mobster: #898096; -$cp-amethyst: #9D95A7; -$cp-pearl: #B0AAB9; -$cp-greysuit: #C4BFCA; -$cp-mischka: #D8D4DC; -$cp-athens: #EBEAED; +// Neutral Purples +$np-deepnight: #13002d; // Brand color +$np-valhalla: #27153F; +$np-martinique: #3A2B50; +$np-wine: #4E4062; +$np-smokey: #625573; +$np-rum: #756A85; +$np-mobster: #898096; +$np-amethyst: #9D95A7; +$np-pearl: #B0AAB9; +$np-greysuit: #C4BFCA; +$np-mischka: #D8D4DC; +$np-athens: #EBEAED; -// Warm Purples - Magenta +// Warm Purples - Magentas $wp-telopea: #23043E; +$wp-violentdark: #2d0749; $wp-violet: #32094E; $wp-jagger: #420D5F; $wp-jango: #521170; $wp-seance: #611581; $wp-trance: #801EA2; $wp-heart: #A026C4; -$wp-magenta: #BF2FE5; // Brand color +$m-magenta: #BF2FE5; // Brand color +$m-lavander: #CA52E9; +$m-heliotrope: #D474EE; +$m-perfume: #DF97F2; +$m-pinkmist: #EABAF6; +$m-selago: #F4DCFB; + +// Cool Purples +$cp-jakarta: #322368; +$cp-minsk: #423681; +$cp-victoria: #52499A; +$cp-blueviolet: #625CB3; +$cp-marguerite: #736ECD; +$cp-purple: #8381E6; +$cp-comet: #9394ff; // Brand color +$cp-melrose: #A5A6FF; +$cp-munchkin: #B7B8FF; +$cp-periwinkle: #C9CAFF; +$cp-coolfog: #DBDBFF; +$cp-titan: #EDEDFF; + +// Chartreuses +$ch-olive: #3B440A; +$ch-saratoga: #55620E; +$ch-olivetone: #6F7F12; +$ch-trendy: #899D16; +$ch-citron: #A2BB1A; +$ch-keylime: #BCD81E; +$ch-chartreuse: #D6F622; // Brand color +$ch-canary: #E4F96C; +$ch-primrose: #F1FCB5; + +// Blues +$b-tiber: #0A3044; +$b-deepsea: #0E4562; +$b-chathams: #125A7F; +$b-matisse: #166F9D; +$b-eastern: #1A83BB; +$b-curious: #1E98D8; +$b-pool: #22ADF6; // Brand color +$b-laser: #47BBF8; +$b-malibu: #6CC8F9; +$b-horizon: #91D6FB; +$b-fleur: #B5E4FC; +$b-hawkeye: #DAF1FD; diff --git a/content/v2.0/example.md b/content/v2.0/example.md index a2bdab16c..dc93b68a0 100644 --- a/content/v2.0/example.md +++ b/content/v2.0/example.md @@ -90,7 +90,10 @@ This is **bold**. This is _italic_. - Unordered list line-item 2 - Unordered list line-item 2.1 - Unordered list line-item 2.2 - - Unordered list line-item 2.3 + - Unordered list line-item 2.3 _(this is just an li, no p tag)_ + 1. Ordered list item nested 1 + 2. Ordered list item nested 2 + 3. Ordered list item nested 3 - Unordered list line-item 3 - Unordered list line-item with multiple paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -110,13 +113,24 @@ This is **bold**. This is _italic_. Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. -1. Unordered list line-item 1 -2. Unordered list line-item 2 - 1. Unordered list line-item 2.1 - 2. Unordered list line-item 2.2 - 3. Unordered list line-item 2.3 -3. Unordered list line-item 3 -4. Unordered list line-item with multiple paragraphs. +1. Ordered list line-item 1 +2. Ordered list line-item 2 + 1. Ordered list line-item 2.1 + 2. Ordered list line-item 2.2 + 3. Ordered list line-item 2.3 _(this is just an li, no p tag)_ + - Unordered list item nested 1 + - Unordered list item nested 2 + - Unordered list item nested 3 + 4. Ordered list line-item 2.4 with hard return. + + - Unordered list item nested 1 + - Unordered list item nested 2 + - Unordered list item nested 3 + + With Another paragraph. + +3. Ordered list line-item 3 +4. Ordered list line-item with multiple paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. @@ -125,7 +139,7 @@ This is **bold**. This is _italic_. Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. -5. Unordered list line-item with multiple paragraphs. +5. Ordered list line-item with multiple paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. @@ -167,13 +181,13 @@ avg_cpu {{% enterprise %}} ###### This is a table -| Column 1 | Column 2 | Column 3 | Column 4 | -| -------- | -------- | -------- | -------- | -| Row 1.1 | Row 1.2 | Row 1.3 | Row 1.4 | -| Row 2.1 | Row 2.2 | Row 2.3 | Row 2.4 | -| Row 3.1 | Row 3.2 | Row 3.3 | Row 3.4 | -| Row 4.1 | Row 4.2 | Row 4.3 | Row 4.4 | -| Row 5.1 | Row 5.2 | Row 5.3 | Row 5.4 | +| Column 1 | Column 2 | Column 3 | Column 4 | +| -------- | -------- | -------- | -------- | +| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 | +| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | +| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 | +| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 | +| Row 5.1 | `Row 5.2` | Row 5.3 | Row 5.4 | ###### This is a table with lots of stuff | Column 1 | Column 2 | Column 3 | Column 4 |