summaryrefslogtreecommitdiff
path: root/examples/blog
diff options
context:
space:
mode:
Diffstat (limited to 'examples/blog')
-rw-r--r--examples/blog/astro.config.mjs6
-rw-r--r--examples/blog/public/blog.scss79
-rw-r--r--examples/blog/public/global.scss152
3 files changed, 114 insertions, 123 deletions
diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs
index e6e926d7b..2c8e9130e 100644
--- a/examples/blog/astro.config.mjs
+++ b/examples/blog/astro.config.mjs
@@ -5,13 +5,11 @@ export default {
// public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
buildOptions: {
// site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
- sitemap: true, // Generate sitemap (set to "false" to disable)
+ sitemap: true, // Generate sitemap (set to "false" to disable)
},
devOptions: {
// port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
},
- renderers: [
- '@astrojs/renderer-preact'
- ]
+ renderers: ['@astrojs/renderer-preact'],
};
diff --git a/examples/blog/public/blog.scss b/examples/blog/public/blog.scss
index afea09108..f74c02692 100644
--- a/examples/blog/public/blog.scss
+++ b/examples/blog/public/blog.scss
@@ -1,37 +1,35 @@
: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;
+ --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-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-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;
+ --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 {
@@ -140,30 +138,31 @@ nav ul {
}
h1 {
- font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem);
+ font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
}
h2 {
- font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem);
+ font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
}
h3 {
- font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem);
+ font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
}
h4 {
- font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem);
+ font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
}
h5 {
- font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem);
+ font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
}
p {
color: var(--theme-text-light);
}
-small, .text_small {
+small,
+.text_small {
font-size: 0.833rem;
}
@@ -176,14 +175,14 @@ a {
gap: 0.5rem;
}
-a > code:not([class*="language"]) {
+a > code:not([class*='language']) {
position: relative;
color: var(--theme-accent);
background: transparent;
text-underline-offset: var(--padding-block);
}
-a > code:not([class*="language"])::before {
+a > code:not([class*='language'])::before {
content: '';
position: absolute;
top: 0;
@@ -213,13 +212,13 @@ strong {
/* Supporting Content */
-code:not([class*="language"]) {
+code:not([class*='language']) {
--border-radius: 3px;
--padding-block: 0.2rem;
--padding-inline: 0.33rem;
font-family: var(--font-mono);
- font-size: .85em;
+ font-size: 0.85em;
color: inherit;
background-color: var(--theme-code-inline-bg);
padding: var(--padding-block) var(--padding-inline);
@@ -227,7 +226,7 @@ code:not([class*="language"]) {
border-radius: var(--border-radius);
}
-pre > code:not([class*="language"]) {
+pre > code:not([class*='language']) {
background-color: transparent;
padding: 0;
margin: 0;
@@ -245,7 +244,7 @@ pre {
padding-right: calc(var(--padding-inline) * 2);
margin-left: calc(50vw - var(--padding-inline));
transform: translateX(-50vw);
-
+
line-height: 1.414;
width: calc(100vw + (var(--padding-inline) * 2));
max-width: calc(100% + (var(--padding-inline) * 2));
diff --git a/examples/blog/public/global.scss b/examples/blog/public/global.scss
index c0d03a8fd..5aea52933 100644
--- a/examples/blog/public/global.scss
+++ b/examples/blog/public/global.scss
@@ -1,99 +1,93 @@
:root {
- --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- --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-green: #17c083;
+ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ --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-green: #17c083;
}
* {
- box-sizing: border-box;
- margin: 0;
+ box-sizing: border-box;
+ margin: 0;
}
html {
- display: grid;
- width: 100%;
- max-width: 100vw;
- overflow: hidden;
- height: 100%;
- background-color: #000014;
+ display: grid;
+ width: 100%;
+ max-width: 100vw;
+ overflow: hidden;
+ height: 100%;
+ background-color: #000014;
}
-html, body {
- padding: 0;
- font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
- font-family: var(--font-sans);
- font-weight: 400;
- background-image: radial-gradient(
- 87.7% 87.7% at 85.6% 18.14%,
- #111827 0%,
- #000014 100%
- );
- background-repeat: no-repeat;
- color: #f3f4f6;
+html,
+body {
+ padding: 0;
+ font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
+ font-family: var(--font-sans);
+ font-weight: 400;
+ background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
+ background-repeat: no-repeat;
+ color: #f3f4f6;
}
body {
- position: relative;
- display: grid;
- place-items: center;
- min-width: 100%;
- max-width: 100vw;
- min-height: 100vh;
- overflow-x: hidden;
+ position: relative;
+ display: grid;
+ place-items: center;
+ min-width: 100%;
+ max-width: 100vw;
+ min-height: 100vh;
+ overflow-x: hidden;
}
.visually-hidden {
- clip: rect(0 0 0 0);
- clip-path: inset(50%);
- height: 1px;
- overflow: hidden;
- position: absolute;
- white-space: nowrap;
- width: 1px;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
}
a {
- position: relative;
- text-decoration: none;
- color: var(--color-green);
- padding: 0.05em 0.125em;
- margin: -0.05em -0.125em;
- transition: color 120ms cubic-bezier(0.23, 1, 0.320, 1);
- z-index: 0;
- display: inline-block;
+ position: relative;
+ text-decoration: none;
+ color: var(--color-green);
+ padding: 0.05em 0.125em;
+ margin: -0.05em -0.125em;
+ transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
+ z-index: 0;
+ display: inline-block;
- &:hover,
- &:focus {
- color: rgba(0, 0, 0, 1);
+ &:hover,
+ &:focus {
+ color: rgba(0, 0, 0, 1);
- &::before {
- transform: scaleY(1);
- background: var(--color-green);
- }
+ &::before {
+ transform: scaleY(1);
+ background: var(--color-green);
}
+ }
- &:visited {
- // color: var(--color-green);
- color: var(--color-green);
- &:hover,
- &:focus {
- color: rgba(0, 0, 0, 1);
- }
+ &:visited {
+ // color: var(--color-green);
+ color: var(--color-green);
+ &:hover,
+ &:focus {
+ color: rgba(0, 0, 0, 1);
}
+ }
- &::before {
- transform-origin: bottom center;
- content: '';
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- inset: 0;
- background: var(--color-green);
- pointer-events: none;
- transform: scaleY(0.05);
- transition: transform 120ms cubic-bezier(0.23, 1, 0.320, 1),
- background 120ms cubic-bezier(0.23, 1, 0.320, 1);
- z-index: -1;
- }
+ &::before {
+ transform-origin: bottom center;
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ inset: 0;
+ background: var(--color-green);
+ pointer-events: none;
+ transform: scaleY(0.05);
+ transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
+ z-index: -1;
+ }
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-06 14:46:09 +0000