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 320302eba9
Signed by: tanguy
GPG key ID: 10B2947233740B88
3 changed files with 86 additions and 53 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-open-entry">
<div class="blog-illustration"> <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)/> <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> </div>
<main class="main-width blog-entry-wrapper"> <main class="main-width blog-entry-wrapper">
<div class="markdown" inner_html=html/> <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())); let gallery = Resource::new(move || i18n.get_locale(), move |locale| get_gallery(locale.to_string()));
view! { view! {
<Outlet/>
<main class="main-width gallery-wrapper"> <main class="main-width gallery-wrapper">
<h2>{t!(i18n, gallery)}</h2> <h2>{t!(i18n, gallery)}</h2>
<Outlet/>
<Suspense fallback=move || view! { <div>"Loading..."</div> }> <Suspense fallback=move || view! { <div>"Loading..."</div> }>
{move || gallery.get() {move || gallery.get()
.and_then(|gallery| gallery.ok()) .and_then(|gallery| gallery.ok())
@ -68,10 +68,12 @@ pub fn Gallery() -> impl IntoView {
{ {
gallery.images.into_iter().map(|image| { gallery.images.into_iter().map(|image| {
view! { view! {
<a class="gallery-thumbnail" href={format!("/gallery/{}", image.slug)}> <div class="gallery-thumbnail" >
<img src=format!("https://directus.gerome.fi/assets/{}?width=400&height=400&fit=inside&format=auto&quality=80&withoutEnlargement=true", image.original.id)/> <a href={format!("/gallery/{}", image.slug)}>
<p>{image.title}</p> <img src=format!("https://directus.gerome.fi/assets/{}?width=400&height=400&fit=inside&format=auto&quality=80&withoutEnlargement=true", image.original.id)/>
</a> <p>{image.title}</p>
</a>
</div>
} }
}).collect::<Vec<_>>() }).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())); let gallery = Resource::new(move || i18n.get_locale(), move |locale| get_gallery(locale.to_string()));
view! { view! {
<main class="main-width gallery-wrapper"> <Suspense fallback=move || view! { <div>"Loading..."</div> }>
<Suspense fallback=move || view! { <div>"Loading..."</div> }> {move || gallery.get()
{move || gallery.get() .and_then(|gallery| gallery.ok())
.and_then(|gallery| gallery.ok()) .and_then(|gallery| gallery.images.iter()
.and_then(|gallery| gallery.images.iter() .find(|image| image.slug == slug())
.find(|image| image.slug == slug()) .map(|image| image.clone()))
.map(|image| image.clone())) .and_then(|image| {
.and_then(|image| { let translations = image.translations.unwrap_or_default();
let translations = image.translations.unwrap_or_default(); let subtitle = translations.subtitle.unwrap_or_default();
let subtitle = translations.subtitle.unwrap_or_default(); view! {
view! { <div class="main-width gallery-open-entry">
<div class="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)/> <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 {
{if subtitle.len() > 0 { Some(view!{<h4 class="gallery-subtitle">{subtitle}</h4>})
Some(view!{<div><h4>{subtitle}</h4></div>}) } else {
} else { None
None }}
}} <p class="gallery-description">{translations.description}</p>
<p>{translations.description}</p> </div>
</div> }.into()
}.into() })
}) }
} </Suspense>
</Suspense>
</main>
} }
} }

75
style/main.scss
View file

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