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);
|
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})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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)}}, {})
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue