valor/static/css/theme.css

414 lines
6.7 KiB
CSS
Raw Normal View History

html{
--color-primary: white;
--color-secondary: black;
--color-accent:#09448c;
--accent-alternate:#ffd336;
--font-family:sans-serif;
2024-08-21 11:46:55 -04:00
--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;
2023-03-06 19:41:36 -05:00
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 {
2023-11-25 17:16:22 -05:00
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;
2023-03-06 19:41:36 -05:00
align-items: center;
justify-content: center;
flex-wrap: nowrap;
2023-11-25 17:16:22 -05:00
padding: 15px;
2023-03-07 02:36:26 -05:00
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;
}
2023-11-25 17:16:22 -05:00
nav a {
text-decoration: none;
}
@media screen and (orientation:portrait) {
body {
2024-08-21 11:46:55 -04:00
font-size: 18px;
flex-direction: column;
}
header,
footer {
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
2023-11-25 17:16:22 -05:00
padding: 5px;
}
2023-11-25 17:16:22 -05:00
nav {
flex-direction: row;
justify-content: center;
2023-11-25 17:16:22 -05:00
width: 100%;
flex-wrap: wrap;
}
main {
max-width: unset;
2023-11-25 17:16:22 -05:00
width: 100vw;
align-items: center;
2023-11-25 17:16:22 -05:00
margin: 0px;
padding: 0;
}
2022-08-17 14:47:54 -04:00
}
2023-03-06 19:41:36 -05:00
svg {
stroke: var(--color-accent);
fill: var(--color-accent);
2022-09-15 17:12:31 -04:00
}
2022-08-17 14:47:54 -04:00
a,
a:visited,
2023-03-06 19:41:36 -05:00
a:hover {
color: var(--color-accent);
2022-08-17 14:47:54 -04:00
}
2023-03-06 19:41:36 -05:00
img,
video,
iframe,
audio {
2023-03-07 02:36:26 -05:00
width: max-content;
2023-11-25 17:16:22 -05:00
height: max-content;
2023-03-07 02:36:26 -05:00
max-width: 90%;
2024-05-08 21:43:52 -04:00
max-height: 60vh;
2022-08-17 14:47:54 -04:00
}
2023-11-25 17:16:22 -05:00
2023-03-07 02:36:26 -05:00
article img,
article video,
article iframe,
2023-11-25 17:16:22 -05:00
article audio {
margin: 15px;
2023-03-07 02:36:26 -05:00
}
iframe {
width: 100%;
height: 60vh;
}
2023-11-25 17:16:22 -05:00
.gallery img {
margin: 1px;
2023-03-07 02:36:26 -05:00
}
2023-03-06 19:41:36 -05:00
.gif {
max-height: 50vh;
}
2023-03-06 19:41:36 -05:00
.gallery {
display: flex;
2022-09-15 17:12:31 -04:00
flex-direction: row;
flex-wrap: wrap;
align-items: center;
2023-03-06 19:41:36 -05:00
justify-content: center;
overflow: hidden;
2023-11-25 17:16:22 -05:00
width: 100%;
max-width: 100%;
2022-09-15 17:12:31 -04:00
}
.gallery>* {
max-width: 25vw;
max-height: 20vw;
2022-09-15 17:12:31 -04:00
}
2023-11-25 17:16:22 -05:00
.image-container {
overflow: hidden;
2023-12-09 03:25:05 -05:00
flex-direction: column;
2022-08-17 14:47:54 -04:00
}
2023-11-25 17:16:22 -05:00
.image-container a {
height: 100%;
2022-09-16 16:04:52 -04:00
}
.image-container img {
max-height: 100%;
2022-08-17 14:47:54 -04:00
}
2022-09-15 17:12:31 -04:00
2023-11-25 17:16:22 -05:00
.image-container .caption {
width: fit-content;
}
.gallery>img {
max-width: 600px;
max-height: 400px;
}
2023-11-25 17:16:22 -05:00
.tag-list {
display: flex;
2023-03-06 19:41:36 -05:00
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}
2023-11-25 17:16:22 -05:00
.tag-link {
margin: 3px;
2022-08-17 14:47:54 -04:00
}
2023-11-25 17:16:22 -05:00
.tag-link:hover {
color: var(--color-secondary)
2022-08-17 14:47:54 -04:00
}
2023-03-06 19:41:36 -05:00
.icon {
height: 34px;
width: 34px;
}
2023-03-06 19:41:36 -05:00
div {
display: flex;
2023-03-06 19:41:36 -05:00
align-items: center;
justify-content: center;
2022-08-17 14:47:54 -04:00
flex-direction: row;
2023-11-25 17:16:22 -05:00
text-align: center;
2023-12-09 14:55:42 -05:00
flex-wrap: wrap;
2022-08-17 14:47:54 -04:00
}
2023-03-06 19:41:36 -05:00
article {
display: flex;
2022-08-17 14:47:54 -04:00
flex-direction: column;
align-items: center;
padding-left:1rem;
padding-right:1rem;
max-width: 60rem;
width: 100%;
font-size: 20px;
2023-11-25 17:16:22 -05:00
font-family: Verdana, Geneva, Tahoma, sans-serif;
2022-08-17 14:47:54 -04:00
}
2023-03-06 19:41:36 -05:00
article img {
max-width: 90%;
2022-11-09 15:44:31 -05:00
}
2022-08-17 14:47:54 -04:00
article p,
2023-03-06 19:41:36 -05:00
article table,
2022-08-17 14:47:54 -04:00
article ul,
article ol,
2023-03-06 19:41:36 -05:00
article h3,
article h4 {
2023-03-06 19:41:36 -05:00
width: 100%;
2022-08-17 14:47:54 -04:00
text-align: left;
2022-09-02 07:03:53 -04:00
}
2023-11-25 17:16:22 -05:00
article ul {
2023-12-09 03:25:05 -05:00
margin-bottom: 1rem;
margin-top: 0.5rem;
2023-11-25 17:16:22 -05:00
}
article .highlight {
width: 100%;
2023-03-06 19:41:36 -05:00
align-items: flex-start;
2022-09-04 09:40:18 -04:00
}
article .highlight pre {
width: 100%;
2023-03-06 19:41:36 -05:00
text-align: left;
2022-09-17 19:22:44 -04:00
}
2023-11-25 17:16:22 -05:00
@media screen and (orientation:portrait) {
article {
2024-02-29 10:43:29 -05:00
max-width: 100vw;
2023-11-25 17:16:22 -05:00
}
}
2023-03-06 19:41:36 -05:00
.posts {
display: flex;
2022-10-12 07:34:00 -04:00
flex-direction: row;
flex-wrap: wrap;
2024-07-27 14:48:24 -04:00
align-items: flex-start;
2023-03-06 19:41:36 -05:00
justify-content: space-evenly;
2022-09-15 17:12:31 -04:00
}
2023-03-06 19:41:36 -05:00
.post {
2024-07-27 14:48:24 -04:00
flex-direction:row;
display: flex;
2024-07-27 14:48:24 -04:00
align-items: center;
justify-content: flex-start;
padding: 25px;
border-radius: 25px;
2024-08-21 11:46:55 -04:00
font-size: 16px;
2024-07-27 14:48:24 -04:00
margin:10px;
width:80%;
flex-wrap: nowrap;
background-color:rgba(118, 118, 118, 0.214);
2024-07-27 15:16:17 -04:00
max-width:90vw;
2022-09-15 17:12:31 -04:00
}
2024-07-27 14:48:24 -04:00
@media screen and (orientation: portrait) {
.post{
flex-wrap: wrap;
justify-content: space-evenly;
align-items: space;
}
2024-07-27 14:48:24 -04:00
}
.post>a>img {
min-width:5rem;
min-height:5rem;
aspect-ratio: 1/1;
height:100%;
display:flex;
}
.post>* {
margin:5px;
}
.post h2 {
2023-03-06 19:41:36 -05:00
text-align: center;
}
.post-image {
height: 15rem;
2023-03-06 19:41:36 -05:00
background-position: top center;
background-size: contain;
background-repeat: no-repeat;
2022-09-17 19:22:44 -04:00
}
2023-11-25 17:16:22 -05:00
.post-tags {
2024-02-29 10:43:29 -05:00
width:100%;
2023-11-25 17:16:22 -05:00
display: flex;
2023-05-11 03:30:00 -04:00
flex-direction: row;
flex-wrap: wrap;
2024-07-27 14:48:24 -04:00
justify-content: center;
font-size: unset;
font-weight: bolder;
2023-05-11 03:29:18 -04:00
}
2023-11-25 17:16:22 -05:00
2023-03-06 19:41:36 -05:00
.post-tags a {
2023-05-28 00:50:05 -04:00
margin: 2px;
2022-11-09 15:44:31 -05:00
}
2023-03-06 19:41:36 -05:00
.tag {
display: flex;
2023-03-06 19:41:36 -05:00
flex-direction: row;
2022-11-09 15:44:31 -05:00
align-items: center;
}
2023-03-06 19:41:36 -05:00
.highlight pre {
background-color: transparent !important;
}
h3 {
margin: 0;
}
2023-11-25 17:16:22 -05:00
hr {
color: var(--color-accent);
2023-11-25 17:16:22 -05:00
width: 100%;
margin: 0;
margin-top: 1rem;
margin-bottom: 1rem;
max-width: 80vw;
2023-03-07 02:36:26 -05:00
}
blockquote {
border-left: 5px solid var(--color-accent);
2023-03-07 02:36:26 -05:00
padding-left: 15px;
2023-11-25 17:16:22 -05:00
width: 80%;
2023-03-07 02:36:26 -05:00
}
2023-11-25 17:16:22 -05:00
code {
2023-03-07 02:36:26 -05:00
font-family: monospace;
color: var(--color-accent);
2023-11-25 17:16:22 -05:00
white-space: break-spaces;
2023-03-21 22:26:39 -04:00
word-wrap: normal;
}
2023-11-25 17:16:22 -05:00
2023-03-21 22:26:39 -04:00
article pre {
2023-11-25 17:16:22 -05:00
width: 100%;
2023-03-07 02:49:44 -05:00
}
2023-11-25 17:16:22 -05:00
.footnotes {
2023-04-17 18:21:14 -04:00
flex-direction: column;
2023-11-25 17:16:22 -05:00
}
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);
2023-04-17 18:21:14 -04:00
}