Tidy up CSS
This commit is contained in:
parent
81c61965c4
commit
b0b8e5c3c9
|
@ -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);
|
||||
|
||||
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})
|
||||
});
|
||||
}
|
||||
|
|
|
@ -25,6 +25,14 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
|
|||
color: var(--text-color);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
max-width: 100%;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
|
@ -35,40 +43,7 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img {
|
||||
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) */
|
||||
/* ILLUSTRATIONS GRID and ILLUSTRATION PREVIEW PAGE */
|
||||
.grid {
|
||||
gap: 1em;
|
||||
display: flex;
|
||||
|
@ -79,6 +54,8 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
|
|||
width: 15em;
|
||||
height: 15em;
|
||||
}
|
||||
|
||||
/* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
|
||||
.grid p {
|
||||
width: 15em;
|
||||
}
|
||||
|
@ -99,10 +76,9 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
|
|||
}
|
||||
|
||||
/* ILLUSTRATIONS PAGE */
|
||||
.illusttags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 1em;
|
||||
.profilepicture.small {
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
}
|
||||
.illustimages {
|
||||
display: grid;
|
||||
|
@ -112,6 +88,28 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
|
|||
padding-top: 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 */
|
||||
.searchsuggestions {
|
||||
|
|
|
@ -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_thumbnail = proxy_image_url(config, user.cover_images->thumbnail_or_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)}}, {})
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue