valor/static/css/theme.css
2022-09-17 19:22:44 -04:00

243 lines
No EOL
4 KiB
CSS

body{
--theme-color-primary: rgba(255, 255, 255, 0.8);
--theme-color-secondary: black;
--theme-accent: #09448c;
}
@media screen and (prefers-color-scheme:dark){
body{
--theme-color-primary:rgba(0, 0, 0, 0.8);
--theme-color-secondary:white;
--theme-accent: #2db1f3;
}
}
body{
color:var(--theme-color-secondary);
background-color: var(--theme-color-primary);
background-image: url(/res/bg.png);
background-size: 35vh;
display:flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-evenly;
width:100%;
margin:0;
padding-top:1rem;
overflow-x: hidden;
font-weight: 500;
}
.spacer{
width:10vw;
}
a,a:visited,hr{
color:var(--theme-accent);
}
hr{
width:100%;
color:var(--theme-accent);
margin-top:1rem;
margin-bottom:1rem;
}
iframe,
video,
img,
audio{
max-width:100%;
max-height: 30vh;
}
#profile img {
}
audio{
width:80%;
}
#profile{
margin-bottom:1rem;
width: 100%;
max-width: 80rem;
flex-shrink: none;
}
#profile-details{
display:flex;
flex-direction: column;
align-items: center;
}
#profile-links{
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#profile-links>a{
margin:0.5rem;
}
#posts{
margin-bottom:1rem;
width: fit-content;
display: flex;
flex-direction: column;
align-items: center;
max-width: 40rem;
}
.post{
width:100%;
word-wrap: break-word;
margin-bottom:1rem;
}
.post h2{
margin-top:0;
}
#profilephoto{
margin:1rem;
max-width: 10rem;
border-radius: 50%;
border: 0.5rem solid var(--theme-accent);
}
section{
width: 100%;
}
#profile>nav,
#profile>div{
display:flex;
flex-direction: row;
align-items: flex-start;
justify-content:space-evenly;
flex-wrap: wrap;
}
#profile>#details{
flex-direction: column;
}
nav{
display:flex;
flex-direction: row;
align-items: baseline;
justify-content:space-evenly;
flex-wrap: wrap;
}
nav>a{
}
article,main > div,main>nav{
display:flex;
flex-direction: column;
align-items: center;
padding:1rem;
background-color: var(--theme-color-primary);
color: var(--theme-color-secondary);
border:0.25rem solid var(--theme-accent);
backdrop-filter: blur(0.5rem);
border-radius: 1rem;
margin-bottom:1.5rem;
width:90%;
}
article p,
article h3,
article h4,
article ul,
article ol,
article table{
text-align: left;
width:90%;
}
article img{
}
blockquote {
margin-left: 10%;
padding-left: 2.5rem;
width:80%;
border-left: 0.5rem solid var(--theme-accent);
font-style: italic;
}
.gallery{
width:70%;
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}
.gallery>*{
margin:0.1rem;
border:1px solid var(--theme-color-accent);
}
audio{
padding:1rem;
}
.post-tags{
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
font-weight: bolder;
font-size:1.25rem
}
.post-tags>*{
margin:0.5rem;
}
@media screen and (orientation: portrait){
body{
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex-wrap: none;
padding:0;
font-size:1rem;
}
#profile,#posts{
width:90%;
max-width: 90vw;
}
#profile a>img{
display:flex;
flex-direction: column;
align-items: center;
width:100%;
}
}
.link-preview{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
padding:1.5%;
justify-content: center;
text-decoration: none;
text-align: left;
width:80%;
}
.link-preview>div{
margin:1rem;
}
.link-preview>img{
max-width: 20%;
}
.link-preview>div>p{
text-decoration: none !important;
color: var(--theme-color-secondary);
}