Compare commits

..

10 commits

Author SHA1 Message Date
456976d3e7 updates 2023-02-19 21:39:30 -05:00
daf8796fdc changes - TODO: a lot more 2023-02-19 21:39:29 -05:00
4fe8cb6d3f banners and pretty previews 2023-01-04 16:59:09 -05:00
a8b863383a icons standardization 2022-11-22 14:04:18 -05:00
491170555e minor audio update 2022-11-21 13:47:22 -05:00
0ff15da39c video player update 2022-11-21 13:39:05 -05:00
616a195301 multimedia enhancements 2022-11-09 15:44:15 -05:00
f06df39a8e footnotes 2022-10-08 01:35:51 -04:00
2a1568e205 webtorrent updates, minor changes 2022-10-05 05:59:24 -04:00
e5e8d389f7 webtorrent updates 2022-09-23 02:40:30 -04:00
30 changed files with 1821 additions and 561 deletions

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
{{partial "head" .}}
<title>404: Not Found</title>
</head>
<body>
{{partial "header" .}}
{{partial "banner-item" .}}
{{partial "spritesheet" .}}
<main>
<article>
<h1>Error 404</h1>
<p>Unfortunately this isn't a real page (yet?).<br>
If you believe this is a mistake please <a href="mailto:contact@libresolutions.network?subject=RE:%20404">get in touch</a>.</p>
<p>A search function is in the works...</p>
<p>Please consider <a href="about/#supporting-this-work">Supporting this work</a></p>
</article>
</main>
{{partial "footer" .}}
</body>
</html>

View file

@ -1,23 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{{partial "head" .}} {{partial "head" .}}
</head> </head>
<body> <body>
{{partial "header" .}} {{partial "header" .}}
{{partial "banner" .}}
{{partial "spritesheet" .}}
<main> <main>
<article> <section>
{{if .Content}} {{if .Content}}
<section> {{.Content}}
{{.Content}}
</section>
{{end}} {{end}}
{{ if .Pages }} <div class="gallery">
{{range .Pages}} {{ if .Pages }}
{{partial "item" .}} {{range .Pages}}
{{end}} {{partial "item" .}}
{{end}} {{end}}
</article> {{end}}
</div>
</section>
</main> </main>
{{partial "footer" .}} {{partial "footer" .}}
</body> </body>

View file

@ -8,7 +8,7 @@
<image> <image>
<url>{{.Site.BaseURL}}{{.Site.Params.default_img}}</url> <url>{{.Site.BaseURL}}{{.Site.Params.default_img}}</url>
</image> </image>
<atom:link href="{{.Site.BaseURL}}/rss" rel="self" type="application/rss+xml" />{{ range .Site.RegularPages }} <atom:link href="{{.Site.BaseURL}}/index.xml" rel="self" type="application/rss+xml" />{{ range .Site.RegularPages }}
<item> <item>
<title>{{ .Title }}</title> <title>{{ .Title }}</title>
<link>{{ .Permalink }}</link> <link>{{ .Permalink }}</link>
@ -22,7 +22,7 @@
<enclosure url="{{.Site.BaseURL}}{{.Params.audio}}" /> <enclosure url="{{.Site.BaseURL}}{{.Params.audio}}" />
{{end}}{{ if .Params.image}} {{end}}{{ if .Params.image}}
<image>{{.Site.BaseURL}}{{.Params.image}}</image>{{end}} <image>{{.Site.BaseURL}}{{.Params.image}}</image>{{end}}
<description>{{ .Summary | html}}</description> <description>{{- .Content | html -}}</description>
</item>{{ end }} </item>{{ end }}
</channel> </channel>
</rss> </rss>

View file

@ -5,11 +5,11 @@
</head> </head>
<body> <body>
{{partial "header" .}} {{partial "header" .}}
{{partial "banner-item" .}}
{{partial "spritesheet" .}}
<main> <main>
<article> <article>
<section> {{.Content}}
{{.Content}}
</section>
{{ if .Params.author}} {{ if .Params.author}}
<hr> <hr>
<section> <section>

View file

@ -1,32 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{{partial "head" .}} {{partial "head" .}}
</head> </head>
<body> <body>
{{partial "header" .}} {{partial "header" .}}
{{partial "banner" .}}
{{partial "spritesheet" .}}
<main> <main>
<section id="main-content"> <section id="main-content">
<article> <article>
{{.Content}} {{.Content}}
</article> </article>
{{ if .Site.Data.details.social_links}}
<hr>
<div>
<h2>Stay up to date</h2>
<div id="social-links">
{{range .Site.Data.details.social_links}}
<div class="social-link">
<a href="{{.href}}">
<img src="{{.img}}">
</a>
<a href="{{.href}}"><strong>{{.title}}</strong></a>
</div>
{{end}}
</div>
</div>
{{end}}
</section> </section>
<section id="sidebar"> <section id="sidebar">
{{partial "sidebar" .}} {{partial "sidebar" .}}

View file

@ -1,214 +0,0 @@
<!DOCTYPE html>
<html>
<head>
{{partial "head" .}}
<script defer src="/alpine.js" type="text/javascript"></script>
<script src="/helper.js"></script>
<style>
.interverse {
display: flex;
flex-direction: column;
align-items: center;
}
.interverse h1 {
text-align: center;
}
.interverse img {
max-width: 15rem;
max-height: 15rem;
}
.interverse section {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
box-shadow: none;
}
.interverse-connection-preview {
display: flex;
flex-direction: column;
padding: 1rem;
margin: 0.5rem;
align-items: center;
}
.interverse-connection {
margin: 0.25rem;
padding: 0.25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
}
.interverse-resource {
margin: 2rem;
}
#interverse-resource-groups {
align-items: flex-start;
}
</style>
</head>
<body>
{{partial "header" .}}
<main class="interverse" x-data x-if="Alpine.store('data')">
<section>{{.Content}}</section>
<section id="interverse-details">
<img x-bind:src="Alpine.store('data')['image']">
<div style="margin-left:3rem;">
<h1 x-text="Alpine.store('data')['name']"></h1>
<a x-bind:href="Alpine.store('data')['location']" x-text="Alpine.store('data')['location']"></a>
</div>
</section>
<section id="interverse-resource-groups">
<template x-for="(group,name) in Alpine.store('data')['resource_groups']">
<div>
<h1 x-text="name"></h1>
<div class="interverse-group">
<template x-for="resource in group">
<a x-bind:href="resource['location']">
<div class="interverse-resource">
<template x-if="resource['icon'] !=''">
<img class="interverse-resource-icon" x-bind:src="resource['icon']">
</template>
<h2 x-text="resource['label']"></h2>
<p x-text="resource['description']"></p>
</div>
</a>
</template>
</div>
</div>
</template>
</section>
<section id="interverse-resources">
<template x-for="resource in Alpine.store('data')['resources']">
<a x-bind:href="resource['location']">
<div class="interverse-resource">
<template x-if="resource['icon'] !=''">
<img class="interverse-resource-icon" x-bind:src="resource['icon']">
</template>
<h2 x-text="resource['label']"></h2>
<p x-text="resource['description']"></p>
</div>
</a>
</template>
</section>
<div id="interverse-groups">
<template x-for="(group,name) in Alpine.store('data')['connection_groups']">
<div>
<h1 x-text="name"></h1>
<section class="interverse-group">
<template x-for="link in group">
<div class="interverse-connection" x-data="{connected:false">
<template x-if="Alpine.store(link)['name'] !=''">
<div class='interverse-connection-preview'
x-on:click="initialize(link+'/.well-known/interverse')">
<h3 x-text="Alpine.store(link)['name']"></h3>
<img x-bind:src="Alpine.store(link)['image']">
<a x-bind:href="link" x-text="link"></a>
</div>
</template>
<template x-if="Alpine.store(link) == undefined">
<div>
<a x-bind:href="link">
<p x-text="link"></p>
</a>
</div>
</template>
</div>
</template>
</section>
</div>
</template>
</div>
<h3 style="text-align:center"></h3>
<section id="interverse-connections">
<template x-for="connection in Alpine.store('data')['connections']">
<div class="interverse-connection">
<template x-if="Alpine.store(connection)['version'] >=0">
<div x-on:click="initialize(connection+'/.well-known/interverse')">
<h3 x-text="Alpine.store(connection)['name']"></h3>
<template x-if="Alpine.store(connection)['image']!=''">
<img x-bind:src="Alpine.store(connection)['image']">
</template>
</div>
</template>
<template x-if="name == ''">
<div>
<a x-bind:href="connection" x-text="connection"></a>
</template>
</div>
</template>
</div>
<div id="interverse-contact">
<template x-for="contact in Alpine.store('data')['contact']">
<div class="interverse-contact">
</div>
</template>
</div>
</main>
<script>
var t = new Date();
var timestamp = t.getTime();
var main_url = "/.well-known/interverse";
if (getUrlParameter('s') && getUrlParameter("url")) {
var uri = "";
main_url = getUrlParameter('s') + "://" + getUrlParameter("url") + '/.well-known/interverse?t=' + timestamp;
} else {
if (getUrlParameter('url')) {
main_url = "https://" + getUrlParameter('url') + '/.well-known/interverse?t=' + timestamp;
}
}
document.addEventListener('alpine:init', function () {
initialize(main_url);
});
function initialize(url) {
Alpine.store("data", {});
fetchdata(url, function (e) {
data = JSON.parse(e.target.response);
raw_data = JSON.parse(e.target.response);
Alpine.store("data", data);
var connections = raw_data['connections'];
for (group in data['connection_groups']) {
for (link in data['connection_groups'][group]) {
connections.push(data['connection_groups'][group][link]);
}
}
var t = new Date();
var timestamp = t.getTime();
for (var i = 0; i < connections.length; i++) {
fetchdata(connections[i] + '/.well-known/interverse?t=' + timestamp, function (e) {
try {
dat = JSON.parse(e.target.response);
console.log(dat);
Alpine.store(dat['location'], dat);
} catch {
console.log("Failed to parse connection JSON");
}
});
}
});
}
</script>
</body>
{{partial "footer" .}}
</html>

View file

@ -0,0 +1,8 @@
{{if .Params.image }}
<section id="banner" style='background-image:url({{.Site.BaseURL}}{{.Params.image}});'>
<div id="banner-text">
<h1>{{.Title}}</h1>
<i>{{.Params.description}}</i>
</div>
</section>
{{end}}

View file

@ -0,0 +1,14 @@
{{if .Params.banner}}
<section id="banner" style='background-image:url({{.Site.BaseURL}}{{.Params.banner}})'>
{{if .Params.bannerTitle}}
<div id="banner-text">
{{if .Params.bannerTitle}}
<h1>{{.Params.bannerTitle}}</h1>
{{end}}
{{if .Params.bannerText}}
<i>{{.Params.bannerText}}</i>
{{end}}
</div>
{{end}}
</section>
{{end}}

View file

@ -1,6 +1,6 @@
<title>{{ .Title}}</title> <title>{{ .Title}}</title>
<link rel="stylesheet" href="{{.Site.BaseURL}}css/theme.css"> <link rel="stylesheet" href="{{.Site.BaseURL}}/css/theme.css">
<link rel="stylesheet" href="{{.Site.BaseURL}}style.css"> <link rel="stylesheet" href="{{.Site.BaseURL}}/style.css">
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="title" content="{{ .Site.Title }}"> <meta name="title" content="{{ .Site.Title }}">
@ -15,28 +15,17 @@
<meta property="og:video:url" content="{{.Site.BaseURL}}/embed?v={{.Params.video}}"> <meta property="og:video:url" content="{{.Site.BaseURL}}/embed?v={{.Params.video}}">
<meta property="og:video:secure_url" content="{{.Site.BaseURL}}/embed?v={{.Params.video}}"> <meta property="og:video:secure_url" content="{{.Site.BaseURL}}/embed?v={{.Params.video}}">
<meta property="og:type" content="video"> <meta property="og:type" content="video">
<meta name="twitter:player:width" content="480" />
<meta name="twitter:player:height" content="360" />
<link rel="alternate" type="application/rss+xml" href="{{.Site.BaseURL}}/index.xml"> <link rel="alternate" type="application/rss+xml" href="{{.Site.BaseURL}}/index.xml">
<meta property="twitter:player" content="{{.Site.BaseURL}}/embed?v={{.Params.video}}">
{{else}} {{else}}
{{if .Params.peertubeURL}} {{if .Params.peertubeURL}}
<meta property="og:video" content="{{.Params.peertubeURL}}"> <meta property="og:video" content="{{.Params.peertubeURL}}">
{{else}} {{else}}
{{if .Params.audioURL}} {{if .Params.audioURL}}
<meta property="og:audio" content="{{.Site.BaseURL}}media/{{.Params.audioURL}}"> <meta property="og:audio" content="{{.Site.BaseURL}}{{.Params.audioURL}}">
<meta property="og:type" content="audio"> <meta property="og:type" content="audio">
{{else}} {{else}}<meta property="og:type" content="website">
<meta property="og:type" content="website"> {{end}}{{end}}{{end}}{{ if .Params.image }}
<meta property="twitter:card" content="summary_large_image"> <meta property="og:image" content="{{.Site.BaseURL}}{{.Params.image}}">
{{end}} {{else}}<meta property="og:image" content="{{.Site.BaseURL}}logo.webp">
{{end}}
{{end}}
{{ if .Params.image }}
<meta property="og:image" content="{{.Site.BaseURL}}media/{{.Params.image}}">
<meta property="twitter:image" content="{{.Site.BaseURL}}media/{{.Params.image}}">
{{else}}
<meta property="og:image" content="{{.Site.BaseURL}}logo.png">
<meta property="twitter:image" content="{{.Site.BaseURL}}logo.png">
{{end}} {{end}}

View file

@ -1,5 +1,7 @@
<header> <header>
<img src="{{.Site.Params.default_img}}"> <a href="{{.Site.BaseURL}}">
<img src="{{.Site.Params.default_img}}">
</a>
<div> <div>
<h1>{{.Site.Title }}</h1> <h1>{{.Site.Title }}</h1>
<i>{{.Site.Params.subtitle}}</i> <i>{{.Site.Params.subtitle}}</i>
@ -10,5 +12,18 @@
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a> <a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
{{end}} {{end}}
</nav> </nav>
{{ if .Site.Data.details.social_links}}
<div id="social-links">
{{range .Site.Data.details.social_links}}
<div class="social-link">
<a href="{{.href}}">
<img src="{{.img}}">
</a>
<a href="{{.href}}"><strong>{{.title}}</strong></a>
</div>
{{end}}
</div>
{{end}}
</header> </header>

View file

@ -1,31 +1,19 @@
<section class="listing"> <section class="listing" {{if .Params.image}} style="background-image:url({{.Site.BaseURL}}{{.Params.image}}" {{end}}>
<a href="{{.Permalink}}">
{{ if .Params.gif}}
<video autoplay loop preload="true">
<source src="{{.Site.BaseURL}}{{.Params.gif}}">
</video>
{{else}}
{{ if .Params.video}}
<video controls preload="false">
<source src="{{.Site.BaseURL}}{{.Params.video}}">
</video>
{{else}}
{{if .Params.image}}
<img src="{{.Site.BaseURL}}{{.Params.image}}">
{{else}}
<img src="{{.Site.BaseURL}}{{.Site.Params.default_img}}">
{{end}}
{{end}}
{{end}}
</a>
<div class="listing-text"> <div class="listing-text">
<a href="{{.Permalink}}" ><h2>{{.Title}}</h2></a> <a href="{{.Permalink}}" ><h2>{{.Title}}</h2><i>{{.Params.description}}</i></a>
<p>{{.Params.description}}</p>
<span></span>
{{if .GetTerms "tags"}} {{if .GetTerms "tags"}}
<div class="tags"> <div class="tags">
{{ range (.GetTerms "tags")}} {{ range (.GetTerms "tags")}}
<a href="{{.Permalink}}">{{.LinkTitle}}</a> <a href="{{.Permalink}}">
<svg class="icon-small">
<use href="#tag"></use>
</svg>
<span>{{.LinkTitle}}</span>
</a>
{{end}} {{end}}
</div> </div>
{{end}} {{end}}

View file

@ -1,18 +1,33 @@
<div class="metadata"> <div class="metadata">
<div id="info">
{{$author := index .Site.Data.details.staff (.Params.author | default "default")}}
<div> <div>
{{$author := index .Site.Data.details.staff (.Params.author | default "default")}} <img src="{{$author.image}}" style="max-width:5rem;border-radius:5rem;">
<img src="{{$author.image}}" style="max-width:10rem;border-radius:5rem;">
<h2>{{$author.name}}</h2> <h2>{{$author.name}}</h2>
<p>Published: {{.Date | time.Format "Jan 02 2006"}}</p>
</div> </div>
<div> <div>
<h2>Tags</h2> <p>Published: {{.Date | time.Format "Jan 02 2006"}}
<div id="tags"> {{if .Params.updated}}
{{ range (.GetTerms "tags")}} <br>Published: {{.Params.updated | time.Format "Jan 02 2006"}}
<a href="{{.Permalink}}">{{.LinkTitle}}</a> {{end}}
{{end}} </p>
</div>
</div> </div>
</div> </div>
<div id="tags">
{{ range (.GetTerms "tags")}}
<a href="{{.Permalink}}" class="tag">
<svg class="icon">
<use href="#tag"></use>
</svg><span>
{{.LinkTitle}}</span></a>
{{end}}
</div>
</div>
<div>
<a href="mailto:{{$author.email}}?RE:subject={{.Title}}">Reply to this post</a>
</div>
</div> </div>

