Compare commits
No commits in common. "6650366e600eb71e52e16b06731c0c0f431057d8" and "8baa9811d392c9827d59fde95e18da7bad67ae07" have entirely different histories.
6650366e60
...
8baa9811d3
@ -1,52 +1,19 @@
|
||||
name: release
|
||||
# on:
|
||||
# push:
|
||||
# branches:
|
||||
# main
|
||||
on: workflow_dispatch
|
||||
|
||||
env:
|
||||
PORT: 3081
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
release:
|
||||
name: release
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: node:18
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: dtolnay/rust-toolchain@stable
|
||||
- name: cache
|
||||
uses: Swatinem/rust-cache@v2
|
||||
working-directory: axum_server
|
||||
- uses: taiki-e/install-action@just
|
||||
|
||||
# - uses: JarvusInnovations/background-action@v1
|
||||
# with:
|
||||
# run: just prod &
|
||||
# working-directory: axum_server
|
||||
# wait-on: http://localhost:3081
|
||||
# wait-for: 10m
|
||||
# tail: true
|
||||
|
||||
- name: Build release
|
||||
run: cargo build --release
|
||||
working-directory: axum_server
|
||||
- name: Run server in background
|
||||
run: just prod &
|
||||
working-directory: axum_server
|
||||
- uses: cygnetdigital/wait_for_response@v2.0.0
|
||||
with:
|
||||
url: 'http://127.0.0.1:3081/'
|
||||
responseCode: '200,500'
|
||||
timeout: 50000
|
||||
interval: 2000
|
||||
- name: run ssg
|
||||
run: just ssg
|
||||
working-directory: axum_server
|
||||
- name: Server log
|
||||
run: cat axum_server/server.log
|
||||
- uses: Swatinem/rust-cache@v2
|
||||
- uses: extractions/setup-just@v2
|
||||
- run: cd axum_server && just export
|
||||
- uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: dist
|
||||
|
||||
@ -38,9 +38,7 @@ I've set a new **sub goal** for buying a streaming PC. I'll buy it when the stre
|
||||
|
||||
Last week I've been showing off new headphones that I've ordered and the *YouTube* algorithm has been suggesting great videos on the topic since. I will give another shoutout. This time it is to [Joshua's Valour *YouTube* channel](https://www.youtube.com/channel/UCx9bOYEjkevIDYONBAstK-A)
|
||||
|
||||
<div class="video-embed">
|
||||
<iframe class="embed" width="100%" height="100%" src="https://www.youtube.com/embed/hoLMdrD5pic" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/hoLMdrD5pic" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
|
||||
My next pick will be a [podcast *Lifespan* hosted by Dr. David Sinclair](https://open.spotify.com/show/3PkkSdQE8DfeiKvSk1Mg1J) where he talks about what we can do and how should we treat our bodies to live a longer and healthier life.
|
||||
|
||||
|
||||
@ -24,7 +24,6 @@ image = "0.25.2"
|
||||
anyhow = "1.0.86"
|
||||
rayon = "1.10.0"
|
||||
syntect = "5.2.0"
|
||||
indoc = "2.0.5"
|
||||
|
||||
[build]
|
||||
rustflags = ["-Z", "threads=8"]
|
||||
|
||||
@ -67,6 +67,3 @@ export: clean
|
||||
just wait_for_port
|
||||
just ssg
|
||||
just kill
|
||||
|
||||
deploy:
|
||||
rsync -avz -e ssh ./dist/ michalvanko@katelyn:.config/containers/systemd/michalvankodev-site/dist/
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
use axum::{self};
|
||||
use tower_http::services::ServeDir;
|
||||
use tower_livereload::LiveReloadLayer;
|
||||
use tracing::info;
|
||||
use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
|
||||
|
||||
mod blog_posts;
|
||||
@ -46,16 +45,15 @@ async fn main() {
|
||||
// run our app with hyper, listening globally on port 3080
|
||||
let port = std::option_env!("PORT").unwrap_or("3080");
|
||||
let addr = format!("0.0.0.0:{}", port);
|
||||
let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
|
||||
info!("axum_server listening on http://{}", &addr);
|
||||
let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
|
||||
axum::serve(listener, app).await.unwrap();
|
||||
}
|
||||
|
||||
// TODO Socials
|
||||
// TODO ul li article styles
|
||||
// TODO header height difference
|
||||
// - fotos
|
||||
// TODO Colors
|
||||
// Text slate, and gray should be somehow customised
|
||||
// STRONG bold-medium
|
||||
// TODO print css and other 404 css linked in base.html
|
||||
// TODO go live pipeline
|
||||
// TODO after release
|
||||
|
||||
@ -5,7 +5,6 @@ use std::{
|
||||
|
||||
use anyhow::Context;
|
||||
use image::{image_dimensions, ImageReader};
|
||||
use indoc::formatdoc;
|
||||
|
||||
use super::{
|
||||
export_format::ExportFormat, image_generator::generate_images,
|
||||
@ -67,7 +66,7 @@ pub fn generate_picture_markup(
|
||||
.map(|format| {
|
||||
let srcset = generate_srcset(&path_to_generated, format, &resolutions);
|
||||
let format_type = format.get_type();
|
||||
formatdoc!(
|
||||
format!(
|
||||
r#"<source
|
||||
srcset="{srcset}"
|
||||
type="{format_type}"
|
||||
@ -82,7 +81,7 @@ pub fn generate_picture_markup(
|
||||
resolutions.first().expect("Should this error ever happen?"),
|
||||
exported_formats.last().expect("Can this one ever happen?"),
|
||||
);
|
||||
let image_tag = formatdoc!(
|
||||
let image_tag = format!(
|
||||
r#"<img
|
||||
src="{image_path}"
|
||||
width="{width}"
|
||||
@ -91,7 +90,7 @@ pub fn generate_picture_markup(
|
||||
>"#
|
||||
);
|
||||
|
||||
let result = formatdoc!(
|
||||
let result = format!(
|
||||
r#"<picture>
|
||||
{source_tags}
|
||||
{image_tag}
|
||||
@ -273,12 +272,10 @@ fn test_generate_srcset() {
|
||||
|
||||
#[test]
|
||||
fn test_generate_picture_markup() {
|
||||
use indoc::indoc;
|
||||
let width = 300;
|
||||
let height = 200;
|
||||
let orig_img_path = "/images/uploads/2020-03-23_20-24-06_393.jpg";
|
||||
let result = indoc! {
|
||||
r#"<picture>
|
||||
let result = r#"<picture>
|
||||
<source
|
||||
srcset="/generated_images/images/uploads/2020-03-23_20-24-06_393_300x200.avif 1x, /generated_images/images/uploads/2020-03-23_20-24-06_393_450x300.avif 1.5x, /generated_images/images/uploads/2020-03-23_20-24-06_393_600x400.avif 2x, /generated_images/images/uploads/2020-03-23_20-24-06_393_900x600.avif 3x, /generated_images/images/uploads/2020-03-23_20-24-06_393_1200x800.avif 4x"
|
||||
type="image/avif"
|
||||
@ -293,8 +290,7 @@ fn test_generate_picture_markup() {
|
||||
height="200"
|
||||
alt="Testing image alt"
|
||||
>
|
||||
</picture>"#,
|
||||
};
|
||||
</picture>"#;
|
||||
assert_eq!(
|
||||
generate_picture_markup(orig_img_path, width, height, "Testing image alt", false)
|
||||
.expect("picture markup has to be generated"),
|
||||
|
||||
@ -4,7 +4,6 @@ use axum::http::StatusCode;
|
||||
use chrono::{DateTime, Utc};
|
||||
use gray_matter::{engine::YAML, Matter};
|
||||
use image::image_dimensions;
|
||||
use indoc::formatdoc;
|
||||
use pulldown_cmark::{CodeBlockKind, Event, Options, Parser, Tag, TagEnd};
|
||||
use serde::{de::DeserializeOwned, Deserialize, Deserializer};
|
||||
use syntect::{highlighting::ThemeSet, html::highlighted_html_for_string, parsing::SyntaxSet};
|
||||
@ -72,7 +71,6 @@ pub async fn parse_post<'de, Metadata: DeserializeOwned>(
|
||||
|
||||
enum TextKind {
|
||||
Text,
|
||||
Heading(Option<String>),
|
||||
Code(String),
|
||||
}
|
||||
|
||||
@ -104,7 +102,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
|
||||
}) => {
|
||||
if !dest_url.starts_with("/") {
|
||||
return Event::Html(
|
||||
formatdoc!(
|
||||
format!(
|
||||
r#"<img
|
||||
alt="{title}"
|
||||
src="{dest_url}"
|
||||
@ -127,7 +125,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
|
||||
// Place image into the content with scaled reso to a boundary
|
||||
let picture_markup =
|
||||
generate_picture_markup(&dest_url, max_width, max_height, &title, generate_images)
|
||||
.unwrap_or(formatdoc!(
|
||||
.unwrap_or(format!(
|
||||
r#"
|
||||
<img
|
||||
alt="{alt}"
|
||||
@ -141,7 +139,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
|
||||
link_type, dest_url, title, id
|
||||
);
|
||||
Event::Html(
|
||||
formatdoc!(
|
||||
format!(
|
||||
r#"<figure>
|
||||
{picture_markup}
|
||||
<figcaption>
|
||||
@ -170,45 +168,14 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
|
||||
.unwrap();
|
||||
Event::Html(highlighted.into())
|
||||
}
|
||||
TextKind::Heading(provided_id) => {
|
||||
let heading_id = provided_id.clone().unwrap_or({
|
||||
text.to_lowercase()
|
||||
.replace(|c: char| !c.is_alphanumeric(), "-")
|
||||
});
|
||||
Event::Html(
|
||||
formatdoc!(
|
||||
r##"
|
||||
<a name="{heading_id}" class="anchor" href="#{heading_id}">
|
||||
<span class="header-link"></span>
|
||||
</a>
|
||||
{text}
|
||||
"##
|
||||
)
|
||||
.into(),
|
||||
)
|
||||
}
|
||||
_ => Event::Text(text),
|
||||
},
|
||||
Event::Start(Tag::Heading {
|
||||
level,
|
||||
id,
|
||||
classes: _,
|
||||
attrs: _,
|
||||
}) => {
|
||||
let id_str = id.map(|id| id.to_string());
|
||||
text_kind = TextKind::Heading(id_str);
|
||||
Event::Html(format!("<{level}>").into())
|
||||
}
|
||||
Event::Start(_) => event,
|
||||
Event::End(TagEnd::Image) => Event::Html("</figcaption></figure>".into()),
|
||||
Event::End(TagEnd::CodeBlock) => {
|
||||
text_kind = TextKind::Text;
|
||||
Event::End(TagEnd::CodeBlock)
|
||||
}
|
||||
Event::End(TagEnd::Heading(heading_level)) => {
|
||||
text_kind = TextKind::Text;
|
||||
Event::End(TagEnd::Heading(heading_level))
|
||||
}
|
||||
_ => event,
|
||||
});
|
||||
|
||||
|
||||
@ -69,10 +69,10 @@
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-pink-800 underline underline-offset-2;
|
||||
@apply text-pink-600 underline underline-offset-2;
|
||||
|
||||
&:hover {
|
||||
@apply transition text-blue-500;
|
||||
@apply transition text-blue-400;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,15 +83,6 @@ a {
|
||||
h2 {
|
||||
@apply px-4 text-xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply px-4 text-lg font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply px-4 text-lg font-medium text-blue-900 mb-2 mt-3 max-w-read mx-auto md:text-lg md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
|
||||
}
|
||||
@ -134,7 +125,7 @@ a {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-600;
|
||||
@apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-500;
|
||||
|
||||
p {
|
||||
@apply my-2 md:my-4 text-slate-600 max-w-note;
|
||||
@ -142,21 +133,12 @@ a {
|
||||
}
|
||||
|
||||
:not(pre) code {
|
||||
@apply text-pink-900 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
|
||||
@apply text-pink-950 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
|
||||
}
|
||||
|
||||
pre code pre {
|
||||
@apply mx-2 rounded lg:mx-auto lg:text-lg shadow-sm lg:max-w-note;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply px-4 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
|
||||
}
|
||||
|
||||
iframe {
|
||||
@apply rounded shadow-md mx-auto lg:max-w-image;
|
||||
}
|
||||
}
|
||||
|
||||
.video-embed {
|
||||
|
||||
@ -1,113 +1,5 @@
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(23 137 224 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(23 137 224 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
/*
|
||||
! tailwindcss v3.4.12 | MIT License | https://tailwindcss.com
|
||||
! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
@ -646,6 +538,114 @@ video {
|
||||
url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
@ -914,27 +914,27 @@ video {
|
||||
|
||||
.border-blue-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(23 137 224 / var(--tw-border-opacity));
|
||||
border-color: rgb(59 130 246 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-blue-950 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(11 39 70 / var(--tw-border-opacity));
|
||||
border-color: rgb(23 37 84 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(225 239 253 / var(--tw-bg-opacity));
|
||||
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(241 247 254 / var(--tw-bg-opacity));
|
||||
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-pink-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 207 247 / var(--tw-bg-opacity));
|
||||
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
@ -943,7 +943,7 @@ video {
|
||||
}
|
||||
|
||||
.fill-blue-950 {
|
||||
fill: #0b2746;
|
||||
fill: #172554;
|
||||
}
|
||||
|
||||
.object-contain {
|
||||
@ -967,21 +967,11 @@ video {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.py-5 {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
@ -1073,22 +1063,22 @@ video {
|
||||
|
||||
.text-blue-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(23 137 224 / var(--tw-text-opacity));
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-blue-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(10 86 154 / var(--tw-text-opacity));
|
||||
color: rgb(29 78 216 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-blue-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(16 62 106 / var(--tw-text-opacity));
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-blue-950 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(11 39 70 / var(--tw-text-opacity));
|
||||
color: rgb(23 37 84 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
@ -1103,7 +1093,7 @@ video {
|
||||
|
||||
.text-pink-950 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(80 2 56 / var(--tw-text-opacity));
|
||||
color: rgb(80 7 36 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-slate-800 {
|
||||
@ -1128,12 +1118,12 @@ video {
|
||||
|
||||
a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(146 22 110 / var(--tw-text-opacity));
|
||||
color: rgb(219 39 119 / var(--tw-text-opacity));
|
||||
text-decoration-line: underline;
|
||||
text-underline-offset: 2px;
|
||||
&:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(23 137 224 / var(--tw-text-opacity));
|
||||
color: rgb(96 165 250 / var(--tw-text-opacity));
|
||||
}
|
||||
&:hover {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
@ -1171,7 +1161,7 @@ a {
|
||||
}
|
||||
h1 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(16 62 106 / var(--tw-text-opacity));
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h1 {
|
||||
@ -1211,7 +1201,7 @@ a {
|
||||
}
|
||||
h2 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(16 62 106 / var(--tw-text-opacity));
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h2 {
|
||||
@ -1245,126 +1235,6 @@ a {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
h3 {
|
||||
max-width: 64rem;
|
||||
}
|
||||
h3 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
}
|
||||
h3 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(16 62 106 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h3 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h3 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h3 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h3 {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h4 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
h4 {
|
||||
max-width: 64rem;
|
||||
}
|
||||
h4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
}
|
||||
h4 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(16 62 106 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h4 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h4 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h4 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h4 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h4 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h4 {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -1468,7 +1338,7 @@ a {
|
||||
}
|
||||
figcaption {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(12 73 128 / var(--tw-text-opacity));
|
||||
color: rgb(30 64 175 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
figcaption {
|
||||
@ -1538,7 +1408,7 @@ a {
|
||||
}
|
||||
thead {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(225 239 253 / var(--tw-bg-opacity));
|
||||
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
tbody {
|
||||
--tw-bg-opacity: 1;
|
||||
@ -1588,11 +1458,11 @@ a {
|
||||
}
|
||||
blockquote {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(215 34 169 / var(--tw-border-opacity));
|
||||
border-color: rgb(236 72 153 / var(--tw-border-opacity));
|
||||
}
|
||||
blockquote {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 244 253 / var(--tw-bg-opacity));
|
||||
background-color: rgb(253 242 248 / var(--tw-bg-opacity));
|
||||
}
|
||||
blockquote {
|
||||
padding-top: 0.25rem;
|
||||
@ -1635,11 +1505,11 @@ a {
|
||||
}
|
||||
:not(pre) code {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(130 195 247 / var(--tw-border-opacity));
|
||||
border-color: rgb(147 197 253 / var(--tw-border-opacity));
|
||||
}
|
||||
:not(pre) code {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(225 239 253 / var(--tw-bg-opacity));
|
||||
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
:not(pre) code {
|
||||
padding-left: 0.25rem;
|
||||
@ -1655,7 +1525,7 @@ a {
|
||||
}
|
||||
:not(pre) code {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(119 24 89 / var(--tw-text-opacity));
|
||||
color: rgb(80 7 36 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
:not(pre) code {
|
||||
@ -1698,70 +1568,6 @@ a {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
max-width: 64rem;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(2 6 23 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
ul,
|
||||
ol {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
ul,
|
||||
ol {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: -0.015em;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
iframe {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
iframe {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
iframe {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
iframe {
|
||||
max-width: min(70rem, 95vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-embed {
|
||||
@ -1774,7 +1580,7 @@ a {
|
||||
|
||||
.hover\:bg-pink-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 207 247 / var(--tw-bg-opacity));
|
||||
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@ -38,73 +38,6 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
colors: {
|
||||
// blue: {
|
||||
// 50: "#ecf6fe",
|
||||
// 100: "#d9edfc",
|
||||
// 200: "#b3dbf9",
|
||||
// 300: "#8ecaf6",
|
||||
// 400: "#68b8f3",
|
||||
// 500: "#42a6f0",
|
||||
// 600: "#3585c0",
|
||||
// 700: "#286490",
|
||||
// 800: "#1F4E71",
|
||||
// 900: "#173A54",
|
||||
// 950: "#0F2637",
|
||||
// },
|
||||
blue: {
|
||||
50: "#f1f7fe",
|
||||
100: "#e1effd",
|
||||
200: "#bddefa",
|
||||
300: "#82c3f7",
|
||||
400: "#42a6f0",
|
||||
500: "#1789e0",
|
||||
600: "#0a6cbf",
|
||||
700: "#0a569a",
|
||||
800: "#0c4980",
|
||||
900: "#103e6a",
|
||||
950: "#0b2746",
|
||||
},
|
||||
// pink: {
|
||||
// 50: "#FFFBFE",
|
||||
// 100: "#FFE4F9",
|
||||
// 200: "#FECEF4",
|
||||
// 300: "#FEB8EF",
|
||||
// 400: "#fea6eb",
|
||||
// 500: "#D38AC3",
|
||||
// 600: "#B476A7",
|
||||
// 700: "#96628B",
|
||||
// 800: "#774E6E",
|
||||
// 900: "#593A52",
|
||||
// 950: "#3A2636",
|
||||
// },
|
||||
pink: {
|
||||
50: "#fff4fd",
|
||||
100: "#ffe7fb",
|
||||
200: "#ffcff7",
|
||||
300: "#fea6eb",
|
||||
400: "#fc76dd",
|
||||
500: "#f342ca",
|
||||
600: "#d722a9",
|
||||
700: "#b31889",
|
||||
800: "#92166e",
|
||||
900: "#771859",
|
||||
950: "#500238",
|
||||
},
|
||||
purple: {
|
||||
50: "#F8F5FC",
|
||||
100: "#D5C2ED",
|
||||
200: "#B28EDE",
|
||||
300: "#8F5BCF",
|
||||
400: "#6D30B9",
|
||||
500: "#5F2AA2",
|
||||
600: "#52248A",
|
||||
700: "#441E73",
|
||||
800: "#36185C",
|
||||
900: "#281244",
|
||||
950: "#1A0C2D",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
{% block content %}
|
||||
<article class="mb-6">
|
||||
<header class="px-4 max-w-read mx-auto">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold">{{title}}</h1>
|
||||
<h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-semibold">{{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">
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
</section> <!-- /#socials -->
|
||||
|
||||
<section id="showcase" class="hidden lg:block">
|
||||
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Showcase</h2>
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Showcase</h2>
|
||||
|
||||
<ul class="">
|
||||
{% for project in featured_projects %}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2>
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">About me</h2>
|
||||
|
||||
<p class="mx-5 md:text-xl text-justify">
|
||||
Welcome to my personal website. My name is
|
||||
@ -42,7 +42,7 @@
|
||||
</section>
|
||||
|
||||
<section id="blog" class="lg:col-span-2 lg:row-start-2 xl:col-auto xl:row-start-auto xl:row-span-2">
|
||||
<h2 class="text-blue-950 font-bold text-2xl md:text-4xl m-5"><a href="/blog" class="text-blue-950 no-underline">Blog</a></h2>
|
||||
<h2 class="text-blue-950 font-semibold text-2xl md:text-4xl m-5"><a href="/blog" class="text-blue-950 no-underline">Blog</a></h2>
|
||||
<section id="blog-tags">
|
||||
<ul class="mx-5">
|
||||
{% for tag in blog_tags %}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Showcase</h2>
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Showcase</h2>
|
||||
|
||||
<ul class="mx-5 md:grid md:grid-cols-2 md:grid-rows-[masonry] md:justify-stretch md:items-stretch xl:grid-cols-3">
|
||||
{% for project in featured_projects %}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Socials</h2>
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Socials</h2>
|
||||
{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
|
||||
<!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
|
||||
<!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
{% match header_props.back_link %}
|
||||
{% when Some with (link) %}
|
||||
<a
|
||||
class="px-3 py-2 text-lg font-medium drop-shadow-md"
|
||||
class="p-3 text-lg font-medium drop-shadow-md"
|
||||
href="{{link.href}}"
|
||||
>
|
||||
{{link.label}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user