pretty homepage

RyanBrewer317 · Oct 21, 2024 · 1715121 · 1715121
1 parent f464a18
commit 1715121
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 18 deletions.
diff --git a/arctic_build/__pages/index.html b/arctic_build/__pages/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html><head></head><body><h1><span>Arctic
-</span></h1><img src="/banner.jpg" alt="An icy horizon in the Arctic.
-" async="true"><h3><span>Performance on Ice
+</span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.
 Author content in the language you want, generate HTML at build time,
 and serve a high-performance experience on the rocks.

diff --git a/arctic_build/index.html b/arctic_build/index.html
@@ -9,8 +9,8 @@
 else
   document.body.style.paddingTop = &#39;0px&#39;;
           ">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><div><div id="arctic-app"><html><head></head><body><h1><span>Arctic
-</span></h1><img src="/banner.jpg" alt="An icy horizon in the Arctic.
-" async="true"><h3><span>Performance on Ice
+</span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.
 Author content in the language you want, generate HTML at build time,
 and serve a high-performance experience on the rocks.

diff --git a/arctic_build/public/style.css b/arctic_build/public/style.css
@@ -12,7 +12,7 @@ html,
   margin: 0;
   background: var(--background);
   color: var(--color);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: sans-serif;
 }
 
 h3 {
@@ -93,4 +93,19 @@ a {
 a:hover {
   opacity: 0.5;
   transition: 0.2s;
+}
+
+.img-container {
+  height: 200pt;
+}
+
+.img-container img {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 200pt;
+  object-fit: cover;
+  object-position: center;
+  filter: hue-rotate(70deg) grayscale(0.65);
 }
diff --git a/dist/__pages/index.html b/dist/__pages/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html><head></head><body><h1><span>Arctic
-</span></h1><img src="/banner.jpg" alt="An icy horizon in the Arctic.
-" async="true"><h3><span>Performance on Ice
+</span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.
 Author content in the language you want, generate HTML at build time,
 and serve a high-performance experience on the rocks.

diff --git a/dist/index.html b/dist/index.html
@@ -9,8 +9,8 @@
 else
   document.body.style.paddingTop = &#39;0px&#39;;
           ">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><div><div id="arctic-app"><html><head></head><body><h1><span>Arctic
-</span></h1><img src="/banner.jpg" alt="An icy horizon in the Arctic.
-" async="true"><h3><span>Performance on Ice
+</span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.
 Author content in the language you want, generate HTML at build time,
 and serve a high-performance experience on the rocks.

diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/arctic_framework_org.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/arctic_framework_org.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/demos.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/demos.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/parser.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/parser.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/parser.cache_meta b/dist/priv/arctic_framework_org/_gleam_artefacts/parser.cache_meta
diff --git a/dist/priv/arctic_framework_org/parser.mjs b/dist/priv/arctic_framework_org/parser.mjs
@@ -15,7 +15,7 @@ import { alt, class$, href, src } from "../lustre/lustre/attribute.mjs";
 import * as $element from "../lustre/lustre/element.mjs";
 import { text } from "../lustre/lustre/element.mjs";
 import * as $html from "../lustre/lustre/element/html.mjs";
-import { a, code, em, h1, h3, img, li, pre, strong, ul } from "../lustre/lustre/element/html.mjs";
+import { a, code, div, em, h1, h3, img, li, pre, strong, ul } from "../lustre/lustre/element/html.mjs";
 import * as $snag from "../snag/snag.mjs";
 import { Ok, toList, makeError } from "./gleam.mjs";
 
@@ -92,11 +92,16 @@ export function parse(src_name, content) {
         let url = args.head;
         return new Ok(
           [
-            img(
+            div(
+              toList([class$("img-container")]),
               toList([
-                src(url),
-                alt(body),
-                $attribute.attribute("async", "true"),
+                img(
+                  toList([
+                    src(url),
+                    alt(body),
+                    $attribute.attribute("async", "true"),
+                  ]),
+                ),
               ]),
             ),
             undefined,

diff --git a/dist/style.css b/dist/style.css
@@ -12,7 +12,7 @@ html,
   margin: 0;
   background: var(--background);
   color: var(--color);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: sans-serif;
 }
 
 h3 {
@@ -93,4 +93,19 @@ a {
 a:hover {
   opacity: 0.5;
   transition: 0.2s;
+}
+
+.img-container {
+  height: 200pt;
+}
+
+.img-container img {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 200pt;
+  object-fit: cover;
+  object-position: center;
+  filter: hue-rotate(70deg) grayscale(0.65);
 }
diff --git a/public/style.css b/public/style.css
@@ -12,7 +12,7 @@ html,
   margin: 0;
   background: var(--background);
   color: var(--color);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: sans-serif;
 }
 
 h3 {
@@ -93,4 +93,19 @@ a {
 a:hover {
   opacity: 0.5;
   transition: 0.2s;
+}
+
+.img-container {
+  height: 200pt;
+}
+
+.img-container img {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 200pt;
+  object-fit: cover;
+  object-position: center;
+  filter: hue-rotate(70deg) grayscale(0.65);
 }
diff --git a/src/parser.gleam b/src/parser.gleam
@@ -7,7 +7,7 @@ import gleam/list
 import gleam/string.{replace, split}
 import lustre/attribute.{alt, class, href, src}
 import lustre/element.{text}
-import lustre/element/html.{a, code, em, h1, h3, img, li, pre, strong, ul}
+import lustre/element/html.{a, code, div, em, h1, h3, img, li, pre, strong, ul}
 import snag.{type Snag}
 
 pub fn parse(src_name: String, content: String) -> Result(Page, Snag) {
@@ -31,7 +31,9 @@ pub fn parse(src_name: String, content: String) -> Result(Page, Snag) {
     case args {
       [url] ->
         Ok(#(
-          img([src(url), alt(body), attribute.attribute("async", "true")]),
+          div([class("img-container")], [
+            img([src(url), alt(body), attribute.attribute("async", "true")]),
+          ]),
           Nil,
         ))
       _ -> snag.error("img expected a URL argument")