valor/static/css/theme.css

321 lines
4.8 KiB
CSS
Raw Normal View History

body {
2023-03-06 19:41:36 -05:00
--theme-color-primary: rgb(255, 255, 255);
2022-09-15 17:12:31 -04:00
--theme-color-secondary: black;
2022-09-17 19:22:44 -04:00
--theme-accent: #09448c;
color: var(--theme-color-secondary);
2022-09-16 16:04:52 -04:00
background-color: var(--theme-color-primary);
margin: 0;
2023-03-06 19:41:36 -05:00
width: 100vw;
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: space-evenly;
font-size: 18px;
}
@media screen and (prefers-color-scheme:dark) {
body {
--theme-color-primary: rgb(0, 0, 0);
--theme-color-secondary: white;
--theme-accent: #1291e5;
}
}
header,
footer {
2023-03-07 02:36:26 -05:00
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size:16px;
min-width: min-content;
width:20vw;
margin: 0;
display: flex;
2023-03-06 19:41:36 -05:00
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
padding:5px;
2023-03-07 02:36:26 -05:00
text-align: center;
}
main {
display:flex;
flex-direction: column;
align-items: center;
width: 60vw;
max-width: 60vw;
}
nav {
display: flex;
flex-direction: column;
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:20px;
flex-direction: column;
}
header,
footer {
width: 100vw;
max-width: unset;
min-height:unset;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
padding:5px;
}
nav{
flex-direction: row;
justify-content: center;
width:100%;
flex-wrap: wrap;
}
main {
max-width: unset;
width:100%;
align-items: center;
}
2022-08-17 14:47:54 -04:00
}
2023-03-06 19:41:36 -05:00
svg {
stroke: var(--theme-accent);
fill: var(--theme-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(--theme-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;
height:max-content;
max-width: 90%;
2023-03-06 19:41:36 -05:00
max-height: 100%;
2022-08-17 14:47:54 -04:00
}
2023-03-07 02:36:26 -05:00
article img,
article video,
article iframe,
article audio{
margin:15px;
}
iframe {
width: 100%;
height: 60vh;
}
.gallery img{
margin:1px;
}
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;
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
}
.image-container{
overflow:hidden;
2022-08-17 14:47:54 -04: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
.gallery>img {
max-width: 600px;
max-height: 400px;
}
.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;
}
.tag-link{
margin:3px;
2022-08-17 14:47:54 -04:00
}
.tag-link:hover{
color:var(--theme-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;
text-align:center;
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;
width: 60rem;
max-width: 100%;
font-size: 20px;
2023-03-07 02:36:26 -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,
article h2 {
width: 100%;
2022-08-17 14:47:54 -04:00
text-align: left;
2022-09-02 07:03:53 -04: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-03-06 19:41:36 -05:00
article h1 {}
2023-03-06 19:41:36 -05:00
.posts {
display: flex;
2022-10-12 07:34:00 -04:00
flex-direction: row;
2023-03-06 19:41:36 -05:00
align-items: flex-start;
2022-10-12 07:34:00 -04:00
flex-wrap: wrap;
align-items: center;
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 {
2022-09-15 17:12:31 -04:00
flex-direction: row;
flex-wrap: wrap;
display: flex;
2022-09-15 17:12:31 -04:00
align-items: center;
margin: 1rem;
padding: 25px;
border-radius: 25px;
font-size:14px;
2022-09-15 17:12:31 -04:00
}
.post>* {
margin: 15px;
2022-09-17 19:22:44 -04:00
}
.post h2 {
2023-03-06 19:41:36 -05:00
text-align: center;
}
.post p,.post h2 {
2023-03-06 19:41:36 -05:00
max-width: 460px;
2022-09-15 17:12:31 -04:00
}
.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
}
@media screen and (orientation:portrait) {}
2023-03-06 19:41:36 -05:00
.post-tags a {
margin: 5px;
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;
}
hr{
color:var(--theme-accent);
width:100%;
margin:0;
margin-top:1rem;
margin-bottom:1rem;
2023-03-07 02:36:26 -05:00
}
blockquote {
border-left: 5px solid var(--theme-accent);
padding-left: 15px;
2023-03-07 20:44:47 -05:00
width:80%;
2023-03-07 02:36:26 -05:00
}
code{
font-family: monospace;
2023-03-21 22:26:39 -04:00
color:var(--theme-accent);
white-space:break-spaces;
word-wrap: normal;
}
article pre {
width:100%;
2023-03-07 02:49:44 -05:00
}