View file

@ -1,51 +1,14 @@
{{if .Site.Taxonomies.categories.featured}}
<div class="section-heading"> <h2 style="text-align:center;width:100%">Featured</h2>
<h1>Recent Content</h1> {{range .Site.Taxonomies.categories.featured.Pages.Reverse}}
</div> {{ partial "item" .}}
{{end}}
{{end}}
<h2 style="text-align:center;width:100%">Recent Content</h2>
{{range first 3 .Site.RegularPages}} {{range first 3 .Site.RegularPages}}
<section class="recent"> {{ partial "item" .}}
<a href="{{.Permalink}}">
{{ if .Params.gif}}
<video autoplay loop preload="true">
<source src="{{.Site.BaseURL}}{{.Params.gif}}">
</video>
{{else}}
{{ if .Params.video}}
<video controls preload="false">
<source src="{{.Site.BaseURL}}{{.Params.video}}">
</video>
{{else}}
{{if .Params.image}}
<img src="{{.Site.BaseURL}}{{.Params.image}}">
{{else}}
<img src="{{.Site.BaseURL}}/res/default.png">
</a>
{{end}}
{{end}}
{{end}}
</a>
<div>
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
<p>{{.Params.description}}</p>
</div>
</section>
{{end}} {{end}}
{{if .Site.Data.details.featured}}
<div class="section-heading">
<h2>Featured</h2>
</div>
{{ range .Site.Data.details.featured}}
<section class="featured">
<a href="{{.href}}">
<img src="{{.img}}">
</a>
<div>
<a href="{{.href}}">
<h3>{{.title}}</h3>
</a>
<p>{{.description}}</p>
</div>
</section>
{{end}}
{{end}}

View file

@ -0,0 +1,396 @@
<svg style="display:none;">
<symbol id="play"
viewBox="0 0 200 200"
>
<g>
<ellipse
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:9.68031;stroke-linejoin:round;stroke-opacity:1"
cy="99.93528"
cx="100.03613"
rx="95.000404"
ry="95.057236" />
<path
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m 68.503477,169.27357 c -5.757834,-3.32429 -4.829598,-135.759422 0,-138.547791 5.258545,-3.036022 106.900773,62.443169 106.900773,71.382371 0,9.46586 -101.820676,70.09842 -106.900773,67.16542 z"
/>
</g>
</symbol>
<symbol id="expand"
viewBox="0 0 200 200"
>
<g>
<path
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:9.40921;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M -0.03828632,0.02489375 H 71.298823 V 22.088195 H 23.062744 V 69.935263 H -0.03828632 Z"
/>
<path
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:9.40921;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M 200.00036,0.0012511 V 71.338352 h -22.0633 V 23.102272 H 130.09 V 0.0012511 Z"
/>
<path
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:9.40921;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m 200.00767,199.97589 h -71.3371 v -22.0633 h 48.23607 v -47.84707 h 23.10103 z"
/>
<path
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:9.40921;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m -0.03097146,199.99953 v -71.3371 H 22.032328 v 48.23608 h 47.847065 v 23.10102 z"
/>
</g>
</symbol>
<symbol id="headphones"
viewBox="0 0 210 210"
>
<g>
<path
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:14.6469;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="M 38.511665,103.48123 A 68.018555,68.018555 0 0 1 106.53022,35.462677 68.018555,68.018555 0 0 1 174.54877,103.48123"
/>
<ellipse
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke:none;stroke-width:14.6469;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
cx="66.965881"
cy="181.87686"
rx="2.6438539"
ry="28.201105" />
<path
style="opacity:0.99;fill-opacity:0.992157;stroke-width:15;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m -106.70314,157.58701 a 40.838184,44.488354 0 0 1 -20.41909,38.52804 40.838184,44.488354 0 0 1 -40.83818,0 40.838184,44.488354 0 0 1 -20.4191,-38.52804"
transform="rotate(-90)" />
<path
style="opacity:0.99;fill-opacity:0.992157;stroke-width:15;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m 187.35309,-52.263748 a 40.838184,44.488354 0 0 1 -20.41909,38.528045 40.838184,44.488354 0 0 1 -40.83819,-10e-7 40.838184,44.488354 0 0 1 -20.41909,-38.528044"
transform="rotate(90)" />
<rect
style="opacity:0.99;fill-opacity:0.992157;stroke-width:1.02322;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
width="9.0904961"
height="95.662933"
x="50.762516"
y="99.513329" />
<rect
style="opacity:0.99;fill-opacity:0.992157;stroke-width:1.02322;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
width="9.0904961"
height="95.662933"
x="153.0656"
y="99.7257" />
</g>
</symbol>
<symbol id="substack"
viewBox="0 0 200 200"
>
<g>
<path
style="opacity:0.99;fill:none !important;;fill-opacity:1;stroke-width:22.7343;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="M 35.819292,74.079299 H 164.18071"
/>
<path
style="opacity:0.99;fill:none !important;;fill-opacity:1;stroke-width:22.7343;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="M 35.891493,29.66426 H 164.25291"
/>
<path
style="opacity:0.99;fill-opacity:1;stroke:none;stroke-width:6.14662;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-opacity:1"
d="M 24.935915,106.69884 H 175.06409 v 84.5545 l -74.82841,-43.26855 -75.299765,43.26855 z"
/>
</g>
</symbol>
<symbol id="tag"
viewBox="0 0 200 200"
>
<g>
<path
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="m 6.281763,111.86211 c 0,12.99786 67.485752,80.84067 77.193916,80.84067 9.757909,0 74.315171,-70.29527 89.112641,-85.09274 6.99227,-6.99228 6.83158,-88.060832 6.83158,-88.060832 0,0 -77.7666,3.606593 -84.025496,7.220168 C 76.605972,37.616882 6.281763,99.864196 6.281763,111.86211 Z"
/>
<circle
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
cx="138.22505"
cy="-78.649734"
r="12.46391"
transform="rotate(46.321904)" />
<path
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="m 32.307964,111.18133 59.64203,59.64203 z"
/>
<path
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="M 45.070354,98.671666 104.71238,158.3137 Z"
/>
<path
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="m 57.643191,85.97246 59.642029,59.64203 z"
/>
</g>
</symbol>
<symbol id="prev"
viewBox="0 0 120 120"
>
<g>
<path
style="fill:none !important;;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:20;stroke-dasharray:none;stroke-opacity:1"
d="M 116.6333,74.605732 H 49.837743 V 97.8903 L 3.3665561,59.544515 49.7379,22.109708 v 22.675377 h 66.8954 z"
/>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:19.4028px;line-height:1.25;font-family:sans-serif;fill-opacity:1;stroke:none;stroke-width:0.264583"
x="39.456932"
y="66.934982"
><tspan
style="font-weight:bold;font-size:19.4028px;stroke-width:0.264583"
x="39.456932"
y="66.934982">Prev</tspan></text>
</g>
</symbol>
<symbol id="btc"
viewBox="0 0 200 200"
>
<g>
<circle
style="opacity:0.99;fill:none !important;;fill-opacity:1;stroke-width:8;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
cx="100"
cy="100"
r="92.324692" />
<text
xml:space="preserve"
style="font-weight:bold;font-size:179.605px;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans Bold';text-align:center;text-anchor:middle;opacity:0.99;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
x="83.549644"
y="186.25789"
transform="rotate(-15.468221)"><tspan
style="fill-opacity:1;stroke:none;stroke-width:4;stroke-dasharray:none"
x="83.549644"
y="186.25789">B</tspan></text>
<rect
style="opacity:0.99;fill-opacity:1;stroke:none;stroke-width:7.99999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
width="9.3419447"
height="15.677465"
x="43.400417"
y="47.026237"
rx="0"
ry="0"
transform="rotate(-15.468221)" />
<rect
style="opacity:0.99;fill-opacity:1;stroke:none;stroke-width:7.99999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
width="9.3419447"
height="15.677465"
x="66.457565"
y="47.152031"
rx="0"
ry="0"
transform="rotate(-15.468221)" />
<rect
style="opacity:0.99;fill-opacity:1;stroke:none;stroke-width:7.99999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
width="9.3419447"
height="15.677465"
x="43.380985"
y="186.2144"
rx="0"
ry="0"
transform="rotate(-15.468221)" />
<rect
style="opacity:0.99;fill-opacity:1;stroke:none;stroke-width:7.99999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
width="9.3419447"
height="15.677465"
x="66.41478"
y="186.15088"
rx="0"
ry="0"
transform="rotate(-15.468221)" />
<rect
style="opacity:0.99;fill-opacity:1;stroke:none;stroke-width:7.99999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
width="28.949465"
height="19.075401"
x="22.285784"
y="167.17883"
rx="0"
ry="0"
transform="rotate(-15.468221)" />
<rect
style="opacity:0.99;fill-opacity:1;stroke:none;stroke-width:7.99999;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
width="28.949465"
height="19.075401"
x="23.174849"
y="62.679756"
rx="0"
ry="0"
transform="rotate(-15.468221)" />
</g>
</symbol>
<symbol id="loop"
viewBox="0 0 200 200"
>
<g>
<ellipse
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:9.68031;stroke-linejoin:round;stroke-opacity:1"
cy="99.93528"
cx="100.03613"
rx="95.000404"
ry="95.057236" />
<path
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:12.8675;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="M 162.21491,61.314175 A 74.835358,74.835358 0 0 1 154.64285,152.9351 74.835358,74.835358 0 0 1 63.965737,168.08076 74.835358,74.835358 0 0 1 27.028787,83.894118 74.835358,74.835358 0 0 1 99.575333,27.425293" />
<path
style="opacity:0.99;fill-opacity:0.992157;stroke-width:1.03207;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="M 98.430641,10.898139 V 44.814313 L 123.1298,27.657939 Z"
/>
</g>
</symbol>
<symbol id="shrink"
viewBox="0 0 200 200"
>
<g>
<path
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:9.40921;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M 71.298823,69.935263 H -0.03828632 V 47.871962 H 48.197793 V 0.02489375 h 23.10103 z"
/>
<path
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:9.40921;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M 130.09,71.338352 V 0.0012511 h 22.0633 V 48.237331 h 47.84706 v 23.101021 z"
/>
<path
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:9.40921;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m 128.67057,130.06552 h 71.3371 v 22.0633 H 151.7716 v 47.84707 h -23.10103 z"
/>
<path
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:9.40921;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m 69.879393,128.66243 v 71.3371 H 47.816094 V 151.76345 H -0.03097146 v -23.10102 z"
/>
</g>
</symbol>
<symbol id="pause"
viewBox="0 0 200 200"
>
<g>
<ellipse
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:9.68031;stroke-linejoin:round;stroke-opacity:1"
cy="99.93528"
cx="100.03613"
rx="95.000404"
ry="95.057236" />
<rect
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:0.903084;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
width="34.369987"
height="121.93053"
x="57.219501"
y="42.457039" />
<rect
style="opacity:0.99;fill-opacity:0.992157;stroke:none;stroke-width:0.903084;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
width="34.369987"
height="121.93053"
x="115.24053"
y="42.650131" />
</g>
</symbol>
<symbol id="email"
viewBox="0 0 210 210"
>
<g>
<path
style="fill:none !important;;fill-opacity:1;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 199.7532,30.626328 V 156.0798 H 6.7479992 V 30.626328 Z"
/>
<path
style="fill:none !important;;fill-opacity:1;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 199.7532,30.626328 155.51095,121.36055 H 43.227339 L 8.4585796,30.626328"
/>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:66.3222px;line-height:1.25;font-family:sans-serif;fill-opacity:1;stroke:none;stroke-width:0.264583"
x="72.000824"
y="94.79673"
><tspan
style="font-weight:bold;font-size:66.3222px;stroke-width:0.264583"
x="72.000824"
y="94.79673">@</tspan></text>
</g>
</symbol>
<symbol id="next"
viewBox="0 0 120 120"
>
<g>
<path
style="fill:none !important;;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:20;stroke-dasharray:none;stroke-opacity:1"
d="M 3.3666991,45.394268 H 70.162259 V 22.1097 L 116.63345,60.455485 70.262102,97.890292 V 75.214915 H 3.3666991 Z"
/>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:19.4028px;line-height:1.25;font-family:sans-serif;fill-opacity:1;stroke:none;stroke-width:0.264583"
x="39.456932"
y="66.934982"
><tspan
style="font-weight:bold;font-size:19.4028px;stroke-width:0.264583"
x="39.456932"
y="66.934982">Next</tspan></text>
</g>
</symbol>
<symbol id="link"
viewBox="0 0 200 200"
>
<g>
<path
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:13.2824;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="m 124.73051,54.085411 32.40251,-37.913745 c 14.1507,-16.55752582 47.43594,12.112318 33.3954,28.540963 L 121.22371,125.80514 C 106.92066,142.54096 73.29526,114.26912 87.828318,97.264184 L 97.64213,85.781162"
/>
<path
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:13.2824;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="M 82.334206,140.08015 49.931702,177.99389 C 35.780999,194.55141 2.4957562,165.88157 16.536295,149.45293 L 85.841002,68.360413 C 100.14406,51.624595 133.76946,79.896436 119.2364,96.901374 l -9.81381,11.483016"
/>
</g>
</symbol>
<symbol id="rss"
viewBox="0 0 200 200"
>
<g>
<rect
style="opacity:0.99;fill:none !important;;fill-opacity:0.992157;stroke-width:5.45099;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
width="193.26019"
height="193.26019"
x="3.3699021"
y="3.3699021"
ry="30.002089" />
<path
style="opacity:0.99;fill-opacity:0.992157;stroke-width:4.99999;stroke-linejoin:round;stroke-miterlimit:25;stroke-dasharray:none;stroke-opacity:1"
d="m 25.944181,155.41081 a 26.28293,26.28293 0 0 1 26.42547,-26.09156 26.28293,26.28293 0 0 1 26.139523,26.37803 26.28293,26.28293 0 0 1 -26.330502,26.1874 26.28293,26.28293 0 0 1 -26.235185,-26.28289" />
<path
style="opacity:0.99;stroke-width:4;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25"
d="m 28.637164,75.172279 c -0.900788,0 0,18.954039 0,18.954039 0,0 33.553756,2.826066 57.320652,26.592962 25.956314,25.95631 22.707424,64.01135 22.707424,64.01135 h 19.95267 c 0,0 -1.62239,-51.39849 -28.14709,-77.92319 C 79.262441,85.599061 54.800874,75.172279 28.637164,75.172279 Z"
/>
<path
style="opacity:0.99;stroke-width:5.88811;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:25"
d="m 30.597006,21.978507 v 23.437232 c 0,0 55.693972,5.054483 88.892344,38.252831 38.87023,38.87021 36.05298,99.58282 36.05298,99.58282 h 22.22907 c 0,0 -0.46149,-73.73327 -41.43329,-114.705068 C 99.709109,31.917324 30.597006,21.978507 30.597006,21.978507 Z"
/>
</g>
</symbol>
</svg>

