luckyimnotanigger/redlib
1
0
Fork 0
mirror of https://github.com/redlib-org/redlib.git synced 2025-05-05 04:40:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Redesign User/Subreddit About Boxes

Browse source
This commit is contained in:
spikecodes 2020-12-23 22:16:04 -08:00
parent 280e16bd7f
commit ace21b21d5
7 changed files with 282 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

83
static/style.css
View file

@ -39,10 +39,11 @@ nav {
}
main {
display: flex;
justify-content: center;
max-width: 750px;
padding: 10px 20px;
margin: 0 auto;
margin-top: 25px;
padding: 0px 10px;
}
footer {
@ -71,60 +72,60 @@ a:not(.post_right):hover {
background: #151515;
}
aside {
/* background: #151515; */
padding: 20px;
height: max-content;
border-radius: 5px;
flex-grow: 1;
margin: 80px 20px 0px 20px;
background: var(--outside);
}
#version {
color: white;
opacity: 25%;
}
/* Subreddit */
/* User & Subreddit */
.subreddit {
max-width: 750px;
.user, .subreddit {
max-width: 350px;
margin: 0 auto;
display: flex;
padding-bottom: 25px;
flex-direction: column;
align-items: center;
}
.subreddit_name {
margin-bottom: 10px;
}
.subreddit_right {
display: flex;
flex-flow: column;
justify-content: center;
}
.subreddit_icon {
.user_icon, .subreddit_icon {
width: 100px;
height: 100px;
border: 2px solid var(--accent);
border-radius: 100%;
padding: 20px;
padding: 10px;
margin: 10px;
}
#stats {
.user_name, .subreddit_name {
margin-top: 10px;
}
/* User */
.user {
max-width: 750px;
margin: 0 auto;
display: flex;
.user_description, .subreddit_description {
margin: 10px 20px;
text-align: center;
font-size: 15px;
}
.user_right {
display: flex;
flex-flow: column;
justify-content: center;
.user_details, .subreddit_details {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-top: 15px;
grid-column-gap: 20px;
}
.user_icon {
width: 100px;
height: 100px;
border-radius: 100%;
padding: 20px;
.user_details > label, .subreddit_details > label {
color: var(--accent);
font-size: 15px;
}
/* Sorting */
@ -178,6 +179,10 @@ a:not(.post_right):hover {
display: flex;
}
.post.highlighted {
margin-top: 20px;
}
.post:hover {
background: var(--foreground);
}
@ -471,4 +476,14 @@ td, th {
.datetime {
width: 100%;
}
}
@media screen and (max-width: 800px) {
main {
flex-direction: column-reverse;
}
aside {
margin: 20px 0px 0px 0px;
}
}