mirror of
https://github.com/zyllian/zyllian.github.io.git
synced 2025-05-10 02:26:45 -07:00
Implement image display
This commit is contained in:
parent
a0e50d5edc
commit
731db752b1
19 changed files with 730 additions and 25 deletions
|
@ -2,3 +2,6 @@ base_url: "https://zyl.gay"
|
|||
title: Zyllian
|
||||
description: "Zoey's website."
|
||||
sass_styles: [index.scss]
|
||||
images_per_page: 10
|
||||
cdn_url: "https://i.zyl.gay"
|
||||
s3_prefix: z/
|
||||
|
|
6
site/images/amogus.yml
Normal file
6
site/images/amogus.yml
Normal file
|
@ -0,0 +1,6 @@
|
|||
title: among us 😱
|
||||
timestamp: 2022-12-14T00:00:00.00Z
|
||||
alt: Screenshot of Pokémon White on an evolution screen. Text reads "Congratulations! Your amogus evolved into Amoonguss!"
|
||||
desc: aaahhhh
|
||||
file: amogus.png
|
||||
tags: [pokémon, sussy]
|
5
site/images/cat.yml
Normal file
5
site/images/cat.yml
Normal file
|
@ -0,0 +1,5 @@
|
|||
title: cat
|
||||
timestamp: 2022-12-14T00:00:00.00Z
|
||||
alt: Picture of my cat sleeping curled up on top of some pillows.
|
||||
file: cat.jpeg
|
||||
tags: [cat]
|
5
site/images/cat2.yml
Normal file
5
site/images/cat2.yml
Normal file
|
@ -0,0 +1,5 @@
|
|||
title: cat 2
|
||||
timestamp: 2022-12-14T00:00:00.00Z
|
||||
alt: Close up picture of my cat laying on a shelf while staring not quite at the camera.
|
||||
file: cat2.jpeg
|
||||
tags: [cat]
|
5
site/images/cat3.yml
Normal file
5
site/images/cat3.yml
Normal file
|
@ -0,0 +1,5 @@
|
|||
title: cat 3
|
||||
timestamp: 2022-12-14T00:00:00.00Z
|
||||
alt: Picture of my cat sleeping in a box barely large enough for them. Their head is reasting on one edge of the box.
|
||||
file: cat/boxtop.jpeg
|
||||
tags: [cat]
|
6
site/images/trans-comfy.yml
Normal file
6
site/images/trans-comfy.yml
Normal file
|
@ -0,0 +1,6 @@
|
|||
title: shorts to dresses
|
||||
timestamp: 2022-12-14T00:00:00.00Z
|
||||
alt: Screenshot from Pokémon Black 2 of an NPC saying "This dress is comfy and easy to wear..."
|
||||
desc: yooo they're turning the comfy shorts kid trans
|
||||
file: trans-comfy.png
|
||||
tags: [pokémon, trans]
|
|
@ -51,3 +51,44 @@ main.page {
|
|||
abbr {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.images-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
padding: 4px;
|
||||
height: auto;
|
||||
|
||||
.image-actual {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-full {
|
||||
.title, .tags-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.image-actual {
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
object-fit: contain;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
{{{head}}}
|
||||
<meta name="referrer" content="no-referrer">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
</head>
|
||||
|
@ -14,6 +13,7 @@
|
|||
<span class="pronouns">she/they</span>
|
||||
</span>
|
||||
<span class="spacer"></span>
|
||||
<a href="/images/">Images</a> |
|
||||
<a href="https://github.com/Zyllian/zyllian.github.io" rel="noopener noreferrer">Source</a>
|
||||
</header>
|
||||
<main class="page">
|
||||
|
|
8
site/templates/basic-link-list.hbs
Normal file
8
site/templates/basic-link-list.hbs
Normal file
|
@ -0,0 +1,8 @@
|
|||
<h1>{{title}}</h1>
|
||||
<div class="link-list">
|
||||
<ul>
|
||||
{{#each links}}
|
||||
<li><a href="{{this.link}}">{{this.title}}</a></li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
15
site/templates/image.hbs
Normal file
15
site/templates/image.hbs
Normal file
|
@ -0,0 +1,15 @@
|
|||
<div class="image-full">
|
||||
<h1 class="title">{{title}}</h1>
|
||||
<span class="timestamp">{{timestamp}}</span>
|
||||
<img class="image-actual" src="{{src}}" alt="{{alt}}">
|
||||
{{#if desc}}
|
||||
<p>{{desc}}</p>
|
||||
{{/if}}
|
||||
<p><a href="{{src}}">View full size image</a></p>
|
||||
<h3 class="tags-title">Tags</h3>
|
||||
<div class="image-tags">
|
||||
{{#each tags}}
|
||||
<a class="tag" href="/i/tag/{{this}}/">{{this}}</a>{{#unless @last}},{{/unless}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
22
site/templates/images.hbs
Normal file
22
site/templates/images.hbs
Normal file
|
@ -0,0 +1,22 @@
|
|||
{{#if tag}}
|
||||
<h1>Images tagged {{tag}}</h1>
|
||||
<p><a href="/images/">View all images</a></p>
|
||||
{{else}}
|
||||
<h1>Images</h1>
|
||||
<p><a href="/i/tags">View image tags</a></p>
|
||||
{{/if}}
|
||||
<h3>Page {{page}}/{{page_max}}</h3>
|
||||
{{#if previous}}
|
||||
<a href="./{{previous}}">Previous page</a>
|
||||
{{/if}}
|
||||
{{#if next}}
|
||||
<a href="./{{next}}">Next page</a>
|
||||
{{/if}}
|
||||
<div class="images-list">
|
||||
{{#each images}}
|
||||
<a class="image" href="/i/{{id}}">
|
||||
<img class="image-actual" src="{{src}}" alt="{{alt}}">
|
||||
<span class="title">{{title}}</span>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
1
site/templates/rss/image.hbs
Normal file
1
site/templates/rss/image.hbs
Normal file
|
@ -0,0 +1 @@
|
|||
<img src="{{src}}" alt="{{alt}}">
|
Loading…
Add table
Add a link
Reference in a new issue