After

Width:  |  Height:  |  Size: 20 KiB

View file

@ -1,3 +1,187 @@
<audio controls preload="false"> <style>
<source src='{{.Site.BaseURL}}{{.Get "src" }}'> .audio-player {
</audio> display: flex;
flex-direction: row;
align-items: center;
justify-content:center;
width: 100%;
}
.audio-player>*{
height:fit-content;
padding:0.25rem;
}
.audio-player p{
width: fit-content;
}
.media-seek {
width: 100%;
}
.audio-player{
border: 0.15rem solid var(--theme-accent);
padding:0.5rem;
border-radius: 0.5rem;
color:var(--theme-accent);
}
.audio-player>*{
margin:5px;
}
.audio-player select, .audio-player button{
background-color: transparent;
border-color: var(--theme-accent);
color:var(--theme-accent);
border-radius: 3px;
padding:0.5rem;
}
.icon svg{
width:2.25rem;
height:2.25rem;
z-index: -1;
background-color: transparent;
pointer-events: none;
}
.icon path,
.icon rect {
stroke: var(--theme-accent);
fill: var(--theme-accent);
}
.icon svg circle {
stroke: var(--theme-accent);
fill: transparent;
stroke-width: 6;
}
@keyframes spin-icon {
0%{rotate:0;}
100%{rotate:360deg;}
}
.spin{
animation:spin-icon 3s linear infinite;
}
</style>
<div class="media-container">
<div class="audio-player">
<audio onended="audio_end(event)" onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
</audio>
<div class="icon" onclick="toggle_play_audio(event)">
<svg viewBox="0 0 120 120"><circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /><path style="opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1" d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z" id="path1060"> </svg>
</div>
<input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
<select onchange="update_audio_speed(event)">
<option value="1" selected>1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
<option value="2.5">2.5x</option>
<option value="3">3x</option>
</select>
<div class="audio-preview">
</div>
<p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
<div class="icon" onclick="toggle_loop_audio(event)">
<svg viewBox="0 0 120 120" version="1.1"> <circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 49.086093,104.69797 53.85938,96.982017 C -0.70319734,64.562086 46.019709,40.176232 48.130402,38.442953 c 0,0 4.487934,4.354976 5.546329,5.309403 1.84557,1.664276 5.129158,-20.199369 5.129158,-20.199369 l -22.368136,0.483004 5.548034,5.713299 c 0,0 -56.905236,37.386495 7.100306,74.94868 z" id="path4435" /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="m 72.493272,21.303543 -4.773287,7.715948 c 54.562575,32.419931 7.839671,56.805785 5.728978,58.539064 0,0 -4.487934,-4.354976 -5.546329,-5.309403 -1.845568,-1.664276 -5.129158,20.199368 -5.129158,20.199368 l 22.368136,-0.483 -5.548034,-5.713302 c 0,0 56.905242,-37.386495 -7.100306,-74.948675 z" id="path4435-7" /></svg>
</div>
<script src="/js/icons.js"></script>
<script>
function audio_end(event){
p = event.target.parentElement;
if (!event.target.loop){
p.children[1].innerHTML=icons['play'];
}
}
function setup_audio_metadata(event) {
audio = event.target;
var seek = audio.parentElement.children[2];
seek.min = 0;
seek.max = audio.duration;
seek.value = audio.currentTime;
audio.parentElement.children[5].children[0].innerHTML = "" + timeToText(audio.currentTime) + "/";
audio.parentElement.children[5].children[1].innerHTML = "" + timeToText(audio.duration);
}
function toggle_loop_audio(event) {
audio = event.target.parentElement.children[0];
audio.loop = !audio.loop;
if (audio.loop){
event.target.children[0].classList.add("spin");
}
else{
event.target.children[0].classList.remove("spin");
}
}
function update_audio_time(event) {
audio = event.target.parentElement.children[0];
audio.currentTime = event.target.value;
}
function toggle_play_audio(event) {
el = event.target;
audio = el.parentElement.children[0];
speed = el.parentElement.children[3].value;
audio.playbackRate = speed;
if (audio.paused) {
audio.play();
el.innerHTML = icons['pause'];
}
else {
audio.pause();
el.innerHTML = icons['play'];
}
}
function update_audio_speed(event) {
el = event.target;
audio = event.target.parentElement.children[0];
audio.playbackRate = el.value;
}
function timeToText(t) {
hours = 0;
minutes = 0;
seconds = 0;
if (t > 60 * 60) {
hours = Math.floor(t / 60 / 60);
t = t - hours * 60 * 60;
}
if (t > 60) {
minutes = Math.floor(t / 60);
t = t - minutes * 60
}
if (t > 1) {
seconds = Math.floor(t);
}
text = "";
if (hours > 0) {
text += hours + ":";
}
if (minutes > 0 || hours > 0) {
if (minutes == 0) {
minutes = "00"
}
if (minutes < 10) {
text += "0"
}
text += minutes + ":"
}
if (seconds == 0 && (minutes > 0 || hours > 0)) {
seconds = "00";
}
if (seconds < 10) {
text += "0";
}
text += seconds
return text;
}
</script>
</div>
<noscript>
<style>
.audio-player {
display: none;
}
</style>
<audio controls preload="false">
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
</audio>
</noscript>
</div>

