valor/static/css/theme.css
2024-08-21 11:46:55 -04:00

414 lines
No EOL
6.7 KiB
CSS

html{
--color-primary: white;
--color-secondary: black;
--color-accent:#09448c;
--accent-alternate:#ffd336;
--font-family:sans-serif;
--font-size:16px;
--font-alternate:code;
}
body {
--color-primary: rgb(255, 255, 255);
--color-secondary: black;
--color-accent: #09448c;
color: var(--color-secondary);
background-color: var(--color-primary);
margin: 0;
width: 100vw;
font-size: var(--font-size);
overflow-x:hidden;
display:flex;
flex-direction: column;
align-items: center;
}
@media screen and (prefers-color-scheme:dark) {
body {
--color-primary: rgb(0, 0, 0);
--color-secondary: white;
--color-accent: #1291e5;
--accent-alternate:#51320d;
}
}
header,
footer {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
width:100%;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
padding: 15px;
text-align: center;
}
main {
display:grid;
grid-template-areas:
"header header header"
"side1 content side2"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
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 {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
}
nav>* {
margin: 1rem;
text-align: center;
}
nav a {
text-decoration: none;
}
@media screen and (orientation:portrait) {
body {
font-size: 18px;
flex-direction: column;
}
header,
footer {
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 5px;
}
nav {
flex-direction: row;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
main {
max-width: unset;
width: 100vw;
align-items: center;
margin: 0px;
padding: 0;
}
}
svg {
stroke: var(--color-accent);
fill: var(--color-accent);
}
a,
a:visited,
a:hover {
color: var(--color-accent);
}
img,
video,
iframe,
audio {
width: max-content;
height: max-content;
max-width: 90%;
max-height: 60vh;
}
article img,
article video,
article iframe,
article audio {
margin: 15px;
}
iframe {
width: 100%;
height: 60vh;
}
.gallery img {
margin: 1px;
}
.gif {
max-height: 50vh;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
overflow: hidden;
width: 100%;
max-width: 100%;
}
.gallery>* {
max-width: 25vw;
max-height: 20vw;
}
.image-container {
overflow: hidden;
flex-direction: column;
}
.image-container a {
height: 100%;
}
.image-container img {
max-height: 100%;
}
.image-container .caption {
width: fit-content;
}
.gallery>img {
max-width: 600px;
max-height: 400px;
}
.tag-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}
.tag-link {
margin: 3px;
}
.tag-link:hover {
color: var(--color-secondary)
}
.icon {
height: 34px;
width: 34px;
}
div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
text-align: center;
flex-wrap: wrap;
}
article {
display: flex;
flex-direction: column;
align-items: center;
padding-left:1rem;
padding-right:1rem;
max-width: 60rem;
width: 100%;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
article img {
max-width: 90%;
}
article p,
article table,
article ul,
article ol,
article h3,
article h4 {
width: 100%;
text-align: left;
}
article ul {
margin-bottom: 1rem;
margin-top: 0.5rem;
}
article .highlight {
width: 100%;
align-items: flex-start;
}
article .highlight pre {
width: 100%;
text-align: left;
}
@media screen and (orientation:portrait) {
article {
max-width: 100vw;
}
}
.posts {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-evenly;
}
.post {
flex-direction:row;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 25px;
border-radius: 25px;
font-size: 16px;
margin:10px;
width:80%;
flex-wrap: nowrap;
background-color:rgba(118, 118, 118, 0.214);
max-width:90vw;
}
@media screen and (orientation: portrait) {
.post{
flex-wrap: wrap;
justify-content: space-evenly;
align-items: space;
}
}
.post>a>img {
min-width:5rem;
min-height:5rem;
aspect-ratio: 1/1;
height:100%;
display:flex;
}
.post>* {
margin:5px;
}
.post h2 {
text-align: center;
}
.post-image {
height: 15rem;
background-position: top center;
background-size: contain;
background-repeat: no-repeat;
}
.post-tags {
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
font-size: unset;
font-weight: bolder;
}
.post-tags a {
margin: 2px;
}
.tag {
display: flex;
flex-direction: row;
align-items: center;
}
.highlight pre {
background-color: transparent !important;
}
h3 {
margin: 0;
}
hr {
color: var(--color-accent);
width: 100%;
margin: 0;
margin-top: 1rem;
margin-bottom: 1rem;
max-width: 80vw;
}
blockquote {
border-left: 5px solid var(--color-accent);
padding-left: 15px;
width: 80%;
}
code {
font-family: monospace;
color: var(--color-accent);
white-space: break-spaces;
word-wrap: normal;
}
article pre {
width: 100%;
}
.footnotes {
flex-direction: column;
}
button {
padding: 10px;
border-radius: 10px;
font-weight: bolder;
font-size: unset;
background-color: var(--color-accent);
color: var(--color-secondary);
border-color: var(--color-accent);
}