summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--www/public/blog.scss (renamed from www/public/blog/index.css)80
-rw-r--r--www/public/blog/code.css155
-rw-r--r--www/public/blog/theme.css76
-rw-r--r--www/src/components/BlogHeader.astro2
-rw-r--r--www/src/components/BlogPost.astro1
-rw-r--r--www/src/pages/blog/index.astro2
-rw-r--r--www/src/pages/blog/introducing-astro.astro4
7 files changed, 81 insertions, 239 deletions
diff --git a/www/public/blog/index.css b/www/public/blog.scss
index 979b2f050..afea09108 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 54b2c5094..000000000
--- 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 f6a4e915d..000000000
--- 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 75130722f..40d030a4c 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 56b1f5ebc..0f43f00d9 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 c46b1ade9..8eafa927a 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';
<html>
<head>
<BaseHead title={title} description={description} permalink={permalink} />
- <link rel="stylesheet" href="/blog/index.css" />
+ <link rel="stylesheet" href="/blog.css" />
<style>
body {
diff --git a/www/src/pages/blog/introducing-astro.astro b/www/src/pages/blog/introducing-astro.astro
index 1f24c93dc..3c5d7f39e 100644
--- a/www/src/pages/blog/introducing-astro.astro
+++ b/www/src/pages/blog/introducing-astro.astro
@@ -11,14 +11,14 @@ let title = 'Introducing Astro: Ship Less JavaScript';
let description = `We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience.`;
let publishDate = 'Tuesday, June 8 2021';
let author = 'fred';
-let heroImage = '/assets/blog/introducing-astro.jpg';
+let heroImage = '/social.png';
let permalink = 'https://astro.build/blog/introducing-astro';
---
<html>
<head>
<BaseHead title={title} description={description} permalink={permalink} />
- <link rel="stylesheet" href="/blog/index.css" />
+ <link rel="stylesheet" href="/blog.css" />
</head>
<body>