pitbuster/zola-ludwig
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Page templata and initial figure/gallery support.

Browse source
This commit is contained in:
Felipe 2023-04-10 19:44:23 -04:00
parent b7a91ddb48
commit 0545542026
Signed by: pitbuster
SSH key fingerprint: SHA256:HDYu2Pm4/TmSX8GBwV49UvFWr1Ljg8XlHxKeCpjJpOk
7 changed files with 232 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -1,2 +1,10 @@
# zola-ludwig
The theme needs some translation keys to be put on the `config.toml` file to work:
```toml
default-language = "es"
[translations]
date-published = "Publicado en"
[languages.en.translations]
date-published = "Published on"
```

4
sass/forkawesome/_icons.scss
View file

@ -48,7 +48,7 @@
// .#{$fa-css-prefix}-barcode:before { content: fa-content($fa-var-barcode); }
// .#{$fa-css-prefix}-tag:before { content: fa-content($fa-var-tag); }
// .#{$fa-css-prefix}-tags:before { content: fa-content($fa-var-tags); }
// .#{$fa-css-prefix}-book:before { content: fa-content($fa-var-book); }
.#{$fa-css-prefix}-book:before { content: fa-content($fa-var-book); }
// .#{$fa-css-prefix}-bookmark:before { content: fa-content($fa-var-bookmark); }
// .#{$fa-css-prefix}-print:before { content: fa-content($fa-var-print); }
// .#{$fa-css-prefix}-camera:before { content: fa-content($fa-var-camera); }
@ -121,7 +121,7 @@
// .#{$fa-css-prefix}-warning:before,
// .#{$fa-css-prefix}-exclamation-triangle:before { content: fa-content($fa-var-exclamation-triangle); }
// .#{$fa-css-prefix}-plane:before { content: fa-content($fa-var-plane); }
// .#{$fa-css-prefix}-calendar:before { content: fa-content($fa-var-calendar); }
.#{$fa-css-prefix}-calendar:before { content: fa-content($fa-var-calendar); }
// .#{$fa-css-prefix}-random:before { content: fa-content($fa-var-random); }
// .#{$fa-css-prefix}-comment:before { content: fa-content($fa-var-comment); }
// .#{$fa-css-prefix}-magnet:before { content: fa-content($fa-var-magnet); }

139
sass/main.scss
View file