View file

@ -1,4 +1,5 @@
{{ if .Get "href"}} <div class="image-container">
{{ if .Get "href"}}
<a href='{{.Get "href"}}'> <a href='{{.Get "href"}}'>
{{end}} {{end}}
<img loading="lazy" <img loading="lazy"
@ -12,3 +13,11 @@ style='float:{{.Get "float"}}'
{{ if .Get "href"}} {{ if .Get "href"}}
</a> </a>
{{end}} {{end}}
{{if .Get "caption"}}
<p class="caption">
{{.Get "caption"}} {{if .Get "source"}}<a href='{{.Get "source"}}'>Source</a>{{end}}
</p>
{{end}}
</div>

View file

@ -1,10 +1,10 @@
<a href="{{ .Get 0 }}" class="link-preview"> <div class="listing" style="background-image:url({{.Get 3}})">
{{if .Get 3}} <div class="listing-text">
<img src='{{.Get 3}}'> <a href="{{ .Get 0 }}" style="text-decoration:none;">
{{end}} <h3>{{ .Get 1 }}</h3>
<div> <i>{{.Get 2 }}</i>
<h3>{{ .Get 1 }}</h3> </a>
<p>{{.Get 2 }}</p> <a href="{{ .Get 0 }}" style="position: absolute;top:0;left:0;height:100%;width:100%;background-color: transparent;margin:0;z-index:-1;">
</a>
</div> </div>
</a> </div>

View file

@ -1,3 +1,220 @@
<video {{if .Get "autoplay"}}autoplay muted loop preload="true"{{else}}controls preload="false"{{end}}> <style>
<source src='{{.Site.BaseURL}}{{.Get "src" }}'> .video-player {
</video> display: flex;
flex-direction: column;
align-items: center;
}
.video-controls {
display: flex;
flex-direction: row;
width: 100%;
height: fit-content;
}
.video-controls p {
width: min-content;
}
.media-seek {
width: 100%;
}
.video-controls>* {
margin: 5px;
}
.video-controls select,
.video-controls button {
background-color: transparent;
border-color: var(--theme-accent);
color: var(--theme-accent);
border-radius: 3px;
padding: 0.5rem;
}
.icon svg {
width: 2.25rem;
height: fit-content;
z-index: -1;
background-color: transparent;
pointer-events: none;
}
.icon path,
.icon rect {
stroke: var(--theme-accent);
fill: var(--theme-accent);
}
.icon svg circle {
stroke: var(--theme-accent);
fill: transparent;
stroke-width: 6;
}
.video-player:fullscreen{
height:100vh;
width:100vw;
}
.video-player:fullscreen video{
max-height: 100vh;
height:100%;
max-width: 100vw;
width: 100vw;
}
</style>
<script src="/js/icons.js"></script>
<div class="media-container">
<div class="video-player">
<video preload="metadata" onclick="playthis(event)" onloadedmetadata="setup_video_metadata(event)"
ontimeupdate="setup_video_metadata(event)">
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
</video>
<div class="video-controls">
<div onclick="toggle_video_play(event)" class="icon">
<svg viewBox="0 0 120 120"><circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /><path style="opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1" d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z" id="path1060"> </svg>
</div>
</button>
<input class="media-seek" type="range" onchange="update_video_time(event)" value="0">
<select onchange="update_video_speed(event)">
<option value="1" selected>1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
<option value="2.5">2.5x</option>
<option value="3">3x</option>
</select>
<p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
<div class="icon" onclick="fullscreen(event)">
<svg viewBox="0 0 120 120">
<path
style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 46.964564,56.005523 29.64354,38.443145 15.744327,51.812481 15.624368,16.779513 l 36.623948,0.03226 -13.177737,14.17536 16.622539,16.392689 z"
id="path8948-3"/>
<path
style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 55.129887,73.388205 38.422614,90.210417 51.067135,104.89922 16.395468,104.33333 16.434945,67.605641 30.111493,81.28219 46.504182,64.659651 Z"
id="path8948-3-5"/>
<path
style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 63.363444,46.935211 80.997081,30.825588 67.627745,17.036604 102.68744,17.447746 102.62846,52.646518 88.168059,39.041226 71.989147,55.663767 Z"
id="path8948-3-6"/>
<path
style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 71.956318,65.743071 91.343851,82.735377 104.06395,70.648701 103.79532,105.13832 69.166628,105.79193 82.579575,93.184265 63.227764,74.368773 Z"
id="path8948-3-5-2"/>
</svg>
</div>
</div>
<script>
function setup_video_metadata(event) {
video = event.target;
var seek = video.parentElement.children[1].children[1];
seek.min = 0;
seek.max = video.duration;
seek.value = video.currentTime;
details = video.parentElement.children[1].children[3].children;
details[0].innerHTML = timeToText(video.currentTime) + "/";
details[1].innerHTML = timeToText(video.duration);
}
function playthis(event) {
if (event.target.paused) {
event.target.playbackRate = video.parentElement.children[1].children[2].value;
event.target.play();
video.parentElement.children[1].children[0].innerHTML = icons['pause'];
}
else {
event.target.pause();
video.parentElement.children[1].children[0].innerHTML = icons['play'];
}
}
function fullscreen(event) {
video = event.target.parentElement.parentElement;
if (document.fullscreenElement) {
document.exitFullscreen();
event.target.innerHTML = icons['expand'];
}
else {
video.requestFullscreen();
event.target.innerHTML = icons['shrink'];
}
}
function toggle_video_play(event) {
video = event.target.parentElement.parentElement.children[0];
if (video.paused) {
video.playbackRate = video.parentElement.children[1].children[2].value;
video.play();
video.parentElement.children[1].children[0].innerHTML = icons['pause'];
}
else {
video.pause();
video.parentElement.children[1].children[0].innerHTML = icons['play'];
}
}
function update_video_speed(event) {
video = event.target.parentElement.parentElement.children[0];
video.playbackRate = event.target.value;
}
function update_video_time(event) {
video = event.target.parentElement.parentElement.children[0];
video.currentTime = event.target.value;
}
function timeToText(t) {
hours = 0;
minutes = 0;
seconds = 0;
if (t > 60 * 60) {
hours = Math.floor(t / 60 / 60);
t = t - hours * 60 * 60;
}
if (t > 60) {
minutes = Math.floor(t / 60);
t = t - minutes * 60
}
if (t > 1) {
seconds = Math.floor(t);
}
text = "";
if (hours > 0) {
text += hours + ":";
}
if (minutes > 0 || hours > 0) {
if (minutes == 0) {
minutes = "00"
}
if (minutes < 10) {
text += "0"
}
text += minutes + ":"
}
if (seconds == 0 && (minutes > 0 || hours > 0)) {
seconds = "00";
}
if (seconds < 10) {
text += "0";
}
text += seconds
return text;
}
</script>
</div>
<noscript>
<style>
.video-player {
display: none;
}
</style>
<video controls preload="false">
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
</video>
</noscript>
<p class="caption">{{.Get "caption"}} {{if .Get "source"}}<a href='{{.Get "source"}}'>Source</a>{{end}}
</p>
</div>

