|
|
|
@ -1,23 +1,34 @@
|
|
|
|
|
|
|
|
html{
|
|
|
|
|
|
|
|
--color-primary: white;
|
|
|
|
|
|
|
|
--color-secondary: black;
|
|
|
|
|
|
|
|
--color-accent:#09448c;
|
|
|
|
|
|
|
|
--accent-alternate:#ffd336;
|
|
|
|
|
|
|
|
--font-family:sans-serif;
|
|
|
|
|
|
|
|
--font-size:18px;
|
|
|
|
|
|
|
|
--font-alternate:code;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
body {
|
|
|
|
--theme-color-primary: rgb(255, 255, 255);
|
|
|
|
--color-primary: rgb(255, 255, 255);
|
|
|
|
--theme-color-secondary: black;
|
|
|
|
--color-secondary: black;
|
|
|
|
--theme-accent: #09448c;
|
|
|
|
--color-accent: #09448c;
|
|
|
|
color: var(--theme-color-secondary);
|
|
|
|
color: var(--color-secondary);
|
|
|
|
background-color: var(--theme-color-primary);
|
|
|
|
background-color: var(--color-primary);
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
width: 100vw;
|
|
|
|
width: 100vw;
|
|
|
|
display: flex;
|
|
|
|
font-size: var(--font-size);
|
|
|
|
align-items: flex-start;
|
|
|
|
overflow-x:hidden;
|
|
|
|
flex-direction: row;
|
|
|
|
display:flex;
|
|
|
|
justify-content: space-evenly;
|
|
|
|
flex-direction: column;
|
|
|
|
font-size: 18px;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (prefers-color-scheme:dark) {
|
|
|
|
@media screen and (prefers-color-scheme:dark) {
|
|
|
|
body {
|
|
|
|
body {
|
|
|
|
--theme-color-primary: rgb(0, 0, 0);
|
|
|
|
--color-primary: rgb(0, 0, 0);
|
|
|
|
--theme-color-secondary: white;
|
|
|
|
--color-secondary: white;
|
|
|
|
--theme-accent: #1291e5;
|
|
|
|
--color-accent: #1291e5;
|
|
|
|
|
|
|
|
--accent-alternate:#51320d;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -25,31 +36,63 @@ header,
|
|
|
|
footer {
|
|
|
|
footer {
|
|
|
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
|
|
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
|
|
|
font-size: 16px;
|
|
|
|
font-size: 16px;
|
|
|
|
min-width: min-content;
|
|
|
|
width:100%;
|
|
|
|
width: 20vw;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: flex-start;
|
|
|
|
justify-content: center;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
padding: 15px;
|
|
|
|
padding: 15px;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
main {
|
|
|
|
main {
|
|
|
|
display: flex;
|
|
|
|
display:grid;
|
|
|
|
flex-direction: column;
|
|
|
|
grid-template-areas:
|
|
|
|
align-items: center;
|
|
|
|
"header header header"
|
|
|
|
width: 60vw;
|
|
|
|
"side1 content side2"
|
|
|
|
max-width: 60vw;
|
|
|
|
"footer footer footer";
|
|
|
|
padding-left: 1rem;
|
|
|
|
grid-template-columns: 1fr 3fr 1fr;
|
|
|
|
padding-right: 1rem;
|
|
|
|
grid-template-rows: 20% 60% 20%;
|
|
|
|
|
|
|
|
max-width:100vw;
|
|
|
|
|
|
|
|
justify-items: center;
|
|
|
|
|
|
|
|
gap:20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
header{
|
|
|
|
|
|
|
|
grid-area: header;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
#content {
|
|
|
|
|
|
|
|
grid-area: content;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
#side1{grid-area: side1;}
|
|
|
|
|
|
|
|
#side2{grid-area: side2;}
|
|
|
|
|
|
|
|
footer{grid-area: footer;}
|
|
|
|
|
|
|
|
@media screen and (orientation:portrait) {
|
|
|
|
|
|
|
|
main {
|
|
|
|
|
|
|
|
display:grid;
|
|
|
|
|
|
|
|
grid-template-areas:
|
|
|
|
|
|
|
|
"header"
|
|
|
|
|
|
|
|
"content"
|
|
|
|
|
|
|
|
"side1"
|
|
|
|
|
|
|
|
"side2"
|
|
|
|
|
|
|
|
"footer";
|
|
|
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
|
|
|
grid-template-rows: auto;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
header{
|
|
|
|
|
|
|
|
grid-area: header;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
#content {
|
|
|
|
|
|
|
|
grid-area: content;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
#side1{grid-area: side1;}
|
|
|
|
|
|
|
|
#side2{grid-area: side2;}
|
|
|
|
|
|
|
|
footer{grid-area: footer;}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
nav {
|
|
|
|
nav {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -70,15 +113,12 @@ nav a {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
header,
|
|
|
|
header,
|
|
|
|
footer {
|
|
|
|
footer {
|
|
|
|
width: 100vw;
|
|
|
|
|
|
|
|
max-width: unset;
|
|
|
|
|
|
|
|
min-height: unset;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
flex-direction: row;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-around;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 5px;
|
|
|
|
padding: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
nav {
|
|
|
|
nav {
|
|
|
|
@ -97,14 +137,14 @@ nav a {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
svg {
|
|
|
|
stroke: var(--theme-accent);
|
|
|
|
stroke: var(--color-accent);
|
|
|
|
fill: var(--theme-accent);
|
|
|
|
fill: var(--color-accent);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
a,
|
|
|
|
a,
|
|
|
|
a:visited,
|
|
|
|
a:visited,
|
|
|
|
a:hover {
|
|
|
|
a:hover {
|
|
|
|
color: var(--theme-accent);
|
|
|
|
color: var(--color-accent);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
img,
|
|
|
|
img,
|
|
|
|
@ -188,7 +228,7 @@ iframe {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tag-link:hover {
|
|
|
|
.tag-link:hover {
|
|
|
|
color: var(--theme-color-secondary)
|
|
|
|
color: var(--color-secondary)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
.icon {
|
|
|
|
@ -209,8 +249,10 @@ article {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
width: 60rem;
|
|
|
|
padding-left:1rem;
|
|
|
|
max-width: 100%;
|
|
|
|
padding-right:1rem;
|
|
|
|
|
|
|
|
max-width: 60rem;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
font-size: 20px;
|
|
|
|
font-size: 20px;
|
|
|
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
|
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -224,8 +266,7 @@ article table,
|
|
|
|
article ul,
|
|
|
|
article ul,
|
|
|
|
article ol,
|
|
|
|
article ol,
|
|
|
|
article h3,
|
|
|
|
article h3,
|
|
|
|
article h4,
|
|
|
|
article h4 {
|
|
|
|
article h2 {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
text-align: left;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -267,7 +308,8 @@ article .highlight pre {
|
|
|
|
padding: 25px;
|
|
|
|
padding: 25px;
|
|
|
|
border-radius: 25px;
|
|
|
|
border-radius: 25px;
|
|
|
|
font-size: 18px;
|
|
|
|
font-size: 18px;
|
|
|
|
width:100%;
|
|
|
|
width:32rem;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.post>* {}
|
|
|
|
.post>* {}
|
|
|
|
@ -311,7 +353,7 @@ h3 {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
hr {
|
|
|
|
hr {
|
|
|
|
color: var(--theme-accent);
|
|
|
|
color: var(--color-accent);
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
margin-top: 1rem;
|
|
|
|
margin-top: 1rem;
|
|
|
|
@ -320,14 +362,14 @@ hr {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
blockquote {
|
|
|
|
blockquote {
|
|
|
|
border-left: 5px solid var(--theme-accent);
|
|
|
|
border-left: 5px solid var(--color-accent);
|
|
|
|
padding-left: 15px;
|
|
|
|
padding-left: 15px;
|
|
|
|
width: 80%;
|
|
|
|
width: 80%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
code {
|
|
|
|
code {
|
|
|
|
font-family: monospace;
|
|
|
|
font-family: monospace;
|
|
|
|
color: var(--theme-accent);
|
|
|
|
color: var(--color-accent);
|
|
|
|
white-space: break-spaces;
|
|
|
|
white-space: break-spaces;
|
|
|
|
word-wrap: normal;
|
|
|
|
word-wrap: normal;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -345,7 +387,7 @@ button {
|
|
|
|
border-radius: 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
font-weight: bolder;
|
|
|
|
font-weight: bolder;
|
|
|
|
font-size: unset;
|
|
|
|
font-size: unset;
|
|
|
|
background-color: var(--theme-accent);
|
|
|
|
background-color: var(--color-accent);
|
|
|
|
color: var(--theme-color-secondary);
|
|
|
|
color: var(--color-secondary);
|
|
|
|
border-color: var(--theme-accent);
|
|
|
|
border-color: var(--color-accent);
|
|
|
|
}
|
|
|
|
}
|
