Tidy up CSS

This commit is contained in:
blankie 2023-05-06 00:11:41 +07:00
parent 81c61965c4
commit b0b8e5c3c9
Signed by: blankie
GPG Key ID: CC15FC822C7F61F5
3 changed files with 38 additions and 40 deletions

View File

@ -59,7 +59,7 @@ static inline Element generate_user_link(const httplib::Request& req, const Conf
std::string user_link = get_origin(req, config) + "/users/" + std::to_string(illust.user_id); std::string user_link = get_origin(req, config) + "/users/" + std::to_string(illust.user_id);
return Element("a", {{"class", "usermetadata"}, {"href", std::move(user_link)}}, { return Element("a", {{"class", "usermetadata"}, {"href", std::move(user_link)}}, {
Element("img", {{"class", "smallprofilepicture"}, {"loading", "lazy"}, {"src", std::move(profile_picture)}}, {}), Element("img", {{"class", "profilepicture small"}, {"loading", "lazy"}, {"src", std::move(profile_picture)}}, {}),
Element("b", {illust.user_display_name}) Element("b", {illust.user_display_name})
}); });
} }

View File

@ -25,6 +25,14 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
color: var(--text-color); color: var(--text-color);
font-family: sans-serif; font-family: sans-serif;
} }
img {
object-fit: cover;
max-width: 100%;
}
.center {
text-align: center;
display: block;
}
a { a {
color: var(--accent-color); color: var(--accent-color);
@ -35,40 +43,7 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
text-decoration: underline; text-decoration: underline;
} }
img { /* ILLUSTRATIONS GRID and ILLUSTRATION PREVIEW PAGE */
object-fit: cover;
max-width: 100%;
}
.center {
text-align: center;
display: block;
}
/* USER PAGE (and a tiny bit for illustrations page) */
.cover {
width: 100%;
height: 50vh;
margin-bottom: 1em;
}
.profilepicture, .smallprofilepicture {
margin-right: .5em;
}
.profilepicture {
width: 5em;
height: 5em;
}
.smallprofilepicture {
width: 2.5em;
height: 2.5em;
}
.usermetadata {
display: flex;
align-items: center;
margin-left: .5em;
}
/* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
.grid { .grid {
gap: 1em; gap: 1em;
display: flex; display: flex;
@ -79,6 +54,8 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
width: 15em; width: 15em;
height: 15em; height: 15em;
} }
/* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
.grid p { .grid p {
width: 15em; width: 15em;
} }
@ -99,10 +76,9 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
} }
/* ILLUSTRATIONS PAGE */ /* ILLUSTRATIONS PAGE */
.illusttags { .profilepicture.small {
display: flex; width: 2.5em;
flex-wrap: wrap; height: 2.5em;
gap: 0 1em;
} }
.illustimages { .illustimages {
display: grid; display: grid;
@ -112,6 +88,28 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;
} }
.illusttags {
display: flex;
flex-wrap: wrap;
gap: 0 1em;
}
/* USER PAGE */
.profilecover {
width: 100%;
height: 50vh;
margin-bottom: 1em;
}
.profilepicture {
margin-right: .5em;
width: 5em;
height: 5em;
}
.usermetadata {
display: flex;
align-items: center;
margin-left: .5em;
}
/* SEARCH RESULTS PAGE */ /* SEARCH RESULTS PAGE */
.searchsuggestions { .searchsuggestions {

View File

@ -11,7 +11,7 @@ Element generate_user_header(const User& user, const Config& config) {
std::string cover_original = proxy_image_url(config, user.cover_images->original_or_thumbnail()); std::string cover_original = proxy_image_url(config, user.cover_images->original_or_thumbnail());
std::string cover_thumbnail = proxy_image_url(config, user.cover_images->thumbnail_or_original()); std::string cover_thumbnail = proxy_image_url(config, user.cover_images->thumbnail_or_original());
header.nodes.push_back(Element("a", {{"href", std::move(cover_original)}}, { header.nodes.push_back(Element("a", {{"href", std::move(cover_original)}}, {
Element("img", {{"class", "cover"}, {"loading", "lazy"}, {"src", std::move(cover_thumbnail)}}, {}) Element("img", {{"class", "profilecover"}, {"loading", "lazy"}, {"src", std::move(cover_thumbnail)}}, {})
})); }));
} }