blogpage responsive styles
This commit is contained in:
parent
ed8f4037a6
commit
a9ef5c8f93
@ -60,7 +60,7 @@ Another customization is that while the shield is designed for a wired connectio
|
||||
> Tip: If you plan on using your keyboard with a desktop computer, you might want to consider a wired connection. BIOS boot up check will not pass without a physical connection to a keyboard. I have to have 2 keyboards on my desk now :(
|
||||
|
||||
| Item | Quantity | Price | Link |
|
||||
| ----------------------------------------------------- | ----------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
|
||||
| :---------------------------------------------------- | :---------- | ------: | ------------------------------------------------------------------------------------------------------------------ |
|
||||
| DSA Blank Keycaps | 4 | 14 EUR | [🛒](https://www.aliexpress.com/item/1005002587285218.html?spm=a2g0o.order_list.0.0.3e541802H3XiA6) |
|
||||
| Brass Hot Melt Inset Nuts M4 X D6.0 X L5.0 | 6 of 50pcs | 3 EUR | [🛒](https://www.aliexpress.com/item/4000232925592.html?spm=a2g0o.order_list.order_list_main.43.6e0d1802Xk8ijl) |
|
||||
| M4 * 8 Screws | 6 of 100pcs | 3 ELR | [🛒](https://www.aliexpress.com/item/32896139810.html?spm=a2g0o.order_list.order_list_main.38.6e0d1802Xk8ijl) |
|
||||
|
||||
@ -49,5 +49,8 @@ async fn main() {
|
||||
}
|
||||
|
||||
// TODO Display blog posts
|
||||
// TODO Markdown notes
|
||||
// TODO code snippets highlighting
|
||||
// TODO responsive design
|
||||
// TODO Colors
|
||||
// TODO go live pipeline
|
||||
|
||||
@ -234,8 +234,11 @@ fn get_export_formats(orig_img_path: &str) -> Vec<ExportFormat> {
|
||||
.and_then(|ext| ext.to_str());
|
||||
|
||||
match path {
|
||||
Some("jpg" | "jpeg") => vec![ExportFormat::Avif, ExportFormat::Jpeg],
|
||||
Some("png") => vec![ExportFormat::Avif, ExportFormat::Png],
|
||||
// THINK: Do we want to enable avif? It's very expensive to encode
|
||||
// Some("jpg" | "jpeg") => vec![ExportFormat::Avif, ExportFormat::Jpeg],
|
||||
// Some("png") => vec![ExportFormat::Avif, ExportFormat::Png],
|
||||
Some("jpg" | "jpeg") => vec![ExportFormat::Jpeg],
|
||||
Some("png") => vec![ExportFormat::Png],
|
||||
Some(_) | None => vec![],
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@ use crate::picture_generator::{
|
||||
picture_markup_generator::generate_picture_markup, resolutions::get_max_resolution,
|
||||
};
|
||||
|
||||
pub const MAX_BLOG_IMAGE_RESOLUTION: (u32, u32) = (1000, 800);
|
||||
pub const MAX_BLOG_IMAGE_RESOLUTION: (u32, u32) = (1280, 860);
|
||||
|
||||
pub fn deserialize_date<'de, D>(deserializer: D) -> Result<DateTime<Utc>, D::Error>
|
||||
where
|
||||
|
||||
@ -12,32 +12,58 @@ a {
|
||||
|
||||
.article-body {
|
||||
h1 {
|
||||
@apply px-4 text-2xl text-blue-900 my-2;
|
||||
@apply px-4 text-2xl text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
|
||||
}
|
||||
h2 {
|
||||
@apply px-4 text-xl text-blue-900 my-2;
|
||||
@apply px-4 text-xl 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;
|
||||
}
|
||||
p {
|
||||
@apply px-4 my-2;
|
||||
@apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-2xl;
|
||||
}
|
||||
pre {
|
||||
@apply p-4 my-1 overflow-auto text-sm;
|
||||
@apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
|
||||
}
|
||||
figure {
|
||||
@apply m-4;
|
||||
@apply p-4;
|
||||
|
||||
img {
|
||||
@apply rounded shadow-md;
|
||||
@apply rounded shadow-md mx-auto max-w-image;
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
@apply mt-2 text-center text-sm italic text-blue-800;
|
||||
@apply mt-2 text-center text-sm italic text-blue-800 md:text-base lg:text-lg;
|
||||
}
|
||||
|
||||
table {
|
||||
@apply m-2 overflow-auto text-sm;
|
||||
@apply text-sm mx-auto max-w-image table-auto border-collapse border-spacing-12 border border-gray-200 rounded md:text-base md:my-4 lg:text-xl lg:my-8;
|
||||
}
|
||||
|
||||
thead {
|
||||
@apply bg-blue-100;
|
||||
}
|
||||
|
||||
tbody {
|
||||
@apply bg-slate-50;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
@apply py-0.5 px-2 border-b md:py-2 md:px-5;
|
||||
}
|
||||
|
||||
tr {
|
||||
@apply even:bg-slate-100;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-embed {
|
||||
@apply m-4;
|
||||
@apply m-4 mx-auto max-w-image aspect-video;
|
||||
}
|
||||
|
||||
@ -599,6 +599,11 @@ video {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.my-12 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
@ -624,11 +629,6 @@ video {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@ -645,6 +645,10 @@ video {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.mb-6 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
@ -697,14 +701,6 @@ video {
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.min-h-full {
|
||||
min-height: 100%;
|
||||
}
|
||||
@ -725,6 +721,10 @@ video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-read {
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -733,14 +733,6 @@ video {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.grid-cols-\[1fr_2fr\] {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
.grid-cols-\[min-content_1fr\] {
|
||||
grid-template-columns: min-content 1fr;
|
||||
}
|
||||
|
||||
.grid-cols-\[max-content_1fr\] {
|
||||
grid-template-columns: max-content 1fr;
|
||||
}
|
||||
@ -1029,8 +1021,17 @@ a {
|
||||
|
||||
.article-body {
|
||||
h1 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
h1 {
|
||||
max-width: 64rem;
|
||||
}
|
||||
h1 {
|
||||
padding-left: 1rem;
|
||||
@ -1044,9 +1045,30 @@ a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
h2 {
|
||||
max-width: 64rem;
|
||||
}
|
||||
h2 {
|
||||
padding-left: 1rem;
|
||||
@ -1060,18 +1082,89 @@ a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h2 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
h2 {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
p {
|
||||
max-width: 64rem;
|
||||
}
|
||||
p {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
p {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(2 6 23 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
p {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
p {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
pre {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
pre {
|
||||
max-width: 64rem;
|
||||
}
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
@ -1083,9 +1176,16 @@ a {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
figure {
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
figure {
|
||||
img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
img {
|
||||
max-width: 70rem;
|
||||
}
|
||||
img {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
@ -1112,23 +1212,199 @@ a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 64 175 / var(--tw-text-opacity));
|
||||
}
|
||||
table {
|
||||
margin: 0.5rem;
|
||||
@media (min-width: 768px) {
|
||||
figcaption {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
figcaption {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
table {
|
||||
overflow: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
table {
|
||||
max-width: 70rem;
|
||||
}
|
||||
table {
|
||||
table-layout: auto;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
--tw-border-spacing-x: 3rem;
|
||||
--tw-border-spacing-y: 3rem;
|
||||
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
|
||||
}
|
||||
table {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
table {
|
||||
border-width: 1px;
|
||||
}
|
||||
table {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity));
|
||||
}
|
||||
table {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
table {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
table {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
table {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
table {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
tbody {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 250 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
td,
|
||||
th {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding-top: 0.125rem;
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
td,
|
||||
th {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
td,
|
||||
th {
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
|
||||
}
|
||||
blockquote {
|
||||
margin-left: 1.5rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
blockquote {
|
||||
max-width: 60rem;
|
||||
}
|
||||
blockquote {
|
||||
border-left-width: 4px;
|
||||
}
|
||||
blockquote {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(236 72 153 / var(--tw-border-opacity));
|
||||
}
|
||||
blockquote {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 242 248 / var(--tw-bg-opacity));
|
||||
}
|
||||
blockquote {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
blockquote {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
blockquote {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p {
|
||||
max-width: 60rem;
|
||||
}
|
||||
p {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(71 85 105 / var(--tw-text-opacity));
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
p {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-embed {
|
||||
margin: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
max-width: 70rem;
|
||||
}
|
||||
|
||||
.hover\:bg-pink-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.md\:text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:mt-20 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.lg\:text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,18 @@
|
||||
module.exports = {
|
||||
content: ["./templates/**/*.html"],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
spacing: {
|
||||
note: "60rem",
|
||||
read: "64rem",
|
||||
image: "70rem",
|
||||
},
|
||||
width: {
|
||||
note: "60rem",
|
||||
read: "64rem",
|
||||
image: "70rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@ -3,22 +3,24 @@
|
||||
{% block title %}{{title}}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<article>
|
||||
<header class="px-4">
|
||||
<h1 class="text-3xl text-blue-900 mb-3 font-semibold">{{title}}</h1>
|
||||
<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-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">
|
||||
<section class="created-at m-1 text-right text-sm text-gray-600 md:text-lg">
|
||||
<span>Published on</span>
|
||||
<time datetime="{date}"> {{date|pretty_date}} </time>
|
||||
</section>
|
||||
</aside>
|
||||
</header>
|
||||
|
||||
<section class="article-body">
|
||||
{{body|escape("none")}}
|
||||
</section>
|
||||
<section class="article-body">
|
||||
{{body|escape("none")}}
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- TODO: Next recommendations for reading -->
|
||||
|
||||
{# footer #}
|
||||
{% endblock %}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
{% if tags.len() > 0 %}
|
||||
<ul class="inline">
|
||||
{% for tag in tags %}
|
||||
<li class="inline italic text-blue-700">
|
||||
<li class="inline italic text-blue-700 md:text-lg">
|
||||
<a href="/blog/tags/{{tag}}">#{{tag}}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user