initial commit
This commit is contained in:
Oleg Belyaev
parent
cee3efab31
commit
71219733bd
31 changed files with 9242 additions and 0 deletions
411
static/abaev-html.css
Normal file
411
static/abaev-html.css
Normal file
|
|
@ -0,0 +1,411 @@
|
|||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
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: white;
|
||||
border-bottom-width: thin;
|
||||
border-bottom-style: solid;
|
||||
padding-bottom: 0px !important;
|
||||
padding-top: 0px !important;
|
||||
padding-right: 1em !important;
|
||||
padding-left: 1em !important;
|
||||
/* color: #f1f1f1; */
|
||||
}
|
||||
|
||||
nav {}
|
||||
nav ul, nav ol {}
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
border-top-width: thin;
|
||||
border-top-style: solid;
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
/* color: #f1f1f1; */
|
||||
}
|
||||
|
||||
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 {}
|
||||
|
||||
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 {}
|
||||
svg {}
|
||||
video {}
|
||||
canvas {}
|
||||
audio {}
|
||||
object {}
|
||||
|
||||
noscript {}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
Table content
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
table {}
|
||||
caption {}
|
||||
col:first-child {}
|
||||
thead {}
|
||||
tbody {}
|
||||
tfoot {}
|
||||
tr {}
|
||||
th {}
|
||||
td {}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
Forms
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
fieldset {}
|
||||
fieldset:disabled {}
|
||||
legend {}
|
||||
|
||||
form {}
|
||||
|
||||
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
|
||||
*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue