Modularize CSS; add reset, theme and fonts
Introduce reset.css and theme.css and refactor style.css to import them via layers; add Unscii font files and preload links. Add RSS XSL/CSS and a css-test page; remove legacy snes.min.css. Tweak BaseLayout and contact layout (preloads, grid gaps). Rename index.astro to parallax.astro and created new basic index page. Improve input styles and contact form placeholders
This commit is contained in:
parent
7dd61775b3
commit
0350a4b8e3
15 changed files with 1749 additions and 1458 deletions
137
public/reset.css
Normal file
137
public/reset.css
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
font-feature-settings: "kern";
|
||||
font-kerning: normal;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input:is([type="checkbox"], [type="radio"], [type="file"]),
|
||||
select,
|
||||
label,
|
||||
button,
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:where(html) {
|
||||
color-scheme: light dark;
|
||||
hanging-punctuation: first allow-end last;
|
||||
interpolate-size: allow-keywords;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-gutter: stable;
|
||||
text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
:where(html.translated-rtl) {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:where(html) {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
:where(body) {
|
||||
min-block-size: 100svb;
|
||||
min-inline-size: 300px;
|
||||
}
|
||||
|
||||
:where(canvas, img, picture, svg, video) {
|
||||
block-size: auto;
|
||||
border: none;
|
||||
display: block;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
:where(svg) {
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
:where(button, input, progress, select, textarea) {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
hanging-punctuation: none;
|
||||
line-height: inherit;
|
||||
text-align: start;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
:where(button) {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:where(textarea) {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
:where(textarea:not([rows])) {
|
||||
field-sizing: content;
|
||||
}
|
||||
|
||||
:where(fieldset, iframe) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:where(p, li, h1, h2, h3, h4, h5, h6) {
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
:where(abbr[title]) {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:where(cite) {
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
:where(small) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
:where(li, ol, ul) {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
:where(dialog, [popover]) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: auto;
|
||||
max-block-size: none;
|
||||
max-inline-size: none;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
:where([popover]) {
|
||||
inset: auto;
|
||||
}
|
||||
|
||||
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:where([hidden]:not([hidden="until-found"])) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* For Windows High Contrast Mode */
|
||||
@media (forced-colors: active) {
|
||||
button {
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
74
public/rss.css
Normal file
74
public/rss.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
:root {
|
||||
--db-light: 98.62% 0.014 84.58;
|
||||
--db-dark: 40.05% 0.014 17.74;
|
||||
--db-pink: 70.27% 0.192 13.7;
|
||||
--db-blue: 62.78% 0.12 226;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background: oklch(var(--db-light));
|
||||
color: oklch(var(--db-dark));
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: oklch(var(--db-blue));
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: oklch(var(--db-pink));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
color: oklch(var(--db-pink));
|
||||
outline: 0.125rem solid oklch(var(--db-pink));
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
|
||||
main,
|
||||
header {
|
||||
margin-block-end: 3rem;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 80ch;
|
||||
}
|
||||
|
||||
article {
|
||||
margin-block-end: 3rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
margin-block: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 1rem;
|
||||
}
|
||||
49
public/rss.xsl
Normal file
49
public/rss.xsl
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||
<xsl:output method="html" version="1.0" encoding="utf-8" indent="yes"/>
|
||||
<xsl:template match="/">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>RSS – <xsl:value-of select="/rss/channel/title"/></title>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<link rel="stylesheet" href="/rss.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1><xsl:value-of select="/rss/channel/title"/></h1>
|
||||
<p><xsl:value-of select="/rss/channel/description"/></p>
|
||||
<p>
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="/rss/channel/link"/>
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="/rss/channel/link"/>
|
||||
</a>
|
||||
</p>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Recent Posts</h2>
|
||||
<xsl:for-each select="/rss/channel/item">
|
||||
<article>
|
||||
<xsl:if test="title">
|
||||
<h3>
|
||||
<a rel="noopener noreferrer" target="_blank">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="link"/>
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="title"/>
|
||||
</a>
|
||||
</h3>
|
||||
</xsl:if>
|
||||
<p><xsl:value-of select="description"/></p>
|
||||
<p>
|
||||
<small>Published: <time><xsl:value-of select="pubDate"/></time></small>
|
||||
</p>
|
||||
</article>
|
||||
</xsl:for-each>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
||||
8
public/snes.min.css
vendored
8
public/snes.min.css
vendored
File diff suppressed because one or more lines are too long
1284
public/style.css
1284
public/style.css
File diff suppressed because it is too large
Load diff
401
public/theme.css
Normal file
401
public/theme.css
Normal file
|
|
@ -0,0 +1,401 @@
|
|||
h1.giga {
|
||||
font-size: var(--pt-double-canon);
|
||||
}
|
||||
h1.mega {
|
||||
font-size: var(--pt-canon);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--pt-double-great-primer);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--pt-double-english);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--pt-double-pica);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--pt-paragon);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--pt-great-primer);
|
||||
}
|
||||
h6 {
|
||||
font-size: var(--pt-english);
|
||||
}
|
||||
small {
|
||||
font-size: var(--pt-small-pica);
|
||||
}
|
||||
small.micro {
|
||||
font-size: var(--pt-long-primer);
|
||||
}
|
||||
small.nano {
|
||||
font-size: var(--pt-bourgeois);
|
||||
}
|
||||
small.pico {
|
||||
font-size: var(--pt-minion);
|
||||
}
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
background-image: radial-gradient(
|
||||
var(--color-accent-transparent),
|
||||
black 120%
|
||||
);
|
||||
color: var(--color-fg);
|
||||
column-gap: var(--gutter-large);
|
||||
display: grid;
|
||||
font-size: var(--pt-pica);
|
||||
grid-template-rows: auto 1fr auto;
|
||||
height: 100dvb;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
padding-inline: var(--page-padding-inline);
|
||||
place-items: center;
|
||||
position: absolute;
|
||||
row-gap: var(--stack-large);
|
||||
text-shadow: 0 0 5px var(--color-glow);
|
||||
top: 0;
|
||||
width: 100dvi;
|
||||
}
|
||||
body::after {
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.25),
|
||||
rgba(0, 0, 0, 0.25) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
content: "";
|
||||
height: 100dvb;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100dvi;
|
||||
}
|
||||
::selection {
|
||||
background: var(--color-accent);
|
||||
text-shadow: none;
|
||||
}
|
||||
header,
|
||||
main,
|
||||
footer {
|
||||
width: 100%;
|
||||
}
|
||||
header,
|
||||
footer {
|
||||
padding-block: var(--stack-large);
|
||||
text-align: center;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
padding-block: var(--stack-small);
|
||||
padding-inline: var(--gutter-small);
|
||||
width: 100%;
|
||||
}
|
||||
nav ul {
|
||||
column-gap: var(--gutter-large);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin-block-start: 0;
|
||||
row-gap: var(--stack-large);
|
||||
}
|
||||
nav li {
|
||||
align-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.iconBox {
|
||||
display: inline-block;
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
}
|
||||
p,
|
||||
ul {
|
||||
margin-block-end: var(--stack-large);
|
||||
max-inline-size: var(--line-length);
|
||||
}
|
||||
form p {
|
||||
margin-block-end: none;
|
||||
}
|
||||
a {
|
||||
color: var(--color-fg);
|
||||
margin: 0 -1ch;
|
||||
padding: 0 1ch;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-glow);
|
||||
|
||||
&:hover::before {
|
||||
color: var(--color-glow);
|
||||
content: "[";
|
||||
}
|
||||
&:hover::after {
|
||||
color: var(--color-glow);
|
||||
content: "]";
|
||||
}
|
||||
&:hover {
|
||||
color: var(--color-fg);
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
fieldset {
|
||||
border: 2px solid var(--color-fg);
|
||||
padding-block: var(--stack-small);
|
||||
padding-inline: var(--gutter-small);
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
label:has(> input[type="checkbox"]),
|
||||
label:has(> input[type="radio"]) {
|
||||
align-items: center;
|
||||
column-gap: var(--gutter-large);
|
||||
display: flex;
|
||||
margin-block: var(--stack-large);
|
||||
}
|
||||
/* TODO: use textarea-wrapper strategy to implement invisible inputs idea,
|
||||
but have the text-glow effect done on the ::after pseudo-element and hide
|
||||
the input when it isnt focused, and swap when focused */
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
input[type="number"],
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
textarea,
|
||||
.textarea-wrapper::after,
|
||||
select {
|
||||
background-color: var(--color-bg);
|
||||
border: 2px solid var(--color-accent);
|
||||
padding-block: var(--stack-small);
|
||||
padding-inline: var(--gutter-small);
|
||||
transition:
|
||||
border-color 0.5s,
|
||||
box-shadow 0.5s;
|
||||
width: 100%;
|
||||
}
|
||||
textarea,
|
||||
.textarea-wrapper::after {
|
||||
grid-area: 1 / 1 / 2 / 2; /* Place on top of each other */
|
||||
min-height: calc(2rlh + (var(--stack-small) * 2) - 2px);
|
||||
}
|
||||
.textarea-wrapper {
|
||||
display: grid;
|
||||
}
|
||||
.textarea-wrapper::after {
|
||||
content: attr(data-replicated-value) " "; /* Needed to preventy jumpy behavior */
|
||||
visibility: hidden;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.textarea-wrapper > textarea {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
}
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
box-shadow: 0 0 5px var(--color-glow);
|
||||
outline: none;
|
||||
}
|
||||
input:disabled,
|
||||
textarea:disabled,
|
||||
select:disabled,
|
||||
button:disabled,
|
||||
fieldset:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"] {
|
||||
background-color: var(--color-accent);
|
||||
box-shadow: 0 0 2px var(--color-glow);
|
||||
color: var(--color-bg);
|
||||
margin-block: var(--stack-small);
|
||||
padding-block: var(--stack-small);
|
||||
padding-inline: var(--gutter-small);
|
||||
transition: background-color 0.5s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button:hover:enabled,
|
||||
input[type="submit"]:hover:enabled,
|
||||
input[type="reset"]:hover:enabled {
|
||||
background-color: var(--color-accent-bright);
|
||||
}
|
||||
button:active:enabled,
|
||||
input[type="submit"]:active:enabled,
|
||||
input[type="reset"]:active:enabled {
|
||||
background-color: var(--color-accent-bright);
|
||||
}
|
||||
|
||||
/*input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
background-color: var(--color-bg);
|
||||
border: 2px solid var(--color-fg);
|
||||
cursor: pointer;
|
||||
height: var(--pt-english);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: var(--pt-english);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked,
|
||||
input[type="radio"]:checked {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
color: var(--color-accent);
|
||||
content: "✓";
|
||||
font-size: var(--pt-long-primer);
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked::after {
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: var(--pt-minion);
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
width: var(--pt-minion);
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
|
||||
background-position: calc(100% - 8px) center;
|
||||
background-repeat: no-repeat;
|
||||
padding-block-end: var(--stack-small);
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
background-color: var(--color-bg);
|
||||
border: 2px dashed var(--color-fg);
|
||||
cursor: pointer;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type="file"]::file-selector-button {
|
||||
background-color: var(--color-accent);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--bg-color);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
margin-right: 10px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
appearance: none;
|
||||
background-color: var(--color-fg);
|
||||
border-radius: 3px;
|
||||
height: 6px;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
background-color: var(--color-accent);
|
||||
border: 2px solid var(--bg-color);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
border: 2px solid var(--color-fg);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
padding: 2px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
input:invalid,
|
||||
textarea:invalid,
|
||||
select:invalid {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
label.required::after {
|
||||
color: var(--color-accent);
|
||||
content: "*";
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"] {
|
||||
background-color: var(--color-accent);
|
||||
border: 2px solid var(--color-accent);
|
||||
border-radius: 4px;
|
||||
color: var(--bg-color);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
padding: 10px 20px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover {
|
||||
background-color: var(--color-fg);
|
||||
border-color: var(--color-fg);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
button:active,
|
||||
input[type="submit"]:active,
|
||||
input[type="reset"]:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
progress {
|
||||
background-color: var(--color-bg);
|
||||
border: 2px solid var(--color-fg);
|
||||
border-radius: 4px;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: var(--color-bg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 2px;
|
||||
}
|
||||
*/
|
||||
BIN
public/unscii-16.ttf
Normal file
BIN
public/unscii-16.ttf
Normal file
Binary file not shown.
BIN
public/unscii-16.woff
Normal file
BIN
public/unscii-16.woff
Normal file
Binary file not shown.
BIN
public/unscii-8.ttf
Normal file
BIN
public/unscii-8.ttf
Normal file
Binary file not shown.
BIN
public/unscii-8.woff
Normal file
BIN
public/unscii-8.woff
Normal file
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue