Redesign!
This commit is contained in:
parent
ed0920d324
commit
7d3a89f2b6
GPG Key ID:
C1C0F29952BCF558
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 |
|
|
@ -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 = `
|
||||
<div class="divider"></div>
|
||||
<p class="listenbrainz">
|
||||
<img alt="${alt}" title="${alt}" src="${image}">
|
||||
<span class="byline">Currently listening to</span>
|
||||
|
|
@ -86,5 +84,5 @@ function insertHtml(listen, image) {
|
|||
</a>
|
||||
</p>`;
|
||||
|
||||
document.querySelector('.page-main').insertAdjacentHTML('beforeend', listenHtml);
|
||||
document.querySelector('.page-header').insertAdjacentHTML('beforeend', listenHtml);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)?;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
.error-404 {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,31 +7,28 @@
|
|||
{% block body %}
|
||||
<header class="page-header">
|
||||
<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>
|
||||
|
||||
<main class="page-main">
|
||||
<div class="contact-links">
|
||||
<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">
|
||||
<a class="driftingnebula" href="https://driftingnebula.com">
|
||||
<img alt="driftingnebula" src="/assets/driftingnebula.png">
|
||||
</a>
|
||||
|
||||
<a class="holllo" href="https://holllo.org">
|
||||
<img alt="Holllo" src="/assets/holllo-text.png">
|
||||
</a>
|
||||
</main>
|
||||
|
||||
<script src="/js/listenbrainz.js"></script>
|
||||
|
|
|
|||
|
|
@ -26,32 +26,3 @@ impl Index {
|
|||
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(())
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
Loading…
Reference in New Issue