350 lines
4.9 KiB
CSS
350 lines
4.9 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: #fff;
|
|
background-image: url('/pinkliom-small2.png');
|
|
background-position: bottom right;
|
|
background-repeat: no-repeat;
|
|
color: #000;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-family: sans-serif;
|
|
font-size: 16px;
|
|
height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar {
|
|
background-color: #f5f5f5;
|
|
border: 0 solid #dddddd;
|
|
border-right-width: 1px;
|
|
color: #000;
|
|
min-height: 100%;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.sidebar a,
|
|
.sidebar a:visited {
|
|
color: #232323;
|
|
}
|
|
|
|
.sidebar a:focus,
|
|
.sidebar a:hover,
|
|
.sidebar a:visited:focus,
|
|
.sidebar a:visited:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.sidebar header,
|
|
.sidebar footer > div {
|
|
padding: 16px;
|
|
}
|
|
|
|
.sidebar header ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar header a {
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.sidebar footer p {
|
|
font-size: 13px;
|
|
max-width: 180px;
|
|
}
|
|
|
|
pre {
|
|
border: 1px solid #d5d5d5;
|
|
padding: 8px;
|
|
overflow-x: auto;
|
|
}
|
|
code {
|
|
font-size: 15px;
|
|
}
|
|
|
|
pre table td:first-child {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
min-width: 500px;
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
main .back {
|
|
padding: 16px;
|
|
}
|
|
|
|
main a {
|
|
font-weight: 500;
|
|
}
|
|
|
|
main a,
|
|
main a:visited {
|
|
color: #e10862;
|
|
}
|
|
|
|
main a:focus,
|
|
main a:hover,
|
|
main a:visited:focus,
|
|
main a:visited:hover {
|
|
color: #a90649;
|
|
}
|
|
|
|
main ul.title-list li:hover::marker {
|
|
content: '> ';
|
|
color: #a90649;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 26px;
|
|
}
|
|
h2 {
|
|
font-size: 24px;
|
|
}
|
|
h3 {
|
|
font-size: 22px;
|
|
}
|
|
h4 {
|
|
font-size: 20px;
|
|
}
|
|
h5 {
|
|
font-size: 18px;
|
|
}
|
|
h6 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
main h1,
|
|
main h2 {
|
|
margin-top: 50px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
main h1:first-child,
|
|
main h2:first-child,
|
|
main h3:first-child,
|
|
main h4:first-child,
|
|
main h5:first-child,
|
|
main h6:first-child {
|
|
margin-top: revert;
|
|
}
|
|
main h1:last-child,
|
|
main h2:last-child,
|
|
main h3:last-child,
|
|
main h4:last-child,
|
|
main h5:last-child,
|
|
main h6:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
article header h1:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
main p {
|
|
line-height: 22px;
|
|
margin: 20px 0;
|
|
}
|
|
main p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
main p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
main li {
|
|
line-height: 22px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.overlay {
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
main .overlay {
|
|
background-color: #ffffffcb;
|
|
max-width: 800px;
|
|
min-height: 100%;
|
|
}
|
|
.sidebar .overlay {
|
|
background-color: #f5f5f5aa;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 100%;
|
|
}
|
|
|
|
main header,
|
|
main footer,
|
|
section {
|
|
padding: 16px;
|
|
}
|
|
|
|
.web-environment-integrity-message {
|
|
display: none;
|
|
}
|
|
|
|
.firefox-message {
|
|
background-color: lightyellow;
|
|
color: #333333;
|
|
display: none;
|
|
margin: 0;
|
|
min-width: 100%;
|
|
padding: 16px;
|
|
}
|
|
|
|
.sidebar .firefox-message a,
|
|
.sidebar .firefox-message a:visited {
|
|
color: #232323;
|
|
}
|
|
|
|
.sidebar .firefox-message a:focus,
|
|
.sidebar .firefox-message a:hover,
|
|
.sidebar .firefox-message a:visited:focus,
|
|
.sidebar .firefox-message a:visited:hover {
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
section.web-environment-integrity-message {
|
|
background-color: lightyellow;
|
|
color: #000;
|
|
}
|
|
|
|
main ul.title-list {
|
|
list-style: none;
|
|
padding-left: 19px;
|
|
}
|
|
main ul:first-child {
|
|
margin-top: 0;
|
|
}
|
|
main ul:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
main blockquote {
|
|
border-left: 3px solid #e10862;
|
|
padding: 0 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
}
|
|
.icon svg {
|
|
background-color: orange;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
height: 2em;
|
|
width: 2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: #232323;
|
|
color: #ccc;
|
|
}
|
|
|
|
body h1,
|
|
body h2,
|
|
body h3,
|
|
body h4,
|
|
body h5,
|
|
body h6,
|
|
.sidebar h1,
|
|
.sidebar h2,
|
|
.sidebar h3,
|
|
.sidebar h4,
|
|
.sidebar h5,
|
|
.sidebar h6 {
|
|
color: #e5e5e5;
|
|
}
|
|
|
|
main .overlay {
|
|
background-color: #232323dd;
|
|
}
|
|
.sidebar .overlay {
|
|
background-color: #1a1a1aaa;
|
|
}
|
|
|
|
.sidebar {
|
|
background-color: #1a1a1a;
|
|
border: 0 solid #333333;
|
|
border-right-width: 1px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.sidebar a,
|
|
.sidebar a:visited {
|
|
color: #e5e5e5;
|
|
}
|
|
|
|
.sidebar a:focus,
|
|
.sidebar a:hover,
|
|
.sidebar a:visited:focus,
|
|
.sidebar a:visited:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
pre {
|
|
border: 1px solid #444444;
|
|
}
|
|
|
|
main a,
|
|
main a:visited {
|
|
color: #ff8dbc;
|
|
}
|
|
|
|
main a:focus,
|
|
main a:hover,
|
|
main a:visited:focus,
|
|
main a:visited:hover {
|
|
color: #ffd3e5;
|
|
}
|
|
|
|
main ul.title-list li:hover::marker {
|
|
content: '> ';
|
|
color: #ffd3e5;
|
|
}
|
|
|
|
main blockquote {
|
|
border-left: 3px solid #ff8dbc;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
body {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
min-height: 100vh;
|
|
height: auto;
|
|
}
|
|
|
|
.sidebar {
|
|
background-image: url('/pinkliom-small2.png');
|
|
background-repeat: no-repeat;
|
|
background-position: bottom right;
|
|
border-right-width: 0;
|
|
border-top-width: 1px;
|
|
min-height: auto;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
main {
|
|
min-width: 300px;
|
|
max-height: none;
|
|
}
|
|
}
|