View file

@ -1,16 +0,0 @@
<script src="/webtorrent.js"></script>
<div id="wtmedia">
</div>
<script>
const client = new WebTorrent(tracker=false,dht=true,webSeeds=true);
const magnetURI = '{{.Get 0}}';
client.add(magnetURI, function (torrent) {
// Got torrent metadata!
console.log('Client is downloading:', torrent.infoHash)
torrent.files.forEach(function (file) {
// Display the file by appending it to the DOM. Supports video, audio, images, and
// more. Specify a container element (CSS selector or reference to DOM node).
file.appendTo('#wtmedia')
})
})
</script>

View file

@ -1,3 +0,0 @@
<a href="https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://yesterweb.org/">Previous</a>
<a href="https://webring.yesterweb.org/noJS/index.php?d=rand&url=https://yesterweb.org/">Random</a>
<a href="https://webring.yesterweb.org/noJS/index.php?d=next&url=https://yesterweb.org/">Next</a>

View file

@ -2,7 +2,7 @@
## A hugo Theme ## A hugo Theme
![](https://gabe.rocks/themes/valor//media/freedom.png) ![](https://gabe.rocks/themes/valor//media/freedom.webp)
### Check out the demo & documentation [here](https://gabe.rocks/themes/freedom/) ### Check out the demo & documentation [here](https://gabe.rocks/themes/freedom/)

View file

@ -1,16 +1,10 @@
body{ body {
--theme-color-primary: white; --theme-color-primary: white;
--theme-color-secondary: black; --theme-color-secondary: black;
--theme-color-accent: #0727c5; --theme-accent: #06225a;
}
@media screen and (prefers-color-scheme:dark){
body{
--theme-color-primary:black;
--theme-color-secondary:white;
--theme-color-accent: #dcb806;
}
} }
body { body {
line-height: 1.25; line-height: 1.25;
width: 100vw; width: 100vw;
@ -34,89 +28,154 @@ body {
max-height: 70vh; max-height: 70vh;
z-index: -1; z-index: -1;
} }
header{
margin-top:1rem; header {
margin-top: 5px;
} }
header,footer{ header img {
max-height: 8rem;
}
header,
footer {
text-align: center; text-align: center;
width:100vw; width: 100vw;
} }
nav{
border-radius:30%; nav {
border-radius: 30%;
} }
a { a {
color: var(--theme-color-accent); color: var(--theme-accent);
} }
a:visited { a:visited {
color: var(--theme-color-accent); color: var(--theme-accent);
} }
hr { hr {
width: 100%; width: 100%;
margin-top: 2rem; margin-top: 15px;
margin-bottom: 2rem; margin-bottom: 15px;
color: var(--theme-color-accent); color: var(--theme-accent);
} }
main,aside { main,
padding:2.5rem; aside {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
justify-content: space-evenly; justify-content: space-evenly;
padding:1rem; padding: 5px;
padding-top: 0;
}
article{
max-width:90vw; max-width:90vw;
} }
main>section{ article > *{
margin:1rem; max-width:90vw;
padding:0.5rem;
} }
main{
padding-left:5rem;
padding-right:5rem;
} #main-content {
#main-content{ min-width: 30vw;
min-width:30vw;
} }
.listing { .listing {
width: 100%; margin: 15px;
margin-bottom: 1rem; width:540px;
height:280px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: center;
} background-size:cover;
.listing *{ background-repeat: no-repeat;
margin:0; background-position-x: center;
} background-position-y: bottom;
.listing-text{ border-radius: 15px;
width:80%; text-align: center;
max-width:40rem; margin-bottom: 25px;
padding:1rem;
}
.listing img,
.listing video{
width:25rem;
max-width:25vw;
}
.listing h2, .listing p{
margin:0;
text-align: left;
} }
.listing-text {
width:100%;
height:100%;
border-radius: 15px;
display:flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
font-size:18px;
font-weight: bolder;
text-decoration: none !important;
background-color: rgb(255, 255, 255,0.25);
}
.listing-text h2{
margin:0;
}
.listing-preview { .listing-text >a{
width:fit-content;
border-bottom-style:none;
background-color: rgba(255,255,255,0.25);
backdrop-filter: blur(55px);
padding:25px;
border-radius:25px;
max-width:80%;
text-align: center;
}
.listing-text:hover >a{
animation:blur-out 0.2s;
background-color: transparent;
backdrop-filter: none;
}
@keyframes blur-out{
from{background-color: rgba(255,255,255,0.25);}
to{background-color: transparent;
backdrop-filter: blur(0px);}
}
@keyframes blur-in{
from {
backdrop-filter: blur(0px);
background-color: rgb(255, 255, 255,0.15);
}
to {
backdrop-filter: blur(15px);
background-color: rgb(255, 255, 255,0.5);
}
}
.listing-text:hover{
animation: blur-in 0.2s;
backdrop-filter: blur(15px);
background-color: rgb(255, 255, 2550,0.5);
}
.listing .tags a {
font-size:12px;
}
.listing .tags {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; justify-content: space-evenly;
justify-content: center;
} }
.listing a{ .tags>a {
width: fit-content; margin: 5px;
padding:2px;
border-radius: 3px;
font-size:14px;
font-weight: bolder;
display:flex;
flex-direction: row;
align-items: center; background-color: var(--theme-accent);
color: var(--theme-color-primary);
border-radius: 1.25rem;
padding:5px;
} }
@ -132,14 +191,13 @@ audio {
.metadata { .metadata {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; align-items: center;
align-items: flex-start;
justify-content: center; justify-content: center;
} }
.metadata>div { .metadata>div {
margin: 1rem; margin: 1rem;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
@ -162,6 +220,7 @@ audio {
} }
header { header {
text-align: center; text-align: center;
background-color: transparent; background-color: transparent;
@ -170,7 +229,6 @@ header {
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
font-size:1.25rem
} }
nav { nav {
@ -181,38 +239,75 @@ nav {
justify-content: space-evenly; justify-content: space-evenly;
} }
nav>* { nav>a {
margin: 1rem; margin: 10px;
} }
section { section {
display:flex;
flex-direction: column;
align-items: center;
}
h1{
font-size:200%;
}
h2{
font-size:150%;
}
article {
margin-top: 1rem;
margin-bottom: 1rem;
padding: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-family:Verdana, Geneva, Tahoma, sans-serif; }
max-width:80rem;
font-size: 1.5rem; section div {
display: flex;
flex-direction: column;
align-items: center;
}
article {
margin-top: 1rem;
margin-bottom: 1rem;
padding: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 60rem;
font-size:25px;
}
article table {
width: 80%;
}
article .media-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.media-container a {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
article td,
article th {
width: fit-content;
}
article .footnotes {
width: 100%;
}
article .footnotes a {
text-decoration: none;
}
article sup a {
text-decoration: none;
} }
blockquote { blockquote {
margin-left: 10%; margin-left: 10%;
padding-left: 2.5rem; padding-left: 2.5rem;
width:80%; width: 80%;
border-left: 0.5rem solid var(--theme-color-accent); border-left: 0.5rem solid var(--theme-accent);
font-style: italic; font-style: italic;
} }
@ -226,8 +321,10 @@ article ul {
article>a { article>a {
text-align: center; text-align: center;
} }
article h2,h1{
width:100%; article h2,
h1 {
width: 100%;
text-align: center; text-align: center;
} }
@ -245,32 +342,34 @@ article h3 {
text-decoration: underline; text-decoration: underline;
} }
article img{ article img {
align-self: center; align-self: center;
max-width: 80%; max-width: 95%;
max-height: 50vh; max-height:60vh
} }
article video, article video,
article iframe { article iframe {
max-width: 60rem; height: 40rem;
width: 80%; width: 95%;
height:30rem; max-height: 60vh;
background-color: transparent; background-color: transparent;
} }
article>section>a{ article>section>a {
display:flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
table{ table {
width:fit-content; width: fit-content;
} }
td, td,
th { th {
margin: 0; margin: 0;
@ -279,57 +378,67 @@ th {
text-align: left !important; text-align: left !important;
} }
video{ video {
background-color:black; background-color: black;
} }
.link-preview{ .link-preview {
display:flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
padding:1.5%; padding: 1.5%;
justify-content: center; justify-content: left;
text-decoration: none; text-decoration: none;
text-align: left; text-align: left;
width:80%; width: 80%;
box-shadow: 0px 0px 0.5rem var(--theme-accent);
border-radius: 2rem;
overflow: hidden;
margin-bottom: 1rem;
margin-top: 1rem;
} }
.link-preview>div{
margin:1rem; .link-preview>div {
margin: 1rem;
} }
.link-preview>img{
max-width: 20%; .link-preview>img {
max-width: 20rem;
} }
.link-preview>div>p{
.link-preview>div>p {
text-decoration: none !important; text-decoration: none !important;
color: var(--theme-color-secondary); color: var(--theme-color-secondary);
} }
#sidebar { #sidebar {
padding-top:0; padding-top: 0;
align-items: flex-start; align-items: flex-start;
} }
.recent *, .recent *,
.featured *{ .featured * {
margin:0.25rem; margin: 0.25rem;
padding:0; padding: 0;
text-align: left; text-align: left;
} }
.recent p, .recent p,
.featured p{ .featured p {
min-width: 20vw; min-width: 20vw;
} }
.recent img, .recent img,
.featured img, .featured img,
.recent video, .recent video,
.featured video{ .featured video {
max-width:15vw; max-width: 15vw;
margin:0.25rem; margin: 0.25rem;
} }
#social-links{ #social-links {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -337,118 +446,298 @@ video{
justify-content: space-evenly; justify-content: space-evenly;
} }
.social-link{ .social-link {
display:flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin:1rem; margin: 1rem;
} }
.social-link img{ .social-link img {
width:5rem; width: 2.5rem;
} }
@media print { @media print {
body{ body {
background-color: white; background-color: white;
} }
header,footer{
display:none; header,
footer {
display: none;
} }
body>img{
display:none; body>img {
display: none;
} }
img{
img {
max-height: 60vh; max-height: 60vh;
} }
*,main,section{
color:black; *,
main,
section {
color: black;
background-color: white; background-color: white;
border:none; border: none;
box-shadow: none; box-shadow: none;
padding:0; padding: 0;
max-width:90vw; max-width: 90vw;
} }
} }
.recent,.featured{ .recent,
.featured {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
padding:1rem; padding: 1rem;
}
.featured a,.recent a{
width:initial;
} }
.section-heading{ .featured a,
color: var(--theme-color-accent); .recent a {
width: initial;
}
.section-heading {
color: var(--theme-accent);
width: 100%; width: 100%;
} }
#tags{ #tags {
display:flex; display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#tags>*{
margin:1rem;
background-color: var(--theme-color-accent);
color:var(--theme-color-primary);
border-radius: 1.5rem;
padding:1.5rem;
font-weight: bolder;
}
.gallery{
width:70%;
display:flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
align-items: center; align-items: center;
}
#tags>a {
margin: 5px;
padding:10px;
border-radius: 50px;
font-size:16px;
font-weight: bold;
background-color: var(--theme-accent);
color: var(--theme-color-primary);
font-weight: bolder;
display:flex;
flex-direction: row;
align-items: center;
}
#tags>a>*{
margin:5px;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width:90vw;
}
#banner{
position:relative;
width:100vw;
padding-top:3rem;
padding-bottom:3rem;
max-height:20vh;
overflow:hidden;
background-repeat: no-repeat;
background-size:cover;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-position: center;
background-position-y:center;
}
#banner-text{
max-height:20vh;
width:fit-content;
color:white;
background-color: rgba(0,0,0,0.5);
backdrop-filter: blur(0.25rem);
min-width: 10vw;
border-radius:25px;
text-shadow: 1px 1px 2px black;
padding:1.5rem;
font-size:22px;
}
#banner-text>*{
margin:0;
}
.image-container {
margin-bottom: 1rem;
}
.image-container,
.image-container a {
width: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
}
.image-container .caption {
width: fit-content;
border: 1px solid var(--theme-accent);
padding: 0.5rem;
border-radius: 0.5rem;
}
.gallery>* {
margin-bottom: 1.5rem;
}
#content-list{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
}
.gallery>*{
margin:0.1rem;
border:1px solid var(--theme-color-accent);
} }
@media screen and (orientation:portrait) {
@media screen and (orientation:portrait){ main {
main{
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center; align-items: center;
width: 100vw;
} }
.recent,.featured{
.link-preview {
flex-direction: column;
}
.recent,
.featured {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
.listing img, .listing img,
.listing video{ .listing video {
width:unset; width: unset;
max-width: 100%; max-width: 100%;
height:25vh; height: 25vh;
padding-left: 2vw;
padding-right: 2vw;
} }
.recent img, .recent img,
.featured img, .featured img,
.recent video, .recent video,
.featured video{ .featured video {
max-width:unset; max-width: unset;
width:100%; width: 100%;
margin:0; margin: 0;
} }
.listing{
flex-direction: column; .listing {
max-width:90vw;
max-height: 40vh;
}
.listing-text{
font-size:14px;
}
.metadata{
max-width: 100%;
flex-wrap: wrap;
}
.metadata #tags a {
font-size:10px;
padding:0;
}
.metadata .icon{
width:2rem;
height:2rem;
}
nav{
font-size:10px;
}
.social-link strong{
display:none;
}
#social-links img{
}
#banner-text {
font-size:12px;
} }
} }
svg{
stroke: black;
fill:black;
}
.icon {
width:2.5rem;
height:2.5rem;
}
.icon-small{
height:1rem;
width:1rem;
}
.metadata #info{
min-width:50%;
}
#info>div{
display:flex;
flex-direction: row;
}
#info>div>*{
margin:10px;
}
.bare-link{
text-decoration: none;
}
@media screen and (prefers-color-scheme:dark) {
body {
--theme-color-primary: black;
--theme-color-secondary: white;
--theme-accent: gold;
}
@keyframes blur-in{
from {
backdrop-filter: blur(0px);
background-color: unset;
}
to {
backdrop-filter: blur(15px);
background-color: rgba(0, 0, 0, 0.55);
}
}
.listing-text,.listing-text>a {
background-color: rgba(0, 0, 0, 0.25);
}
.listing-text:hover{
animation: blur-in 0.25s;
backdrop-filter: blur(15px);
background-color: rgba(0, 0, 0, 0.55);
}
.listing-text .bare-link,.listing-text h2{
text-shadow: rgb(0, 0, 0) 0px 0px 20px;
}
.listing-text:hover >a{
animation:blur-out 0.2s;
background-color: transparent;
}
@keyframes blur-out{
from{background-color: rgba(0, 0, 0, 0.25);}
to{background-color: transparent;backdrop-filter: blur(0px);}
}
}

