1
Fork 0

Redesign!

This commit is contained in:
Bauke 2022-10-25 23:51:06 +02:00
parent ed0920d324
commit 7d3a89f2b6
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
17 changed files with 80 additions and 211 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 422 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 563 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -66,7 +66,6 @@ function insertHtml(listen, image) {
const existing = document.querySelector('.listenbrainz') ?? undefined; const existing = document.querySelector('.listenbrainz') ?? undefined;
if (existing !== undefined) { if (existing !== undefined) {
existing.previousElementSibling.remove();
existing.remove(); existing.remove();
} }
@ -77,7 +76,6 @@ function insertHtml(listen, image) {
image = image.startsWith('http://') ? 'https' + image.slice(4) : image; image = image.startsWith('http://') ? 'https' + image.slice(4) : image;
const listenHtml = ` const listenHtml = `
<div class="divider"></div>
<p class="listenbrainz"> <p class="listenbrainz">
<img alt="${alt}" title="${alt}" src="${image}"> <img alt="${alt}" title="${alt}" src="${image}">
<span class="byline">Currently listening to</span> <span class="byline">Currently listening to</span>
@ -86,5 +84,5 @@ function insertHtml(listen, image) {
</a> </a>
</p>`; </p>`;
document.querySelector('.page-main').insertAdjacentHTML('beforeend', listenHtml); document.querySelector('.page-header').insertAdjacentHTML('beforeend', listenHtml);
} }

View File

@ -18,7 +18,6 @@ fn main() -> Result<()> {
build_userstyles(&build_dir)?; build_userstyles(&build_dir)?;
templates::Index::write(&public_dir)?; templates::Index::write(&public_dir)?;
templates::Userstyles::write(&public_dir)?;
scss::Scss::write(&public_dir, &source_dir)?; scss::Scss::write(&public_dir, &source_dir)?;
copy::Copy::write(&build_dir, &public_dir, &source_dir)?; copy::Copy::write(&build_dir, &public_dir, &source_dir)?;

View File

@ -1,7 +0,0 @@
.error-404 {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
padding: 1rem;
}

View File

@ -1,15 +1,11 @@
@use 'mixins'; @use 'mixins';
.listenbrainz { .listenbrainz {
@include mixins.patterned-shadow(0.5rem);
align-items: center; align-items: center;
background-color: var(--background-2); background-color: #0002;
border: 2px solid var(--foreground-1);
display: grid; display: grid;
grid-template-columns: min-content auto; grid-template-columns: min-content auto;
margin-top: 1rem; padding: 8px;
padding: 1rem;
width: fit-content; width: fit-content;
@media (max-width: mixins.$medium-breakpoint) { @media (max-width: mixins.$medium-breakpoint) {
@ -22,7 +18,7 @@
img { img {
grid-row: 1 / 3; grid-row: 1 / 3;
margin-right: 1rem; margin-right: 8px;
width: 4rem; width: 48px;
} }
} }

View File

@ -1,8 +1,28 @@
@use 'mixins'; @use 'mixins';
.page-header { .page-header {
@include mixins.responsive-container; --anchor-color: #000;
--anchor-hover: #fff;
border-bottom: 2px dotted var(--foreground-1); background: linear-gradient(to right, #5bc2e7, #b7cf81);
margin-bottom: 2rem; 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;
}
} }

View File

@ -1,63 +1,41 @@
@use 'mixins'; @use 'mixins';
.page-main { .page-main {
@include mixins.responsive-container; a {
align-items: center;
margin-bottom: 2rem; display: flex;
height: calc(50vh - 128px);
.contact-links { justify-content: center;
display: grid; padding: 64px;
gap: 2rem; text-decoration: none;
grid-template-columns: repeat(2, 1fr);
@media (max-width: mixins.$medium-breakpoint) { @media (max-width: mixins.$medium-breakpoint) {
grid-template-columns: repeat(1, 1fr); height: 50vh;
} }
a { &.driftingnebula {
@include mixins.patterned-shadow(0.5rem); background: url('/assets/driftingnebula 2022-03-09.jpeg');
background-position: center center;
background-color: var(--background-2); background-repeat: no-repeat;
border: 2px solid var(--foreground-1);
padding: 1rem;
position: relative;
&:hover { &:hover {
background-color: var(--foreground-1); filter: hue-rotate(180deg);
} }
}
&::before { &.holllo {
content: attr(data-label); background: url('/assets/holllo-mark-square-pattern.png');
font-size: 50%; background-color: #1f1731;
position: absolute; background-repeat: repeat;
right: 4px; background-size: 48px;
top: 4px;
&: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%;
}
}

View File

@ -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);
}
}
}
}
}

View File

@ -5,25 +5,23 @@ html {
} }
body { body {
--background-1: #52d168; --anchor-color: #f0f;
--background-2: #60f079; --anchor-hover: #000;
--foreground-1: #1d2623;
background-color: var(--background-1); background-color: #000;
color: var(--foreground-1); color: #000;
font-family: sans-serif; font-family: sans-serif;
font-size: 2rem; font-size: 2rem;
padding: 2rem;
} }
a { a {
color: var(--foreground-1); color: var(--anchor-color);
font-weight: bold; font-weight: bold;
text-decoration: 1px dotted underline; text-decoration: 2px dotted underline;
&:hover { &:hover {
background-color: var(--foreground-1); background-color: var(--anchor-color);
color: var(--background-2); color: var(--anchor-hover);
} }
} }
@ -32,7 +30,7 @@ button {
} }
:focus { :focus {
outline: 2px dotted var(--foreground-1); outline: 2px dotted #f0f;
} }
.monospace { .monospace {
@ -45,9 +43,7 @@ button {
margin-top: 2rem; margin-top: 2rem;
} }
@use 'components/errors';
@use 'components/page-footer'; @use 'components/page-footer';
@use 'components/page-header'; @use 'components/page-header';
@use 'components/page-main'; @use 'components/page-main';
@use 'components/listenbrainz'; @use 'components/listenbrainz';
@use 'components/userstyles';

View File

@ -10,20 +10,3 @@ $large-breakpoint: 1200px;
width: 100%; 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;
}
}

