Browse Source

🍱 Added website assets

develop
Maxim Lebedev 11 months ago
parent
commit
4bb1bceb51
Signed by: toby3d
GPG Key ID: 1F14E25B7C119FC5
  1. BIN
      website/apple-touch-icon.png
  2. BIN
      website/favicon.ico
  3. BIN
      website/icon-192x192.png
  4. BIN
      website/icon-512x512.png
  5. 1
      website/icon.svg
  6. 103
      website/index.html
  7. 24
      website/manifest.webmanifest
  8. 138
      website/styles.css

BIN
website/apple-touch-icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 853 B

BIN
website/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
website/icon-192x192.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 934 B

BIN
website/icon-512x512.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

1
website/icon.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.2 4.2"><path fill="#ff6fcf" d="M0 0h4.2v4.2H0z"/><circle cx="2.1" cy="2.1" r=".8" fill="#ff0"/><path fill="#9c0" d="M0 4.2l2.1-2 2.1 2z"/></svg>

After

Width:  |  Height:  |  Size: 199 B

103
website/index.html

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html class="page" lang="en" dir="ltr">
<head>
<link rel="icon" as="image" href="/favicon.ico" type="image/x-icon">
<link rel="preload icon" as="image" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" as="image" href="/apple-touch-icon.png" type="image/png">
<link rel="manifest" href="/manifest.webmanifest" type="application/manifest+json">
<link rel="preload stylesheet" as="style" href="/styles.css" type="text/css">
<link rel="canonical" href="https://websub.toby3d.me/">
<title>WebSub</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="description" content="Dead simple WebSub hub">
<meta name="theme-color" content="#ff6fcf">
</head>
<body class="[ page__body cover ]">
<main class="[ body__main ][ stack center ]">
<div class="[ h-app h-x-app ][ text-align_center ]">
<picture>
<source
srcset="/icon.svg"
type="image/svg+xml">
<img
class="u-icon u-logo u-photo"
src="/apple-touch-icon.png"
loading="lazy"
alt="WebSub logo">
</picture>
<h1>
<a
class="[ u-url ][ p-name ]"
href="/">
WebSub
</a>
</h1>
<p class="p-summary">
Dead simple WebSub hub
</p>
</div>
<hr>
<ul class="stack">
<li>
<span
role="img"
aria-label="ping pong">
🏓
</span>
<a
rel="external help"
hreflang="en"
href="https://indieweb.org/how-to-push">
How to publish and consume?
</a>
</li>
<li>
<span
role="img"
aria-label="pages">
📑
</span>
<a
rel="external help"
hreflang="en"
href="https://www.w3.org/TR/websub/">
What the spec?
</a>
</li>
</ul>
</main>
<footer class="[ body__footer ][ center ][ text-align_center ]">
<p>
Made with
<span
role="img"
aria-label="love">
</span>
to
<a
rel="external"
href="https://gitlab.com/toby3d/websub">
open source
</a>
by
<a
rel="author"
hreflang="en"
href="https://toby3d.me/">
toby3d
</a>
</p>
<small>v1.0.0</small>
</footer>
</body>
</html>

24
website/manifest.webmanifest

@ -0,0 +1,24 @@
{
"lang": "en",
"dir": "ltr",
"name": "WebSub",
"description": "A dead simple WebSub hub",
"short_name": "WebSub",
"icons": [{
"purpose": "maskable",
"sizes": "192x192",
"src": "icon-192x192.png",
"type": "image/png"
},{
"purpose": "maskable",
"sizes": "512x512",
"src": "icon-512x512.png",
"type": "image/png"
}],
"scope": "/",
"start_url": "/",
"display": "fullscreen",
"orientation": "landscape",
"theme_color": "#ff6fcf",
"background_color": "#ff6fcf"
}

138
website/styles.css

@ -0,0 +1,138 @@
:root {
--on: initial;
--off: ;
--ratio: 1.5;
--measure: 60ch;
--cover-space: 1rem;
--center-gutter: var(--off);
--stack-space: 0.5rem;
color-scheme: light dark;
line-height: var(--ratio);
font-size: calc(1em + 0.333vw);
}
.page {
background-color: hsl(0, 0%, 95%);
overscroll-behavior: none;
scroll-behavior: smooth;
transition: background-color 0.3s, color 0.3s;
}
@media (prefers-color-scheme: dark) {
.page,
[role="img"],
img:not([src*=".svg"]) {
filter: invert(100%);
}
}
*,
:after,
:before {
background-color: inherit;
box-sizing: border-box;
color: inherit;
font-family: inherit;
margin: 0;
max-width: var(--measure);
overflow-wrap: break-word;
padding: 0;
}
html,
body,
div,
header,
nav,
main,
footer {
max-width: none;
}
img,
[role="img"] {
background-color: transparent;
width: 100%;
}
hr {
border: 1px solid hsla(0, 0%, 0%, 0.6);
}
a {
cursor: pointer;
display: inline-block;
}
a:focus-visible {
outline: 4px solid hsl(320, 100%, 72%);
}
ul {
padding-left: 1rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
small {
font-size: 0.5rem;
}
.page__body {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: var(--cover-space);
}
.page__body > * {
margin-bottom: var(--cover-space);
margin-top: var(--cover-space);
}
.page__body > :first-child:not(.body__main) {
margin-top: 0;
}
.page__body > :last-child:not(.body__main) {
margin-bottom: 0;
}
.page__body > .body__main {
margin-bottom: auto;
margin-top: auto;
}
.center {
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
max-width: var(--measure);
padding-left: var(--center-gutter);
padding-right: var(--center-gutter);
}
.stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.stack > * {
margin-top: 0;
margin-bottom: 0;
}
.stack > * + * {
margin-top: var(--stack-space);
}
.text-align_center {
text-align: center;
}
Loading…
Cancel
Save