From e2e0464c7802815ce3d4f8892bd5d6fdd2fce0bf Mon Sep 17 00:00:00 2001 From: Michal Vanko Date: Fri, 13 Sep 2024 13:10:33 +0200 Subject: [PATCH] blog post default thumbnail --- axum_server/styles/output.css | 76 +++++++++++++++++++ .../blog_post_default_thumbnail.html | 3 + .../components/blog_post_preview.html | 10 ++- axum_server/templates/components/terminal.svg | 32 ++++++++ axum_server/templates/sections/showcase.html | 2 +- 5 files changed, 118 insertions(+), 5 deletions(-) create mode 100644 axum_server/templates/components/blog_post_default_thumbnail.html create mode 100644 axum_server/templates/components/terminal.svg diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css index bbc9b3c..bb4d709 100644 --- a/axum_server/styles/output.css +++ b/axum_server/styles/output.css @@ -705,6 +705,14 @@ video { height: 1.75rem; } +.h-\[220px\] { + height: 220px; +} + +.h-\[240px\] { + height: 240px; +} + .min-h-full { min-height: 100%; } @@ -725,6 +733,10 @@ video { width: 100%; } +.w-\[180px\] { + width: 180px; +} + .max-w-maxindex { max-width: 100rem; } @@ -737,6 +749,16 @@ video { flex-grow: 1; } +.-translate-y-1 { + --tw-translate-y: -0.25rem; + 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)); +} + +.-translate-y-1\.5 { + --tw-translate-y: -0.375rem; + 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)); +} + .grid-flow-col { grid-auto-flow: column; } @@ -761,6 +783,10 @@ video { place-content: center; } +.content-center { + align-content: center; +} + .content-end { align-content: flex-end; } @@ -789,10 +815,20 @@ video { gap: 1rem; } +.self-center { + align-self: center; +} + .overflow-hidden { overflow: hidden; } +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .rounded { border-radius: 0.25rem; } @@ -805,6 +841,18 @@ video { border-radius: 0.375rem; } +.rounded-lg { + border-radius: 0.5rem; +} + +.rounded-3xl { + border-radius: 1.5rem; +} + +.rounded-2xl { + border-radius: 1rem; +} + .border { border-width: 1px; } @@ -813,6 +861,10 @@ video { border-width: 2px; } +.border-4 { + border-width: 4px; +} + .border-blue-200 { --tw-border-opacity: 1; border-color: rgb(191 219 254 / var(--tw-border-opacity)); @@ -848,6 +900,11 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-blue-100 { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity)); +} + .fill-blue-950 { fill: #172554; } @@ -939,6 +996,16 @@ video { line-height: 1.75rem; } +.text-6xl { + font-size: 3.75rem; + line-height: 1; +} + +.text-8xl { + font-size: 6rem; + line-height: 1; +} + .font-bold { font-weight: 700; } @@ -1007,6 +1074,11 @@ video { color: rgb(30 41 59 / var(--tw-text-opacity)); } +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); +} + .no-underline { text-decoration-line: none; } @@ -1502,6 +1574,10 @@ a { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .md\:grid-rows-\[masonry\] { + grid-template-rows: masonry; + } + .md\:items-stretch { align-items: stretch; } diff --git a/axum_server/templates/components/blog_post_default_thumbnail.html b/axum_server/templates/components/blog_post_default_thumbnail.html new file mode 100644 index 0000000..be3ba15 --- /dev/null +++ b/axum_server/templates/components/blog_post_default_thumbnail.html @@ -0,0 +1,3 @@ +
+ {{post.metadata.title|fmt("{:.1}")|lower}} +
diff --git a/axum_server/templates/components/blog_post_preview.html b/axum_server/templates/components/blog_post_preview.html index 396b71c..c57d6e1 100644 --- a/axum_server/templates/components/blog_post_preview.html +++ b/axum_server/templates/components/blog_post_preview.html @@ -1,15 +1,17 @@
-