Add a release post on Astro 0.18 (#869)

* Add a release post on Astro 0.18

* Add a better description

* Add links to the post

* More attention grabbing intro

* Add additional links in the post

* Update www/src/pages/blog/astro-018.astro

Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>

* try using responsive images to improve lighthouse

* Adds an overview section in the intro

* freds edits

* Update a couple of images and minor edits

Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>
Co-authored-by: Fred K. Schott <fkschott@gmail.com>

7 files changed, 176 insertions, 1 deletions

diff --git a/www/public/assets/blog/astro-018/lit-element.jpeg b/www/public/assets/blog/astro-018/lit-element.jpeg
new file mode 100644
index 000000000..adcfac6bd
--- /dev/null
+++ b/www/public/assets/blog/astro-018/lit-element.jpeg
diff --git a/www/public/assets/blog/astro-018/lit-logo.svg b/www/public/assets/blog/astro-018/lit-logo.svg
new file mode 100644
index 000000000..a09b15cdf
--- /dev/null
+++ b/www/public/assets/blog/astro-018/lit-logo.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425 200">
+  <view id="flame" viewBox="0 0 160 200" />
+  <view id="name" viewBox="240 78 185 122" />
+
+  <path d="M394.5 78v28.8H425v15.6h-30.5V158c0 3.6.1 7.2.5 10.3.8 5.3 4 10.5 8.4 12.5 5.7 2.6 9.7 2.1 21.6 1.7l-2.9 17.2c-.8.4-4 .3-7 .3-7 0-33.4 2.5-38.8-24.7-.9-4.7-.7-9.5-.7-16.9v-35.8H362l.2-15.9h13.4V78zm-51.7 28.7v91.5H324v-91.5zm0-28.7v16.3h-19V78zm-83.6 102.2h48.2l-18 18H240V78h19.2z"/>
+
+  <path fill="#324fff" d="M0 80v80a70.3 70.3 0 0040-40z"/>
+  <path fill="#283198" d="M40 120c5.7 27.3 5.3 47 0 80L0 160z"/>
+  <path fill="#0ff" d="M40 120v80l40-40a149.9 149.9 0 00-40-40z"/>
+  <path fill="#324fff" d="M80 0v80S48.3 55.7 40 40z"/>
+  <path fill="#324fff" d="M40 40v80a84.8 84.8 0 0040-40z"/>
+  <path fill="#00e8ff" d="M80 80a182 182 0 010 80l-40-40z"/>
+  <path fill="#283198" d="M80 80v80c17-7.5 31.5-19 40-40-5.9-17-18.1-30.9-40-40z"/>
+  <path fill="#283198" d="M120 40v80L80 80z"/>
+  <path fill="#00e8ff" d="M120 120c6.1 27 4.9 53.6 0 80l-40-40z"/>
+  <path fill="#324fff" d="M120 120v80l40-40c-5.4-15-18.3-27.9-40-40z"/>
+  <path fill="#324fff" d="M160 80v80l-40-40z"/>
+</svg>
diff --git a/www/public/assets/blog/astro-018/named-slots.png b/www/public/assets/blog/astro-018/named-slots.png
new file mode 100644
index 000000000..01c805261
--- /dev/null
+++ b/www/public/assets/blog/astro-018/named-slots.png
diff --git a/www/public/assets/blog/astro-018/responsive-hydration.jpg b/www/public/assets/blog/astro-018/responsive-hydration.jpg
new file mode 100644
index 000000000..ee98e769c
--- /dev/null
+++ b/www/public/assets/blog/astro-018/responsive-hydration.jpg
diff --git a/www/public/assets/blog/astro-018/solid-logo-dark.svg b/www/public/assets/blog/astro-018/solid-logo-dark.svg
new file mode 100644
index 000000000..5917b2292
--- /dev/null
+++ b/www/public/assets/blog/astro-018/solid-logo-dark.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 341.7 155.3" viewBox="0 0 341.7 155.3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.513" x2="152.027" y1="3.551" y2="63.991"><stop offset=".118" stop-color="#bbbdbf"/><stop offset=".299" stop-color="#f1f1f2"/><stop offset="1" stop-color="#d0d2d3"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.792" x2="73.994" y1="33.088" y2="105.748"><stop offset="0" stop-color="#bbbdbf"/><stop offset=".475" stop-color="#929497"/><stop offset="1" stop-color="#58595b"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.417" x2="144.251" y1="64.728" y2="150.269"><stop offset="0" stop-color="#58595b"/><stop offset=".539" stop-color="#929497"/><stop offset="1" stop-color="#58595b"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.248" x2="24.386" y1="75.009" y2="261.284"><stop offset="0" stop-color="#4377bb"/><stop offset="0" stop-color="#808184"/><stop offset=".475" stop-color="#404041"/><stop offset="1" stop-color="#231f20"/></linearGradient></defs><path d="m169.2 100.9s3.2 3.4 8.1 3.4c3.4 0 6.2-2 6.2-5.4 0-7.8-15.5-5.9-15.5-15.5 0-4.5 4-8.3 9.7-8.3 5.4 0 8.3 3 8.3 3l-1.5 2.6s-2.7-2.7-6.8-2.7c-4 0-6.5 2.6-6.6 5.3 0 7.4 15.5 5.3 15.5 15.5 0 4.6-3.6 8.4-9.4 8.4-6.4 0-9.8-4-9.8-4zm49.1-25.6c8.8 0 15.8 7 15.8 15.9.1 8.8-7 16.1-15.8 16.2h-.1c-8.8-.1-15.9-7.4-15.8-16.2v-.1c.1-8.9 7.1-15.9 15.9-15.8zm-.1 29.3c7.2-.2 12.9-6.1 12.7-13.3v-.1c0-7.4-5.6-13.1-12.6-13.1s-12.7 5.6-12.7 13c0 7.6 5.6 13.4 12.6 13.5zm33.9-28.7h3l-.1 28.3h14.4v2.7h-17.5zm33.9.1h3l-.1 31.1h-3zm23.2 0h10c9.3 0 15.6 5.7 15.6 15.6s-6.3 15.5-15.6 15.5h-10zm9.6 28.4c7.6 0 12.7-4.5 12.8-12.8 0-8.3-5.1-12.8-12.7-12.8h-6.7l-.1 25.6z" fill="#fff"/><path d="m163 35.8s-52.7-39.8-93.6-30.5c-1.2.3-2.5.6-3.6 1-6.3 2-11 5.5-13.9 9.7-.6.8-1 1.7-1.5 2.5l-15.1 25.7 26.1 5.1c10.3 7.4 24.8 10.5 37.2 7.3l46.5 9.1z" fill="#bbbdbf"/><path d="m163 35.8s-52.7-39.8-93.6-30.5c-1.2.3-2.5.6-3.6 1-6.3 2-11 5.5-13.9 9.7-.6.8-1 1.7-1.5 2.5l-15.1 25.7 26.1 5.1c10.3 7.4 24.8 10.5 37.2 7.3l46.5 9.1z" fill="url(#a)" opacity=".29"/><path d="m51.5 35.3c-1.2.3-2.5.6-3.6 1-16.7 5.4-22.4 21-12.8 34.7s30.9 20.4 47.6 15l62.3-20.2s-52.6-39.8-93.5-30.5z" fill="#929497"/><path d="m51.5 35.3c-1.2.3-2.5.6-3.6 1-16.7 5.4-22.4 21-12.8 34.7s30.9 20.4 47.6 15l62.3-20.2s-52.6-39.8-93.5-30.5z" fill="url(#b)" opacity=".34"/><path d="m133.6 80.3c-9.6-13.7-30.9-20.5-47.6-15.1l-62.4 20.2-19.6 35 111.6 19.1 20-35.6c4-7 3.6-15.6-2-23.6z" fill="url(#c)"/><path d="m114 115.2c-9.6-13.7-30.9-20.5-47.6-15.1l-62.4 20.3s52.7 39.8 93.6 30.5c1.2-.3 2.5-.6 3.6-1 16.7-5.4 22.4-21 12.8-34.7z" fill="url(#d)"/></svg>
\ No newline at end of file
diff --git a/www/public/blog.scss b/www/public/blog.scss
index f74c02692..3be4f48ec 100644
--- a/www/public/blog.scss
+++ b/www/public/blog.scss
@@ -1,3 +1,5 @@
+@use './code.scss';
+
 :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);
@@ -168,7 +170,6 @@ small,
 
 a {
   color: var(--theme-accent);
-  font-weight: 400;
   text-underline-offset: 0.08em;
   text-decoration: none;
   align-items: center;
diff --git a/www/public/code.scss b/www/public/code.scss
new file mode 100644
index 000000000..ec735a676
--- /dev/null
+++ b/www/public/code.scss
@@ -0,0 +1,155 @@
+.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;
+}