12
static/js/icons.js Normal file
View file

@ -0,0 +1,12 @@
var icons = {
"play":"<svg viewBox=\"0 0 120 120\"><circle style=\"opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1\" id=\"path2040\" cx=\"60.062084\" cy=\"62.077591\" r=\"52.403164\" /><path style=\"opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1\" d=\"m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z\" id=\"path1060\"> </svg>",
"pause":"<svg viewBox=\"0 0 120 120\" version=\"1.1\"> <circle style=\"opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1\" id=\"path2040\" cx=\"60.062084\" cy=\"62.077591\" r=\"52.403164\" /> <rect style=\"opacity:0.99;fill-opacity:1;stroke-width:3.2;stroke-linecap:butt;stroke-linejoin:round; stroke-dasharray:none;stroke-opacity:1\" id=\"rect2858\" width=\"13.503889\" height=\"74.311569\" x=\"37.891518\" y=\"25.657549\" /> <rect style=\"opacity:0.99;fill-opacity:1;stroke-width:3.2;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\"id=\"rect2858-3\"width=\"13.503889\" height=\"74.311569\"x=\"67.821785\"y=\"25.526461\" /></svg>",
"loop":"<svg viewBox=\"0 0 120 120\" version=\"1.1\"> <circle style=\"opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1\" id=\"path2040\" cx=\"60.062084\" cy=\"62.077591\" r=\"52.403164\" /> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"M 49.086093,104.69797 53.85938,96.982017 C -0.70319734,64.562086 46.019709,40.176232 48.130402,38.442953 c 0,0 4.487934,4.354976 5.546329,5.309403 1.84557,1.664276 5.129158,-20.199369 5.129158,-20.199369 l -22.368136,0.483004 5.548034,5.713299 c 0,0 -56.905236,37.386495 7.100306,74.94868 z\" id=\"path4435\" /> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"m 72.493272,21.303543 -4.773287,7.715948 c 54.562575,32.419931 7.839671,56.805785 5.728978,58.539064 0,0 -4.487934,-4.354976 -5.546329,-5.309403 -1.845568,-1.664276 -5.129158,20.199368 -5.129158,20.199368 l 22.368136,-0.483 -5.548034,-5.713302 c 0,0 56.905242,-37.386495 -7.100306,-74.948675 z\" id=\"path4435-7\" /></svg>",
"expand":"<svg viewBox=\"0 0 120 120\" version=\"1.1\"> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"M 46.964564,56.005523 29.64354,38.443145 15.744327,51.812481 15.624368,16.779513 l 36.623948,0.03226 -13.177737,14.17536 16.622539,16.392689 z\" id=\"path8948-3\" /> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"M 55.129887,73.388205 38.422614,90.210417 51.067135,104.89922 16.395468,104.33333 16.434945,67.605641 30.111493,81.28219 46.504182,64.659651 Z\" id=\"path8948-3-5\" /> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"M 63.363444,46.935211 80.997081,30.825588 67.627745,17.036604 102.68744,17.447746 102.62846,52.646518 88.168059,39.041226 71.989147,55.663767 Z\" id=\"path8948-3-6\" /> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"M 71.956318,65.743071 91.343851,82.735377 104.06395,70.648701 103.79532,105.13832 69.166628,105.79193 82.579575,93.184265 63.227764,74.368773 Z\" id=\"path8948-3-5-2\" /> </svg>",
"shrink":"<svg viewBox=\"0 0 120 120\" version=\"1.1\"> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"M 24.352868,16.779459 41.673892,34.341837 55.573105,20.972501 55.693064,56.005469 19.069116,55.973209 32.246853,41.797849 15.624314,25.40516 Z\" id=\"path8948-3\" /> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"M 16.395415,96.170716 33.102688,79.348504 20.458167,64.659701 55.129834,65.225591 55.090357,101.95328 41.413809,88.276731 25.02112,104.89927 Z\" id=\"path8948-3-5\" /> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"M 102.6875,25.765108 85.05386,41.874731 97.415443,56.469918 63.061175,56.361101 63.422481,20.053801 77.882882,33.659093 94.061794,17.036552 Z\" id=\"path8948-3-6\" /> <path style=\"opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1\" d=\"M 95.335449,105.79197 76.351017,88.674877 64.23557,102.19642 63.496447,66.396722 98.32669,66.448539 85.921496,80.567834 104.064,97.166269 Z\" id=\"path8948-3-5-2\" /></svg>"
};

