pages/assets/styles/millironx.css

619 lines
14 KiB
CSS

:root {
/*
Color schemes
*/
color-scheme: light dark;
--ear-tag-red-1: oklch(97.5% 0.016 35.7);
--ear-tag-red-2: oklch(95.9% 0.027 37.7);
--ear-tag-red-3: oklch(91.8% 0.055 33.4);
--ear-tag-red-4: oklch(84% 0.092 29.8);
--ear-tag-red-5: oklch(80% 0.123 29.8);
--ear-tag-red-6: oklch(71% 0.146 29.8);
--ear-tag-red-7: oklch(66% 0.154 29.8);
--ear-tag-red-8: oklch(58% 0.162 29.8);
--ear-tag-red-9: oklch(53% 0.154 29.8);
--ear-tag-red-10: oklch(49% 0.146 29.8);
--ear-tag-red-11: oklch(42% 0.131 29.8);
--ear-tag-red-12: oklch(35% 0.115 29.8);
--ear-tag-red-13: oklch(27% 0.092 29.8);
--ear-tag-red-14: oklch(20% 0.07 29.8);
--ear-tag-red-15: oklch(16% 0.054 29.8);
--ear-tag-red-16: oklch(10% 0.039 29.8);
--ear-tag-red: var(--ear-tag-red-12);
--swiss-brown-1: oklch(98% 0.011 67.7);
--swiss-brown-2: oklch(97% 0.023 67.7);
--swiss-brown-3: oklch(93% 0.039 67.7);
--swiss-brown-4: oklch(84% 0.046 67.7);
--swiss-brown-5: oklch(80% 0.061 67.7);
--swiss-brown-6: oklch(71% 0.072 67.7);
--swiss-brown-7: oklch(66% 0.076 67.7);
--swiss-brown-8: oklch(58% 0.08 67.7);
--swiss-brown-9: oklch(53% 0.076 67.7);
--swiss-brown-10: oklch(49% 0.072 67.7);
--swiss-brown-11: oklch(42% 0.065 67.7);
--swiss-brown-12: oklch(35% 0.057 67.7);
--swiss-brown-13: oklch(27% 0.046 67.7);
--swiss-brown-14: oklch(20% 0.035 67.7);
--swiss-brown-15: oklch(16% 0.027 67.7);
--swiss-brown-16: oklch(10% 0.019 67.7);
--swiss-brown: var(--swiss-brown-12);
--prickly-pear-yellow-1: oklch(98% 0.017 94.5);
--prickly-pear-yellow-2: oklch(97% 0.035 94.5);
--prickly-pear-yellow-3: oklch(93% 0.059 94.5);
--prickly-pear-yellow-4: oklch(84% 0.07 94.5);
--prickly-pear-yellow-5: oklch(80% 0.093 94.5);
--prickly-pear-yellow-6: oklch(71% 0.11 94.5);
--prickly-pear-yellow-7: oklch(66% 0.116 94.5);
--prickly-pear-yellow-8: oklch(58% 0.122 94.5);
--prickly-pear-yellow-9: oklch(53% 0.116 94.5);
--prickly-pear-yellow-10: oklch(49% 0.11 94.5);
--prickly-pear-yellow-11: oklch(42% 0.099 94.5);
--prickly-pear-yellow-12: oklch(35% 0.083 93.6);
--prickly-pear-yellow-13: oklch(27.1% 0.064 92.8);
--prickly-pear-yellow-14: oklch(20% 0.047 92.4);
--prickly-pear-yellow-15: oklch(16% 0.038 93.3);
--prickly-pear-yellow-16: oklch(10% 0.024 89.7);
--prickly-pear-yellow: var(--prickly-pear-yellow-7);
--hayyard-green-1: oklch(98% 0.014 135);
--hayyard-green-2: oklch(97% 0.03 135);
--hayyard-green-3: oklch(93% 0.049 135);
--hayyard-green-4: oklch(84% 0.058 135);
--hayyard-green-5: oklch(80% 0.078 135);
--hayyard-green-6: oklch(71% 0.092 135);
--hayyard-green-7: oklch(66% 0.097 135);
--hayyard-green-8: oklch(58% 0.103 135);
--hayyard-green-9: oklch(53% 0.097 135);
--hayyard-green-10: oklch(49% 0.092 135);
--hayyard-green-11: oklch(42% 0.083 135);
--hayyard-green-12: oklch(35% 0.073 135);
--hayyard-green-13: oklch(27% 0.058 135);
--hayyard-green-14: oklch(20% 0.044 135);
--hayyard-green-15: oklch(16% 0.034 135);
--hayyard-green-16: oklch(10% 0.025 135);
--hayyard-green: var(--hayyard-green-11);
--flaming-gorge-blue-1: oklch(98% 0.012 241);
--flaming-gorge-blue-2: oklch(96.8% 0.021 230);
--flaming-gorge-blue-3: oklch(92.9% 0.041 242);
--flaming-gorge-blue-4: oklch(84% 0.051 245);
--flaming-gorge-blue-5: oklch(80% 0.069 245);
--flaming-gorge-blue-6: oklch(71% 0.081 245);
--flaming-gorge-blue-7: oklch(66% 0.086 245);
--flaming-gorge-blue-8: oklch(58% 0.09 245);
--flaming-gorge-blue-9: oklch(53% 0.086 245);
--flaming-gorge-blue-10: oklch(49% 0.081 245);
--flaming-gorge-blue-11: oklch(42% 0.073 245);
--flaming-gorge-blue-12: oklch(35% 0.064 245);
--flaming-gorge-blue-13: oklch(27% 0.051 245);
--flaming-gorge-blue-14: oklch(20% 0.039 245);
--flaming-gorge-blue-15: oklch(16% 0.03 245);
--flaming-gorge-blue-16: oklch(10% 0.022 245);
--flaming-gorge-blue: var(--flaming-gorge-blue-12);
--coeurdalene-purple-1: oklch(97.8% 0.016 311);
--coeurdalene-purple-2: oklch(96.5% 0.026 314);
--coeurdalene-purple-3: oklch(92.5% 0.052 308);
--coeurdalene-purple-4: oklch(84% 0.097 302);
--coeurdalene-purple-5: oklch(80% 0.129 302);
--coeurdalene-purple-6: oklch(71% 0.153 302);
--coeurdalene-purple-7: oklch(66% 0.162 302);
--coeurdalene-purple-8: oklch(58% 0.17 302);
--coeurdalene-purple-9: oklch(53% 0.162 302);
--coeurdalene-purple-10: oklch(49% 0.153 302);
--coeurdalene-purple-11: oklch(42% 0.138 302);
--coeurdalene-purple-12: oklch(35% 0.121 302);
--coeurdalene-purple-13: oklch(27% 0.097 302);
--coeurdalene-purple-14: oklch(20% 0.073 302);
--coeurdalene-purple-15: oklch(16% 0.056 302);
--coeurdalene-purple-16: oklch(10% 0.041 302);
--coeurdalene-purple: var(--coeurdalene-purple-13);
--eclipse-1: oklch(98% 0 0);
--eclipse-2: oklch(97% 0 0);
--eclipse-3: oklch(93% 0 0);
--eclipse-4: oklch(84% 0 0);
--eclipse-5: oklch(80% 0 0);
--eclipse-6: oklch(71% 0 0);
--eclipse-7: oklch(66% 0 0);
--eclipse-8: oklch(58% 0 0);
--eclipse-9: oklch(53% 0 0);
--eclipse-10: oklch(49% 0 0);
--eclipse-11: oklch(42% 0 0);
--eclipse-12: oklch(35% 0 0);
--eclipse-13: oklch(27% 0 0);
--eclipse-14: oklch(20% 0 0);
--eclipse-15: oklch(16% 0 0);
--eclipse-16: oklch(10% 0 0);
--eclipse: var(--eclipse-12);
--cowhide-1: oklch(98% 0.009 77.5);
--cowhide-2: oklch(97% 0.018 77.5);
--cowhide-3: oklch(93% 0.029 77.5);
--cowhide-4: oklch(84% 0.034 77.5);
--cowhide-5: oklch(80% 0.046 77.5);
--cowhide-6: oklch(71% 0.054 77.5);
--cowhide-7: oklch(66% 0.057 77.5);
--cowhide-8: oklch(58% 0.06 77.5);
--cowhide-9: oklch(53% 0.057 77.5);
--cowhide-10: oklch(49% 0.054 77.5);
--cowhide-11: oklch(42% 0.049 77.5);
--cowhide-12: oklch(35% 0.043 77.5);
--cowhide-13: oklch(27% 0.034 77.5);
--cowhide-14: oklch(20% 0.026 77.5);
--cowhide-15: oklch(16% 0.02 77.5);
--cowhide-16: oklch(10% 0.015 77.5);
--cowhide: var(--cowhide-3);
--body-background: light-dark(var(--cowhide-3), var(--eclipse-11));
--link-color: light-dark(
var(--flaming-gorge-blue),
var(--coeurdalene-purple-4)
);
--nav-button-text: light-dark(var(--eclipse-2), var(--cowhide-12));
--nav-button-background: light-dark(var(--eclipse-11), var(--cowhide-2));
--nav-button-background-hover: light-dark(
var(--eclipse-13),
var(--cowhide-4)
);
--nav-button-background-active: light-dark(
var(--eclipse-14),
var(--cowhide-5)
);
--container-border: light-dark(var(--swiss-brown-6), var(--eclipse-16));
--container-background: light-dark(var(--swiss-brown-4), var(--eclipse-12));
--motto-background: rgba(0, 0, 0, 0.66);
--page-button-text: var(--prickly-pear-yellow-1);
--page-button-background: var(--prickly-pear-yellow-8);
--page-button-background-hover: var(--prickly-pear-yellow-10);
--page-button-background-active: var(--prickly-pear-yellow-12);
--page-button-background-disabled: var(--prickly-pear-yellow-6);
--page-button-text-disabled: var(--eclipse-7);
/*
Fonts
*/
--font-family-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
"URW Bookman L", "Georgia Pro", Georgia, serif;
--font-family-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
"DejaVu Serif", "Sitka Small", serif;
--font-family-system-ui: system-ui, sans-serif;
}
/*
Default element styles (for small screens)
*/
html {
background-color: var(--body-background);
font-family: var(--font-family-slab-serif);
}
a {
color: var(--link-color);
}
header {
display: flex;
justify-content: space-evenly;
align-items: center;
}
nav {
display: flex;
flex-direction: row;
overflow: scroll;
padding-bottom: 1rem;
position: sticky;
top: 0;
}
nav a {
color: var(--nav-button-text);
background-color: var(--nav-button-background);
border-radius: 0.05rem;
border-style: outset;
border-width: 0.2rem;
border-color: var(--nav-button-background);
min-width: 7.5rem;
max-width: 7.5rem;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.2rem;
text-decoration: none;
padding: 0 0.2rem;
font-family: var(--font-family-system-ui);
}
nav a.active {
background-color: var(--nav-button-background-active);
}
nav a:active {
border-style: inset;
}
nav a:hover {
background-color: var(--nav-button-background-hover);
}
figure {
border-color: var(--container-border);
border-width: 1.5pt;
border-style: inset;
border-radius: 2.5pt;
background-color: var(--container-background);
padding: 1.25pt;
}
blockquote {
background: linear-gradient(
to right,
var(--container-border),
var(--container-background)
);
border-left: 5px solid black;
padding: 1px;
padding-left: 6px;
}
blockquote small::before {
content: "\2014 \00A0";
}
blockquote small {
font-size: 80%;
}
footer {
background-color: var(--container-background);
margin: 0 0 -1em -1em;
width: calc(100% - 1em);
padding: 0.25em 1.25em;
display: flex;
justify-content: space-between;
align-items: center;
}
form {
margin: 1rem;
}
fieldset {
padding: 1rem;
}
input,
select,
textarea {
width: 100%;
margin-bottom: 0.5rem;
}
input:invalid,
select:invalid,
textarea:invalid {
border-bottom-width: 2px;
border-bottom-color: var(--ear-tag-red);
}
/*
Container-type helper classes
*/
.row {
display: flex;
flex-direction: column;
width: 100%;
}
.motto {
position: relative;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-weight: 600;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.33);
width: 100%;
padding: 0 0 0.5em 0;
border-radius: 0.25rem;
z-index: 10;
}
.motto::before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
background-size: cover;
background-position: 50% 50%;
}
.motto-inside {
position: relative;
max-width: 95%;
display: grid;
place-items: center;
text-align: center;
}
.motto .motto-inside h1 {
background-color: var(--motto-background);
}
.card {
background-color: var(--container-background);
border-color: var(--container-border);
border-width: 1.5pt;
border-radius: 0.1rem;
border-style: outset;
margin: 1rem 0;
padding: 0.5rem;
padding-top: 0;
position: relative;
display: flex;
flex-direction: column;
}
.card-link {
white-space: nowrap;
display: inline-flex;
gap: 0.375rem;
align-items: center;
text-underline-offset: 0.25em;
backface-visibility: hidden;
margin: 0 0.5em;
}
.category-button {
position: absolute;
top: 1em;
right: 1em;
display: grid;
color: white;
background-color: var(--ear-tag-red);
border-radius: 0.5em;
padding: 1em;
}
.card-title a h3 {
margin-right: 3.5em;
}
.card-title > a {
color: inherit;
}
.img-thumbnail {
width: 100%;
height: auto;
margin-top: 0.5rem;
}
.thumb-icon-wrapper {
margin-top: 1rem;
display: flex;
justify-content: center;
align-content: center;
}
.thumb-icon-badge {
font-size: xx-large;
justify-self: center;
align-self: center;
padding: 1.5rem 3rem;
border-radius: 3rem;
background-color: var(--ear-tag-red);
color: white;
}
.fa-container svg {
overflow: visible;
box-sizing: content-box;
display: inline-block;
height: 1em;
width: 1.25em;
vertical-align: -0.125em;
}
.fa-container svg path {
fill: currentColor;
}
.account-list {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width: calc(100% - 1.5em);
}
.account-list a {
font-size: xx-large;
text-decoration: none;
color: inherit;
padding: 0.5em;
}
.account-list a:hover {
background-color: var(--container-background);
border-color: var(--container-border);
border-width: 2.5px;
border-radius: 0.5em;
border-style: solid;
padding: calc(0.5em - 2.5px);
}
/*
Helper classes
*/
.font-small-caps {
font-variant-caps: small-caps;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.float-left {
float: none;
max-width: 100%;
}
.float-right {
float: none;
max-width: 100%;
}
.pagination {
display: flex;
justify-content: center;
gap: 0.5em;
}
.pagination li {
list-style-type: none;
color: var(--nav-button-text);
}
.pagination li a {
color: var(--page-button-text);
background-color: var(--page-button-background);
border-radius: 0.05rem;
border-style: outset;
border-width: 0.2rem;
border-color: var(--page-button-background);
min-width: 2rem;
max-width: 2rem;
min-height: 2rem;
max-height: 2rem;
display: flex;
justify-content: center;
align-items: center;
margin: 0.2rem;
text-decoration: none;
padding: 0 0.2rem;
font-family: var(--font-family-system-ui);
}
.pagination li a:hover {
background-color: var(--page-button-background-hover);
}
.pagination li.active a {
background-color: var(--page-button-background-active);
}
.pagination li.disabled a {
cursor: not-allowed;
background-color: var(--page-button-background-disabled);
color: var(--page-button-text-disabled);
border-style: solid;
}
/*
Desktop screen size adjustments
*/
@media (min-width: 768px) {
/*
Default element styles
*/
nav {
flex-direction: column;
padding-right: 1rem;
padding-bottom: 0;
/*
Workaround for Chrome always showing scrollbar even when scrolling not needed
*/
-ms-overflow-style: none;
scrollbar-width: none;
}
/*
Continued Chrome workaround
*/
nav::-webkit-scrollbar {
display: none;
}
main {
width: calc(100% - 10rem);
}
/*
Container-type helper classes
*/
.row {
flex-direction: row;
}
.person-profile {
position: sticky;
top: 0;
width: 300px;
min-width: 20vw;
max-width: 30vw;
}
/*
Helper classes
*/
.float-left {
float: left;
max-width: 50%;
}
.float-right {
float: right;
max-width: 50%;
}
.card {
flex-direction: row;
}
.img-thumbnail {
margin-right: 1rem;
}
.card-header {
width: 20vw;
flex-shrink: 0;
}
.card-body {
margin-left: 1rem;
}
.bolder {
font-weight: bolder;
background-color: rgba(0, 0, 0, 0.33);
border-radius: 0.25em;
padding: 0.25em 0.75em 0.5em 0.33em;
}
/*
Clearfix implementation
*/
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
blockquote::before {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
} /* end @media */