stylish img

RyanBrewer317 · Oct 21, 2024 · 2f8f3ad · 2f8f3ad
1 parent fdcbf9c
commit 2f8f3ad
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 20 deletions.
diff --git a/arctic_build/__pages/demos/index.html b/arctic_build/__pages/demos/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <div><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#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><h1><span>Demos
-</span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
-" async="true"></div><p><span>This website is made entirely with Arctic!
+</span></h1><div class="img-container"><div><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div></div><p><span>This website is made entirely with Arctic!
 You can find the source code <a href="https://github.com/RyanBrewer317/arctic-framework-org/"><span>here</span></a>.
 You can find the source code for this specific demos page <a href="https://github.com/RyanBrewer317/arctic-framework-org/blob/main/src/demos.gleam"><span>here</span></a>.
 </span></p><p><span><a href="https://ryanbrewer.dev"><span>ryanbrewer.dev</span></a> is another website built with Arctic, 

diff --git a/arctic_build/__pages/index.html b/arctic_build/__pages/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#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><h1><span>Arctic
-</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></h1><div class="img-container"><div><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div></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
@@ -1,7 +1,7 @@
 <!doctype html>
 <html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body style="padding-top:40pt;"><div><div id="arctic-app"><html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#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><h1><span>Arctic
-</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></h1><div class="img-container"><div><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div></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
@@ -97,7 +97,33 @@ a:hover {
   height: 200pt;
 }
 
-.img-container img {
+.img-container div {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 200pt;
+}
+
+.img-container div::before, .img-container div::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 50%;
+  pointer-events: none;
+}
+
+.img-container div::before {
+  top: 0;
+  background: linear-gradient(to bottom, var(--background), transparent);
+}
+
+.img-container div::after {
+  bottom: 0;
+  background: linear-gradient(to top, var(--background), transparent);
+}
+
+.img-container div img {
   position: absolute;
   left: 0;
   right: 0;

diff --git a/dist/__pages/demos/index.html b/dist/__pages/demos/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <div><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#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><h1><span>Demos
-</span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
-" async="true"></div><p><span>This website is made entirely with Arctic!
+</span></h1><div class="img-container"><div><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div></div><p><span>This website is made entirely with Arctic!
 You can find the source code <a href="https://github.com/RyanBrewer317/arctic-framework-org/"><span>here</span></a>.
 You can find the source code for this specific demos page <a href="https://github.com/RyanBrewer317/arctic-framework-org/blob/main/src/demos.gleam"><span>here</span></a>.
 </span></p><p><span><a href="https://ryanbrewer.dev"><span>ryanbrewer.dev</span></a> is another website built with Arctic, 

diff --git a/dist/__pages/index.html b/dist/__pages/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#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><h1><span>Arctic
-</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></h1><div class="img-container"><div><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div></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
@@ -1,7 +1,7 @@
 <!doctype html>
 <html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body style="padding-top:40pt;"><div><div id="arctic-app"><html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#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><h1><span>Arctic
-</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></h1><div class="img-container"><div><img src="/banner.jpg" alt="An icy horizon in the Arctic.
+" async="true"></div></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/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
@@ -95,11 +95,16 @@ export function parse(src_name, content) {
             div(
               toList([class$("img-container")]),
               toList([
-                img(
+                div(
+                  toList([]),
                   toList([
-                    src(url),
-                    alt(body),
-                    $attribute.attribute("async", "true"),
+                    img(
+                      toList([
+                        src(url),
+                        alt(body),
+                        $attribute.attribute("async", "true"),
+                      ]),
+                    ),
                   ]),
                 ),
               ]),

diff --git a/dist/style.css b/dist/style.css
@@ -97,7 +97,33 @@ a:hover {
   height: 200pt;
 }
 
-.img-container img {
+.img-container div {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 200pt;
+}
+
+.img-container div::before, .img-container div::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 50%;
+  pointer-events: none;
+}
+
+.img-container div::before {
+  top: 0;
+  background: linear-gradient(to bottom, var(--background), transparent);
+}
+
+.img-container div::after {
+  bottom: 0;
+  background: linear-gradient(to top, var(--background), transparent);
+}
+
+.img-container div img {
   position: absolute;
   left: 0;
   right: 0;

diff --git a/public/style.css b/public/style.css
@@ -97,7 +97,33 @@ a:hover {
   height: 200pt;
 }
 
-.img-container img {
+.img-container div {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 200pt;
+}
+
+.img-container div::before, .img-container div::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 50%;
+  pointer-events: none;
+}
+
+.img-container div::before {
+  top: 0;
+  background: linear-gradient(to bottom, var(--background), transparent);
+}
+
+.img-container div::after {
+  bottom: 0;
+  background: linear-gradient(to top, var(--background), transparent);
+}
+
+.img-container div img {
   position: absolute;
   left: 0;
   right: 0;

diff --git a/src/parser.gleam b/src/parser.gleam
@@ -32,7 +32,9 @@ pub fn parse(src_name: String, content: String) -> Result(Page, Snag) {
       [url] ->
         Ok(#(
           div([class("img-container")], [
-            img([src(url), alt(body), attribute.attribute("async", "true")]),
+            div([], [
+              img([src(url), alt(body), attribute.attribute("async", "true")]),
+            ]),
           ]),
           Nil,
         ))