-* {
- margin: 0;
- padding: 0;
+h1 canvas {
+ width: 64px;
+ height: 64px;
+ display: inline-block;
+ background-color: gainsboro;
}
-body {
- background-image: url('/images/header_background.png');
- background-size: auto 300px;
- background-attachment: fixed;
- line-height: 1.45em;
-
- font-family: Times, 'Times New Roman', serif;
-}
-
-header {
- background-image: url('/images/header_foreground.png');
- background-repeat: no-repeat;
- background-size: auto 300px;
- height: 300px;
-}
-
-header a {
- color: transparent;
- display: block;
- max-height: 500px;
-}
-
-main {
- background-color: white;
- padding: 1.414em 4.53em;
- display: flex;
- flex-flow: column;
- align-items: center;
-}
-
-h1, h2, h3 {
- font-weight: 400;
- width: 100%;
-}
-h1 {
- font-size: 2rem;
- line-height: 1.05em;
- max-width: 30rem;
- margin: 0.5em 0 0.5em;
- text-transform: uppercase;
-}
-h2, h3 {
- max-width: 30rem;
- font-size: 1rem;
- margin: 2em 0;
+ul {
+ list-style: square;
}
-h2 { font-variant: small-caps; }
-h3 { font-style: italic; }
-
-ul, ol, img {
- width: 100%;
- margin: 1.414em 0;
+h1, h2, h3, h4, p, ul {
max-width: 30em;
}
p {
- max-width: 30em;
- text-align: justify;
- text-indent: 1.5em;
-}
-
-hr + p,
-h1 + p,
-h2 + p,
-h3 + p {
- text-indent: 0;
-}
-
-ul, ol { margin-left: 1.414em; }
-
-code {
- background-color: whitesmoke;
- padding: 0.2em 0.5em;
-}
-
-pre {
- background-color: whitesmoke;
- padding: 1em;
- font-size: 1.231em;
- max-width: 30em;
- margin: 1.414em 0 1.414em -1em;
-}
-
-hr {
- border: 0;
- border-bottom: 1px solid #666;
- width: 30em;
- margin: 1.414em 0;
-}
-
-hr.separator {
- width: 100%;
- border-bottom: 10px solid #666;
-}
-
-footer,
-footer a {
- color: #fff;
- background-color: blue;
-}
-footer p {
- font-family: arial, sans-serif;
- text-align: left;
- text-indent: 0;
- padding: 1.414em;
-}
-
-/* Image and caption sttyles */
-
-p img {
- margin-left: -1.125em;
-}
-
-hr + p img,
-h1 + p img,
-h2 + p img,
-h3 + p img {
- margin-left: 0;
+ font-size: 1.125em;
}
img {
- width: 100%;
- max-width: 30em;
-}
-
-img + em {
- color: #999;
- display: block;
- margin: -1.414em 0 1.414em;
- text-align: right;
+ max-width: 100%;
}
-/* Dark Mode Support */
-
@media (prefers-color-scheme: dark) {
- main {
- background-color: black;
+ body {
color: white;
- }
-
- code,
- pre {
- background-color: #444;
+ background-color: black;
}
a {
- color: #53FFFF;
+ color: #5dc1fd;
}
a:visited {
- color: #FF55FF;
- }
-
- hr.separator {
- border-bottom: 10px solid #999;
+ color: #ed6eff;
}
}
+
<link href="/css/style.css" rel="stylesheet">
<link href="/feed.xml" rel="alternate" hreflang="en" title="RSS feed">
+ <script type="module" src="//unlimited.pizza/js/animation.js"></script>
+
</head>
<body>
<header aria-label="Logo" class="main-header">
- <a href="/">Blog</a>
+ <h1>
+ <canvas width=100 height=100></canvas>
+ <a href="/">blog.unlimited.pizza</a>
+ </h1>
</header>
<main>
+ <p>
+ → <a href="http://unlimited.pizza">home</a>.
+ </p>
{{~ it.posts: post}}
<article class="h-entry" id="{{= post.index + 1}}">
{{= post.html}}