@ -1,15 +1,26 @@
html {
height: 100vh;
}
body {
margin: 0;
background-color: rgb(80, 80, 80);
color: rgb(255, 255, 255);
text-rendering:optimizeLegibility;
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 16pt;
color: rgb(255, 255, 255);
}
a {
color: rgb(255, 255, 255);
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(242,132,14);
}
body {
margin: 0;
background-color: rgb(80, 80, 80);
}
main.home {
@ -17,6 +28,31 @@ main.home {
display: flex;
}
main.article {
width: 66vw;
max-width: 850px;
margin-left: auto;
margin-right: auto;
font-size: 14pt;
}
header {
width: 66vw;
margin-left: auto;
margin-right: auto;
}
header h1 {
font-size: 2.5em;
padding-top: 1em;
margin: 0;
}
footer {
display: flex;
justify-content: center;
}
.column {
display: flex;
flex-direction: column;
@ -37,26 +73,105 @@ main.home {
.instant {
background-color: rgb(255, 255, 255);
color: rgb(10, 10, 10);
padding: 2vw;
text-align: center;
}
.instant img {
div.instant > img {
max-width: 25vw;
}
.instant h1 {
text-align: center;
color: rgb(10, 10, 10);
font-weight: 700;
margin: 1vw 0 0 0;
}
.links a {
color: rgb(255, 255, 255);
font-size: xx-large;
}
.links a:hover {
color: rgb(242,132,14);
.meta {
padding-left: 0.75em;
color: rgb(200, 200, 200);
font-size: 0.9em;
}
figure.instant {
margin-left: auto;
margin-right: auto;
padding: 2vw 0;
}
figure > picture > img {
display: block;
margin: 0 2vw;
max-width: calc(100% - 4vw);
width: calc(100% - 4vw);
height: auto;
}
figure > figcaption > p {
margin: 1vw 2vw 0;
}
.gallery {
@extend .instant;
padding: 1.5vw;
--row-height: 23vh;
// margin: -0.25rem;
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
align-items: flex-end;
}
@media only screen and (max-height: 1044px) {
.gallery {
--row-height: 240px;
}
}
.gallery > .box {
--ratio: calc(var(--w) / var(--h));
flex-grow: calc(var(--ratio) * 100);
flex-shrink: calc(var(--ratio) * 100);
flex-basis: calc(var(--ratio) * var(--row-height));
/*min-width: var(--min-width);*/
min-height: calc(0.7 * var(--row-height));
margin: 0.5vw;
}
// .container-gallery .gallery .box {
// margin: 0.5rem;
// }
.gallery > .box > figure {
display: block;
padding: 0;
margin: 0px;
width: 100%;
height: auto;
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
.gallery img {
margin: 0;
min-width: 100%;
min-height: 100%;
}
// .gallery + .box {
// margin-top: calc(0.5rem);
// }
//
// .gallery + .gallery {
// margin-top: calc(0.25rem);
// }
//
// .box + .gallery {
// margin-top: calc(0.25rem - 10px);
// }

40
templates/page.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ config.title }}</title>
<link as="font" crossorigin="" href="/fonts/forkawesome.woff2" rel="preload" type="font/woff2">
<link as="font" crossorigin="" href="/fonts/Montserrat-Regular.woff2" rel="preload" type="font/woff2">
<link as="font" crossorigin="" href="/fonts/Montserrat-Bold.woff2" rel="preload" type="font/woff2">
<link rel="stylesheet" href="{{ get_url(path='fonts.css') }}">
<link rel="stylesheet" href="{{ get_url(path='forkawesome.css') }}">
<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
</head>
<body>
<header>
<h1>{{ page.title | safe }}</h1>
<span class="meta">
<span class="fa fa-calendar"></span>
{{ trans(key="published",lang=lang) }} {{ page.date }}
{% if page.updated -%}
({{ trans(key="updated",lang=lang) }} {{ page.updated }})
{%- endif -%}
</span>
</header>
<main class="article">
{{ page.content | safe }}
</main>
{%- if config.extra.links -%}
<footer>
<div class="links">
{%- for link in config.extra.links -%}
<a rel="me" href="{{ link.url }}" title="{{ link.title }}">
<span class="fa {{ 'fa-' ~ link.icon }}"></span>
</a>
{%- endfor -%}
</div>
</footer>
{%- endif -%}
</body>
</html>

1
templates/shortcodes/end.html Normal file
View file

@ -0,0 +1 @@
</div>

52
templates/shortcodes/figure.html Normal file
View file

@ -0,0 +1,52 @@
{% set orig_thumb = src %}
{% if thumb %}
{% set orig_thumb = src |
replace(from=".jpg",to=thumb~".jpg") |
replace(from=".png",to=thumb~".png") %}
{% endif %}
{% set webp_thumb = thumb |
replace(from=".jpg",to=".webp") |
replace(from=".png",to=".webp") %}
{% set avif_thumb = webp_thumb |
replace(from=".webp",to=".avif") %}
{% set src_url = get_url(path=src) %}
{% set thumb_url = get_url(path=orig_thumb) %}
{% set webp_url = get_url(path=webp_thumb) %}
{% set avif_url = get_url(path=avif_thumb) %}
{% set img_data = get_image_metadata(path=src) %}
{% set thumb_data = get_image_metadata(path=orig_thumb) %}
{% set avif_data = get_image_metadata(path=avif_thumb,allow_missing=true) %}
{% set webp_data = get_image_metadata(path=webp_thumb,allow_missing=true) %}
<div class="box"
style="--w:{{thumb_data.width}};--h:{{thumb_data.height}};"
>
<figure class="instant"
style="max-width:calc({{thumb_data.width}}px + 4vw)"
itemprop="associatedMedia" itemscope
itemtype="http://schema.org/ImageObject"
>
<picture
class="thumb {%if avif_data %} avif{%endif%}{%if webp_data %} webp{%endif%}"
data-size="{{img_data.width}}x{{img_data.height}}"
>
{% if avif_data %}
<source srcset="{{avif_url}}" type="image/avif">
{% endif %}
{% if webp_data %}
<source srcset="{{webp_url}}" type="image/webp">
{% endif %}
<source srcset="{{thumb_url}}" type="image/{{thumb_data.format}}">
<img itemprop="thumbnail" src="{{thumb_url}}"
{% if caption %} alt="{{caption | markdown | striptags}}{% endif %}"/>
</picture>
<a href="/{{src_url}}" itemprop="contentUrl"></a>
{% if caption %}
<figcaption>
{{ caption | markdown | safe }}
</figcaption>
{% endif %}
</figure>
</div>

1
templates/shortcodes/gallery.html Normal file
View file

@ -0,0 +1 @@
<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">