diff options
| -rw-r--r-- | CHANGELOG.md | 9 | ||||
| -rw-r--r-- | css/footer.scss | 22 | ||||
| -rw-r--r-- | css/header.scss | 4 | ||||
| -rw-r--r-- | css/main.scss | 9 | ||||
| -rw-r--r-- | css/navBar.scss | 3 | ||||
| -rw-r--r-- | css/page.scss | 14 | ||||
| -rw-r--r-- | css/sideMenu.scss | 8 | ||||
| -rw-r--r-- | html/achernar.html | 12 | ||||
| -rw-r--r-- | html/benoit.html | 10 | ||||
| -rw-r--r-- | include/footer.shtml | 7 |
10 files changed, 74 insertions, 24 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 01a1318..8118520 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,14 @@ # Changelog +## 10.0 + +* Add *Threads* link +* Add socials icons +* Update text styling +* Update touch styling +* Elaborate pages +* Add code block styling + ## 9.6 * Restructure scripts diff --git a/css/footer.scss b/css/footer.scss index 9015abd..514db19 100644 --- a/css/footer.scss +++ b/css/footer.scss @@ -49,10 +49,28 @@ font-weight: bold; gap: 1rem; margin: auto; + margin-top: 1rem; width: fit-content; - @media (orientation: portrait) { - flex-direction: column; + a { + aspect-ratio: 1; + background-color: var(--textColour); + display: block; + image-rendering: pixelated; + mask-size: cover; + width: 2rem; + + &.instagram { + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAX0lEQVQ4y8VTQQ6AMAiDhfT/7+0FLy6ZBnWMLPYILYQCKicAuCRAUmVVfNFkxSMfgLcV8VjEZjr1mUkqAP+cPxW7J948ibhNivi/QNlEezrTaI0R16ZufasH1WfS6jsfuEMzS24xXK8AAAAASUVORK5CYII"); + } + + &.threads { + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAeElEQVQ4y6VTMQ4AIQgDcun/38viTRolRTEyGVtogaBCAkBj/+6usgsALUs+4qfkLa+azPhf1l8sOOPurgNnytFR5hBAk6r1rIDJYyiAxva7c7bwKzOIvPltJRWC9SK2rKSgGMMYqavPrTzfQWnIN/cw1nhzzmzAP95rU0FdYvnBAAAAAElFTkSuQmCC"); + } + + &.x { + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAY0lEQVQ4y62SOw5AIQgEgWLvf14aX2WiPuQTpFOzm8kgAxhkjKoyObPlAIz14jxb4fkuVJwZ/BFmKCIyt+QWlhZ2laIkKltS3sJzCg5/2SLPkikt4xF2Sahn2iuRLjZnwze6D+xmTvrTiNc4AAAAAElFTkSuQmCC"); + } } } } diff --git a/css/header.scss b/css/header.scss index 61f0ffd..a90ff5d 100644 --- a/css/header.scss +++ b/css/header.scss @@ -5,8 +5,8 @@ background-color: var(--backgroundColour); background-size: cover; - border-bottom-left-radius: 1rem; - border-bottom-right-radius: 1rem; + border-bottom-left-radius: var(--padding); + border-bottom-right-radius: var(--padding); height: fit-content; image-rendering: pixelated; overflow: hidden; diff --git a/css/main.scss b/css/main.scss index 8e5960f..d408d19 100644 --- a/css/main.scss +++ b/css/main.scss @@ -21,11 +21,16 @@ body { --foregroundColour: oklch( 25% 0.029600 253.71); --textColour: oklch(100% 0 0); + --padding: 1rem; + background-color: var(--backgroundColour); color: var(--textColour); - font-size: 1.25em; z-index: -1; + @media (pointer: coarse) { + --padding: 2rem; + } + &.light { --backgroundColour: oklch(96.875% 0 0); --foregroundColour: oklch(93.750% 0 0); @@ -45,7 +50,7 @@ ul { list-style: none; li p::before { - content: "\2014\0020"; + content: "\2022\0020"; } } diff --git a/css/navBar.scss b/css/navBar.scss index 32ec7bd..60f4d8d 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -1,9 +1,8 @@ #navBar { align-items: center; display: flex; - height: calc(2rem + $hamburgerHeight); justify-content: space-between; - padding: $gap; + padding: var(--padding); position: absolute; top: 0; width: 100%; diff --git a/css/page.scss b/css/page.scss index a087cab..6033f34 100644 --- a/css/page.scss +++ b/css/page.scss @@ -1,5 +1,5 @@ #page { - $padding: 1rem; + $padding: var(--padding); margin: auto; max-width: $contentWidth; @@ -33,6 +33,7 @@ } section { + font-family: "Montserrat"; line-height: 2em; max-width: calc($contentWidth / 2 - $padding); text-align: justify; @@ -81,8 +82,19 @@ background-color: var(--foregroundColour); border-radius: 1rem; padding: 1rem; + text-align: left; width: 100%; } + + div.codeblock { + background-color: var(--textColour); + border-radius: 1rem; + color: var(--backgroundColour); + font-family: $monospaceFont; + line-height: normal; + padding: 1rem; + white-space: preserve; + } } x-image { diff --git a/css/sideMenu.scss b/css/sideMenu.scss index 68e0804..7fea9f2 100644 --- a/css/sideMenu.scss +++ b/css/sideMenu.scss @@ -3,13 +3,13 @@ background-color: var(--backgroundColour); display: flex; flex-direction: column; - gap: 1rem; + gap: $separatorWidth; justify-content: space-between; left: 100vw; - min-height: calc(100vh + 1rem); + min-height: calc(100vh + var(--padding)); padding: 1rem; padding-bottom: 2rem; - padding-top: calc($hamburgerHeight + $gap * 2); + padding-top: calc($hamburgerHeight + var(--padding) * 2); position: relative; width: 100%; z-index: 127; @@ -29,7 +29,7 @@ section.links { display: flex; - gap: $gap; + gap: $separatorWidth; justify-content: end; max-width: $contentWidth; padding: 0 1rem; diff --git a/html/achernar.html b/html/achernar.html index c72da2a..11d06ba 100644 --- a/html/achernar.html +++ b/html/achernar.html @@ -90,22 +90,22 @@ <br> <ul> <li> - <p>Carrois Apostrophe: <a href="https://fonts.google.com/specimen/Fira+Mono/"><em>Fira Mono</em></a></p> + <p>Carrois Apostrophe: <a href="https://fonts.google.com/specimen/Fira+Mono/"><em style="font-family: Fira Mono;">Fira Mono</em></a></p> </li> <li> - <p>Roman Shamin & the “people” at Evil Martians 👽: <a href="https://fonts.google.com/specimen/Martian+Mono/"><em>Martian Mono</em></a></p> + <p>Roman Shamin & the “people” at Evil Martians 👽: <a href="https://fonts.google.com/specimen/Martian+Mono/"><em style="font-family: Martian Mono;">Martian Mono</em></a></p> </li> <li> - <p>Sorkin Type: <a href="https://fonts.google.com/specimen/Merriweather/"><em>Merriweather</em></a></p> + <p>Sorkin Type: <a href="https://fonts.google.com/specimen/Merriweather/"><em style="font-family: Merriweather;">Merriweather</em></a></p> </li> <li> - <p>Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, and Jacques Le Bailly: <a href="https://fonts.google.com/specimen/Montserrat/"><em>Montserrat</em></a></p> + <p>Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, and Jacques Le Bailly: <a href="https://fonts.google.com/specimen/Montserrat/"><em style="font-family: Montserrat;">Montserrat</em></a></p> </li> <li> - <p>Claus Eggers Sørensen: <a href="https://fonts.google.com/specimen/Playfair+Display/"><em>Playfair Display</em></a></p> + <p>Claus Eggers Sørensen: <a href="https://fonts.google.com/specimen/Playfair+Display/"><em style="font-family: Playfair Display;">Playfair Display</em></a></p> </li> <li> - <p>Matt McInerney, Pablo Impallari, and Rodrigo Fuenzalida: <a href="https://fonts.google.com/specimen/Raleway/"><em>Raleway</em></a></p> + <p>Matt McInerney, Pablo Impallari, and Rodrigo Fuenzalida: <a href="https://fonts.google.com/specimen/Raleway/"><em style="font-family: Raleway;">Raleway</em></a></p> </li> </ul> </section> diff --git a/html/benoit.html b/html/benoit.html index 65ccb38..083532d 100644 --- a/html/benoit.html +++ b/html/benoit.html @@ -40,6 +40,14 @@ <p>The <code>benoit-cli</code> executable can render and animate using <a href="https://en.wikipedia.org/wiki/TOML/">TOML</a> files right from the commandline.</p> <br> <x-image alt="A Julia Set centred on a point inside the Mandelbrot Set. The resulting image resembles creeping, black vines with rainbows around." data-file="benoit_screenshot1"></x-image> + <br> + <p>The main use of <code>benoit-cli</code> is to render still images or animations of fractals, e.g. zoom-ins. An example configuration could look like the following:</p> + <br> + <div class="codeblock"># benoit.toml<br><br>[render]<br>count = 24<br>width = 1024<br>height = 1024<br><br>fractal = "mandelbrot"<br>inverse = false<br>julia = false<br><br>[render.start]<br>frame = 0<br><br>max_iter_count = 0x100<br><br>centre = "0.0+1.0i"<br>seed = "0.0+0.0i"<br>zoom = "1.0"<br><br>colour_range = 64.0<br><br>[render.stop]<br>frame = 23<br><br>max_iter_count = 0x100<br><br>centre = "0.0+1.0i"<br>seed = "0.0+0.0i"<br>zoom = "1.0"<br><br>colour_range = 64.0<br><br>[final]<br>palette = "fire"<br><br>[output]<br>directory = "render/"</div> + <br> + <p>Just provide the path to the desired configuration:</p> + <br> + <code>benoit-cli "benoit.toml"</code> </section> <h1 id="anchor.benoitGui">benoit-gui</h1> @@ -53,7 +61,7 @@ <h1 id="anchor.docs">docs</h1> <section> - <p>Documentation for the main library can be found on <a href="https://docs.rs/benoit/latest/benoit/"><code>docs.rs</code></a>.</p> + <p>Documentation is written in source. Documentation for the main library is hosted on <a href="https://docs.rs/benoit/latest/benoit/"><code>docs.rs</code></a>.</p> </section> <!--#include virtual="/include/footer.shtml"--> diff --git a/include/footer.shtml b/include/footer.shtml index 84d0a75..13e6e36 100644 --- a/include/footer.shtml +++ b/include/footer.shtml @@ -8,11 +8,10 @@ <p>This webservice may be cloned from <a href="https://mandelbrot.dk/achernar/" rel="noopener noreferrer" target="_blank"><code>mandelbrot.dk</code></a>.</p> <br> <div class="center" id="emailAddress" title="Obfuscated email address."></div> - <br> - <h1>socials</h1> <div id="socials"> - <a href="https://www.instagram.com/primuseridani/" title="primuseridani">instagram</a> - <a href="https://x.com/PrimusEridani/" title="PrimusEridani">x</a> + <a class="instagram" href="https://www.instagram.com/primuseridani/" title="primuseridani"></a> + <a class="threads" href="https://www.threads.net/@primuseridani/" title="primuseridani"></a> + <a class="x" href="https://x.com/PrimusEridani/" title="PrimusEridani"></a> </div> </footer> |