diff --git a/source/assets/driftingnebula 2022-03-07.jpeg b/source/assets/driftingnebula 2022-03-07.jpeg deleted file mode 100644 index 029e89b..0000000 Binary files a/source/assets/driftingnebula 2022-03-07.jpeg and /dev/null differ diff --git a/source/assets/driftingnebula 2022-03-09.jpeg b/source/assets/driftingnebula 2022-03-09.jpeg new file mode 100644 index 0000000..029bd66 Binary files /dev/null and b/source/assets/driftingnebula 2022-03-09.jpeg differ diff --git a/source/assets/holllo-mark-square-pattern.png b/source/assets/holllo-mark-square-pattern.png new file mode 100644 index 0000000..31ca7c8 Binary files /dev/null and b/source/assets/holllo-mark-square-pattern.png differ diff --git a/source/assets/holllo-text.png b/source/assets/holllo-text.png new file mode 100644 index 0000000..31df1b3 Binary files /dev/null and b/source/assets/holllo-text.png differ diff --git a/source/assets/shadow-pattern.png b/source/assets/shadow-pattern.png deleted file mode 100644 index 1e51ac3..0000000 Binary files a/source/assets/shadow-pattern.png and /dev/null differ diff --git a/source/js/listenbrainz.js b/source/js/listenbrainz.js index 0a940cd..34dcd14 100644 --- a/source/js/listenbrainz.js +++ b/source/js/listenbrainz.js @@ -66,7 +66,6 @@ function insertHtml(listen, image) { const existing = document.querySelector('.listenbrainz') ?? undefined; if (existing !== undefined) { - existing.previousElementSibling.remove(); existing.remove(); } @@ -77,7 +76,6 @@ function insertHtml(listen, image) { image = image.startsWith('http://') ? 'https' + image.slice(4) : image; const listenHtml = ` -

${alt} Currently listening to @@ -86,5 +84,5 @@ function insertHtml(listen, image) {

`; - document.querySelector('.page-main').insertAdjacentHTML('beforeend', listenHtml); + document.querySelector('.page-header').insertAdjacentHTML('beforeend', listenHtml); } diff --git a/source/main.rs b/source/main.rs index a7ccf9d..f0ea9f3 100644 --- a/source/main.rs +++ b/source/main.rs @@ -18,7 +18,6 @@ fn main() -> Result<()> { build_userstyles(&build_dir)?; templates::Index::write(&public_dir)?; - templates::Userstyles::write(&public_dir)?; scss::Scss::write(&public_dir, &source_dir)?; copy::Copy::write(&build_dir, &public_dir, &source_dir)?; diff --git a/source/scss/components/_errors.scss b/source/scss/components/_errors.scss deleted file mode 100644 index a393331..0000000 --- a/source/scss/components/_errors.scss +++ /dev/null @@ -1,7 +0,0 @@ -.error-404 { - align-items: center; - display: flex; - height: 100vh; - justify-content: center; - padding: 1rem; -} diff --git a/source/scss/components/_listenbrainz.scss b/source/scss/components/_listenbrainz.scss index 5fef478..9a98d1d 100644 --- a/source/scss/components/_listenbrainz.scss +++ b/source/scss/components/_listenbrainz.scss @@ -1,15 +1,11 @@ @use 'mixins'; .listenbrainz { - @include mixins.patterned-shadow(0.5rem); - align-items: center; - background-color: var(--background-2); - border: 2px solid var(--foreground-1); + background-color: #0002; display: grid; grid-template-columns: min-content auto; - margin-top: 1rem; - padding: 1rem; + padding: 8px; width: fit-content; @media (max-width: mixins.$medium-breakpoint) { @@ -22,7 +18,7 @@ img { grid-row: 1 / 3; - margin-right: 1rem; - width: 4rem; + margin-right: 8px; + width: 48px; } } diff --git a/source/scss/components/_page-header.scss b/source/scss/components/_page-header.scss index 6b15c5b..6f53e31 100644 --- a/source/scss/components/_page-header.scss +++ b/source/scss/components/_page-header.scss @@ -1,8 +1,28 @@ @use 'mixins'; .page-header { - @include mixins.responsive-container; + --anchor-color: #000; + --anchor-hover: #fff; - border-bottom: 2px dotted var(--foreground-1); - margin-bottom: 2rem; + background: linear-gradient(to right, #5bc2e7, #b7cf81); + height: 256px; + display: flex; + gap: 8px; + flex-direction: column; + justify-content: center; + + @media (max-width: mixins.$medium-breakpoint) { + height: 50vh; + } + + h1 { + border-bottom: 2px dotted; + padding-left: 64px; + } + + .subtitle { + display: flex; + gap: 16px; + margin-left: 64px; + } } diff --git a/source/scss/components/_page-main.scss b/source/scss/components/_page-main.scss index 3ae86ea..6fe256e 100644 --- a/source/scss/components/_page-main.scss +++ b/source/scss/components/_page-main.scss @@ -1,63 +1,41 @@ @use 'mixins'; .page-main { - @include mixins.responsive-container; - - margin-bottom: 2rem; - - .contact-links { - display: grid; - gap: 2rem; - grid-template-columns: repeat(2, 1fr); + a { + align-items: center; + display: flex; + height: calc(50vh - 128px); + justify-content: center; + padding: 64px; + text-decoration: none; @media (max-width: mixins.$medium-breakpoint) { - grid-template-columns: repeat(1, 1fr); + height: 50vh; } - a { - @include mixins.patterned-shadow(0.5rem); - - background-color: var(--background-2); - border: 2px solid var(--foreground-1); - padding: 1rem; - position: relative; + &.driftingnebula { + background: url('/assets/driftingnebula 2022-03-09.jpeg'); + background-position: center center; + background-repeat: no-repeat; &:hover { - background-color: var(--foreground-1); + filter: hue-rotate(180deg); } + } - &::before { - content: attr(data-label); - font-size: 50%; - position: absolute; - right: 4px; - top: 4px; + &.holllo { + background: url('/assets/holllo-mark-square-pattern.png'); + background-color: #1f1731; + background-repeat: repeat; + background-size: 48px; + + &:hover { + filter: grayscale(100%); } } + + img { + max-width: 256px; + } } } - -.driftingnebula { - background: url('/assets/driftingnebula 2022-03-07.jpeg'); - background-repeat: no-repeat; - background-position: center center; - display: block; - font-size: 3rem; - height: 10rem; - padding: 1rem; - position: relative; - text-align: center; - text-decoration: none; - text-shadow: 0 0 4px var(--background-1); - - &:hover { - color: var(--foreground-1); - filter: hue-rotate(180deg); - outline: 2px dotted var(--foreground-1); - outline-offset: 4px; - } - - img { - height: 100%; - } -} diff --git a/source/scss/components/_userstyles.scss b/source/scss/components/_userstyles.scss deleted file mode 100644 index 71c7705..0000000 --- a/source/scss/components/_userstyles.scss +++ /dev/null @@ -1,37 +0,0 @@ -.userstyles { - background-color: transparent; - display: grid; - gap: 1rem; - grid-template-columns: repeat(2, 1fr); - padding: 0; - - .style { - background-color: var(--background-2); - border: 2px solid var(--foreground-1); - padding: 1rem; - - .header { - align-items: center; - display: flex; - margin-bottom: 0.5rem; - - img { - height: 4rem; - margin-right: 0.5rem; - } - - a { - border: 2px solid; - margin-left: auto; - padding: 0.5rem; - text-decoration: none; - - &:hover { - background-color: var(--foreground-1); - border-color: var(--foreground-1); - color: var(--background-2); - } - } - } - } -} diff --git a/source/scss/index.scss b/source/scss/index.scss index 9438327..852c2ab 100644 --- a/source/scss/index.scss +++ b/source/scss/index.scss @@ -5,25 +5,23 @@ html { } body { - --background-1: #52d168; - --background-2: #60f079; - --foreground-1: #1d2623; + --anchor-color: #f0f; + --anchor-hover: #000; - background-color: var(--background-1); - color: var(--foreground-1); + background-color: #000; + color: #000; font-family: sans-serif; font-size: 2rem; - padding: 2rem; } a { - color: var(--foreground-1); + color: var(--anchor-color); font-weight: bold; - text-decoration: 1px dotted underline; + text-decoration: 2px dotted underline; &:hover { - background-color: var(--foreground-1); - color: var(--background-2); + background-color: var(--anchor-color); + color: var(--anchor-hover); } } @@ -32,7 +30,7 @@ button { } :focus { - outline: 2px dotted var(--foreground-1); + outline: 2px dotted #f0f; } .monospace { @@ -45,9 +43,7 @@ button { margin-top: 2rem; } -@use 'components/errors'; @use 'components/page-footer'; @use 'components/page-header'; @use 'components/page-main'; @use 'components/listenbrainz'; -@use 'components/userstyles'; diff --git a/source/scss/mixins.scss b/source/scss/mixins.scss index b27ff1b..685eb16 100644 --- a/source/scss/mixins.scss +++ b/source/scss/mixins.scss @@ -10,20 +10,3 @@ $large-breakpoint: 1200px; width: 100%; } } - -@mixin patterned-shadow($size) { - position: relative; - - &::after { - --shadow-size: #{$size}; - - background: url('/assets/shadow-pattern.png') repeat; - content: ''; - height: 100%; - left: var(--shadow-size); - position: absolute; - top: var(--shadow-size); - width: 100%; - z-index: -1; - } -} diff --git a/source/templates/index.html b/source/templates/index.html index d0a144a..0cddb0b 100644 --- a/source/templates/index.html +++ b/source/templates/index.html @@ -7,31 +7,28 @@ {% block body %}

Bauke

+ +

+ + Email + + + Fediverse + + + Software + +

-
- - me@bauke.xyz - - - - @bauke@social.holllo.org - - - - Gitea - -
- -
- - + driftingnebula + + + Holllo +
diff --git a/source/templates/mod.rs b/source/templates/mod.rs index d929486..7d594d0 100644 --- a/source/templates/mod.rs +++ b/source/templates/mod.rs @@ -26,32 +26,3 @@ impl Index { Ok(()) } } - -#[derive(Debug, Template)] -#[template(path = "userstyles.html")] -pub struct Userstyles { - pub page_title: String, - pub styles: Vec, -} - -impl Userstyles { - pub fn write(public_dir: &Path) -> Result<()> { - let destination = public_dir.join("userstyles/index.html"); - create_dir_all(destination.parent().unwrap())?; - - let styles = userstyles::ALL_USERSTYLES - .iter() - .map(|target| userstyles::Userstyle::load(target)) - .flatten() - .collect(); - - let template = Self { - page_title: "Bauke".to_string(), - styles, - }; - - write(destination, template.render()?)?; - - Ok(()) - } -} diff --git a/source/templates/userstyles.html b/source/templates/userstyles.html deleted file mode 100644 index dc0798e..0000000 --- a/source/templates/userstyles.html +++ /dev/null @@ -1,25 +0,0 @@ -{% extends "base.html" %} - -{% block head %} - -{% endblock %} - -{% block body %} -
-

bauke.xyz

-
- -
- {% for style in styles %} -
-
- -

{{ style.metadata.name }}

- Install -
- -

{{ style.metadata.description }}

-
- {% endfor %} -
-{% endblock %}