feat: fix www styles
This commit is contained in:
Nate Moore
parent
c269c0f23c
commit
de5fc1de20
7 changed files with 81 additions and 239 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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));
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
header {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
height: 4.5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
article {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ export let heroImage: string;
|
|||
margin-bottom: 4rem;
|
||||
}
|
||||
.content {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue