M common.sh => common.sh +2 -2
@@ 13,8 13,8 @@ SITE="Actual Website"
SITE_LANG="en"
URL="https://actualwebsite.org"
AUTHOR="Matthew Graybosch"
-AUTHOR_URL="https://matthewgraybosch.com/"
-AUTHOR_EMAIL="contact@matthewgraybosch.com"
+AUTHOR_URL="https://starbreaker.org/"
+AUTHOR_EMAIL="contact@starbreaker.org"
LICENSE="https://creativecommons.org/licenses/by-nc-sa/4.0/"
LICENSE_DESC="Creative Commons BY-NC-SA 4.0 International"
ICBM_LAT="40.2732"
M partials/bottom-nav.html => partials/bottom-nav.html +1 -0
@@ 2,6 2,7 @@
<ul class="nav">
<li class="up">
<a href="#content">read again</a>
+ ↑
</li>
<li class="rss">
<a href="./rss.xml">subscribe</a>
M partials/head.html => partials/head.html +4 -0
@@ 22,3 22,7 @@
<link rel="me" href="proven.lol/f5e8f7">
<link rel="alternate" type="application/rss+xml" title="RSS feed" href="./rss.xml">
<link rel="alternate" type="text/plain" href="./SED_SOURCE_TEXT">
+<link rel="me" href="https://starbreaker.org">
+<link rel="me" href="https://indieweb.social/@starbreaker">
+<link rel="me" href="https://mastodon.social/@starbreaker">
+<link rel="me" href="https://libranet.de/profile/starbreaker/">
M partials/home-head.html => partials/home-head.html +3 -0
@@ 22,3 22,6 @@
<link rel="alternate" type="application/rss+xml" title="RSS feed" href="./rss.xml">
<link rel="alternate" type="text/plain" href="./SED_SOURCE_TEXT"/>
<link rel="stylesheet" href="./assets/styles/page.css">
+<link rel="me" href="https://indieweb.social/@starbreaker">
+<link rel="me" href="https://mastodon.social/@starbreaker">
+<link rel="me" href="https://libranet.de/profile/starbreaker/">
M partials/top-nav.html => partials/top-nav.html +1 -0
@@ 2,6 2,7 @@
<ul class="nav">
<li class="down">
<a href="#content">begin reading</a>
+ ↓
</li>
<li class="rss">
<a href="./rss.xml">subscribe</a>
M site/assets/styles/page.css => site/assets/styles/page.css +147 -56
@@ 4,6 4,7 @@
adjust as needed
*/
:root {
+ --eigengrau: #16161d;
--size: medium;
--width: none;
--margin: 1rem;
@@ 40,8 41,15 @@ pre, code, kbd, samp {
font: 1.1rem/1.4 var(--mono-stack);
}
+pre {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ border: 1px solid var(--color);
+ padding: 1rem;
+}
+
hr {
- margin: 2rem 0 1rem 0;
+ margin: 1.2rem 0;
border: 1px solid var(--color);
}
@@ 66,11 74,15 @@ blockquote {
*/
a {
color: var(--link);
+ text-underline-offset: .4rem;
+}
+
+small > a {
text-underline-offset: .3rem;
}
a:focus {
- outline: 1px dotted var(--outline);
+ Outline: 1px dotted var(--outline);
}
a:hover {
@@ 106,11 118,11 @@ td, th {
}
th {
- background: var(--accent);
+ background-color: var(--accent);
}
-tr:nth-child(even){
- background: var(--accent);
+tr:nth-child(even) > td {
+ background-color: var(--accent);
}
table caption {
@@ 129,8 141,8 @@ header p {
with dynamic height
*/
img, video {
- max-width: 100%;
- height: auto;
+ object-fit: cover;
+ aspect-ratio: 16/9;
border: 2px solid var(--color);
}
@@ 141,14 153,36 @@ img, video {
*/
.details {
margin: 1rem;
- padding: 1rem;
+ padding: 0 1rem;
border: 2px solid var(--color);
}
-.notice {
- background: var(--accent);
- padding: 1rem;
- border: 2px solid var(--outline);
+.toc {
+ margin: 1rem 0;
+}
+
+.regular {
+ font-size: 1rem;
+}
+
+.current {
+ font-weight: bold;
+}
+
+.summary {
+ font-style: italic;
+ font-weight: bold;
+ font-size: 1rem;
+}
+
+.sans-serif-font {
+ font-family: var(--sans-stack);
+ font-size: 1.25rem;
+}
+
+.serif-font {
+ font-family: var(--serif-stack);
+ font-size: 1.25rem;
}
.right {
@@ 159,42 193,88 @@ img, video {
text-align: center;
}
+img.center {
+ margin: 1rem auto;
+}
+
+.v-center {
+ vertical-align: middle;
+}
+
.uppercase {
text-transform: uppercase;
}
.undecorated {
- border: none;
- box-shadow: none;
- border-radius: none;
+ border: none !important;
+ box-shadow: none !important;
+ border-radius: 0 !important;
+}
+
+a.undecorated, a:focus.undecorated {
+ text-decoration: none !important;
+ outline: none !important;
}
.indent {
- margin-left: 1rem;
+ margin-left: 2rem;
+}
+
+.quotes > figure {
+ margin: 4rem 0;
}
-.nav {
- padding-left: 1.5rem;
+.note, .notice, .warning, .link {
+ padding: 0 1rem;
+ margin: 2rem 0;
}
-.down::marker {
- content: "⬇️ ";
+.note > p:first-child, .notice > p:first-child, .warning > p:first-child, .link > p:first-child {
+ margin-top: -0.5rem;
+}
+
+.note::before, .notice::before, .warning::before, .link::before {
+ display: block;
+ text-align: center;
+ position: relative;
+ top: -1.25rem;
+ padding: 2px 10px;
+ font-weight: bold;
+}
+
+.note, .note::before, .notice, .notice::before, .warning, .warning::before, .link, .link::before {
+ background: var(--accent);
}
-.up::marker {
- content: "⬆️ ";
+.note, .note::before, .notice, .notice::before {
+ border: 2px solid royalblue;
}
-.rss::marker {
- content: "📶 ";
+.Warning, .warning::before {
+ border: 2px solid crimson;
}
-.email::marker {
- content: "✉️ ";
+.link, .link::before {
+ border: 2px solid var(--link);
}
-.git::marker {
- content: "🛠️ ";
+.note::before, .notice::before {
+ width: 4rem;
+ content: "NOTE";
+}
+
+.warning::before {
+ width: 7rem;
+ content: "WARNING";
+}
+
+.link::before {
+ width: 12.5rem;
+ content: "THIS IS A LINK POST!";
+}
+
+.date-col {
+ min-width: 7.5rem;
}
/*
@@ 237,8 317,8 @@ img, video {
--width: 50rem;
--margin: 2rem auto;
--padding: 1rem 4rem 2rem;
- --small-shadow: 5px 5px;
- --big-shadow: 10px 10px;
+ --small-shadow: 8px 8px;
+ --big-shadow: 16px 16px;
}
html {
@@ 249,12 329,8 @@ img, video {
box-shadow: var(--big-shadow) var(--shadow);
}
- figure {
- margin: 2rem 4rem;
- }
-
- figure > blockquote {
- margin: 1rem 0;
+ blockquote, figure > blockquote {
+ margin: 1rem 4rem;
}
li {
@@ 263,11 339,18 @@ img, video {
img, video {
box-shadow: var(--small-shadow) var(--shadow);
- border-radius: 1rem;
}
table {
- margin: 2rem;
+ margin: 2rem 0;
+ }
+
+ th {
+ background-color: var(--accent);
+ }
+
+ tr:nth-child(even) {
+ background-color: lightyellow;
}
time {
@@ 275,11 358,7 @@ img, video {
font-weight: bold;
}
- .notice {
- box-shadow: var(--small-shadow) var(--shadow);
- }
-
- .nav {
+ .nav, .breadcrumbs {
padding-left: 0;
display: flex;
gap: 1rem;
@@ 287,10 366,22 @@ img, video {
list-style-position: inside;
}
+ .breadcrumbs li::before {
+ content: "/ ";
+ }
+
.undecorated {
- border: none;
- box-shadow: none;
- border-radius: 0;
+ border: none !important;
+ box-shadow: none !important;
+ border-radius: 0 !important;
+ }
+
+ .two-column {
+ column-count: 2;
+ }
+
+ .three-column {
+ column-count: 3;
}
}
@@ 317,13 408,13 @@ img, video {
@media only screen and (prefers-contrast: no-preference) and (prefers-color-scheme: light) {
:root {
--color: #16161d;
- --background: ghostwhite;
- --accent: white;
- --link: #3d3b8e;
- --hover: #6883ba;
- --active: #b0e298;
- --visited: #a06b9a;
- --outline: #E072A4;
+ --background: #FEFEFE;
+ --accent: aliceblue;
+ --link: darkslateblue;
+ --hover: crimson;
+ --active: forestgreen;
+ --visited: purple;
+ --outline: darkslateblue;
--shadow: rgba(40, 40, 40, 0.3);
}
}
@@ 335,9 426,9 @@ img, video {
*/
@media only screen and (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
:root {
- --color: ghostwhite;
- --background: #16161d;
- --accent: black;
+ --color: #FEFEFE;
+ --background: midnightblue;
+ --accent: navy;
--link: lightcyan;
--hover: cyan;
--active: skyblue;
M site/index.htm => site/index.htm +5 -0
@@ 224,6 224,8 @@
<li><a href="https://yukinu.com/blog/2022/05/15/supporting-extensive-backwards-compatibility.html"><cite>Supporting extensive backwards compatibility on the web</cite></a> by <a href="https://yukinu.com/">Yukinu</a></li>
<li><a href="https://blog.jim-nielsen.com/2023/html-web-components/"><cite>HTML Web Components</cite></a> by <a href="https://www.jim-nielsen.com/">Jim Nielsen</a></li>
<li><a href="https://blog.jim-nielsen.com/2024/fault-tolerance-html-css/"><cite>A Subtle Nicety of Fault Tolerance in HTML & CSS</cite></a> by <a href="https://www.jim-nielsen.com/">Jim Nielsen</a></li>
+ <li><a href="https://rosswintle.uk/2024/02/a-manifesto-for-small-static-web-apps/"><cite>A manifesto for small, static, web apps</cite></a> by <a href="https://rosswintle.uk/">Ross Wintle</a></li>
+ <li><a href="https://jamesg.blog/2024/02/19/personal-website-ideas/"><cite>100 things you can do on your personal website</cite></a> by <a href="https://jamesg.blog">capjamesg</a></li>
</ul>
</section>
<section>
@@ 231,6 233,9 @@
<p>
If you have any questions about this website, or would like to suggest additions or corrections, please reach out to the author by <a href="mailto:contact@matthewgraybosch.com?subject=Feedback: This is an Actual Website." rel="author">email</a>.
</p>
+ <p>
+ You can also reach me on the Fediverse by tagging <a href="https://indieweb.social/@starbreaker" rel="me">@starbreaker@indieweb.social</a>.
+ </p>
</section>
<hr/>
<section>