You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
3.5 KiB
CSS
226 lines
3.5 KiB
CSS
body {
|
|
--theme-color-primary: rgb(255, 255, 255);
|
|
--theme-color-secondary: black;
|
|
--theme-accent: #09448c;
|
|
color: var(--theme-color-secondary);
|
|
background-color: var(--theme-color-primary);
|
|
margin: 0;
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
font-size: 18px;
|
|
}
|
|
|
|
svg {
|
|
stroke: var(--theme-accent);
|
|
fill: var(--theme-accent);
|
|
}
|
|
|
|
a,
|
|
a:visited,
|
|
a:hover {
|
|
color: var(--theme-accent);
|
|
}
|
|
|
|
hr {
|
|
width: 100%;
|
|
color: var(--theme-accent);
|
|
margin-top:25px;
|
|
margin-bottom:25px;
|
|
}
|
|
|
|
@media screen and (prefers-color-scheme:dark) {
|
|
body {
|
|
--theme-color-primary: rgb(0, 0, 0);
|
|
--theme-color-secondary: white;
|
|
--theme-accent: #1291e5;
|
|
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
width:100%;
|
|
min-height:25rem;
|
|
height:25vw;
|
|
}
|
|
img,
|
|
video,
|
|
iframe,
|
|
audio {
|
|
max-width: 90vw;
|
|
max-height: 100%;
|
|
}
|
|
.gif {
|
|
max-height:50vh;
|
|
}
|
|
.gallery {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow:hidden;
|
|
max-width:95%;
|
|
}
|
|
|
|
.gallery >*{
|
|
max-width:25vw;
|
|
max-height:20vw;
|
|
}
|
|
|
|
.image-container a{
|
|
height:100%;
|
|
}
|
|
.image-container img{
|
|
max-height:100%;
|
|
}
|
|
|
|
.gallery > img{
|
|
max-width:600px;
|
|
max-height:400px;
|
|
}
|
|
|
|
|
|
header,
|
|
footer {
|
|
width: 100vw;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
nav>* {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.icon {
|
|
height: 34px;
|
|
width: 34px;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
article {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding-left:10px;
|
|
padding-right:10px;
|
|
max-width: 60rem;
|
|
font-size:24px;
|
|
}
|
|
article img {
|
|
max-width:90%;
|
|
}
|
|
|
|
article p,
|
|
article table,
|
|
article ul,
|
|
article ol,
|
|
article h3,
|
|
article h4,
|
|
article h2 {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
article .highlight{
|
|
width:100%;
|
|
align-items: flex-start;
|
|
}
|
|
article .highlight pre{
|
|
width:100%;
|
|
text-align: left;
|
|
}
|
|
|
|
article h1 {}
|
|
|
|
.posts {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.post {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
display:flex;
|
|
align-items: center;
|
|
margin:1rem;
|
|
background-color:#151515;
|
|
border:2px solid #252525;
|
|
padding:25px;
|
|
border-radius:25px;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.post>*{
|
|
margin:15px;
|
|
}
|
|
.post h2{
|
|
text-align: center;
|
|
}
|
|
.post p{
|
|
max-width: 460px;
|
|
}
|
|
.post-image{
|
|
width:25rem;
|
|
height:15rem;
|
|
background-position: top center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
@media screen and (orientation:portrait){
|
|
.post-image{}
|
|
}
|
|
|
|
.post-tags a {
|
|
margin: 5px;
|
|
}
|
|
|
|
.tag {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.highlight pre {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
article .gallery{
|
|
width: 80vw;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
h3{
|
|
margin:0;
|
|
}
|
|
article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after {content:"↗️";font-size:20px;margin:5px;text-decoration: none;}
|
|
.image-container a::after, .liberapay-container a::after{
|
|
content: "" !important;margin:0 !important;font-size:0;
|
|
}
|
|
|