mirror of
https://github.com/by-jp/www.byjp.me.git
synced 2025-08-09 01:35:56 +01:00
Switched to new Postcard type
The new Postcard format is CSS only, which is much easier on processors, and much easier to produce!
This commit is contained in:
JP Hastings-Spital
parent
23af4c3cff
commit
0bf44ee8f3
11 changed files with 186 additions and 1298 deletions
|
|
@ -238,7 +238,14 @@ article, section {
|
|||
}
|
||||
}
|
||||
|
||||
img, postcard-display {
|
||||
.postcard {
|
||||
max-width: 60%;
|
||||
max-height: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@ date = ["date", "publishDate", "lastmod", ":git"]
|
|||
description = "JP Hastings-Edrei: Software Engineer"
|
||||
keywords = "homepage, blog, science, software, miriscient, programming, indieweb, memex"
|
||||
images = [""]
|
||||
customJS = ["/js/postcards-html.js"]
|
||||
|
||||
justifyContent = true
|
||||
contentTypeName = "posts"
|
||||
|
|
|
|||
|
|
@ -16,6 +16,6 @@ Art is, in my humble opinion, at its greatest when limitlessly exploring a limit
|
|||
|
||||
Even now I'm slowly building a microsite gallery for the postcards my friend Claire sends me whenever she travels. Every one of them contains just one message: "Shut up, JP" in the local language. I love them.
|
||||
|
||||
{{< postcard src="shutup-singapore.postcard" show="back front" >}}
|
||||
{{< postcard shutup-singapore >}}
|
||||
|
||||
I honestly think I'll always enjoy playing with postcards, in one form or another. If you'd ever like to tell me about your appreciation of them, a postcard you've seen or enjoyed receiving or sending, do reach out by email (I have a [standing invitation](/standing-invitation))! …and if you'd like to send me a postcard you only need write me an email and ask for my address.
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{"locale":"en-GB","location":{"name":"Gardens by the Bay, Singapore","latitude":1.281629186099575,"longitude":103.8646889076446},"flip":"book","sentOn":"2017-06-05","sender":{"name":"Claire","uri":"https://www.instagram.com/claire.durrant88/"},"recipient":{"name":"JP","uri":"https://www.byjp.me"},"front":{"description":"A photograph of Singapore's concrete 'supertrees' and walkway in the Gardens at the Bay.","transcription":{}},"back":{"transcription":{"text":"\u003cspan lang=\"zh-SG\"\u003e住口,JP\u003c/span\u003e"},"secrets":[{"prehidden":true,"points":[[0.5858398889,0.5096345515],[0.9495603887,0.5096345515],[0.9495603887,0.7448504983],[0.5858398889,0.7448504983]]}]},"context":{"author":{"name":""},"description":""},"physical":{"frontSize":{"cmW":"2161/128","cmH":"1505/128","pxW":2161,"pxH":1505}}}
|
||||
Binary file not shown.
BIN
content/posts/thoughts-on-postcards/shutup-singapore.webp
Normal file
BIN
content/posts/thoughts-on-postcards/shutup-singapore.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 504 KiB |
|
|
@ -38,8 +38,7 @@
|
|||
</title>
|
||||
{{- end }}
|
||||
|
||||
<!-- CSS -->
|
||||
{{/* <link href="/css/flags.css" rel="stylesheet" type="text/css"> */}}
|
||||
<link href="/css/postcards.css" rel="stylesheet" type="text/css">
|
||||
|
||||
{{ $options := (dict "targetPath" "main.css" "outputStyle" "compressed" "enableSourceMap" true) }}
|
||||
{{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options | resources.Fingerprint }}
|
||||
|
|
|
|||
|
|
@ -1 +1,13 @@
|
|||
<postcard-display class="{{ default "center" (.Get "class") }}" src="{{ .Get "src" }}"{{with .Get "show"}} show="{{ . }}"{{end}}></postcard-display>
|
||||
{{- $name := .Get 0 -}}
|
||||
{{- $meta := printf "%s-meta.json" $name -}}
|
||||
{{- $relPath := .Page.RelPermalink -}}
|
||||
{{- with .Page.Resources.Get $meta -}}{{- with .Content | transform.Unmarshal -}}
|
||||
<input type="checkbox" id="postcard-{{ $name }}">
|
||||
<label for="postcard-{{ $name }}">
|
||||
<div class="postcard flip-{{ .flip }} {{ if gt .physical.frontDimensions.pxHeight .physical.frontDimensions.pxWidth }}portrait{{ else }}landscape{{ end }}" style="--postcard: url('{{ $relPath }}{{ $name }}.webp'); --aspect-ratio: {{ .physical.frontSize.pxW }} / {{ .physical.frontSize.pxH }}">
|
||||
<img src="{{ $name }}.webp" loading="lazy" alt="{{ .front.description }}" width="500px">
|
||||
<div class="shadow"></div>
|
||||
</div>
|
||||
</label>
|
||||
{{- else -}}{{ errorf "Couldn't parse Postcard metadata for %s" $name }}{{- end -}}
|
||||
{{- else -}}{{ errorf "Missing Postcard metadata for %s" $name }}{{- end -}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
#!/bin/bash
|
||||
mkdir -p static/js/
|
||||
curl -L -o static/js/postcards-html.js "https://unpkg.com/@dotpostcard/postcards-html?module"
|
||||
curl -L -o static/js/mermaid.js "https://unpkg.com/mermaid@10/dist/mermaid.min.js"
|
||||
|
|
|
|||
162
static/css/postcards.css
Normal file
162
static/css/postcards.css
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
input[id^=postcard-] {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow:hidden;
|
||||
visibility: hidden;
|
||||
|
||||
&:checked ~ label .postcard {
|
||||
--flip: 180deg;
|
||||
}
|
||||
}
|
||||
|
||||
.postcard {
|
||||
aspect-ratio: var(--aspect-ratio);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
--flip: 0deg;
|
||||
--p: perspective(1000px);
|
||||
--v1: calc(min(1, max(0,
|
||||
cos(var(--flip)),
|
||||
cos(var(--flip) + 180deg),
|
||||
tan(45deg + var(--flip)/2),
|
||||
tan(135deg + var(--flip)/2)
|
||||
)) * 192 + 64);
|
||||
--v2: calc(min(1, max(0,
|
||||
cos(var(--flip)),
|
||||
cos(var(--flip) + 180deg),
|
||||
tan(45deg - var(--flip)/2),
|
||||
tan(135deg - var(--flip)/2)
|
||||
)) * 192 + 64);
|
||||
--offset: translate(0px, 0px);
|
||||
|
||||
.shadow {
|
||||
width: 90%;
|
||||
margin: 5%;
|
||||
aspect-ratio: var(--aspect-ratio);
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
transform-style: preserve-3d;
|
||||
background: rgb(0, 0, 0, 0.1) !important;
|
||||
box-shadow: 0px 0px 45px 45px rgb(0, 0, 0, 0.1);
|
||||
--offset: translate(40px, 40px);
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
aspect-ratio: var(--aspect-ratio);
|
||||
position: absolute;
|
||||
box-sizing: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
background-blend-mode: multiply;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.portrait {
|
||||
flex-direction: column;
|
||||
|
||||
.shadow {
|
||||
width:auto;
|
||||
height:90%;
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
width:auto;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: no-repeat top/100%;
|
||||
mask: var(--postcard) top/100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: no-repeat bottom/100%;
|
||||
mask: var(--postcard) bottom/100%;
|
||||
}
|
||||
|
||||
&::before, &::after, .shadow {
|
||||
transition: transform 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* TODO: Does this break accessibility? */
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.left-hand,&.right-hand {
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
&.flip-book::after,&.flip-book .shadow {
|
||||
transform: var(--p) var(--offset) rotateY(var(--flip));
|
||||
background-image: linear-gradient(to right,
|
||||
rgb(var(--v1), var(--v1), var(--v1)),
|
||||
rgb(var(--v2), var(--v2), var(--v2))
|
||||
), var(--postcard);
|
||||
}
|
||||
&.flip-book::before {
|
||||
transform: var(--p) rotateY(calc(var(--flip) + 180deg));
|
||||
background-image: linear-gradient(to right,
|
||||
rgb(var(--v1), var(--v1), var(--v1)),
|
||||
rgb(var(--v2), var(--v2), var(--v2))
|
||||
), var(--postcard);
|
||||
}
|
||||
|
||||
&.flip-calendar::after,&.flip-calendar .shadow {
|
||||
transform: var(--p) var(--offset) rotateX(var(--flip));
|
||||
background-image: linear-gradient(to top,
|
||||
rgb(var(--v1), var(--v1), var(--v1)),
|
||||
rgb(var(--v2), var(--v2), var(--v2))
|
||||
), var(--postcard);
|
||||
}
|
||||
&.flip-calendar::before {
|
||||
transform: var(--p) rotateX(calc(var(--flip) + 180deg));
|
||||
background-image: linear-gradient(to top,
|
||||
rgb(var(--v1), var(--v1), var(--v1)),
|
||||
rgb(var(--v2), var(--v2), var(--v2))
|
||||
), var(--postcard);
|
||||
}
|
||||
|
||||
&.flip-right-hand::after,&.flip-right-hand .shadow {
|
||||
transform: var(--p) var(--offset) rotate3d(1,1,0,var(--flip));
|
||||
background-image: linear-gradient(to top right,
|
||||
rgb(var(--v1), var(--v1), var(--v1)),
|
||||
rgb(var(--v2), var(--v2), var(--v2))
|
||||
), var(--postcard);
|
||||
}
|
||||
&.flip-right-hand::before {
|
||||
transform: var(--p) rotate3d(1,1,0,calc(var(--flip) + 180deg)) rotate(-90deg);
|
||||
background-image: linear-gradient(to bottom right,
|
||||
rgb(var(--v1), var(--v1), var(--v1)),
|
||||
rgb(var(--v2), var(--v2), var(--v2))
|
||||
), var(--postcard);
|
||||
}
|
||||
|
||||
&.flip-left-hand::after,&.flip-left-hand .shadow {
|
||||
transform: var(--p) var(--offset) rotate3d(-1,1,0,var(--flip));
|
||||
background-image: linear-gradient(to bottom right,
|
||||
rgb(var(--v1), var(--v1), var(--v1)),
|
||||
rgb(var(--v2), var(--v2), var(--v2))
|
||||
), var(--postcard);
|
||||
}
|
||||
&.flip-left-hand::before {
|
||||
transform: var(--p) rotate3d(-1,1,0,calc(var(--flip) + 180deg)) rotate(90deg);
|
||||
background-image: linear-gradient(to top right,
|
||||
rgb(var(--v1), var(--v1), var(--v1)),
|
||||
rgb(var(--v2), var(--v2), var(--v2))
|
||||
), var(--postcard);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue