diff options
| -rw-r--r-- | about/index.html | 4 | ||||
| -rw-r--r-- | images/fabrizio-conti-TUmjK7ZJgbI-unsplash.jpg | bin | 0 -> 7393648 bytes | |||
| -rw-r--r-- | style.css | 60 |
3 files changed, 53 insertions, 11 deletions
diff --git a/about/index.html b/about/index.html index 2b6da7f..cd5601a 100644 --- a/about/index.html +++ b/about/index.html @@ -76,7 +76,9 @@ made with some CSS magic I made that you can find in <a class="reference externa The body text is typeset in Roboto Slab, created by <a class="reference external" href="https://christianrobertson.com/">Christian Robertson</a> while working at Google. The headlines are set in Nyght Serif, a font by <a class="reference external" href="https://linktr.ee/mkobuzan">Maksym Kobuzan</a>. Check out their other fonts, their work is beautiful! Source code is typeset in Fira Code, a derivate by ... from -Mozilla's <a class="reference external" href="https://github.com/mozilla/Fira">Fira Mono</a> font, designed by <a class="reference external" href="https://spiekermann.com/">Erik Spiekermann</a>, <a class="reference external" href="https://carrois.com/">Ralph du Carrois</a>, <a class="reference external" href="https://anjameiners.com/de/hallo/">Anja Meiners</a> and Botio Nikoltchev of Carrois Type Design, now succeeded by <a class="reference external" href="https://bboxtype.com/typefaces/FiraMono/#!layout=specimen">bBoxType</a> , and Patryk Adamczyk of Mozilla.</p> +Mozilla's <a class="reference external" href="https://github.com/mozilla/Fira">Fira Mono</a> font, designed by <a class="reference external" href="https://spiekermann.com/">Erik Spiekermann</a>, <a class="reference external" href="https://carrois.com/">Ralph du Carrois</a>, <a class="reference external" href="https://anjameiners.com/de/hallo/">Anja Meiners</a> and Botio Nikoltchev of Carrois Type Design, now succeeded by <a class="reference external" href="https://bboxtype.com/typefaces/FiraMono/#!layout=specimen">bBoxType</a> , and Patryk Adamczyk of Mozilla. The photo of mountains +that's used in the background of this site is by <a class="reference external" href="https://www.conti.photos/">Fabrizio Conti</a> and can be found on +<a class="reference external" href="https://unsplash.com/photos/TUmjK7ZJgbI">Unsplash</a>.</p> </div> </div> </main><footer> diff --git a/images/fabrizio-conti-TUmjK7ZJgbI-unsplash.jpg b/images/fabrizio-conti-TUmjK7ZJgbI-unsplash.jpg Binary files differnew file mode 100644 index 0000000..767741f --- /dev/null +++ b/images/fabrizio-conti-TUmjK7ZJgbI-unsplash.jpg @@ -124,13 +124,29 @@ html, body { } body { + position: relative; /* important for sizing of background image ::before pseudo-element */ display: flex; flex-direction: column; align-items: stretch; font-family: "Roboto Slab"; font-weight: 350; color: var(--c-text); - background-color: var(--c-bg-backdrop); +} + +body::before { + content: ""; + position: absolute; + top: 0; left: 0; + z-index: -1000; + width: 100%; + height: 100%; + /* linear-gradient(hsl(0 0% 100% / 0%), hsl(240 20% 12% / 100%)), */ + background: + linear-gradient(to bottom, hsl(0 0% 8% / 80%), hsl(0 0% 3% / 95%)), + linear-gradient(hsl(220 15% 18%), hsl(220 15% 18%)), + center 20% / cover space no-repeat fixed url("/images/fabrizio-conti-TUmjK7ZJgbI-unsplash.jpg"), + var(--c-bg-backdrop); + background-blend-mode: luminosity, color, normal; } ::selection { @@ -158,7 +174,7 @@ nav { flex-direction: row; flex-wrap: wrap; background-color: var(--c-bg-front); - box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity)); + box-shadow: 0 0 3px 2px hsl(0 0% 10% / var(--shadow-opacity)); padding: 0 10px 0 10px; justify-content: space-between; } @@ -201,15 +217,27 @@ nav a:hover { margin: 0 5px 0 5px; } +main::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + backdrop-filter: brightness(100%) blur(10px); + z-index: -1; +} + main { + position: relative; align-self: center; margin-top: -100px; - padding: 100px 100px 40px 100px; + padding: 100px; max-width: min(100%, 60em); box-sizing: border-box; - background-color: var(--c-bg-front); - box-shadow: 0 0 3px 2px rgba(0, 0, 0, calc(0.6 * var(--shadow-opacity))); + box-shadow: 0 0 3px 2px hsl(0 0% 10% / calc(0.6 * var(--shadow-opacity))); text-align: justify; + background-color: hsl(260 5% 20% / 40%); hyphens: auto; } @@ -280,11 +308,6 @@ body > header > h1::first-line { } */ - -main.cards { - background-color: var(--c-bg-behind); -} - .pagination-links { width: 100%; display: flex; @@ -507,6 +530,7 @@ footer { align-self: center; margin-bottom: 10px; text-align: center; + padding: 5px 25px 5px 25px; } body .hll {} @@ -599,6 +623,22 @@ body .il { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L --default-border: 0.5px dotted hsla(220, 10%, 30%, 50%); } + body::before { + background: + linear-gradient(to bottom, hsl(0 0% 100% / 70%), hsl(0 0% 90% / 80%)), + linear-gradient(hsl(260 10% 10%), hsl(260 10% 10%)), + center 20% / cover space no-repeat fixed url("/images/fabrizio-conti-TUmjK7ZJgbI-unsplash.jpg"), + var(--c-bg-backdrop); + } + + main::before { + backdrop-filter: brightness(106%) blur(10px); + } + + main { + background-color: hsl(260 5% 90% / 40%); + } + body > header > h1 { filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)); } |
