feat: add css; remove unused web components
This commit is contained in:
parent
7471e93d6b
commit
34008f276c
8 changed files with 32 additions and 156 deletions
|
|
@ -1,14 +0,0 @@
|
||||||
<header
|
|
||||||
style="
|
|
||||||
border-radius: 5px;
|
|
||||||
background: linear-gradient(45deg, #3054bf, #416fff);
|
|
||||||
color: white;
|
|
||||||
margin: 1em 0;
|
|
||||||
padding: 1em;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<a style="color: white" href="/">
|
|
||||||
<h1><slot /></h1>
|
|
||||||
</a>
|
|
||||||
<slot name="description" />
|
|
||||||
</header>
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
class CodeBlockComponent extends HTMLElement {
|
|
||||||
connectedCallback() {
|
|
||||||
const trimmed = this.innerHTML.trim()
|
|
||||||
const lang = this.getAttribute('language')
|
|
||||||
const inline = this.getAttribute('inline') !== null
|
|
||||||
|
|
||||||
this.innerHTML = `
|
|
||||||
<pre id="pre"><code id="code">${trimmed}</code></pre>
|
|
||||||
`
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @type {HTMLPreElement}
|
|
||||||
*/
|
|
||||||
const pre = this.querySelector('#pre')
|
|
||||||
|
|
||||||
if (lang) {
|
|
||||||
pre.className = `language-${lang}`
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @type {Partial<CSSStyleDeclaration>}
|
|
||||||
*/
|
|
||||||
const style = {
|
|
||||||
background: '#f5f2f0',
|
|
||||||
padding: '1em',
|
|
||||||
margin: '1em 0',
|
|
||||||
fontSize: 'large',
|
|
||||||
overflow: 'auto',
|
|
||||||
borderRadius: '5px',
|
|
||||||
}
|
|
||||||
|
|
||||||
if (inline) {
|
|
||||||
style.display = 'inline'
|
|
||||||
style.padding = '0.3em'
|
|
||||||
}
|
|
||||||
|
|
||||||
Object.keys(style).forEach((rule) => {
|
|
||||||
pre.style[rule] = style[rule]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
<footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
|
|
||||||
<p>
|
|
||||||
<slot />
|
|
||||||
</p>
|
|
||||||
</footer>
|
|
||||||
|
|
@ -1,48 +1,32 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="/reset.css" />
|
<title><slot /></title>
|
||||||
<meta name="generator" content="McFly v0.0.1" />
|
<meta property="og:description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
|
||||||
<meta name="theme-color" content="#3054bf" />
|
<meta name="description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
|
||||||
<meta name="description" content="McFly is a no-framework framework that assists in building on the Web." />
|
<meta itemprop="description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
|
||||||
<meta name="author" content="McFly" />
|
<meta property="og:title" content="Ayo.run - What's running?">
|
||||||
<meta name="origin" content="https://mc-fly.vercel.app/" />
|
<meta property="og:url" content="http://ayo.run">
|
||||||
<!-- Open Graph data -->
|
<meta property="og:site_name" content="www.ayo.run">
|
||||||
<meta property="og:site_name" content="McFly" />
|
<link rel="stylesheet" href="pico.min.css">
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:image" content="/touch-icon-large.png" />
|
|
||||||
<meta property="og:title" content="McFly: Back to the Basics. Into the Future. 😱" />
|
|
||||||
<meta property="og:description" content="McFly is a no-framework framework that assists in building on the Web." />
|
|
||||||
<style>
|
<style>
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
max-width: 40em;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
place-content: safe center;
|
||||||
|
display: grid;
|
||||||
}
|
}
|
||||||
|
/* .logo {
|
||||||
body>* {
|
width: 200px;
|
||||||
padding: 0.5em 1em;
|
border-radius: 5px;
|
||||||
}
|
display: block;
|
||||||
|
margin: 2em auto;
|
||||||
h1 {
|
} */
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,
|
|
||||||
p,
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<!-- Icons -->
|
|
||||||
<link rel="icon" href="favicon.svg" />
|
|
||||||
<link rel="mask-icon" href="mask-icon.svg" color="#000000" />
|
|
||||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
|
||||||
|
|
||||||
<slot />
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
/**
|
|
||||||
* Custom element using a minimal base class
|
|
||||||
* @see https://WebComponent.io
|
|
||||||
*/
|
|
||||||
class MyHelloWorld extends WebComponent {
|
|
||||||
static props = {
|
|
||||||
myName: 'World',
|
|
||||||
count: 0,
|
|
||||||
}
|
|
||||||
|
|
||||||
updateLabel() {
|
|
||||||
this.props.myName = `Clicked ${++this.props.count}x`
|
|
||||||
}
|
|
||||||
|
|
||||||
get template() {
|
|
||||||
return html` <button
|
|
||||||
onClick=${() => this.updateLabel()}
|
|
||||||
style="cursor:pointer"
|
|
||||||
>
|
|
||||||
Hello ${this.props.myName}!
|
|
||||||
</button>`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<my-head>
|
||||||
<html lang="en">
|
Ayo.run - What's running? - a personal website by Ayo Ayco
|
||||||
|
</my-head>
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Ayo.run - What's running? - a personal website by Ayo Ayco</title>
|
|
||||||
<meta property="og:description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
|
|
||||||
<meta name="description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
|
|
||||||
<meta itemprop="description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
|
|
||||||
<meta property="og:title" content="Ayo.run - What's running?">
|
|
||||||
<meta property="og:url" content="http://ayo.run">
|
|
||||||
<meta property="og:site_name" content="www.ayo.run">
|
|
||||||
<link rel="stylesheet" href="pico.min.css">
|
|
||||||
<style>
|
|
||||||
html, body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
padding: 1em;
|
|
||||||
place-content: safe center;
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
/* .logo {
|
|
||||||
width: 200px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: block;
|
|
||||||
margin: 2em auto;
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div>
|
||||||
<main>
|
<main>
|
||||||
|
|
|
||||||
BIN
src/public/logo.png
Normal file
BIN
src/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
4
src/public/pico.min.css
vendored
Normal file
4
src/public/pico.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue