generated from inherentlee/11ty
start adding images
This commit is contained in:
inherentlee committed
1 parent
d0cafb3956
commit
7688acd910
4 files changed
+99
-68
No files matched your search
+28
-21
@@ -1,33 +1,40 @@
|
||||
<ul id="zine-container">
|
||||
{% for zine in zines | sortAlphabeticallyByArtist %}
|
||||
<li>
|
||||
{% if allyears %}
|
||||
<p>In {{ zine | getYear }},</p>
|
||||
{% endif %}
|
||||
<h2>
|
||||
{% if zine.data.site %}
|
||||
<a href="{{ zine.data.site }}" target="_blank">{{ zine.data.artist }}</a>
|
||||
{% else %}
|
||||
{{ zine.data.artist }}
|
||||
<div class="zine-text">
|
||||
{% if allyears %}
|
||||
<p>In {{ zine | getYear }},</p>
|
||||
{% endif %}
|
||||
</h2>
|
||||
<h2>
|
||||
{% if zine.data.site %}
|
||||
<a href="{{ zine.data.site }}" target="_blank">{{ zine.data.artist }}</a>
|
||||
{% else %}
|
||||
{{ zine.data.artist }}
|
||||
{% endif %}
|
||||
</h2>
|
||||
|
||||
{% if zine.data.titles %}
|
||||
{% if zine.data.titles.length == 1 %}
|
||||
<p>made a {{ zine.data.format }} zine called...</p>
|
||||
<h3>{{ zine.data.titles }}</h3>
|
||||
{% if zine.data.titles %}
|
||||
{% if zine.data.titles.length == 1 %}
|
||||
<p>made a {{ zine.data.format }} zine called...</p>
|
||||
<h3>{{ zine.data.titles }}</h3>
|
||||
{% else %}
|
||||
<p>made {{ zine.data.format }} zines called...</p>
|
||||
{% for title in zine.data.titles %}
|
||||
<h3>{{ title }}</h3>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<p>and the original blurb was...</p>
|
||||
{% else %}
|
||||
<p>made {{ zine.data.format }} zines called...</p>
|
||||
{% for title in zine.data.titles %}
|
||||
<h3>{{ title }}</h3>
|
||||
{% endfor %}
|
||||
<p>is planning a {{ zine.data.format }} zine...</p>
|
||||
{% endif %}
|
||||
<p>and the original blurb was...</p>
|
||||
{% else %}
|
||||
<p>is planning a {{ zine.data.format }} zine...</p>
|
||||
|
||||
<blockquote>{{ zine.content | safe }}</blockquote>
|
||||
</div>
|
||||
|
||||
{% if zine.data.img.src and zine.data.img.alt %}
|
||||
<img src="/img/{{ zine.data.img.src }}" alt="{{ zine.data.img.alt }}">
|
||||
{% endif %}
|
||||
|
||||
<blockquote>{{ zine.content | safe }}</blockquote>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
+67
-46
@@ -1,51 +1,72 @@
|
||||
#zine-container {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
list-style: none;
|
||||
border-bottom: solid;
|
||||
border-left: solid;
|
||||
border-radius: .25rem;
|
||||
padding: 0 .4rem .4rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
&:has(img) {
|
||||
display: grid;
|
||||
grid-template-areas: "text img";
|
||||
gap: .75rem;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
|
||||
img {
|
||||
border-radius: .2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
p {
|
||||
border: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
h2 a {
|
||||
background-color: var(--color-header);
|
||||
line-height: 135%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
background-color: var(--color-warn);
|
||||
color: var(--color-text);
|
||||
border-radius: .2rem;
|
||||
padding: 0 .2rem;
|
||||
text-align: right;
|
||||
line-height: 150%;
|
||||
margin: .25rem 0 .75rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
color: var(--color-header);
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin-block: .75rem;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#zine-container > li {
|
||||
list-style: none;
|
||||
border-bottom: solid;
|
||||
border-left: solid;
|
||||
border-radius: 4px;
|
||||
padding: 0 .4rem .4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
#zine-container > li:has(img) {
|
||||
display: block;
|
||||
|
||||
#zine-container h2,
|
||||
#zine-container p {
|
||||
border: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#zine-container h2 a {
|
||||
background-color: var(--color-header);
|
||||
line-height: 135%;
|
||||
}
|
||||
|
||||
#zine-container h3 {
|
||||
background-color: var(--color-warn);
|
||||
color: var(--color-text);
|
||||
border-radius: 3px;
|
||||
padding: 0 .2rem;
|
||||
text-align: right;
|
||||
line-height: 150%;
|
||||
margin: .25rem 0 .75rem 0;
|
||||
}
|
||||
|
||||
#zine-container blockquote {
|
||||
margin: 0;
|
||||
color: var(--color-header);
|
||||
}
|
||||
|
||||
#zine-container blockquote p {
|
||||
display: block;
|
||||
margin-block: .75rem;
|
||||
}
|
||||
|
||||
#zine-container blockquote p:first-child {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
#zine-container blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
img {
|
||||
margin-block-start: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
@@ -3,6 +3,9 @@ artist: lee
|
||||
site: "https://leecat.art"
|
||||
format: physical/digital
|
||||
titles:
|
||||
img:
|
||||
src: 2026-2027/lee.jpg
|
||||
alt: 3 copies of the same zine with 3 different color covers. The cover says 'Leatherworking Tools' 'by Lee' and has many small icons of different tools and processes on it.
|
||||
---
|
||||
|
||||
digitally designed zine in color about leatherworking tools and basics. will have a digital printable version as well as a web version with text alternatives and with all tools linked to actual listings in a store.
|
||||
digitally designed zine in color about leatherworking tools and basics. will have a home printable version, a digital reading version, and a web version with text alternatives and with all tools linked to actual listings in a store.
|
||||
Reference in new issue
Block a user
