valor/static/css/theme.css

243 lines
4 KiB
CSS
Raw Normal View History

2022-08-17 14:47:54 -04:00
body{
2022-09-17 19:22:44 -04:00
--theme-color-primary: rgba(255, 255, 255, 0.8);
2022-09-15 17:12:31 -04:00
--theme-color-secondary: black;
2022-09-17 19:22:44 -04:00
--theme-accent: #09448c;
2022-09-15 17:12:31 -04:00
}
@media screen and (prefers-color-scheme:dark){
body{
2022-09-17 19:22:44 -04:00
--theme-color-primary:rgba(0, 0, 0, 0.8);
2022-09-15 17:12:31 -04:00
--theme-color-secondary:white;
2022-09-17 19:22:44 -04:00
--theme-accent: #2db1f3;
2022-09-15 17:12:31 -04:00
}
}
body{
2022-09-16 16:04:52 -04:00
color:var(--theme-color-secondary);
background-color: var(--theme-color-primary);
2022-09-17 19:22:44 -04:00
background-image: url(/res/bg.png);
background-size: 35vh;
2022-08-17 14:47:54 -04:00
display:flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-evenly;
2022-09-15 17:12:31 -04:00
width:100%;
2022-08-17 14:47:54 -04:00
margin:0;
2022-09-15 17:12:31 -04:00
padding-top:1rem;
2022-08-17 14:47:54 -04:00
overflow-x: hidden;
2022-09-02 07:03:53 -04:00
font-weight: 500;
2022-08-17 14:47:54 -04:00
}
2022-09-15 17:12:31 -04:00
.spacer{
2022-09-16 16:04:52 -04:00
width:10vw;
2022-09-15 17:12:31 -04:00
}
2022-08-17 14:47:54 -04:00
a,a:visited,hr{
2022-09-15 17:12:31 -04:00
color:var(--theme-accent);
2022-08-17 14:47:54 -04:00
}
hr{
width:100%;
color:var(--theme-accent);
margin-top:1rem;
margin-bottom:1rem;
}
iframe,
video,
img,
audio{
max-width:100%;
max-height: 30vh;
2022-09-16 16:04:52 -04:00
}
#profile img {
2022-08-17 14:47:54 -04:00
}
2022-09-02 07:03:53 -04:00
audio{
width:80%;
}
2022-08-17 14:47:54 -04:00
#profile{
margin-bottom:1rem;
2022-09-17 19:22:44 -04:00
width: 100%;
2022-09-15 17:12:31 -04:00
max-width: 80rem;
flex-shrink: none;
2022-08-17 14:47:54 -04:00
}
2022-09-15 17:12:31 -04:00
#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;
}
2022-08-17 14:47:54 -04:00
#posts{
margin-bottom:1rem;
2022-09-15 17:12:31 -04:00
width: fit-content;
display: flex;
flex-direction: column;
align-items: center;
max-width: 40rem;
2022-08-17 14:47:54 -04:00
}
.post{
2022-09-15 17:12:31 -04:00
width:100%;
word-wrap: break-word;
2022-09-16 16:04:52 -04:00
margin-bottom:1rem;
}
.post h2{
margin-top:0;
2022-08-17 14:47:54 -04:00
}
2022-09-15 17:12:31 -04:00
2022-08-17 14:47:54 -04:00
#profilephoto{
margin:1rem;
max-width: 10rem;
2022-09-16 16:04:52 -04:00
border-radius: 50%;
border: 0.5rem solid var(--theme-accent);
2022-09-15 17:12:31 -04:00
}
section{
width: 100%;
2022-08-17 14:47:54 -04:00
}
#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;
2022-09-15 17:12:31 -04:00
flex-wrap: wrap;
2022-08-17 14:47:54 -04:00
}
nav>a{
}
2022-09-16 16:04:52 -04:00
article,main > div,main>nav{
2022-08-17 14:47:54 -04:00
display:flex;
flex-direction: column;
align-items: center;
2022-09-16 16:04:52 -04:00
padding:1rem;
background-color: var(--theme-color-primary);
color: var(--theme-color-secondary);
border:0.25rem solid var(--theme-accent);
2022-09-17 19:22:44 -04:00
backdrop-filter: blur(0.5rem);
2022-09-16 16:04:52 -04:00
border-radius: 1rem;
margin-bottom:1.5rem;
width:90%;
2022-08-17 14:47:54 -04:00
}
article p,
article h3,
2022-09-17 19:22:44 -04:00
article h4,
2022-08-17 14:47:54 -04:00
article ul,
article ol,
article table{
text-align: left;
2022-09-16 16:04:52 -04:00
width:90%;
2022-08-17 14:47:54 -04:00
}
article img{
2022-09-02 07:03:53 -04:00
}
blockquote {
2022-09-17 19:22:44 -04:00
margin-left: 10%;
padding-left: 2.5rem;
width:80%;
border-left: 0.5rem solid var(--theme-accent);
font-style: italic;
2022-09-04 09:40:18 -04:00
}
.gallery{
2022-09-17 19:22:44 -04:00
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);
2022-09-15 17:12:31 -04:00
}
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
}
2022-09-17 19:22:44 -04:00
.post-tags>*{
margin:0.5rem;
}
2022-09-15 17:12:31 -04:00
@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%;
}
}
2022-09-16 16:04:52 -04:00
2022-09-17 19:22:44 -04:00
.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);
}