michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mooooar moooar pretty fixes
Some checks failed
test / cargo test (push) Failing after 1m4s
Details

Browse Source
This commit is contained in:
Michal Vanko 2024-09-20 11:51:29 +02:00
parent f3c4df4458
commit 377aee315e
12 changed files with 84 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
axum_server/src/main.rs
View File

@ -35,6 +35,7 @@ async fn main() {
.nest_service("/fonts", ServeDir::new("../static/fonts"))
.nest_service("/generated_images", ServeDir::new("generated_images"))
.nest_service("/svg", ServeDir::new("../static/svg"))
// TODO manifest logos have bad link, #directory-swap
.nest_service(
"/config.yml",
ServeDir::new("../static/resources/config.yml"),
@ -53,11 +54,10 @@ async fn main() {
// TODO Socials
// - fotos
// TODO Colors
// Text slate, and gray should be somehow customised
// TODO print css and other 404 css linked in base.html
// TODO go live pipeline
// TODO after release
// Remove old web completely
// Restructure repository
// - contact
// - projects page
// - linktree page

21
axum_server/src/picture_generator/picture_markup_generator.rs
View File

@ -22,13 +22,24 @@ pub fn generate_picture_markup(
generate_image: bool,
) -> Result<String, anyhow::Error> {
let exported_formats = get_export_formats(orig_img_path);
if exported_formats.is_empty() {
return Ok(formatdoc!(
r#"<img
src="{orig_img_path}"
width="{width}"
height="{height}"
alt="{alt_text}"
>"#
));
}
let path_to_generated = get_generated_file_name(orig_img_path);
// TODO This should get removed when we move the project structure #move
let dev_only_img_path =
// TODO This should get removed when we move the project structure #directory-swap
let disk_img_path =
Path::new("../static/").join(orig_img_path.strip_prefix("/").unwrap_or(orig_img_path));
let orig_img_dimensions = image_dimensions(&dev_only_img_path)?;
let orig_img_dimensions = image_dimensions(&disk_img_path)?;
let resolutions = get_resolutions(orig_img_dimensions, width, height);
let path_to_generated_arc = Arc::new(path_to_generated);
@ -40,8 +51,8 @@ pub fn generate_picture_markup(
if generate_image {
rayon::spawn(move || {
let orig_img = ImageReader::open(&dev_only_img_path)
.with_context(|| format!("Failed to read instrs from {:?}", &dev_only_img_path))
let orig_img = ImageReader::open(&disk_img_path)
.with_context(|| format!("Failed to read instrs from {:?}", &disk_img_path))
.unwrap()
.decode()
.unwrap();

6
axum_server/styles/input.css
View File

@ -80,6 +80,10 @@ strong {
@apply font-medium;
}
img[height] {
height: revert-layer;
}
.article-body {
h1 {
@apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
@ -114,7 +118,7 @@ strong {
}
table {
@apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-gray-200 rounded md:text-base lg:text-xl lg:my-8;
@apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-slate-200 rounded md:text-base lg:text-xl lg:my-8;
}
thead {

51
axum_server/styles/output.css
View File

@ -807,10 +807,6 @@ video {
width: 180px;
}
.w-full {
width: 100%;
}
.max-w-maxindex {
max-width: 100rem;
}
@ -828,6 +824,11 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.break-inside-avoid {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.grid-flow-col {
grid-auto-flow: column;
}
@ -914,6 +915,11 @@ video {
border-color: rgb(11 39 70 / var(--tw-border-opacity));
}
.border-slate-300 {
--tw-border-opacity: 1;
border-color: rgb(203 213 225 / var(--tw-border-opacity));
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(225 239 253 / var(--tw-bg-opacity));
@ -938,11 +944,6 @@ video {
fill: #0b2746;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.p-0 {
padding: 0px;
}
@ -1083,21 +1084,16 @@ video {
color: rgb(11 39 70 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-pink-950 {
--tw-text-opacity: 1;
color: rgb(80 2 56 / var(--tw-text-opacity));
}
.text-slate-600 {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity));
}
.text-slate-800 {
--tw-text-opacity: 1;
color: rgb(30 41 59 / var(--tw-text-opacity));
@ -1107,11 +1103,6 @@ video {
text-decoration-line: none;
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -1140,6 +1131,10 @@ strong {
font-weight: 500;
}
img[height] {
height: revert-layer;
}
.article-body {
h1 {
margin-left: auto;
@ -1505,7 +1500,7 @@ strong {
}
table {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
border-color: rgb(226 232 240 / var(--tw-border-opacity));
}
table {
font-size: 0.875rem;
@ -1927,3 +1922,9 @@ strong {
grid-template-columns: 1fr 2fr;
}
}
@media print {
.print\:hidden {
display: none;
}
}

7
axum_server/templates/base.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>{% block title %} {{title}} @michalvankodev {% endblock %}</title>
<title>{% block title %} {{title}} {% endblock %} @michalvankodev</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#333333" />
@ -13,16 +13,13 @@
rel="alternate"
type="application/rss+xml"
title="RSS feed for latest posts"
href="https://michalvanko.dev/feed.xml"
href="/feed.xml"
/>
<!-- Tailwind output file -->
<link rel="stylesheet" href="/styles/output.css" />
<link rel="stylesheet" href="/print.css" media="print" />
<link rel="stylesheet" href="/fonts.css" />
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/prism.css" />
<link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
<link rel="icon" type="image/png" href="/m-logo-192.png" />

2
axum_server/templates/blog_post.html
View File

@ -8,7 +8,7 @@
<h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold">{{title}}</h1>
<aside class="flex justify-between flex-row">
{% include "post_tag_list.html" %}
<section class="created-at m-1 text-right text-sm text-gray-600 md:text-lg">
<section class="created-at m-1 text-right text-sm text-slate-600 md:text-lg">
<span>Published on</span>
<time datetime="{date}"> {{date|pretty_date}} </time>
</section>

4
axum_server/templates/blog_post_list.html
View File

@ -25,13 +25,13 @@
</ul>
</section>
<hr class="border-blue-950 m-5 md:my-8">
<hr class="border-slate-300 m-5 md:my-8">
<ul class="mx-5">
{% for post in posts %}
<li>
{% include "components/blog_post_preview.html" %}
<hr class="border-blue-950 my-5 md:my-8">
<hr class="border-slate-300 my-5 md:my-8">
</li>
{% endfor %}
</ul>

4
axum_server/templates/components/blog_post_preview.html
View File

@ -1,4 +1,4 @@
<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8">
<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8 break-inside-avoid">
<aside class="row-span-3 self-center">
{% match post.metadata.thumbnail %}
{% when Some with (orig_path) %}
@ -14,7 +14,7 @@
<a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 no-underline">{{post.metadata.title}}</a>
</h3>
</header>
<section class="text-base leading-5 text-gray-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
<footer class="text-sm md:text-base lg:text-lg">
<ul class="inline-block">
{% for tag in post.metadata.tags %}

11
axum_server/templates/components/project_preview_card.html
View File

@ -1,4 +1,4 @@
<article class="border rounded-md bg-white m-4 p-4">
<article class="border rounded-md bg-white m-4 p-4 break-inside-avoid">
<header class="px-4 mb-3">
<h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
{% match project.metadata.link %}
@ -18,16 +18,17 @@
{% match project.metadata.cover_image %}
{% when Some with (source) %}
<figure class="mx-4 my-2">
{% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", true).unwrap_or("cover not found".to_string()) %}
<figure class="mx-4 my-2 flex justify-center">
{% match project.metadata.link %}
{% when Some with (href) %}
<a href="{{href}}">
<img src="{{source}}" class="object-contain w-full aspect-video"/>
{{picture|safe}}
</a>
{% when None %}
<img src="{{source}}" />
{{picture|safe}}
{% endmatch %}
<!-- TODO <figure> -->
<!-- TODO <figure> generate_image -->
</figure>
{% when None %}
{% endmatch %}

2
axum_server/templates/components/talent_card.html
View File

@ -10,7 +10,7 @@
<header>
<h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
</header>
<p class="text-sm leading-5 text-gray-800 md:text-lg">{{description|safe}}</p>
<p class="text-sm leading-5 text-slate-800 md:text-lg">{{description|safe}}</p>
</section>
</section>

37
axum_server/templates/index.html
View File

@ -7,23 +7,22 @@
{% block content %}
<section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
<section id="about-me">
<header class="index-header hidden">
<figure class="profile-pic">
<picture>
<img
alt="Portrait"
{# TODO generate `srcset` for optimal image #}
{# TODO Take a new photo #}
src="/images/profile-portugal-landscape.jpg"
/>
</picture>
</figure>
<!-- <header class="index-header hidden"> -->
<!-- <figure class="profile-pic"> -->
<!-- <picture> -->
<!-- <img -->
<!-- alt="Portrait" -->
<!-- {# TODO Take a new photo #} -->
<!-- src="/images/profile-portugal-landscape.jpg" -->
<!-- /> -->
<!-- </picture> -->
<!-- </figure> -->
<p class="motto">
<cite>“Let your ambition carry you.”</cite>
<span class="cite-owner">- La Flame</span>
</p>
</header>
<!-- <p class="motto"> -->
<!-- <cite>“Let your ambition carry you.”</cite> -->
<!-- <span class="cite-owner">- La Flame</span> -->
<!-- </p> -->
<!-- </header> -->
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2>
@ -52,13 +51,13 @@
{% endfor %}
</ul>
</section>
<hr class="border-blue-950 m-5">
<hr class="border-slate-300 m-5">
<ul class="mx-5">
{% for post in featured_blog_posts %}
<li>
{% include "components/blog_post_preview.html" %}
<hr class="border-blue-950 my-5 md:my-8">
<hr class="border-slate-300 my-5 md:my-8">
</li>
{% endfor %}
</ul>
@ -68,7 +67,7 @@
{% include "sections/social.html" %}
</section>
<hr class="border-blue-950 m-5 lg:hidden">
<hr class="border-slate-300 m-5 lg:hidden">
<section id="showcase" class="col-span-2">
{% include "sections/showcase.html" %}

4
axum_server/templates/site_header.html
View File

@ -3,7 +3,7 @@
{% match header_props.back_link %}
{% when Some with (link) %}
<a
class="px-3 py-2 text-lg font-medium"
class="px-3 py-2 text-lg font-medium print:hidden"
href="{{link.href}}"
>
{{link.label}}
@ -16,5 +16,5 @@
</a>
</aside>
</nav>
<hr class="border-blue-950 mx-5">
<hr class="border-slate-300 mx-5">
</header>