510 lines
10 KiB
CSS
510 lines
10 KiB
CSS
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Universal
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
/* Apply styling to all elements (including their `::before` and `::after`
|
||
pseudo-elements). One common use of this selector is to apply a custom
|
||
`box-sizing`. */
|
||
*, *::before, *::after {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Root
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
:root {}
|
||
html {}
|
||
body {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Content sectioning
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
h1, h2, h3, h4, h5, h6 {}
|
||
h1 {}
|
||
h2 {}
|
||
h3 {}
|
||
h4 {}
|
||
h5 {}
|
||
h6 {}
|
||
|
||
body > header {
|
||
position: sticky;
|
||
top: 0;
|
||
background-color: #FCF9F5;
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
width: 100vw !important;
|
||
max-width: 100vw;
|
||
/* border-bottom-width: thin;
|
||
border-bottom-style: solid;*/
|
||
padding-bottom: 0px !important;
|
||
margin-bottom: 0px !important;
|
||
padding-top: 0px !important;
|
||
/* padding-right: 1em !important;
|
||
padding-left: 1em !important;*/
|
||
/* color: #f1f1f1; */
|
||
}
|
||
|
||
@media (min-width:576px) {
|
||
body>footer>nav,
|
||
body>header>nav,
|
||
body>main {
|
||
max-width:95%;
|
||
/*padding-right:0;
|
||
padding-left:0*/
|
||
}
|
||
}
|
||
@media (min-width:768px) {
|
||
body>footer>nav,
|
||
body>header>nav,
|
||
body>main {
|
||
max-width:95%
|
||
}
|
||
}
|
||
@media (min-width:1024px) {
|
||
body>footer>nav,
|
||
body>header>nav,
|
||
body>main {
|
||
max-width:950px
|
||
}
|
||
}
|
||
@media (min-width:1280px) {
|
||
body>footer>nav,
|
||
body>header>nav,
|
||
body>main {
|
||
max-width:1200px
|
||
}
|
||
}
|
||
@media (min-width:1536px) {
|
||
body>footer>nav,
|
||
body>header>nav,
|
||
body>main {
|
||
max-width:1450px
|
||
}
|
||
}
|
||
|
||
body>header>nav,
|
||
body>footer>nav {
|
||
margin: auto;
|
||
--pico-primary: #8D0B02 !important;
|
||
--pico-primary-background: #8D0B02 !important;
|
||
--pico-primary-border: #8D0B02 !important;
|
||
--pico-primary-hover: #cd5c5c !important;
|
||
--pico-primary-hover-background: #cd5c5c !important;
|
||
--pico-primary-hover-border: #cd5c5c !important;
|
||
}
|
||
body>header>nav {
|
||
border-bottom-width: thin;
|
||
border-bottom-style: solid;
|
||
}
|
||
body>footer>nav {
|
||
border-top-width: thin;
|
||
border-top-style: solid;
|
||
}
|
||
nav ul, nav ol {}
|
||
nav ul.abv-brand {
|
||
}
|
||
nav li {}
|
||
nav a {}
|
||
nav a:visited {}
|
||
nav a:hover {}
|
||
nav a:active {}
|
||
|
||
nav#entrylist {
|
||
height: 90%;
|
||
overflow-x: hidden;
|
||
overflow-y: scroll;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
nav li.abv-menu-re {
|
||
filter: grayscale(100%);
|
||
filter: gray;
|
||
}
|
||
|
||
main {}
|
||
|
||
article.abv-entry {
|
||
display: grid;
|
||
grid-template-columns: minmax(0px,15%) 5% minmax(50%,80%);
|
||
align-items: baseline;
|
||
}
|
||
|
||
section {}
|
||
|
||
aside#leftbar {
|
||
/* The side navigation menu */
|
||
height: 100%; /* 100% Full-height */
|
||
width: 250px; /* 0 width - change this with JavaScript */
|
||
display: none;
|
||
position: fixed; /* Stay in place */
|
||
z-index: 1; /* Stay on top */
|
||
top: 0;
|
||
left: 0;
|
||
overflow-x: hidden; /* Disable horizontal scroll */
|
||
overflow-y: hidden;
|
||
padding-top: 0px; /* Place content 60px from the top */
|
||
background-color: #dcdcdc;
|
||
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
|
||
}
|
||
|
||
search {}
|
||
|
||
body>footer {
|
||
position: sticky;
|
||
width: 100vw !important;
|
||
max-width: 100vw;
|
||
bottom: 0;
|
||
background-color: #FCF9F5;
|
||
/*border-top-width: thin;
|
||
border-top-style: solid;*/
|
||
padding-top: 0px !important;
|
||
padding-bottom: 0px !important;
|
||
/* color: #f1f1f1; */
|
||
}
|
||
body>footer>nav {
|
||
margin:auto;
|
||
}
|
||
|
||
address {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Text block content
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
/* Overall styling, e.g. vertical spacing */
|
||
p, ol, ul, pre, blockquote, figure, hr, dl {}
|
||
|
||
p {}
|
||
|
||
ol, ul {}
|
||
ol {}
|
||
ul {}
|
||
li {}
|
||
ol ol, ol ul, ul ul, ul ol {}
|
||
li li {}
|
||
|
||
pre {}
|
||
pre code {}
|
||
pre samp {}
|
||
|
||
blockquote {}
|
||
|
||
figure {}
|
||
figcaption {}
|
||
|
||
hr {}
|
||
|
||
dl {}
|
||
dt {}
|
||
dd {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Inline text semantics
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
a {}
|
||
a:visited {}
|
||
a:hover {}
|
||
a:active {}
|
||
|
||
a.abv-map img {
|
||
height: 2ex;
|
||
}
|
||
|
||
a.abv-map:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
strong {}
|
||
b {}
|
||
|
||
em {}
|
||
i {}
|
||
|
||
q {
|
||
quotes: "‘" "’";
|
||
}
|
||
cite {}
|
||
|
||
s {}
|
||
|
||
mark {}
|
||
|
||
/* If you specify a font size, consider using the `em` unit so that it works
|
||
universally, e.g. for both `h1 small` and `p small` */
|
||
small {}
|
||
sub {}
|
||
sup {}
|
||
|
||
code {}
|
||
|
||
dfn {}
|
||
abbr {}
|
||
abbr[title] {}
|
||
|
||
var {}
|
||
kbd {}
|
||
kbd kbd {}
|
||
samp {}
|
||
|
||
u {}
|
||
|
||
data {}
|
||
time {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Demarcating edits
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
del {}
|
||
ins {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Embedded content
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
img {}
|
||
img.abv-logo {
|
||
height: 7ex;
|
||
}
|
||
|
||
svg {}
|
||
video {}
|
||
canvas {}
|
||
audio {}
|
||
object {}
|
||
|
||
noscript {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Table content
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
table {}
|
||
caption {}
|
||
col:first-child {}
|
||
thead {}
|
||
tbody {}
|
||
tfoot {}
|
||
tr {}
|
||
tr th {font-weight: bold; --pico-color: var(--pico-h6-color);}
|
||
td {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Forms
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
fieldset {}
|
||
fieldset:disabled {}
|
||
legend {}
|
||
|
||
form {}
|
||
|
||
header form {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
header form button {
|
||
padding-left: 1em !important;
|
||
padding-right: 1em !important;
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
header form select {
|
||
max-width:35%;
|
||
}
|
||
|
||
label {}
|
||
|
||
::placeholder {}
|
||
:focus::placeholder {}
|
||
|
||
/* Overall styling, e.g. vertical spacing */
|
||
input, textarea, select, button {}
|
||
|
||
/* `textarea` and `input` elements that share a similar look and similar styling
|
||
capabilities */
|
||
/* - common styling */
|
||
textarea,
|
||
input[type="text"],
|
||
input[type="password"],
|
||
input[type="email"],
|
||
input[type="tel"],
|
||
input[type="number"],
|
||
input[type="search"],
|
||
input[type="url"],
|
||
input[type="date"],
|
||
input[type="datetime-local"],
|
||
input[type="month"],
|
||
input[type="week"],
|
||
input[type="time"] {}
|
||
/* - individual styling */
|
||
textarea {}
|
||
input[type="text"] {}
|
||
input[type="password"] {}
|
||
input[type="email"] {}
|
||
input[type="tel"] {}
|
||
input[type="number"] {}
|
||
input[type="search"] {}
|
||
input[type="url"] {}
|
||
input[type="date"] {}
|
||
input[type="datetime-local"] {}
|
||
input[type="month"] {}
|
||
input[type="week"] {}
|
||
input[type="time"] {}
|
||
/* Tick boxes */
|
||
input[type="checkbox"], input[type="radio"] {}
|
||
input[type="checkbox"]:checked, input[type="radio"]:checked {}
|
||
input[type="checkbox"] {}
|
||
input[type="checkbox"]:checked {}
|
||
input[type="radio"] {}
|
||
input[type="radio"]:checked {}
|
||
/* Other input fields, some with limited styling capabilities */
|
||
input[type="file"] {}
|
||
input[type="color"] {}
|
||
input[type="range"] {}
|
||
|
||
select {}
|
||
|
||
div.index {
|
||
display: grid;
|
||
grid-template-columns: 20% 20% 60%;
|
||
align-items: baseline;
|
||
}
|
||
|
||
div.index div {
|
||
height: 85vh;
|
||
}
|
||
|
||
div.index div select {
|
||
height: 90%;
|
||
overflow: scroll;
|
||
}
|
||
|
||
optgroup {}
|
||
option {}
|
||
option:checked {}
|
||
datalist {}
|
||
|
||
button,
|
||
input[type="submit"] {}
|
||
button:disabled,
|
||
input[type="submit"]:disabled {}
|
||
button.secondary {}
|
||
button.secondary:disabled {}
|
||
|
||
button#open-leftbar{
|
||
position: fixed;
|
||
top: 50vh;
|
||
left: 0;
|
||
/*height: 1ex;*/
|
||
/*line-height: 1ex;*/
|
||
/*width: 1em;*/
|
||
}
|
||
|
||
button#close-leftbar{
|
||
position: fixed;
|
||
top: 50vh;
|
||
left: 250px;
|
||
display: none;
|
||
}
|
||
|
||
/* This matches forms or form elements that are invalid *and* have been
|
||
interacted with. Note that:
|
||
1) You may need to add the `interacted` class to forms yourself
|
||
2) You may need to add the `touched` class to form fields yourself
|
||
3) `:user-invalid` is a working draft and not yet supported by most browsers
|
||
4) `:-moz-ui-invalid` is non-standard and only works in Firefox
|
||
Form validation error messages will appear (in capable browsers) regardless of
|
||
this styling. You can omit 1) and 2) and still have working forms. Perfect
|
||
example of progressive enhancement. */
|
||
/* Applies to invalid forms */
|
||
form.interacted:invalid {}
|
||
/* Applies to invalid form fields. You would need to repeat your declarations
|
||
for the following three groups of selectors individually. Browsers completely
|
||
ignore any rule that contains a selector they do not know. */
|
||
form.interacted :invalid, form .touched:invalid {}
|
||
:user-invalid {}
|
||
:-moz-ui-invalid {}
|
||
|
||
output {}
|
||
|
||
progress {}
|
||
meter {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Interactive elements
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
details {}
|
||
details[open] {}
|
||
summary {}
|
||
details[open] summary {}
|
||
|
||
dialog {}
|
||
dialog::backdrop {}
|
||
|
||
dialog#modal_map > article {
|
||
width: 75vw !important;
|
||
height: 85vh !important;
|
||
max-width: 75vw !important;
|
||
max-height: 85vh !important;
|
||
}
|
||
|
||
/* Some form fields, `details`, elements with `tabindex`, and possibly other
|
||
elements can be focussed. You should use `:focus-visible` instead of `:focus`
|
||
whenever possible. As the former is not yet widely supported, you need to do it
|
||
as follows:
|
||
1) Set styling on focus
|
||
2) If browser supports `:focus-visible`, revert/unset the styling from 1)
|
||
3) If the element matches `:focus-visible`, apply the styling again */
|
||
:focus {}
|
||
:focus:not(:focus-visible) {}
|
||
:focus-visible {}
|
||
|
||
[inert], [inert] * {}
|
||
|
||
|
||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||
Media queries
|
||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
}
|
||
|
||
@media (orientation: portrait) {
|
||
}
|
||
|
||
@media (orientation: landscape) {
|
||
}
|
||
|
||
@media print {
|
||
}
|
||
|
||
/* CUSTOM: SPANS */
|
||
span.abv-text-ul {
|
||
text-decoration-line: underline;
|
||
}
|
||
|
||
span.abv-text-sc {
|
||
font-variant-caps: small-caps;
|
||
}
|
||
|
||
/*
|
||
This file evolved from Natural Selection:
|
||
https://github.com/frontaid/natural-selection
|
||
*/
|