tanguy/tanguy.gerome.fi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style and layout updates for blog and gallery

Browse source
This commit is contained in:
Tanguy Gérôme 2025-05-30 14:24:36 +03:00
parent f6cbaabb8f
commit 141e442f73
Signed by: tanguy
GPG key ID: 10B2947233740B88
3 changed files with 81 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/blog.rs
View file

@ -99,7 +99,7 @@ pub fn BlogPost() -> impl IntoView {
<div class="blog-open-entry">
<div class="blog-illustration">
<img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1000&fit=inside&format=auto&quality=90&withoutEnlargement=true", post.illustration.id)/>
<h2 class="blog-title">{translations.title}</h2>
<h2 class="blog-title"><p class="main-width">{translations.title}</p></h2>
</div>
<main class="main-width blog-entry-wrapper">
<div class="markdown" inner_html=html/>

62
src/gallery.rs
View file

@ -56,9 +56,9 @@ pub fn Gallery() -> impl IntoView {
let gallery = Resource::new(move || i18n.get_locale(), move |locale| get_gallery(locale.to_string()));
view! {
<Outlet/>
<main class="main-width gallery-wrapper">
<h2>{t!(i18n, gallery)}</h2>
<Outlet/>
<Suspense fallback=move || view! { <div>"Loading..."</div> }>
{move || gallery.get()
.and_then(|gallery| gallery.ok())
@ -68,10 +68,12 @@ pub fn Gallery() -> impl IntoView {
{
gallery.images.into_iter().map(|image| {
view! {
<a class="gallery-thumbnail" href={format!("/gallery/{}", image.slug)}>
<img src=format!("https://directus.gerome.fi/assets/{}?width=400&height=400&fit=inside&format=auto&quality=80&withoutEnlargement=true", image.original.id)/>
<p>{image.title}</p>
</a>
<div class="gallery-thumbnail" >
<a href={format!("/gallery/{}", image.slug)}>
<img src=format!("https://directus.gerome.fi/assets/{}?width=400&height=400&fit=inside&format=auto&quality=80&withoutEnlargement=true", image.original.id)/>
<p>{image.title}</p>
</a>
</div>
}
}).collect::<Vec<_>>()
}
@ -104,31 +106,29 @@ pub fn GalleryEntry() -> impl IntoView {
let gallery = Resource::new(move || i18n.get_locale(), move |locale| get_gallery(locale.to_string()));
view! {
<main class="main-width gallery-wrapper">
<Suspense fallback=move || view! { <div>"Loading..."</div> }>
{move || gallery.get()
.and_then(|gallery| gallery.ok())
.and_then(|gallery| gallery.images.iter()
.find(|image| image.slug == slug())
.map(|image| image.clone()))
.and_then(|image| {
let translations = image.translations.unwrap_or_default();
let subtitle = translations.subtitle.unwrap_or_default();
view! {
<div class="gallery-open-entry">
<img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/>
<h3>{image.title}</h3>
{if subtitle.len() > 0 {
Some(view!{<div><h4>{subtitle}</h4></div>})
} else {
None
}}
<p>{translations.description}</p>
</div>
}.into()
})
}
</Suspense>
</main>
<Suspense fallback=move || view! { <div>"Loading..."</div> }>
{move || gallery.get()
.and_then(|gallery| gallery.ok())
.and_then(|gallery| gallery.images.iter()
.find(|image| image.slug == slug())
.map(|image| image.clone()))
.and_then(|image| {
let translations = image.translations.unwrap_or_default();
let subtitle = translations.subtitle.unwrap_or_default();
view! {
<div class="main-width gallery-open-entry">
<h2 class="gallery-title">{image.title}</h2>
<img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/>
{if subtitle.len() > 0 {
Some(view!{<h4 class="gallery-subtitle">{subtitle}</h4>})
} else {
None
}}
<p class="gallery-description">{translations.description}</p>
</div>
}.into()
})
}
</Suspense>
}
}

69
style/main.scss
View file

@ -1,11 +1,17 @@
$mainGreen: #2b762f;
$mainGrey: #0F0F0F;
@mixin main-width {
max-width: 800px;
}
@mixin top-level-padding {
padding: 0 16px;
@media all and (max-width: 400px) {
padding: 0 8px;
}
margin-bottom: 32px;
}
* {
@ -45,7 +51,8 @@ body {
.main-width {
width: 100%;
max-width: 800px;
@include main-width;
@include top-level-padding;
}
h1, h2, h3, h4, h5, h6 {
@ -155,11 +162,6 @@ body {
}
}
main {
@include top-level-padding;
margin-bottom: 32px;
}
.markdown {
b, strong {
font-weight: 500;
@ -271,6 +273,10 @@ body {
margin: 0;
background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1.0));
color: white;
display: flex;
align-items: center;
justify-content: center;
}
}
}
@ -287,7 +293,7 @@ body {
height: 100%;
width: 100%;
max-height: 300px;
max-width: 500px;
max-width: 300px;
object-fit: contain;
}
@ -308,23 +314,40 @@ body {
.gallery-wrapper {
max-width: 1000px!important;
width: fit-content;
}
.gallery-thumbnail {
img {
height: 300px;
width: 300px;
object-fit: contain;
flex-grow: 1;
display: flex;
flex-basis: 300px;
align-items: center;
justify-content: center;
@media all and (max-width: 1000px) {
height: 300px;
width: 300px;
a {
display: block;
position: relative;
height: fit-content;
width: fit-content;
img {
max-height: 300px;
max-width: 300px;
object-fit: contain;
}
}
p {
text-align: center;
p {
text-align: center;
display: block;
width: 100%;
position: absolute;
bottom: 0px;
padding: 16px;
padding-top: 64px;
margin: 0;
background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1.0));
color: white;
}
}
}
@ -342,11 +365,17 @@ body {
align-self: center;
}
h3 {
.gallery-title {
margin-bottom: 16px;
}
.gallery-subtitle {
margin-top: 16px;
margin-bottom: 8px;
}
p {
.gallery-description {
margin-top: 8px;
margin-bottom: 64px;
}
}