From de5fc1de200fe0981d1c87e1fe31d54a437f01ed Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Tue, 8 Jun 2021 14:14:47 -0500 Subject: [PATCH] feat: fix www styles --- www/public/{blog/index.css => blog.scss} | 80 ++++++++++- www/public/blog/code.css | 155 --------------------- www/public/blog/theme.css | 76 ---------- www/src/components/BlogHeader.astro | 2 +- www/src/components/BlogPost.astro | 1 - www/src/pages/blog/index.astro | 2 +- www/src/pages/blog/introducing-astro.astro | 4 +- 7 files changed, 81 insertions(+), 239 deletions(-) rename www/public/{blog/index.css => blog.scss} (58%) delete mode 100644 www/public/blog/code.css delete mode 100644 www/public/blog/theme.css diff --git a/www/public/blog/index.css b/www/public/blog.scss similarity index 58% rename from www/public/blog/index.css rename to www/public/blog.scss index 979b2f0509..afea09108f 100644 --- a/www/public/blog/index.css +++ b/www/public/blog.scss @@ -1,5 +1,79 @@ -@import './theme'; -@import './code'; +:root { + --font-fallback: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; + --font-body: "IBM Plex Sans", var(--font-fallback); + --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", + "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", + "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, + "Courier New", Courier, monospace; + + --color-white: #FFF; + --color-black: #000014; + + --color-gray-50: #F9FAFB; + --color-gray-100: #F3F4F6; + --color-gray-200: #E5E7EB; + --color-gray-300: #D1D5DB; + --color-gray-400: #9CA3AF; + --color-gray-500: #6B7280; + --color-gray-600: #4B5563; + --color-gray-700: #374151; + --color-gray-800: #1F2937; + --color-gray-900: #111827; + + --color-blue: #3894FF; + --color-blue-rgb: 56,148,255; + --color-green: #17C083; + --color-green-rgb: 23,192,131; + --color-orange: #FF5D01; + --color-orange-rgb: 255,93,1; + --color-purple: #882DE7; + --color-purple-rgb: 136,45,231; + --color-red: #FF1639; + --color-red-rgb: 255,22,57; + --color-yellow: #FFBE2D; + --color-yellow-rgb: 255,190,45; +} + +:root { + color-scheme: light; + --theme-accent: var(--color-orange); + --theme-accent-rgb: var(--color-orange-rgb); + --theme-accent-opacity: 0.1; + --theme-divider: var(--color-gray-100); + --theme-text: var(--color-gray-800); + --theme-text-light: var(--color-gray-600); + --theme-text-lighter: var(--color-gray-400); + --theme-bg: var(--color-white); + --theme-bg-offset: var(--color-gray-100); + --theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); + --theme-code-inline-bg: var(--color-gray-100); + --theme-code-text: var(--color-gray-100); + --theme-code-bg: var(--color-gray-700); +} + +body { + background: var(--theme-bg); + color: var(--theme-text); +} + +:root.theme-dark { + color-scheme: dark; + --theme-accent-opacity: 0.3; + --theme-divider: var(--color-gray-900); + --theme-text: var(--color-gray-200); + --theme-text-light: var(--color-gray-400); + --theme-text-lighter: var(--color-gray-600); + --theme-bg: var(--color-black); + --theme-bg-offset: var(--color-gray-900); + --theme-code-inline-bg: var(--color-gray-800); + --theme-code-text: var(--color-gray-200); + --theme-code-bg: var(--color-gray-900); +} + +::selection { + color: var(--theme-accent); + background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); +} * { box-sizing: border-box; @@ -195,4 +269,4 @@ img.cover { width: 100%; max-height: 50vh; object-fit: cover; -} \ No newline at end of file +} diff --git a/www/public/blog/code.css b/www/public/blog/code.css deleted file mode 100644 index 54b2c50941..0000000000 --- a/www/public/blog/code.css +++ /dev/null @@ -1,155 +0,0 @@ -.language-css > code, -.language-sass > code, -.language-scss > code { - color: #fd9170; -} - -[class*="language-"] .namespace { - opacity: 0.7; -} - -.token.atrule { - color: #c792ea; -} - -.token.attr-name { - color: #ffcb6b; -} - -.token.attr-value { - color: #a5e844; -} - -.token.attribute { - color: #a5e844; -} - -.token.boolean { - color: #c792ea; -} - -.token.builtin { - color: #ffcb6b; -} - -.token.cdata { - color: #80cbc4; -} - -.token.char { - color: #80cbc4; -} - -.token.class { - color: #ffcb6b; -} - -.token.class-name { - color: #f2ff00; -} - -.token.comment { - color: #616161; -} - -.token.constant { - color: #c792ea; -} - -.token.deleted { - color: #ff6666; -} - -.token.doctype { - color: #616161; -} - -.token.entity { - color: #ff6666; -} - -.token.function { - color: #c792ea; -} - -.token.hexcode { - color: #f2ff00; -} - -.token.id { - color: #c792ea; - font-weight: bold; -} - -.token.important { - color: #c792ea; - font-weight: bold; -} - -.token.inserted { - color: #80cbc4; -} - -.token.keyword { - color: #c792ea; -} - -.token.number { - color: #fd9170; -} - -.token.operator { - color: #89ddff; -} - -.token.prolog { - color: #616161; -} - -.token.property { - color: #80cbc4; -} - -.token.pseudo-class { - color: #a5e844; -} - -.token.pseudo-element { - color: #a5e844; -} - -.token.punctuation { - color: #89ddff; -} - -.token.regex { - color: #f2ff00; -} - -.token.selector { - color: #ff6666; -} - -.token.string { - color: #a5e844; -} - -.token.symbol { - color: #c792ea; -} - -.token.tag { - color: #ff6666; -} - -.token.unit { - color: #fd9170; -} - -.token.url { - color: #ff6666; -} - -.token.variable { - color: #ff6666; -} diff --git a/www/public/blog/theme.css b/www/public/blog/theme.css deleted file mode 100644 index f6a4e915d3..0000000000 --- a/www/public/blog/theme.css +++ /dev/null @@ -1,76 +0,0 @@ -:root { - --font-fallback: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; - --font-body: "IBM Plex Sans", var(--font-fallback); - --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", - "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", - "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, - "Courier New", Courier, monospace; - - --color-white: #FFF; - --color-black: #000014; - - --color-gray-50: #F9FAFB; - --color-gray-100: #F3F4F6; - --color-gray-200: #E5E7EB; - --color-gray-300: #D1D5DB; - --color-gray-400: #9CA3AF; - --color-gray-500: #6B7280; - --color-gray-600: #4B5563; - --color-gray-700: #374151; - --color-gray-800: #1F2937; - --color-gray-900: #111827; - - --color-blue: #3894FF; - --color-blue-rgb: 56,148,255; - --color-green: #17C083; - --color-green-rgb: 23,192,131; - --color-orange: #FF5D01; - --color-orange-rgb: 255,93,1; - --color-purple: #882DE7; - --color-purple-rgb: 136,45,231; - --color-red: #FF1639; - --color-red-rgb: 255,22,57; - --color-yellow: #FFBE2D; - --color-yellow-rgb: 255,190,45; -} - -:root { - color-scheme: light; - --theme-accent: var(--color-orange); - --theme-accent-rgb: var(--color-orange-rgb); - --theme-accent-opacity: 0.1; - --theme-divider: var(--color-gray-100); - --theme-text: var(--color-gray-800); - --theme-text-light: var(--color-gray-600); - --theme-text-lighter: var(--color-gray-400); - --theme-bg: var(--color-white); - --theme-bg-offset: var(--color-gray-100); - --theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); - --theme-code-inline-bg: var(--color-gray-100); - --theme-code-text: var(--color-gray-100); - --theme-code-bg: var(--color-gray-700); -} - -body { - background: var(--theme-bg); - color: var(--theme-text); -} - -:root.theme-dark { - color-scheme: dark; - --theme-accent-opacity: 0.3; - --theme-divider: var(--color-gray-900); - --theme-text: var(--color-gray-200); - --theme-text-light: var(--color-gray-400); - --theme-text-lighter: var(--color-gray-600); - --theme-bg: var(--color-black); - --theme-bg-offset: var(--color-gray-900); - --theme-code-inline-bg: var(--color-gray-800); - --theme-code-text: var(--color-gray-200); - --theme-code-bg: var(--color-gray-900); -} - -::selection { - color: var(--theme-accent); - background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); -} diff --git a/www/src/components/BlogHeader.astro b/www/src/components/BlogHeader.astro index 75130722f2..40d030a4cd 100644 --- a/www/src/components/BlogHeader.astro +++ b/www/src/components/BlogHeader.astro @@ -41,7 +41,7 @@ header { padding-top: 1rem; padding-bottom: 1rem; - height: 4.5rem; + height: 5rem; } article { display: flex; diff --git a/www/src/components/BlogPost.astro b/www/src/components/BlogPost.astro index 56b1f5ebcb..0f43f00d95 100644 --- a/www/src/components/BlogPost.astro +++ b/www/src/components/BlogPost.astro @@ -33,7 +33,6 @@ export let heroImage: string; margin-bottom: 4rem; } .content { - margin-top: 2rem; margin-bottom: 8rem; } diff --git a/www/src/pages/blog/index.astro b/www/src/pages/blog/index.astro index c46b1ade97..8eafa927ad 100644 --- a/www/src/pages/blog/index.astro +++ b/www/src/pages/blog/index.astro @@ -11,7 +11,7 @@ let permalink = 'https://astro.build/blog'; - +