View File

@ -7,31 +7,28 @@
{% block body %} {% block body %}
<header class="page-header"> <header class="page-header">
<h1>Bauke</h1> <h1>Bauke</h1>
<p class="subtitle">
<a href="mailto:me@bauke.xyz" title="me@bauke.xyz">
Email
</a>
<a href="https://social.holllo.org/@Bauke" title="@bauke@social.holllo.org">
Fediverse
</a>
<a href="https://git.bauke.xyz/explore/repos">
Software
</a>
</p>
</header> </header>
<main class="page-main"> <main class="page-main">
<div class="contact-links"> <a class="driftingnebula" href="https://driftingnebula.com">
<a target="_blank" href="mailto:me@bauke.xyz" title="Email"
data-label="email">
me@bauke.xyz
</a>
<a target="_blank" href="https://social.holllo.org/@Bauke"
title="Fediverse Profile" data-label="fediverse">
@bauke@social.holllo.org
</a>
<a target="_blank" href="https://git.bauke.xyz/Bauke" title="Gitea Profile"
data-label="bauke">
Gitea
</a>
</div>
<div class="divider"></div>
<a class="driftingnebula" href="https://www.deviantart.com/driftingnebula">
<img alt="driftingnebula" src="/assets/driftingnebula.png"> <img alt="driftingnebula" src="/assets/driftingnebula.png">
</a> </a>
<a class="holllo" href="https://holllo.org">
<img alt="Holllo" src="/assets/holllo-text.png">
</a>
</main> </main>
<script src="/js/listenbrainz.js"></script> <script src="/js/listenbrainz.js"></script>

View File

@ -26,32 +26,3 @@ impl Index {
Ok(()) Ok(())
} }
} }
#[derive(Debug, Template)]
#[template(path = "userstyles.html")]
pub struct Userstyles {
pub page_title: String,
pub styles: Vec<userstyles::Userstyle>,
}
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(())
}
}

View File

@ -1,25 +0,0 @@
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="/css/index.css">
{% endblock %}
{% block body %}
<header class="page-header">
<h1>bauke.xyz</h1>
</header>
<main class="page-main userstyles">
{% for style in styles %}
<div class="style">
<div class="header">
<img src="{{ format!("/userstyles/{}.png", style.metadata.name.to_lowercase().replace(" ", "-"))|safe }}" />
<h2>{{ style.metadata.name }}</h2>
<a target="_blank" href="{{ style.metadata.update_url|safe }}">Install</a>
</div>
<p>{{ style.metadata.description }}</p>
</div>
{% endfor %}
</main>
{% endblock %}