60
static/res/default.svg Normal file
View file

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="120mm"
height="120mm"
viewBox="0 0 120 120"
version="1.1"
id="svg5"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="test.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="2.0938813"
inkscape:cx="228.2842"
inkscape:cy="207.27059"
inkscape:window-width="1920"
inkscape:window-height="1045"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:0.99;fill:none;stroke:#000000;stroke-width:2.017;stroke-linejoin:round;stroke-dasharray:none"
id="path790"
cx="60.936821"
cy="62.187721"
r="49.857403" />
<text
xml:space="preserve"
style="font-size:14.1111px;opacity:0.99;fill:none;stroke:#000000;stroke-width:0;stroke-linejoin:round;stroke-dasharray:none"
x="30.379061"
y="64.689529"
id="text1070"><tspan
id="tspan1068"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.1111px;font-family:FreeSerif;-inkscape-font-specification:FreeSerif;fill:#000000;fill-opacity:1;stroke-width:0;stroke-dasharray:none"
x="30.379061"
y="64.689529"
sodipodi:role="line">Your Logo</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

71
static/res/expand.svg Normal file
View file

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="120"
height="120"
viewBox="0 0 120 120"
version="1.1"
id="svg5"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="expand.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="7.0166667"
inkscape:cx="46.247031"
inkscape:cy="55.154394"
inkscape:window-width="1920"
inkscape:window-height="989"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
showguides="false" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="opacity:0.99;fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect7492"
width="98.961357"
height="98.961357"
x="10.682183"
y="10.682183" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 46.964564,56.005523 29.64354,38.443145 15.744327,51.812481 15.624368,16.779513 l 36.623948,0.03226 -13.177737,14.17536 16.622539,16.392689 z"
id="path8948-3"
sodipodi:nodetypes="cccccccc" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 55.129887,73.388205 38.422614,90.210417 51.067135,104.89922 16.395468,104.33333 16.434945,67.605641 30.111493,81.28219 46.504182,64.659651 Z"
id="path8948-3-5"
sodipodi:nodetypes="cccccccc" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 63.363444,46.935211 80.997081,30.825588 67.627745,17.036604 102.68744,17.447746 102.62846,52.646518 88.168059,39.041226 71.989147,55.663767 Z"
id="path8948-3-6"
sodipodi:nodetypes="cccccccc" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 71.956318,65.743071 91.343851,82.735377 104.06395,70.648701 103.79532,105.13832 69.166628,105.79193 82.579575,93.184265 63.227764,74.368773 Z"
id="path8948-3-5-2"
sodipodi:nodetypes="cccccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

60
static/res/loop.svg Normal file
View file

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="120"
height="120"
viewBox="0 0 120 120"
version="1.1"
id="svg5"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="loop.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="4.9615326"
inkscape:cx="41.821755"
inkscape:cy="53.612467"
inkscape:window-width="1920"
inkscape:window-height="989"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
showguides="false" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:0.99;fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1"
id="path2040"
cx="60.062084"
cy="62.077591"
r="52.403164" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 49.086093,104.69797 53.85938,96.982017 C -0.70319734,64.562086 46.019709,40.176232 48.130402,38.442953 c 0,0 4.487934,4.354976 5.546329,5.309403 1.84557,1.664276 5.129158,-20.199369 5.129158,-20.199369 l -22.368136,0.483004 5.548034,5.713299 c 0,0 -56.905236,37.386495 7.100306,74.94868 z"
id="path4435"
sodipodi:nodetypes="cccscccc" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 72.493272,21.303543 -4.773287,7.715948 c 54.562575,32.419931 7.839671,56.805785 5.728978,58.539064 0,0 -4.487934,-4.354976 -5.546329,-5.309403 -1.845568,-1.664276 -5.129158,20.199368 -5.129158,20.199368 l 22.368136,-0.483 -5.548034,-5.713302 c 0,0 56.905242,-37.386495 -7.100306,-74.948675 z"
id="path4435-7"
sodipodi:nodetypes="cccscccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

63
static/res/pause.svg Normal file
View file

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="120"
height="120"
viewBox="0 0 120 120"
version="1.1"
id="svg5"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="pause.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="2.4807663"
inkscape:cx="-61.876042"
inkscape:cy="23.782974"
inkscape:window-width="1920"
inkscape:window-height="989"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:0.99;fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1"
id="path2040"
cx="60.062084"
cy="62.077591"
r="52.403164" />
<rect
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:3.2;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect2858"
width="13.503889"
height="74.311569"
x="37.891518"
y="25.657549" />
<rect
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:3.2;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect2858-3"
width="13.503889"
height="74.311569"
x="67.821785"
y="25.526461" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

54
static/res/play.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="120"
height="120"
viewBox="0 0 120 120"
version="1.1"
id="svg5"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="play.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="4.9615326"
inkscape:cx="47.062071"
inkscape:cy="61.674492"
inkscape:window-width="1920"
inkscape:window-height="989"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:4;stroke-dasharray:none;stroke-opacity:1"
d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z"
id="path1060"
sodipodi:nodetypes="cscc" />
<circle
style="opacity:0.99;fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1"
id="path2040"
cx="60.062084"
cy="62.077591"
r="52.403164" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

71
static/res/shrink.svg Normal file
View file

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="120"
height="120"
viewBox="0 0 120 120"
version="1.1"
id="svg5"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="shrink.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="4.9615326"
inkscape:cx="49.077578"
inkscape:cy="76.790789"
inkscape:window-width="1920"
inkscape:window-height="989"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
showguides="false" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="opacity:0.99;fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="rect7492"
width="98.961357"
height="98.961357"
x="10.682183"
y="10.682183" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 24.352868,16.779459 41.673892,34.341837 55.573105,20.972501 55.693064,56.005469 19.069116,55.973209 32.246853,41.797849 15.624314,25.40516 Z"
id="path8948-3"
sodipodi:nodetypes="cccccccc" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 16.395415,96.170716 33.102688,79.348504 20.458167,64.659701 55.129834,65.225591 55.090357,101.95328 41.413809,88.276731 25.02112,104.89927 Z"
id="path8948-3-5"
sodipodi:nodetypes="cccccccc" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 102.6875,25.765108 85.05386,41.874731 97.415443,56.469918 63.061175,56.361101 63.422481,20.053801 77.882882,33.659093 94.061794,17.036552 Z"
id="path8948-3-6"
sodipodi:nodetypes="cccccccc" />
<path
style="opacity:0.99;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 95.335449,105.79197 76.351017,88.674877 64.23557,102.19642 63.496447,66.396722 98.32669,66.448539 85.921496,80.567834 104.064,97.166269 Z"
id="path8948-3-5-2"
sodipodi:nodetypes="cccccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB