experiment with hugo
This commit is contained in:
parent
1788b99cb7
commit
ccdc895288
30 changed files with 1893 additions and 0 deletions
3
hugo/.gitignore
vendored
Normal file
3
hugo/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
**/public
|
||||||
|
**/_gen
|
||||||
|
.hugo_build.lock
|
||||||
6
hugo/archetypes/default.md
Normal file
6
hugo/archetypes/default.md
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: "{{ replace .Name "-" " " | title }}"
|
||||||
|
date: {{ .Date }}
|
||||||
|
draft: true
|
||||||
|
---
|
||||||
|
|
||||||
10
hugo/assets/js/main.js
Normal file
10
hugo/assets/js/main.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
var root = document.documentElement;
|
||||||
|
let vh = window.innerHeight * 0.01;
|
||||||
|
root.style.setProperty('--vh', `${vh}px`);
|
||||||
|
|
||||||
|
// We listen to the resize event
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
// We execute the same script as before
|
||||||
|
let vh = window.innerHeight * 0.01;
|
||||||
|
root.style.setProperty('--vh', `${vh}px`);
|
||||||
|
});
|
||||||
30
hugo/assets/scss/base/links.scss
Normal file
30
hugo/assets/scss/base/links.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
a {
|
||||||
|
transition: all 0.1s ease-out;
|
||||||
|
@media (prefers-reduced-motion) {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
&:link {
|
||||||
|
color: var(--link-color);
|
||||||
|
text-decoration-thickness: .125rem;
|
||||||
|
text-underline-offset: 0.125em;
|
||||||
|
text-decoration-skip-ink: none;
|
||||||
|
}
|
||||||
|
&:visited {
|
||||||
|
color: var(--link-visited);
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
background: var(--primary-accent);
|
||||||
|
color: var(--primary-accent-text);
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
text-decoration-thickness: 0.25em;
|
||||||
|
text-underline-offset: 0.25em;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
50
hugo/assets/scss/base/list.scss
Normal file
50
hugo/assets/scss/base/list.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
.list {
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
|
||||||
|
gap: 3em;
|
||||||
|
}
|
||||||
|
.list-item {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease-in-out;
|
||||||
|
&__link {
|
||||||
|
display: block;
|
||||||
|
&:focus {
|
||||||
|
background: unset;
|
||||||
|
padding: unset;
|
||||||
|
@include focus-outline;
|
||||||
|
&:link {
|
||||||
|
color: var(--link-color);
|
||||||
|
}
|
||||||
|
&:visited {
|
||||||
|
color: var(--link-visited);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__image {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 1.5em 0 0.5em;
|
||||||
|
}
|
||||||
|
&__summary {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
&__date {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
42
hugo/assets/scss/base/mixins.scss
Normal file
42
hugo/assets/scss/base/mixins.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
@mixin box-shadow {
|
||||||
|
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
||||||
|
0 2px 2px rgba(0,0,0,0.11),
|
||||||
|
0 4px 4px rgba(0,0,0,0.11),
|
||||||
|
0 6px 8px rgba(0,0,0,0.11),
|
||||||
|
0 8px 16px rgba(0,0,0,0.11);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-shadow-heavy {
|
||||||
|
box-shadow: 0 2px 1px rgba(0,0,0,0.09),
|
||||||
|
0 4px 2px rgba(0,0,0,0.09),
|
||||||
|
0 8px 4px rgba(0,0,0,0.09),
|
||||||
|
0 16px 8px rgba(0,0,0,0.09),
|
||||||
|
0 32px 16px rgba(0,0,0,0.09);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin focus-outline {
|
||||||
|
outline: solid;
|
||||||
|
outline-color: var(--primary-accent);
|
||||||
|
outline-offset: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function css-function( $function, $values... ) {
|
||||||
|
@return
|
||||||
|
$function
|
||||||
|
+ unquote( '(' )
|
||||||
|
+ $values
|
||||||
|
+ unquote( ')' )
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function css-min( $values... ) {
|
||||||
|
@return css-function( min, $values );
|
||||||
|
}
|
||||||
|
|
||||||
|
@function css-max( $values... ) {
|
||||||
|
@return css-function( max, $values );
|
||||||
|
}
|
||||||
|
|
||||||
|
@function css-clamp( $values... ) {
|
||||||
|
@return css-function( clamp, $values );
|
||||||
|
}
|
||||||
152
hugo/assets/scss/base/page.scss
Normal file
152
hugo/assets/scss/base/page.scss
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
.page-title {font-size: 2.5em; font-weight: 700}
|
||||||
|
.page {
|
||||||
|
font-size: 1em;
|
||||||
|
@media (min-width: 600px) {font-size: 1.25em;}
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(45ch,65ch) 1fr;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"header header"
|
||||||
|
"content meta";
|
||||||
|
}
|
||||||
|
.section {
|
||||||
|
padding: 1em 0;
|
||||||
|
grid-area: content;
|
||||||
|
|
||||||
|
}
|
||||||
|
.page-header {
|
||||||
|
padding: 2em 0;
|
||||||
|
grid-area: header;
|
||||||
|
}
|
||||||
|
.meta {
|
||||||
|
grid-area: meta;
|
||||||
|
}
|
||||||
|
.page-summary {margin: 1em 0;}
|
||||||
|
.page-cover {width: 100%;}
|
||||||
|
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
a {word-wrap: break-word;}
|
||||||
|
h1 {font-size: 2.49em}
|
||||||
|
h2 {font-size: 2.07em}
|
||||||
|
h3 {font-size: 1.728em}
|
||||||
|
h4 {font-size: 1.44em}
|
||||||
|
h5 {font-size: 1.2em}
|
||||||
|
h6 {font-size: 1em}
|
||||||
|
|
||||||
|
h1 {font-size: 1.8em}
|
||||||
|
h2 {font-size: 1.600em}
|
||||||
|
h3 {font-size: 1.423em}
|
||||||
|
h4 {font-size: 1.265em}
|
||||||
|
h5 {font-size: 1.125em}
|
||||||
|
h6 {font-size: 1em}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-size: 1em;
|
||||||
|
margin: 1em 0;
|
||||||
|
border-left: 0.25rem solid black;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace;
|
||||||
|
background: #333;
|
||||||
|
color: white;
|
||||||
|
padding: 1em;
|
||||||
|
line-height: 1.4;
|
||||||
|
overflow-x: scroll;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
ul {list-style: disc; margin: 1em 0;}
|
||||||
|
li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;}
|
||||||
|
ol {list-style: decimal; margin: 1em 0;}
|
||||||
|
dl {margin: 1em 0; line-height: 1.4;}
|
||||||
|
dt {font-weight: 700;}
|
||||||
|
dd {margin-left: 1em;}
|
||||||
|
em {font-style: italic}
|
||||||
|
strong {font-weight: 700}
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.8em;
|
||||||
|
a {position: relative; top: -0.5em;}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
text-align: center;
|
||||||
|
thead {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
th, td {border: 1px solid black; padding: 0.5em;}
|
||||||
|
}
|
||||||
|
figure {
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: -0.125em;
|
||||||
|
}
|
||||||
|
figcaption {
|
||||||
|
background: #212121;
|
||||||
|
color: white;
|
||||||
|
font-style: italic;
|
||||||
|
padding: 1em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
gap: 0.25em;
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta .container {height: 100%; margin-top: 0.75rem;}
|
||||||
|
article .container *:first-child {margin-top: 0;}
|
||||||
|
|
||||||
|
#TableOfContents {
|
||||||
|
position: sticky;
|
||||||
|
top: 2rem;
|
||||||
|
@media (min-width: 960px) {top: 96px;}
|
||||||
|
max-width: max-content;
|
||||||
|
font-size: 0.75em;
|
||||||
|
margin: 2em 0;
|
||||||
|
ul {list-style: none; margin: 0;}
|
||||||
|
li {margin-bottom: 0; margin-left: 0;}
|
||||||
|
li li {margin-left: 1em;}
|
||||||
|
a {
|
||||||
|
background: unset;
|
||||||
|
text-decoration-thickness: unset;
|
||||||
|
text-underline-offset: unset;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease-in-out;
|
||||||
|
&:hover {
|
||||||
|
color: #0060ff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
22
hugo/assets/scss/base/paper.scss
Normal file
22
hugo/assets/scss/base/paper.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
:root {
|
||||||
|
--paper-padding: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {position: relative;}
|
||||||
|
main {background: #ddd; z-index: 1; position: relative;}
|
||||||
|
main:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: calc(var(--container-width) + 2 * var(--paper-padding));
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
left: calc(50% - (var(--container-width) + 2 * var(--paper-padding)) / 2);
|
||||||
|
box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
footer {z-index: 1;}
|
||||||
|
main > * {position: relative; z-index: 1}
|
||||||
|
|
||||||
|
.site-header {box-shadow: 0px 2px 6px rgba(0,0,0,0.2);}
|
||||||
|
.site-nav {box-shadow: 0px -2px 6px rgba(0,0,0,0.2);}
|
||||||
|
.site-footer {box-shadow: 0px -2px 3px rgba(0,0,0,0.2);}
|
||||||
44
hugo/assets/scss/base/reset.scss
Normal file
44
hugo/assets/scss/base/reset.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
21
hugo/assets/scss/base/sections.scss
Normal file
21
hugo/assets/scss/base/sections.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
html {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
min-height: calc(var(--vh, 1vh) * 100);
|
||||||
|
}
|
||||||
|
main {flex-grow: 1;}
|
||||||
|
.section {
|
||||||
|
padding: 2em 0;
|
||||||
|
@media (min-width: 600px) {padding: 3em 0}
|
||||||
|
@media (min-width: 62em) {padding: 4em 0}
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
19
hugo/assets/scss/base/variables.scss
Normal file
19
hugo/assets/scss/base/variables.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
$container-width: 960px;
|
||||||
|
$nav-height: 4em;
|
||||||
|
$header-height: 4em;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--container-width: #{$container-width};
|
||||||
|
--nav-height: #{$nav-height};
|
||||||
|
--header-height: #{$header-height};
|
||||||
|
--link-color: rgb(0,96,255);
|
||||||
|
--link-visited: rgb(140, 74, 194);
|
||||||
|
--primary-accent: rgb(0,96,255);
|
||||||
|
--primary-accent-transparent: rgba(0,96,255,0.25);
|
||||||
|
--primary-accent-text: #fff;
|
||||||
|
--ui-background: #fff;
|
||||||
|
--ui-background-track: #aaa;
|
||||||
|
--ui-text: #212121;
|
||||||
|
--ui-text-muted: #777;
|
||||||
|
--ui-text-bold: #000;
|
||||||
|
}
|
||||||
84
hugo/assets/scss/components/button.scss
Normal file
84
hugo/assets/scss/components/button.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
@media (min-width: 33.75em) {
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
font-size: clamp(1em,2vw,1em);
|
||||||
|
padding: 1em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-weight: 700;
|
||||||
|
gap: 1em;
|
||||||
|
&:link {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
padding: 1em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
@include focus-outline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.primary {
|
||||||
|
background: var(--primary-accent);
|
||||||
|
color: var(--primary-accent-text);
|
||||||
|
&:link {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-accent-transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button.secondary {
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--primary-accent);
|
||||||
|
color: var(--primary-accent);
|
||||||
|
&:link {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-accent-transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
20
hugo/assets/scss/components/pullquote.scss
Normal file
20
hugo/assets/scss/components/pullquote.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
@mixin pullquote {
|
||||||
|
content: attr(data-pullquote);
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.2;
|
||||||
|
display: flex;
|
||||||
|
font-family: serif;
|
||||||
|
color: #555;
|
||||||
|
padding: 1em;
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
.has-pullquote{
|
||||||
|
&.before:before {
|
||||||
|
@include pullquote;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
&.after:after {
|
||||||
|
@include pullquote;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
118
hugo/assets/scss/content/index.scss
Normal file
118
hugo/assets/scss/content/index.scss
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
#index {
|
||||||
|
.title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
&:before {
|
||||||
|
font-size: 3em;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ddd;
|
||||||
|
position: absolute;
|
||||||
|
top: -0.5em;
|
||||||
|
left: -0.3em;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
.quotes {
|
||||||
|
|
||||||
|
padding: 2rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 1.5;
|
||||||
|
gap: 2em;
|
||||||
|
font-family: monospace;
|
||||||
|
.heading {
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.quotes-container {
|
||||||
|
color: #555;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-grow: 1;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#summary .container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
@media (min-width: 40rem) {
|
||||||
|
grid-template-columns: 18rem 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#birdsounds {
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.photo {
|
||||||
|
max-height: 100vh;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: center bottom;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
@media (min-width: 40rem) {
|
||||||
|
.photo {
|
||||||
|
height: 20rem;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
flex-flow: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
&:after {
|
||||||
|
content: '→';
|
||||||
|
position: absolute;
|
||||||
|
right: -1em;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#updates {
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
.heading {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
p + p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
max-width: 55ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
663
hugo/assets/scss/libraries/photoswipe.scss
Normal file
663
hugo/assets/scss/libraries/photoswipe.scss
Normal file
|
|
@ -0,0 +1,663 @@
|
||||||
|
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||||
|
/*
|
||||||
|
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
|
||||||
|
*/
|
||||||
|
/* pswp = photoswipe */
|
||||||
|
.pswp {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
z-index: 1500;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
outline: none; }
|
||||||
|
.pswp * {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.pswp img {
|
||||||
|
max-width: none; }
|
||||||
|
|
||||||
|
/* style is added when JS option showHideOpacity is set to true */
|
||||||
|
.pswp--animate_opacity {
|
||||||
|
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
|
||||||
|
opacity: 0.001;
|
||||||
|
will-change: opacity;
|
||||||
|
/* for open/close transition */
|
||||||
|
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp--open {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.pswp--zoom-allowed .pswp__img {
|
||||||
|
/* autoprefixer: off */
|
||||||
|
cursor: -webkit-zoom-in;
|
||||||
|
cursor: -moz-zoom-in;
|
||||||
|
cursor: zoom-in; }
|
||||||
|
|
||||||
|
.pswp--zoomed-in .pswp__img {
|
||||||
|
/* autoprefixer: off */
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
cursor: -moz-grab;
|
||||||
|
cursor: grab; }
|
||||||
|
|
||||||
|
.pswp--dragging .pswp__img {
|
||||||
|
/* autoprefixer: off */
|
||||||
|
cursor: -webkit-grabbing;
|
||||||
|
cursor: -moz-grabbing;
|
||||||
|
cursor: grabbing; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Background is added as a separate element.
|
||||||
|
As animating opacity is much faster than animating rgba() background-color.
|
||||||
|
*/
|
||||||
|
.pswp__bg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #000;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: opacity; }
|
||||||
|
|
||||||
|
.pswp__scroll-wrap {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden; }
|
||||||
|
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0; }
|
||||||
|
|
||||||
|
/* Prevent selection and tap highlights */
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__img {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-touch-callout: none; }
|
||||||
|
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-transform-origin: left top;
|
||||||
|
-ms-transform-origin: left top;
|
||||||
|
transform-origin: left top;
|
||||||
|
/* for open/close transition */
|
||||||
|
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp__bg {
|
||||||
|
will-change: opacity;
|
||||||
|
/* for open/close transition */
|
||||||
|
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp--animated-in .pswp__bg,
|
||||||
|
.pswp--animated-in .pswp__zoom-wrap {
|
||||||
|
-webkit-transition: none;
|
||||||
|
transition: none; }
|
||||||
|
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
-webkit-backface-visibility: hidden; }
|
||||||
|
|
||||||
|
.pswp__item {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden; }
|
||||||
|
|
||||||
|
.pswp__img {
|
||||||
|
position: absolute;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
top: 0;
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
stretched thumbnail or div placeholder element (see below)
|
||||||
|
style is added to avoid flickering in webkit/blink when layers overlap
|
||||||
|
*/
|
||||||
|
.pswp__img--placeholder {
|
||||||
|
-webkit-backface-visibility: hidden; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
div element that matches size of large image
|
||||||
|
large image loads on top of it
|
||||||
|
*/
|
||||||
|
.pswp__img--placeholder--blank {
|
||||||
|
background: #222; }
|
||||||
|
|
||||||
|
.pswp--ie .pswp__img {
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
left: 0;
|
||||||
|
top: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Error message appears when image is not loaded
|
||||||
|
(JS option errorMsg controls markup)
|
||||||
|
*/
|
||||||
|
.pswp__error-msg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-top: -8px;
|
||||||
|
color: #CCC; }
|
||||||
|
|
||||||
|
.pswp__error-msg a {
|
||||||
|
color: #CCC;
|
||||||
|
text-decoration: underline; }
|
||||||
|
|
||||||
|
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||||
|
/*
|
||||||
|
|
||||||
|
Contents:
|
||||||
|
|
||||||
|
1. Buttons
|
||||||
|
2. Share modal and links
|
||||||
|
3. Index indicator ("1 of X" counter)
|
||||||
|
4. Caption
|
||||||
|
5. Loading indicator
|
||||||
|
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||||
|
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
|
||||||
|
1. Buttons
|
||||||
|
|
||||||
|
*/
|
||||||
|
/* <button> css reset */
|
||||||
|
.pswp__button {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
position: relative;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: visible;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: block;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
float: right;
|
||||||
|
opacity: 0.75;
|
||||||
|
-webkit-transition: opacity 0.2s;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none; }
|
||||||
|
.pswp__button:focus, .pswp__button:hover {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp__button:active {
|
||||||
|
outline: none;
|
||||||
|
opacity: 0.9; }
|
||||||
|
.pswp__button::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border: 0; }
|
||||||
|
|
||||||
|
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||||
|
.pswp__ui--over-close .pswp__button--close {
|
||||||
|
opacity: 1; }
|
||||||
|
|
||||||
|
.pswp__button,
|
||||||
|
.pswp__button--arrow--left:before,
|
||||||
|
.pswp__button--arrow--right:before {
|
||||||
|
background: url('/lib/pswp4/default-skin.png') 0 0 no-repeat;
|
||||||
|
background-size: 264px 88px;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px; }
|
||||||
|
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||||
|
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||||
|
.pswp--svg .pswp__button,
|
||||||
|
.pswp--svg .pswp__button--arrow--left:before,
|
||||||
|
.pswp--svg .pswp__button--arrow--right:before {
|
||||||
|
background-image: url('/lib/pswp4/default-skin.svg'); }
|
||||||
|
.pswp--svg .pswp__button--arrow--left,
|
||||||
|
.pswp--svg .pswp__button--arrow--right {
|
||||||
|
background: none; } }
|
||||||
|
|
||||||
|
.pswp__button--close {
|
||||||
|
background-position: 0 -44px; }
|
||||||
|
|
||||||
|
.pswp__button--share {
|
||||||
|
background-position: -44px -44px; }
|
||||||
|
|
||||||
|
.pswp__button--fs {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.pswp--supports-fs .pswp__button--fs {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.pswp--fs .pswp__button--fs {
|
||||||
|
background-position: -44px 0; }
|
||||||
|
|
||||||
|
.pswp__button--zoom {
|
||||||
|
display: none;
|
||||||
|
background-position: -88px 0; }
|
||||||
|
|
||||||
|
.pswp--zoom-allowed .pswp__button--zoom {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.pswp--zoomed-in .pswp__button--zoom {
|
||||||
|
background-position: -132px 0; }
|
||||||
|
|
||||||
|
/* no arrows on touch screens */
|
||||||
|
.pswp--touch .pswp__button--arrow--left,
|
||||||
|
.pswp--touch .pswp__button--arrow--right {
|
||||||
|
visibility: hidden; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Arrow buttons hit area
|
||||||
|
(icon is added to :before pseudo-element)
|
||||||
|
*/
|
||||||
|
.pswp__button--arrow--left,
|
||||||
|
.pswp__button--arrow--right {
|
||||||
|
background: none;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -50px;
|
||||||
|
width: 70px;
|
||||||
|
height: 100px;
|
||||||
|
position: absolute; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left {
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--right {
|
||||||
|
right: 0; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left:before,
|
||||||
|
.pswp__button--arrow--right:before {
|
||||||
|
content: '';
|
||||||
|
top: 35px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
height: 30px;
|
||||||
|
width: 32px;
|
||||||
|
position: absolute; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left:before {
|
||||||
|
left: 6px;
|
||||||
|
background-position: -138px -44px; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--right:before {
|
||||||
|
right: 6px;
|
||||||
|
background-position: -94px -44px; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
2. Share modal/popup and links
|
||||||
|
|
||||||
|
*/
|
||||||
|
.pswp__counter,
|
||||||
|
.pswp__share-modal {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none; }
|
||||||
|
|
||||||
|
.pswp__share-modal {
|
||||||
|
display: block;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 10px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1600;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.25s ease-out;
|
||||||
|
transition: opacity 0.25s ease-out;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: opacity; }
|
||||||
|
|
||||||
|
.pswp__share-modal--hidden {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.pswp__share-tooltip {
|
||||||
|
z-index: 1620;
|
||||||
|
position: absolute;
|
||||||
|
background: #FFF;
|
||||||
|
top: 56px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
right: 44px;
|
||||||
|
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||||
|
-webkit-transform: translateY(6px);
|
||||||
|
-ms-transform: translateY(6px);
|
||||||
|
transform: translateY(6px);
|
||||||
|
-webkit-transition: -webkit-transform 0.25s;
|
||||||
|
transition: transform 0.25s;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: transform; }
|
||||||
|
.pswp__share-tooltip a {
|
||||||
|
display: block;
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px; }
|
||||||
|
.pswp__share-tooltip a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000; }
|
||||||
|
.pswp__share-tooltip a:first-child {
|
||||||
|
/* round corners on the first/last list item */
|
||||||
|
border-radius: 2px 2px 0 0; }
|
||||||
|
.pswp__share-tooltip a:last-child {
|
||||||
|
border-radius: 0 0 2px 2px; }
|
||||||
|
|
||||||
|
.pswp__share-modal--fade-in {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
-ms-transform: translateY(0);
|
||||||
|
transform: translateY(0); }
|
||||||
|
|
||||||
|
/* increase size of share links on touch devices */
|
||||||
|
.pswp--touch .pswp__share-tooltip a {
|
||||||
|
padding: 16px 12px; }
|
||||||
|
|
||||||
|
a.pswp__share--facebook:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: -12px;
|
||||||
|
right: 15px;
|
||||||
|
border: 6px solid transparent;
|
||||||
|
border-bottom-color: #FFF;
|
||||||
|
-webkit-pointer-events: none;
|
||||||
|
-moz-pointer-events: none;
|
||||||
|
pointer-events: none; }
|
||||||
|
|
||||||
|
a.pswp__share--facebook:hover {
|
||||||
|
background: #3E5C9A;
|
||||||
|
color: #FFF; }
|
||||||
|
a.pswp__share--facebook:hover:before {
|
||||||
|
border-bottom-color: #3E5C9A; }
|
||||||
|
|
||||||
|
a.pswp__share--twitter:hover {
|
||||||
|
background: #55ACEE;
|
||||||
|
color: #FFF; }
|
||||||
|
|
||||||
|
a.pswp__share--pinterest:hover {
|
||||||
|
background: #CCC;
|
||||||
|
color: #CE272D; }
|
||||||
|
|
||||||
|
a.pswp__share--download:hover {
|
||||||
|
background: #DDD; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
3. Index indicator ("1 of X" counter)
|
||||||
|
|
||||||
|
*/
|
||||||
|
.pswp__counter {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 44px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 44px;
|
||||||
|
color: #FFF;
|
||||||
|
opacity: 0.75;
|
||||||
|
padding: 0 10px; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
4. Caption
|
||||||
|
|
||||||
|
*/
|
||||||
|
.pswp__caption {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 44px; }
|
||||||
|
.pswp__caption small {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #BBB; }
|
||||||
|
|
||||||
|
.pswp__caption__center {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 50ch;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 1em;
|
||||||
|
padding: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #CCC;}
|
||||||
|
|
||||||
|
.pswp__caption--empty {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
/* Fake caption element, used to calculate height of next/prev image */
|
||||||
|
.pswp__caption--fake {
|
||||||
|
visibility: hidden; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
5. Loading indicator (preloader)
|
||||||
|
|
||||||
|
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||||
|
|
||||||
|
*/
|
||||||
|
.pswp__preloader {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -22px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.25s ease-out;
|
||||||
|
transition: opacity 0.25s ease-out;
|
||||||
|
will-change: opacity;
|
||||||
|
direction: ltr; }
|
||||||
|
|
||||||
|
.pswp__preloader__icn {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 12px; }
|
||||||
|
|
||||||
|
.pswp__preloader--active {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
/* We use .gif in browsers that don't support CSS animation */
|
||||||
|
background: url('/lib/pswp4/preloader.gif') 0 0 no-repeat; }
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader--active {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
-webkit-animation: clockwise 500ms linear infinite;
|
||||||
|
animation: clockwise 500ms linear infinite; }
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||||
|
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||||
|
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader__icn {
|
||||||
|
background: none;
|
||||||
|
opacity: 0.75;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
position: absolute;
|
||||||
|
left: 15px;
|
||||||
|
top: 15px;
|
||||||
|
margin: 0; }
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader__cut {
|
||||||
|
/*
|
||||||
|
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||||
|
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||||
|
*/
|
||||||
|
position: relative;
|
||||||
|
width: 7px;
|
||||||
|
height: 14px;
|
||||||
|
overflow: hidden; }
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader__donut {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 2px solid #FFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: none;
|
||||||
|
margin: 0; }
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.pswp__preloader {
|
||||||
|
position: relative;
|
||||||
|
left: auto;
|
||||||
|
top: auto;
|
||||||
|
margin: 0;
|
||||||
|
float: right; } }
|
||||||
|
|
||||||
|
@-webkit-keyframes clockwise {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
@keyframes clockwise {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
@-webkit-keyframes donut-rotate {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0);
|
||||||
|
transform: rotate(0); }
|
||||||
|
50% {
|
||||||
|
-webkit-transform: rotate(-140deg);
|
||||||
|
transform: rotate(-140deg); }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(0);
|
||||||
|
transform: rotate(0); } }
|
||||||
|
|
||||||
|
@keyframes donut-rotate {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0);
|
||||||
|
transform: rotate(0); }
|
||||||
|
50% {
|
||||||
|
-webkit-transform: rotate(-140deg);
|
||||||
|
transform: rotate(-140deg); }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(0);
|
||||||
|
transform: rotate(0); } }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
6. Additional styles
|
||||||
|
|
||||||
|
*/
|
||||||
|
/* root element of UI */
|
||||||
|
.pswp__ui {
|
||||||
|
-webkit-font-smoothing: auto;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1550; }
|
||||||
|
|
||||||
|
/* top black bar with buttons and "1 of X" indicator */
|
||||||
|
.pswp__top-bar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 44px;
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
.pswp__caption,
|
||||||
|
.pswp__top-bar,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--left,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: opacity;
|
||||||
|
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--left,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
visibility: visible; }
|
||||||
|
|
||||||
|
.pswp__top-bar,
|
||||||
|
.pswp__caption {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5); }
|
||||||
|
|
||||||
|
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||||
|
.pswp__ui--fit .pswp__top-bar,
|
||||||
|
.pswp__ui--fit .pswp__caption {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5); }
|
||||||
|
|
||||||
|
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||||
|
.pswp__ui--idle .pswp__top-bar {
|
||||||
|
opacity: 0; }
|
||||||
|
|
||||||
|
.pswp__ui--idle .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--idle .pswp__button--arrow--right {
|
||||||
|
opacity: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
pswp__ui--hidden class is added when controls are hidden
|
||||||
|
e.g. when user taps to toggle visibility of controls
|
||||||
|
*/
|
||||||
|
.pswp__ui--hidden .pswp__top-bar,
|
||||||
|
.pswp__ui--hidden .pswp__caption,
|
||||||
|
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||||
|
/* Force paint & create composition layer for controls. */
|
||||||
|
opacity: 0.001; }
|
||||||
|
|
||||||
|
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||||
|
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||||
|
.pswp__ui--one-slide .pswp__counter {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.pswp__element--disabled {
|
||||||
|
display: none !important; }
|
||||||
|
|
||||||
|
.pswp--minimal--dark .pswp__top-bar {
|
||||||
|
background: none; }
|
||||||
|
|
||||||
19
hugo/assets/scss/main.scss
Normal file
19
hugo/assets/scss/main.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
@import "base/reset.scss";
|
||||||
|
@import "base/variables.scss";
|
||||||
|
@import "base/mixins.scss";
|
||||||
|
@import "base/sections.scss";
|
||||||
|
@import "base/page.scss";
|
||||||
|
@import "base/list.scss";
|
||||||
|
|
||||||
|
@import "base/links.scss";
|
||||||
|
//@import "base/paper.scss";
|
||||||
|
@import "libraries/photoswipe.scss";
|
||||||
|
|
||||||
|
@import "components/pullquote.scss";
|
||||||
|
@import "components/button.scss";
|
||||||
|
|
||||||
|
@import "content/index.scss";
|
||||||
|
|
||||||
|
@import "partials/site-header.scss";
|
||||||
|
@import "partials/site-footer.scss";
|
||||||
|
@import "partials/h-card.scss";
|
||||||
4
hugo/assets/scss/partials/h-card.scss
Normal file
4
hugo/assets/scss/partials/h-card.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
#index .h-card {
|
||||||
|
background: #ddd;
|
||||||
|
|
||||||
|
}
|
||||||
94
hugo/assets/scss/partials/site-footer.scss
Normal file
94
hugo/assets/scss/partials/site-footer.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
.site-footer {
|
||||||
|
background: #fff;
|
||||||
|
color: #212121;
|
||||||
|
padding: 2em 0 calc(2em + 4em);
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
padding: 2em 0;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 2em;
|
||||||
|
}
|
||||||
|
.external-links {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(6,1fr);
|
||||||
|
gap: 1em;
|
||||||
|
margin-top: 2rem;
|
||||||
|
a {
|
||||||
|
width: 2em;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
i {font-size: 1.6em;}
|
||||||
|
}
|
||||||
|
.footer-copy {
|
||||||
|
font-family: monospace;
|
||||||
|
width: 100%;
|
||||||
|
h1 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.21em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.1em;
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1em;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
line-height: 1.4;
|
||||||
|
max-width: 55ch;
|
||||||
|
}
|
||||||
|
a h3 {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.git-lastcommit {
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
"time time"
|
||||||
|
"hash subj";
|
||||||
|
grid-template-columns: max-content 1fr;
|
||||||
|
time {
|
||||||
|
grid-area: time;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
grid-area: subj;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
grid-area: hash;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
134
hugo/assets/scss/partials/site-header.scss
Normal file
134
hugo/assets/scss/partials/site-header.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
.site-header {
|
||||||
|
z-index: 10;
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
&:link {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: var(--primary-accent-transparent);
|
||||||
|
padding: unset;
|
||||||
|
border-radius: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
background: var(--ui-background);
|
||||||
|
color: var(--ui-text);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-masthead {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row-reverse;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1em 0;
|
||||||
|
gap: 1em;
|
||||||
|
flex: 1;
|
||||||
|
@media (min-width: $container-width) {
|
||||||
|
flex: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.site-icon {
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
border-radius: 100em;
|
||||||
|
}
|
||||||
|
.site-title {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav {
|
||||||
|
flex-grow: 1;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
background: var(--ui-background);
|
||||||
|
color: var(--ui-text-muted);
|
||||||
|
z-index: 2;
|
||||||
|
ul {
|
||||||
|
height: var(--nav-height);
|
||||||
|
max-width: $container-width;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
li {
|
||||||
|
flex: 1;
|
||||||
|
border-bottom: 4px solid var(--ui-background-track);
|
||||||
|
&.active {
|
||||||
|
color: var(--ui-text-bold);
|
||||||
|
border-bottom: 6px solid var(--primary-accent);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
span {padding: 0.25em;}
|
||||||
|
svg {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
&:link {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: var(--primary-accent-transparent);
|
||||||
|
padding: unset;
|
||||||
|
border-radius: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
box-shadow: 0px -2px 2px rgba(0,0,0,0.2);
|
||||||
|
@media (min-width: $container-width) {
|
||||||
|
position: unset;
|
||||||
|
bottom: unset;
|
||||||
|
left: unset;
|
||||||
|
flex-grow: unset;
|
||||||
|
width: 20em;
|
||||||
|
box-shadow: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $container-width) {
|
||||||
|
.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
44
hugo/config.toml
Normal file
44
hugo/config.toml
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
baseURL = 'https://trwnh.com/'
|
||||||
|
languageCode = 'en-us'
|
||||||
|
title = 'trwnh.com'
|
||||||
|
enableGitInfo = true
|
||||||
|
|
||||||
|
[markup.goldmark.renderer]
|
||||||
|
unsafe = true
|
||||||
|
|
||||||
|
[menu]
|
||||||
|
|
||||||
|
[[menu.main]]
|
||||||
|
identifier = ""
|
||||||
|
pre = ''
|
||||||
|
name = "Home"
|
||||||
|
url = "/"
|
||||||
|
weight = 10
|
||||||
|
|
||||||
|
[[menu.main]]
|
||||||
|
identifier = "work"
|
||||||
|
pre = ''
|
||||||
|
name = "Work"
|
||||||
|
url = "/work/"
|
||||||
|
weight = 20
|
||||||
|
|
||||||
|
[[menu.main]]
|
||||||
|
identifier = "code"
|
||||||
|
pre = ''
|
||||||
|
name = "Code"
|
||||||
|
url = "/code/"
|
||||||
|
weight = 30
|
||||||
|
|
||||||
|
[[menu.main]]
|
||||||
|
identifier = "design"
|
||||||
|
pre = ''
|
||||||
|
name = "Design"
|
||||||
|
url = "/design/"
|
||||||
|
weight = 40
|
||||||
|
|
||||||
|
[[menu.main]]
|
||||||
|
identifier = "blog"
|
||||||
|
pre = ''
|
||||||
|
name = "Blog"
|
||||||
|
url = "/blog/"
|
||||||
|
weight = 50
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
+++
|
||||||
|
type = "reply"
|
||||||
|
title = "in response to \"You're not wrong -- smartphones aren't as exciting as they used to be\" from Android Police"
|
||||||
|
summary = "Honestly, phones really aren't even getting better anymore — they're getting worse since 2013. And the factors are mostly not technological — the technology continues to improve, of course. It's the corporate decisions that go into the making of the phones, which are based not on what makes a “better” phone, but on what they think will be most profitable. I want to call out [...]"
|
||||||
|
date = 2018-08-01
|
||||||
|
tags = ["capitalism", "technology", "mobile", "smartphones"]
|
||||||
|
inReplyTo = "https://www.androidpolice.com/2018/08/01/youre-not-wrong-smartphones-arent-exciting-used/"
|
||||||
|
original = "https://disqus.com/home/discussion/androidpolice/youre_not_wrong_smartphones_arent_as_exciting_as_they_used_to_be/#comment-4017813937"
|
||||||
|
draft = false
|
||||||
|
+++
|
||||||
|
|
||||||
|
Honestly, phones really aren't even getting better anymore — they're getting worse since 2013. And the factors are mostly not technological — the technology continues to improve, of course. It's the corporate decisions that go into the making of the phones, which are based not on what makes a “better” phone, but on what they think will be most profitable. I want to call out a few specific quotes from this article and add my thoughts:
|
||||||
|
|
||||||
|
> we've witnessed a consolidation of the phones themselves into ever-more similar permutations. And that's because we've largely solved the problems the early smartphone presented us [...] That is to say, our smartphones basically do all the stuff we want them to. And therein lies the rub: we're running out of meaningful problems for the phone to solve and, equally, out of meaningful flaws to correct in the phones themselves. Smartphones have matured enough as a product category and become so standardized that essentially all we're left with is optimization.
|
||||||
|
|
||||||
|
One negative side-effect of this consolidation is that we've implicitly narrowed the scope of what we consider to be a “problem”. For all the early problems that are no longer problems, we didn't bother solving all of them — and some new problems were created and ignored. There are a lot of assumptions being made that simply aren't 100% true. If you look at the modern smartphone market, the overwhelming assumption is that everyone wants big phones and non-removable batteries. Trends like removing headphone jacks and adding notches spread throughout the industry, because making a good phone isn't enough anymore — the new stuff has to be “innovative” even in a sector where there isn't much more innovation to be had. The end result is that phones actually aren't as good as they could be for everyone. The worst assumption of them all is that every single potential user has exactly the same desires and same tastes, with minimal or negligible differences.
|
||||||
|
|
||||||
|
> phones are becoming appliances [...] we all know what we want to do with our phones, it's just a question of which one best fulfills our needs. [...] phones break, they get outdated (a problem no company is keen to solve!), and they don't last forever on a charge. But solving these “problems” seems, if I'm to draw an analogy, is like trying to develop a car tire that never needs to be replaced. No one wants to, and even if they did, most of the potential solutions are probably unworkable. So, much like that tire, the smartphone has been relegated to annual, incremental improvements. It lasts longer, goes faster, and works better.
|
||||||
|
|
||||||
|
You touch upon this here: companies are not keen to solve these problems because it would advantage the disparate users and disadvantage the company's profits. If the question is about which phone fulfills your needs, then companies are assuming those needs are basically the same, for billions of people, which simply isn't true. And if we were to properly examine the analogy of the car tire, then we can consider nonremovable batteries as nonremovable tires. Yes, we can develop tires or batteries that last longer — but they will eventually wear out. Imagine having to buy an entirely new car just because one tire's treads are worn out. Oh, and of course, the cars are all the same style — every single car is an SUV, no sedans; just like today's average phones have made the term “phablet” practically obsolete. All the cars are the same color and the same trim — black or white, maybe grey, and the interiors are all leather despite the fact that many users prefer cloth.
|
||||||
|
|
||||||
|
> It's easy to understand why that sounds dull: because unless you're an engineer, it really is. Your phone five years from now will be a better version of what you have today. Cars have four wheels, smartphones have a touchscreen [...] Even as companies worth hundreds of billions of dollars work tirelessly to implement new technologies and make them better, what we have right now is basically really good, and it would be silly to change what's been an excellent product formula simply for the sake of doing so. Unfortunately, that means your next phone will probably be a lot like your current one, and so will the one after that, and probably the one after that, too. It's not exactly exciting, but no one said phones had to be.
|
||||||
|
|
||||||
|
It's ironic that phones aren't exciting anymore (even to engineers, I'd daresay) — the marketing around each phone practically demands advertising every single phone as an exciting new product. And the product formula, as refined as it may be by now, is getting stale. But my biggest worry is that this formula is too restrictive; it's one thing to say that cars have four wheels and smartphones have touchscreens, but the current paradigms are far more specific than that. Smartphones aren't just touchscreens — they're massive slabs, with more and more glass, and no way to service them. Straying from this paradigm can't be done effectively, because the profitability margins have been squeezed thinner and thinner by the juggernauts leading the pack.
|
||||||
|
|
||||||
|
My next phone might not be anything like my current phone, because phones like my current phone might very well cease to exist. I'm already using a phone from 2016, with legitimately ZERO similar options out of the 2017/2018 offerings. And the phone from 2016 was already a compromise, that I purchased in 2018. And without an easily-replaceable battery, I can't keep using this phone for more than another year or so, because the battery will inevitably degrade. To me, this is beyond unexciting — this is legitimately revolting.
|
||||||
7
hugo/content/notes/108619642167941717/index.md
Normal file
7
hugo/content/notes/108619642167941717/index.md
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
+++
|
||||||
|
type = "note"
|
||||||
|
tags = []
|
||||||
|
+++
|
||||||
|
kinda need an account with somewhere between 2 and 2000 followers
|
||||||
|
|
||||||
|
custom audiences when
|
||||||
119
hugo/layouts/_default/baseof.html
Normal file
119
hugo/layouts/_default/baseof.html
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{.Site.Language.Lang }}" xml:lang="{{.Site.Language.Lang }}">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
|
||||||
|
{{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }}
|
||||||
|
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media="screen">
|
||||||
|
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||||
|
{{ $icon := "/avatar.png" | absURL }}
|
||||||
|
<link rel="shortcut icon" href='{{ $icon }}' sizes="400x400">
|
||||||
|
{{ if .IsPage }}<meta name="keywords" content='{{ delimit .Params.tags " "}}'>{{ end }}
|
||||||
|
{{ if .IsHome }}<title>{{ .Site.Title }}</title>
|
||||||
|
<title itemprop="name">{{ .Site.Title }}</title>
|
||||||
|
<meta property="og:title" content="{{ .Site.Title }}" />
|
||||||
|
<meta name="twitter:title" content="{{ .Site.Title }}" />
|
||||||
|
<meta itemprop="name" content="{{ .Site.Title }}" />
|
||||||
|
{{ else }}<title>{{ .Title }} | {{ .Site.Title }}</title>
|
||||||
|
<title itemprop="name">{{ .Title }} | {{ .Site.Title }}</title>
|
||||||
|
<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
|
||||||
|
<meta name="twitter:title" content="{{ .Title }} | {{ .Site.Title }}" />
|
||||||
|
<meta itemprop="name" content="{{ .Title }} | {{ .Site.Title }}" />{{ end }}
|
||||||
|
<meta name="application-name" content="{{ .Site.Title }}" />
|
||||||
|
<meta property="og:site_name" content="{{ .Site.Title }}" />
|
||||||
|
<meta name="description" content="{{ .Summary }}">
|
||||||
|
<meta itemprop="description" content="{{ .Summary }}" />
|
||||||
|
<meta property="og:description" content="{{ .Summary }}" />
|
||||||
|
<meta name="twitter:description" content="{{ .Summary }}" />
|
||||||
|
<base href="{{ .Permalink }}">
|
||||||
|
<link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
|
||||||
|
<meta name="url" content="{{ .Permalink }}" />
|
||||||
|
<meta name="twitter:url" content="{{ .Permalink }}" />
|
||||||
|
<meta property="og:url" content="{{ .Permalink }}" />
|
||||||
|
{{ with .Params.cover }}<meta itemprop="image" content="{{ . | absURL }}" />
|
||||||
|
<meta property="og:image" content="{{ . | absURL }}" />
|
||||||
|
<meta name="twitter:image" content="{{ . | absURL }}" />
|
||||||
|
<meta name="twitter:image:src" content="{{ . | absURL }}" />{{ else }}
|
||||||
|
<meta itemprop="image" content='{{ $icon }}' />
|
||||||
|
<meta property="og:image" content='{{ $icon }}' />
|
||||||
|
<meta name="twitter:image" content='{{ $icon }}' />
|
||||||
|
<meta name="twitter:image:src" content='{{ $icon }}' />{{ end }}
|
||||||
|
<meta property="og:updated_time" content={{ .Lastmod.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
|
||||||
|
{{ if isset .Params "date" }}<meta property="og:type" content="article" />
|
||||||
|
<script defer type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "http://schema.org",
|
||||||
|
"@type": "Article",
|
||||||
|
"headline": {{ .Title }},
|
||||||
|
"author": {
|
||||||
|
"@type": "Person",
|
||||||
|
"name": "{{ .Params.author }}"
|
||||||
|
},
|
||||||
|
"datePublished": "{{ .Date.Format "2006-01-02" }}",
|
||||||
|
"description": {{ .Summary }},
|
||||||
|
"wordCount": {{ .WordCount }},
|
||||||
|
"mainEntityOfPage": "True",
|
||||||
|
"dateModified": "{{ .Lastmod.Format "2006-01-02" }}",
|
||||||
|
"image": {
|
||||||
|
"@type": "imageObject",
|
||||||
|
"url": "{{ with .Params.cover }}{{ . }}{{ end }}"
|
||||||
|
},
|
||||||
|
"publisher": {
|
||||||
|
"@type": "Person",
|
||||||
|
"name": "{{ .Site.Title }}",
|
||||||
|
"logo": {
|
||||||
|
"@type": "imageObject",
|
||||||
|
"url": {{ $icon }}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{{ else }}<meta property="og:type" content="website" />
|
||||||
|
<meta name="author" content="{{ .Params.author }}" />
|
||||||
|
<script defer type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "http://schema.org",
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": {{ .Permalink }},
|
||||||
|
"name": "{{ .Title }}",
|
||||||
|
"logo": {{ $icon }}
|
||||||
|
}
|
||||||
|
</script>{{ end }}
|
||||||
|
<meta property="article:publisher" content="{{ .Params.author }}" />
|
||||||
|
{{ with.Params.author }}<meta property="og:article:author" content="{{ . }}" />
|
||||||
|
<meta property="article:author" content="{{ . }}" />
|
||||||
|
<meta name="author" content="{{ . }}" />{{ end }}
|
||||||
|
{{ with.Params.category }}<meta name="news_keywords" content="{{ . }}" />
|
||||||
|
<meta property="article:section" content="{{ . }}" />{{ end }}
|
||||||
|
<meta property="og:article:published_time" content={{ .Date.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
|
||||||
|
<meta property="article:published_time" content={{ .Date.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
|
||||||
|
<link rel="sitemap" type="application/xml" title="Sitemap" href="{{ .Site.BaseURL }}sitemap.xml" />
|
||||||
|
{{ with .OutputFormats.Get "RSS" }}<link href="{{ .Permalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
|
||||||
|
<link href="{{ .Permalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />{{ end }}
|
||||||
|
<meta name="robots" content="index,follow" />
|
||||||
|
<meta name="googlebot" content="index,follow" />
|
||||||
|
<link rel="manifest" href="{{ .Site.BaseURL }}manifest.json" />
|
||||||
|
<meta name="theme-color" content="#ffffff" />
|
||||||
|
<meta name="msapplication-TileColor" content="#ffffff" />
|
||||||
|
<meta name="imagemode" content="force" />
|
||||||
|
<meta name="coverage" content="Worldwide" />
|
||||||
|
<meta name="distribution" content="Global" />
|
||||||
|
<meta name="HandheldFriendly" content="True" />
|
||||||
|
<meta name="msapplication-tap-highlight" content="no" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
|
<meta name="apple-touch-fullscreen" content="yes" />
|
||||||
|
{{ block "head" . }}
|
||||||
|
{{ end }}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{{ partial "site-header.html" . }}
|
||||||
|
{{ block "main" . }}
|
||||||
|
{{ end }}
|
||||||
|
{{ partial "site-footer.html" .}}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
hugo/layouts/_default/list.html
Normal file
25
hugo/layouts/_default/list.html
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
<main>
|
||||||
|
<header class="section page-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="page-title">{{ .Title }}</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section class="section list">
|
||||||
|
<div class="container">
|
||||||
|
{{ range .Pages }}
|
||||||
|
<article class="list-item">
|
||||||
|
<a class="list-item__link" href="{{ .Permalink }}">
|
||||||
|
{{ with .Params.cover }}
|
||||||
|
<img class="list-item__image" src="{{.}}">
|
||||||
|
{{end}}
|
||||||
|
<h2 class="list-item__title">{{ .Title }}</h2>
|
||||||
|
</a>
|
||||||
|
<p class="list-item__summary">{{.Summary}}</p>
|
||||||
|
<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
|
||||||
|
</article>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
{{ end }}
|
||||||
37
hugo/layouts/_default/single.html
Normal file
37
hugo/layouts/_default/single.html
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
<main>
|
||||||
|
<article class="page">
|
||||||
|
<header class="section page-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="page-title">{{ .Title }}</h1>
|
||||||
|
<p class="page-summary">{{.Summary}}</p>
|
||||||
|
{{ with .Params.cover }}
|
||||||
|
<img class="page-cover" src="{{.}}">
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<aside class="meta section">
|
||||||
|
<div class="container">
|
||||||
|
<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
|
||||||
|
<p class="wordcount"> {{.WordCount}} words</p>
|
||||||
|
|
||||||
|
{{ with .Params.tags }}
|
||||||
|
<p>Keywords:</p>
|
||||||
|
<ul class="tags">
|
||||||
|
{{ range . }}
|
||||||
|
<li><a href='{{"tags/" | absURL }}{{. | urlize}}'>{{.}}</a></li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
{{ .Content }}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
{{ end }}
|
||||||
31
hugo/layouts/index.html
Normal file
31
hugo/layouts/index.html
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
{{ define "head" }}
|
||||||
|
{{ end }}
|
||||||
|
{{ define "main" }}
|
||||||
|
<main id="index">
|
||||||
|
<div class="container">
|
||||||
|
{{partial "h-card.html" .}}
|
||||||
|
<section class="h-feed">
|
||||||
|
<h2>Latest content</h2>
|
||||||
|
{{$paginator := .Paginate (.Site.RegularPages) 20}}
|
||||||
|
{{range $paginator.Pages}}
|
||||||
|
|
||||||
|
{{if eq .Params.type "note" }}
|
||||||
|
<article class="h-entry note">
|
||||||
|
<div class="e-content">{{.Content}}</div>
|
||||||
|
</article>
|
||||||
|
{{end}}
|
||||||
|
|
||||||
|
{{if eq .Params.type "reply"}}
|
||||||
|
<article class="h-entry reply">
|
||||||
|
<a href="{{.Permalink}}" class="p-name">{{.Title}}</a>
|
||||||
|
<a href="{{.Params.inReplyTo}}" class="u-in-reply-to"></a>
|
||||||
|
<a href="{{.Params.original}}" class="u-syndication"></a>
|
||||||
|
<p class="p-summary">{{.Summary}}</p>
|
||||||
|
</article>
|
||||||
|
{{end}}
|
||||||
|
|
||||||
|
{{end}}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{{ end }}
|
||||||
22
hugo/layouts/partials/h-card.html
Normal file
22
hugo/layouts/partials/h-card.html
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<article class="h-card">
|
||||||
|
<a class="p-name p-nickname u-url u-uid" href="https://trwnh.com">a</a>
|
||||||
|
<p class="p-nickname">trwnh</p>
|
||||||
|
<p class="p-name"><span class="p-given-name">abdullah</span> <span class="p-family-name">tarawneh</span></p>
|
||||||
|
<img src="{{.Site.BaseURL}}avatar.png" alt="avatar" class="u-photo u-logo">
|
||||||
|
<a href="mailto:a@trwnh.com" class="u-email">a@trwnh.com</a>
|
||||||
|
<a href="xmpp:a@trwnh.com" class="u-impp">a@trwnh.com</a>
|
||||||
|
<a href="https://mastodon.social/@trwnh" class="u-url">mastodon.social/@trwnh</a>
|
||||||
|
<p class="p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</p>
|
||||||
|
<div class="e-note">
|
||||||
|
<p>
|
||||||
|
i have approximate knowledge of many things. perpetual student. (nb/ace/they)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
xmpp/email: a@trwnh.com<br/>
|
||||||
|
<a href="https://trwnh.com">https://trwnh.com</a><br/>
|
||||||
|
help me live: <a href="https://liberapay.com/trwnh">https://liberapay.com/trwnh</a> or paypal<br/>
|
||||||
|
</p>
|
||||||
|
<p>my triggers are moths and glitter</p>
|
||||||
|
</div>
|
||||||
|
<p class="p-gender-identity">nonbinary</p>
|
||||||
|
</article>
|
||||||
20
hugo/layouts/partials/site-footer.html
Normal file
20
hugo/layouts/partials/site-footer.html
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<footer class="site-footer">
|
||||||
|
<hr>
|
||||||
|
<div class="container">
|
||||||
|
<ul class="breadcrumbs">
|
||||||
|
{{ template "breadcrumb" (dict "p1" . "p2" .) }}
|
||||||
|
</ul>
|
||||||
|
<a href="#top">back to top</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
{{ define "breadcrumb" }}
|
||||||
|
{{ if .p1.Parent }}
|
||||||
|
{{ template "breadcrumb" (dict "p1" .p1.Parent "p2" .p2 ) }}
|
||||||
|
{{ else if not .p1.IsHome }}
|
||||||
|
{{ template "breadcrumb" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
|
||||||
|
{{ end }}
|
||||||
|
<li{{ if eq .p1 .p2 }} class="active"{{ end }}>
|
||||||
|
<a href="{{ .p1.RelPermalink }}">{{ .p1.Title }}</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
27
hugo/layouts/partials/site-header.html
Normal file
27
hugo/layouts/partials/site-header.html
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container">
|
||||||
|
<a href="/" class="site-masthead">
|
||||||
|
<p class="site-title">a</p>
|
||||||
|
</a>
|
||||||
|
<nav class="site-nav">
|
||||||
|
<ul>
|
||||||
|
{{ $currentPage := . }}
|
||||||
|
{{ range .Site.Menus.main }}
|
||||||
|
<li class='
|
||||||
|
{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
|
||||||
|
active
|
||||||
|
{{ end }}'>
|
||||||
|
<a href="{{ .URL | absLangURL }}">
|
||||||
|
{{ .Pre }}
|
||||||
|
<span>{{ .Name }}</span>
|
||||||
|
{{ .Post }}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div style="position: relative;">
|
||||||
|
<div id="top" style="scroll-margin-top: var(--header-height);"></div>
|
||||||
|
</div>
|
||||||
BIN
hugo/static/avatar.png
Normal file
BIN
hugo/static/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in a new issue