@charset "UTF-8";
/* Stylesheet crafted by myself (Suzy McHale); last revised 4/4/2026
COLORS
•Basic colors: Black: #000, Grey: #ccc / rgb(204, 204, 204), White: #fff
•Directories have one bright color, derived from the web-safe version of the "fruit-flavored" iMac G3s (https://en.wikipedia.org/wiki/IMac_G3#Specifications):
Main: Lime - #02ac3f / rgb(2,172,63) safe - #093
Articles: Indigo - #19377f / rgb(25,55,127) safe - #036
Blogger: Tangerine - #ff9f1b / rgb(255,159,27) safe - #f93
Creative: Grape - #64638f / rgb(100,99,143) safe - #669
Personal: Bondi Blue - #178a9c / rgb(23, 138, 156) safe - #099
Journal: Strawberry - #bf005d / rgb(191,0,93) safe - #c06
RuSpace: Blueberry - #069ac0 / rgb(6,154,192) safe - #09c
Unused: Graphite: #535e62 / rgb(83,94,98) safe - #666; Sage - #075a4a / rgb(7,90,74) safe - #099
•Contents approx order:
BODY
LINKS
GENERATED CONTENT
FONT SIZES
LAYOUT
NAVIGATION
BLOCK ELEMENTS - GENERAL
TABLES
CLASSES, IDs - GENERAL
IMAGES
FORMS
COLORS
MISC
@MEDIA STYLES
PRINT STYLES */
/* BODY */
body {
background-color: #ccc;
color: #000;
font-family: Verdana, Helvetica, sans-serif;
line-height: 1.6;
margin: 0 auto;
position: relative;
/* For Safari bug - text appears too big otherwise in horizontal mode - https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust */
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
scrollbar-gutter: stable;
text-size-adjust: none;
}
/* https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide/ */
@view-transition {
navigation: auto;
}
/* LINKS */
/* •Important to keep links in LVHFA (Link-Visited-Hover-Focus-Active) order;
•Text-decoration-line: underline/overline/line-through/none; text-decoration-style: solid/double/dotted/dashed/wavy;
•Sub-directory link colors first - other colors in COLORS section */
a,
a[href*="/"] {
color: #093;
text-underline-offset: .2em;
}
:target:not(table tr, table td):after {
color: #ccc;
content: "\00a0\0023";
}
.articles a,
a[href*="articles/"],
a[href*="/articles/"] {
color: #036;
}
.blogger a,
a[href*="blogger/"],
a[href*="/blogger/"] {
color: #f93;
}
.creative a,
a[href*="creative/"],
a[href*="/creative/"] {
color: #669;
}
.personal a,
a[href*="personal/"],
a[href*="/personal/"] {
color: #099;
}
.journal a,
a[href*="journal/"],
a[href*="/journal/"] {
color: #c06;
}
.rs a,
a[href*="ruspace/"],
a[href*="/ruspace/"] {
color: #09c;
}
a:visited {
text-decoration-color: #ccc;
}
a:hover,
a:focus,
a:active {
text-decoration: none;
}
/* For keyboard tabbing only */
a:focus-visible {
outline: .1em solid #ccc;
}
a img {
border: 0;
}
a:hover img,
a:focus img,
a:active img {
opacity: 75%;
outline: .1em solid #ccc;
}
a[href^="http"]:not(:has(img)) {
text-decoration-style: double;
}
a[href*="#"]:not(:has(img), a[href*="http"], .toc a) {
text-decoration-style: dashed;
}
a[href^="http"],
a[href="http://suzymchale.com"],
a[href="http://suzymchale.com/index.html"],
a[href="http://suzymchale.com/sitemap.html"] {
border-bottom: none;
}
/* Local image links */
a[href*=".jpg"]:not(a[href*="http"]),
a[href*=".jpeg"]:not(a[href*="http"]),
a[href*=".png"]:not(a[href*="http"]),
a[href*=".gif"]:not(a[href*="http"]) {
text-decoration-style: wavy;
}
/* a:link more specific than a to get the below color to work */
h1 a:link,
h2 a:link,
h3 a:link,
h4 a:link,
h5 a:link,
h6 a:link,
.toc a:link {
text-decoration: none;
}
h1 a:link,
h2 a:link,
h3 a:link,
h4 a:link,
h5 a:link,
h6 a:link,
h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited {
color: #000;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
h1 a:focus,
h2 a:focus,
h3 a:focus,
h4 a:focus,
h5 a:focus,
h6 a:focus,
h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active,
.toc a[href^="#"]:hover,
.toc a[href^="#"]:focus,
.toc a[href^="#"]:active {
text-decoration-line: underline;
}
h1 a[href^="http"]:hover,
h2 a[href^="http"]:hover,
h3 a[href^="http"]:hover,
h4 a[href^="http"]:hover,
h5 a[href^="http"]:hover,
h6 a[href^="http"]:hover,
h1 a[href^="http"]:focus,
h2 a[href^="http"]:focus,
h3 a[href^="http"]:focus,
h4 a[href^="http"]:focus,
h5 a[href^="http"]:focus,
h6 a[href^="http"]:focus,
h1 a[href^="http"]:active,
h2 a[href^="http"]:active,
h3 a[href^="http"]:active,
h4 a[href^="http"]:active,
h5 a[href^="http"]:active,
h6 a[href^="http"]:active {
text-decoration-style: double;
}
.toc a[href^="#"]:hover,
.toc a[href^="#"]:focus,
.toc a[href^="#"]:active {
text-decoration-style: dashed;
}
.crumb a,
.pagination a {
color: inherit;
padding-right: .5em;
padding-left: .5em;
}
.crumb a:hover,
.pagination a:hover,
.crumb a:focus,
.pagination a:focus,
.crumb a:active,
.pagination a:active {
text-decoration: overline;
}
/* GENERATED CONTENT - CSS attribute selectors */
.update:before {
content: "Updated: " / "Updated: ";
font-style: oblique;
font-variant: small-caps;
}
/* FONT SIZES */
/* When in doubt, use rems for font size, pixels for borders, and ems for most other properties. Avoid setting the font-size of container elements where possible to avoid problems with nesting - https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals */
:root, html {
font-size: 100%;
}
blockquote,
button,
div[class*="gallery"],
img,
input,
table,
td,
th,
.col2,
.credit,
.figure,
.figure[class*="width"],
.gallery,
.navmain,
.infobox {
font-size: .9rem;
}
small,
sub,
sup,
.footnote,
.frac {
font-size: .8rem;
}
sub {
vertical-align: sub;
}
sup {
vertical-align: super;
}
/* LAYOUT */
body:before {
content: "Suzy’s site" / "Suzy’s site";
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: 2.2rem;
font-variant: small-caps;
display: block;
margin: 0 auto;
max-width: 80em;
padding: .5em;
text-align: center;
}
.main {
background-color: #fff;
clear: both;
margin: 0 auto 1em;
max-width: 80em;
padding: 1em;
position: relative;
text-align: left;
}
/* NAVIGATION */
/* Breadcrumb trail, previous and next links for Journals */
.crumb,
.pagination {
color: #000;
}
.crumb,
.pagination {
clear: both;
font-variant: small-caps;
padding: 0;
}
.crumb li,
.pagination li {
display: inline-block;
list-style-type: " ";
}
.crumb:before {
color: #ccc;
content: "You are here: " / "You are here: ";
font-style: italic;
}
/* .crumb a[href="../index.html"]:before {
content: "🏠 "
} */
.crumb li:after {
color: #ccc;
content: "\00a0\2192 ";
font-size: 1.1rem;
font-weight: bold;
}
.pagination {
text-align: center;
}
.pagination li+li:before {
color: #ccc;
content: " | ";
}
/* Previous and next links */
li.prev:before {
color: #ccc;
content: "\2190\00a0";
font-size: 1.1rem;
font-weight: bold;
}
li.next:after {
color: #ccc;
content: "\00a0\2192";
font-size: 1.1rem;
font-weight: bold;
}
/* BLOCK ELEMENTS */
abbr,
acronym {
cursor: help;
font-variant: small-caps;
text-decoration-line: underline;
text-decoration-style: dotted;
white-space: nowrap;
}
b,
strong {
font-weight: bold;
}
blockquote {
border-left: .5em solid #ccc;
padding-left: .5em;
}
blockquote blockquote {
border-left: none;
}
blockquote blockquote {
font-style: italic;
}
blockquote blockquote blockquote {
font-style: normal;
}
blockquote+blockquote {
border-top: .1em solid #ccc;
}
caption {
font-variant: small-caps;
}
cite cite,
cite i,
i cite,
ins i,
ins cite,
em i,
i i {
font-style: normal;
}
code,
kbd,
samp {
font-family: 'Courier New', monospace;
white-space: normal;
/* ^ Allows wrapping inside the element */
}
kbd {
outline: .1em outset #ccc;
}
dl {
border-bottom: .1em dotted #ccc;
}
dt:after {
color: #ccc;
content: ":";
}
.footnote dt:after {
content: "\2934";
}
dd {
background-color: #fff;
}
em,
i,
cite {
font-style: italic;
font-weight: normal;
}
em em,
i em {
font-variant: small-caps;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-weight: normal;
line-height: normal;
}
h1 {
font-size: 1.9rem;
}
h1 a {
text-decoration: none;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.4rem;
}
h2 {
border-bottom: .1em solid #ccc;
}
h2 a {
text-decoration: none;
}
h3 {
border-bottom: .1em dashed #ccc;
}
h4 {
font-size: 1.3rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-style: italic;
}
hr {
border: none;
height: .1em;
width: 90%;
}
hr.hide {
display: none;
line-height: 0;
margin: 0;
overflow: hidden;
padding: 0;
}
img {
color: #ccc;
/* ^ Styles alt text */
font-style: italic;
height: auto;
max-width: 100%;
/* ^ Scales images for narrow screens - http://www.alistapart.com/articles/fluid-images/ */
-ms-interpolation-mode: bicubic;
page-break-inside: avoid;
}
ins,
del {
color: #ccc;
}
ins {
font-style: italic;
text-decoration: none;
}
ins:before {
content: "[";
}
ins:after {
content: "]";
}
pre {
background-color: #ccc;
font-family: 'Courier New', monospace;
overflow-x: scroll;
padding: .5em;
}
/* ChatGPT: inside a <pre> element, line breaks and whitespace are preserved by default. However, when you place <code> inside <pre>, the <code> element can override that behavior depending on its CSS (especially if a framework sets white-space differently) Fix: Ensure <code> inherits the <pre> whitespace behavior: */
pre code {
white-space: inherit;
white-space: pre;
}
q, .quote {
font-style: italic;
}
sub,
sup {
line-height: 0;
}
svg {
clear: none;
display: inline;
}
/* TABLES */
table {
background-color: #fff;
border-collapse: collapse;
border-spacing: 0;
clear: both;
display: block;
/* Need display:block to enable sideways scrolling on small screens - https://stackoverflow.com/questions/19794211/horizontal-scroll-on-overflow-of-table - but this makes borders double up, so use portrait display:block instead */
empty-cells: show;
margin: 0 auto .5em;
max-width: fit-content;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
table-layout: auto;
}
td,
th,
tr {
border: .1em solid #ccc;
}
table tr:hover td {
background-color: #ccc;
}
table caption {
font-weight: 700;
letter-spacing: .01em;
text-align: center;
}
table a:hover img,
table a:active img {
opacity: 75%;
}
table ul,
table ol {
list-style-position: inside;
}
th,
td,
tr {
overflow-wrap: break-word;
padding: .5em;
vertical-align: top;
}
th,
thead {
text-align: center;
}
td {
empty-cells: show;
text-align: left;
}
td:nth-child(n):before {
color: #ccc;
font-style: italic;
font-variant: small-caps;
white-space: pre-wrap;
}
td ol,
td ul {
margin-left: 0;
padding-left: 0;
}
ul,
ol {
list-style-position: inside;
}
wbr:after {
content: "\00200B";
}
/* CLASSES, IDs */
.alignc {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
width: fit-content;
}
.alignc img {
display: inline-block;
vertical-align: top;
}
.alignc p {
text-align: center;
}
.alignl {
clear: left;
float: left;
margin-right: .5em;
}
.alignr {
clear: right;
float: right;
margin-left: .5em;
}
.aside {
border: .1em dashed #ccc;
padding: .5em;
}
.bold,
.question {
font-weight: 700;
}
.caption {
font-style: italic;
}
.caption:before {
content: "[Image: " / "Image: "
}
.caption:after {
content: "]"
}
.column {
columns: 2;
column-rule: .1em dotted #ccc;
list-style-position: inside;
}
.column form,
.column img {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
ol.column,
ul.column {
list-style-position: inside;
}
.toc.column {
font-variant: small-caps;
}
/* For <cite> after <blockquote> */
.credit {
font-variant: small-caps;
text-align: right;
}
.current {
font-weight: bold;
}
/* Emoticons */
.emote {
border: .1em solid #ccc;
color: #fff;
cursor: help;
display: inline-block;
margin-left: .1em;
margin-right: .1em;
padding: .1em;
text-decoration: none;
white-space: nowrap;
}
/* For fractions such as 1/4, to keep together; wrap with a span tag */
.frac {
font-family: 'Courier New', monospace;
white-space: nowrap;
}
/* ul and ol inline lists */
.inline {
padding: .5em;
}
.inline li {
display: inline;
list-style-type: " ";
padding-left: .5em;
padding-right: .4em;
}
.inline li+li {
border-left: .1em solid #ccc;
}
.toc.inline {
font-variant: small-caps;
}
/* Site logo */
.logosm {
-webkit-text-stroke-width: .1em;
-webkit-text-stroke-color: #036;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-color: #fff;
padding: 0;
font: bold 2rem 'Trebuchet MS', Tahoma, sans-serif;
background-clip: text;
background-size: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #c06, #c06 30%, #f93 30%, #f93 45%, #093 45%, #093 60%, #09c 60%, #09c 75%, #669 75%, #669);
}
.quote {
font-style: italic;
}
/* Generated counting numbers for in a table */
.serial {
counter-reset: serial-number;
/* ^ Set the serial number counter to 0 */
}
.shadow {
text-shadow: 0 0 .1em #000;
}
/* Table of contents for pages */
.toc {
background-color: #fff;
border: .1em dashed #ccc;
font-variant: small-caps;
list-style-position: inside;
line-height: normal;
padding: .5em;
}
.toc ul,
.toc ol {
border: 0;
}
.toc li {
list-style-type: " ";
}
.toc:before {
color: #ccc;
content: "Table of contents: " / "Table of contents";
font-style: italic;
}
.toc ol:before,
.toc ul:before {
content: none;
}
.toc.inline {
text-align: left;
}
ul[class="toc left"],
ul[class="toc right"] {
max-width: 13em;
}
.update,
.end {
clear: both;
color: #ccc;
font-variant: small-caps;
text-align: right;
}
.update+.hide {
clear: both;
}
/* IMAGES */
.figure {
background-color: #fff;
border: .1em dashed #ccc;
clear: both;
display: block;
inline-size: fit-content;
list-style-position: inside;
margin: 0 auto .5em;
margin-inline: auto;
padding: .5em;
}
.figure p,
.figure li {
contain: inline-size;
/* ^ https://frontendmasters.com/blog/the-figcaption-problem/ - make text wrap to image size in container */
text-align: left;
}
.figure>p:before {
color: #ccc;
content: "\2191\00a0";
}
.figure.alignr {
clear: right;
margin-left: .5em;
text-align: left;
}
.figure.alignl {
clear: left;
margin-right: .5em;
text-align: left;
}
.figure img~img:not(p) {
display: inline-block;
margin-left: .5em;
margin-bottom: .5em;
vertical-align: top;
}
/* Vertical floated image gallery - don't use float:left with display: inline-block */
.gallery {
clear: both;
margin: 0 0 .5em 0;
padding: .5em;
}
.gallery .figure {
display: inline-block;
margin: .5em;
overflow: hidden;
vertical-align: top;
max-width: 15em;
/* IE-6 and 7 hack - https: //blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */
zoom: 1;
*display: inline;
}
.gallery .figure {
max-width: 15em;
padding: .5em;
}
.gallery .figure>p:before {
color: #ccc;
content: "\2191\00a0";
}
.alignc img,
.alignl img,
.alignr img,
.gallery img {
display: block;
margin: 0 auto .5em;
}
/* FORMS */
/* Reset */
input {
-webkit-appearance: none;
appearance: none;
background: none;
box-shadow: none;
cursor: pointer;
border: none;
color: inherit;
font: inherit;
padding: 0;
text-align: inherit;
}
input,
select,
textarea {
border: 0;
font-family: inherit;
}
form {
background-color: #ccc;
color: #000;
margin: .5em auto;
padding: .5em;
text-align: center;
width: calc(100% / 2);
}
form p {
text-align: center;
}
form input,
form textarea {
background-color: #fff;
display: block;
font-family: inherit;
margin: 0 auto .5em auto;
padding: .2em;
}
form input[type=text] {
width: auto;
width: calc(100% - .5em);
}
input[type=submit],
input[type=reset] {
-webkit-appearance: none;
appearance: none;
background-color: #fff;
cursor: pointer;
display: block;
text-align: center;
}
form input:focus,
form textarea:focus {
border: .1em solid #000;
outline: .1em solid #000;
}
form[type=submit] {
font-weight: bold;
}
fieldset {
border: .1em dashed #ccc;
}
legend {
font-style: italic;
}
/* COLORS */
/* Each directory has a different theme color; these are colors that are not basic gray */
/* Main, top directory */
html {
accent-color: #093;
caret-color: #093;
scrollbar-color: #093 #ccc;
}
h1 {
border-bottom: .1em solid #093;
}
::selection,
.emote,
hr,
input[type=submit]:hover,
input[type=reset]:hover,
input[type=submit]:focus,
input[type=reset]:focus,
input[type=submit]:active,
input[type=reset]:active {
background-color: #093;
}
::selection {
color: #fff;
}
body:before,
hr,
::marker,
summary {
color: #093;
}
/* Articles */
.articles {
accent-color: #036;
caret-color: #036;
scrollbar-color: #036 #ccc;
}
.articles h1 {
border-bottom: .1em solid #036;
}
.articles .emote,
.articles ::selection,
.articles hr {
background-color: #036;
}
.articles body:before,
.articles hr,
.articles ::marker,
.articles summary {
color: #036;
}
.articles body:before {
content: "Collected articles" / "Collected articles";
}
/* Blogger */
.blogger {
accent-color: #f93;
caret-color: #f93;
scrollbar-color: #f93 #ccc;
}
.blogger h1 {
border-bottom: .1em solid #f93;
}
.blogger .emote,
.blogger ::selection,
.blogger hr {
background-color: #f93;
}
.blogger body:before,
.blogger hr,
.blogger ::marker,
.blogger summary {
color: #f93;
}
.blogger body:before {
content: "Suzy’s Blogger" / "Suzy’s Blogger";
}
/* Creative */
.creative {
accent-color: #669;
caret-color: #669;
scrollbar-color: #669 #ccc;
}
.creative h1 {
border-bottom: .1em solid #669;
}
.creative .emote,
.creative ::selection,
.creative hr {
background-color: #669;
}
.creative body:before,
.creative hr,
.creative ::marker,
.creative summary {
color: #669;
}
.creative body:before {
content: "Suzy’s creative work" / "Suzy’s creative work";
}
/* Personal */
.personal {
accent-color: #099;
caret-color: #099;
scrollbar-color: #099 #ccc;
}
.personal h1 {
border-bottom: .1em solid #099;
}
.personal .emote,
.personal ::selection,
.personal hr {
background-color: #099;
}
.personal body:before,
.personal hr,
.personal ::marker,
.personal summary {
color: #099;
}
.personal body:before {
content: "Suzy and family" / "Suzy and family";
}
/* Journal */
.journal {
accent-color: #c06;
caret-color: #c06;
scrollbar-color: #c06 #ccc;
}
.journal h1 {
border-bottom: .1em solid #c06;
}
.journal ::selection,
.journal .emote,
.journal hr {
background-color: #c06;
}
.journal body:before,
.journal hr,
.journal ::marker,
.journal summary {
color: #c06;
}
.journal body:before {
content: "Suzy’s Journal" / "Suzy’s Journal";
}
/* RuSpace */
.rs {
accent-color: #09c;
caret-color: #09c;
scrollbar-color: #09c #ccc;
}
.rs h1 {
border-bottom: .1em solid #09c;
}
.rs .emote,
.rs ::selection,
.rs hr,
.rs sup[title="Footnote"] {
background-color: #09c;
}
.rs body:before,
.rs hr,
.rs ::marker,
.rs summary {
color: #09c;
}
.rs body:before {
content: "RuSpace" / "RuSpace";
}
/*MISC*/
/* Clear floats for .main - micro-clearfix hack - https://nicolasgallagher.com/micro-clearfix-hack/ */
.main:before,
.main:after {
content: " ";
display: table;
}
.main:after {
clear: both;
}
/* Clear floats for modern browsers */
.main:after {
display: flow-root;
}
@media only screen and (orientation: portrait) {
.crumb li,
.crumb li:before,
.crumb li:after {
display: block;
text-align: center;
}
.crumb li:after {
color: #ccc;
content: "\00a0\2193";
font-weight: bold;
}
.column {
columns: 1;
column-gap: 0;
column-width: auto;
}
.figure.alignl,
.figure.alignr {
float: none;
margin: auto;
}
}
/* @SUPPORTS for modern browsers */
@supports (background-color:#cccccc25) and (background-color:#fffffff2) {
abbr,
acronym,
dt,
table tr:nth-child(2n),
th,
:target,
::target-text {
/* 40% opacity */
background-color: #cccccc25;
}
blockquote blockquote blockquote {
border-left: .5em solid #cccccc25;
}
.main {
/* 95% opacity */
background-color: #fffffff2;
}
/* PRINT STYLES */
@media print {
body {
background: #fff none;
color: #000;
margin: 0;
max-width: none;
padding: 0;
}
body p {
margin: 0;
text-indent: 1em;
}
.main a[href^="http"]:not([href*="suzymchale.com"]):after {
color: #ccc;
content: " [" attr(href) "]";
font-size: .8rem;
word-break: break-all;
}
.main,
.infobox {
background: #fff none;
border: 0;
border: none;
float: none;
margin: 0;
max-width: none;
overflow: visible;
width: auto;
}
body:before,
.crumb,
.pagination,
.hide,
.toc {
display: none;
height: 0;
}
abbr[title]:after {
color: #ccc;
content: " (" attr(title) ")";
font-size: .8rem;
font-style: italic;
}
.main:after {
color: #ccc;
content: "© Suzanne McHale";
display: block;
font-style: italic;
font-size: .8rem;
}
.articles .main:after {
content: none;
}
.emote {
color: #000;
}
img,
.figure img {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
table,
td,
th,
tr {
overflow: visible;
overflow-wrap: break-word;
}
code,
pre {
overflow: visible;
/* For Safari, see https://developer.mozilla.org/en-US/docs/CSS/width */
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.scrollbox,
.wide {
box-shadow: none;
overflow: visible;
}
}