From fefb325c3f00f2aa07265d0d8e46a1833bd9ffed Mon Sep 17 00:00:00 2001 From: VnPower Date: Mon, 16 Oct 2023 19:41:47 +0700 Subject: [PATCH] Complete rewriting major pages UI --- template/css/style.css | 85 ++++++- template/css/style.scss | 240 ++++++++++++------ template/layout.jet.html | 3 +- template/pages/artwork.jet.html | 11 +- .../pages/components/thumbnail-dt.jet.html | 2 +- template/pages/tag.jet.html | 14 +- 6 files changed, 262 insertions(+), 93 deletions(-) diff --git a/template/css/style.css b/template/css/style.css index e2a79f4..ea72c23 100644 --- a/template/css/style.css +++ b/template/css/style.css @@ -6,7 +6,7 @@ html { body { top: 0; margin: 0; - background-color: #111; + background-color: #131516; color: #fff; font-size: 1.8rem; font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP"; @@ -20,6 +20,15 @@ a { text-decoration: none; } +.special-symbol { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.8rem; + height: 1.8rem; + font-size: 1.8rem; +} + [hidden] { display: none; } @@ -62,6 +71,8 @@ textarea { input[type=text], textarea { width: calc(100% - 1.6rem); + background-color: #222; + color: #aaa; } input[readonly], @@ -170,6 +181,7 @@ nav .navigation-wrapper .navbar-brand { nav .navigation-wrapper .navbar-brand span { font-weight: bold; font-size: 1.3em; + color: #fff; } nav .navigation-wrapper .navbar-entry img { width: 30px; @@ -189,7 +201,7 @@ nav .navigation-wrapper .sidebar-label { cursor: pointer; } nav .navigation-wrapper .sidebar { - background-color: #111; + background-color: #131516; position: absolute; padding-top: 6px; left: 0; @@ -338,7 +350,7 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img { justify-content: center; font-size: 10px; border-radius: 20px; - padding: 0.3rem; + padding: 0.4rem; background-color: #fc365b; color: #fff; } @@ -445,10 +457,12 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img { } .illust .illust-attr .attr-wrap .illust-author { font-size: 0.8em; +} +.illust .illust-attr .attr-wrap .illust-author a { color: #aaa; } .illust .illust-description { - font-size: 0.9em; + font-size: 0.85em; } .illust .illust-tags { font-size: 0.9em; @@ -475,6 +489,31 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img { font-weight: bold; margin-right: 5px; } +.illust .comment { + display: flex; + margin-bottom: 10px; +} +.illust .comment p { + margin: 0; + font-size: 0.8em; +} +.illust .comment .comment-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; +} +.illust .comment .stamp { + width: 96px; + height: 96px; + border-radius: 4px; +} +.illust .comment .emoji { + width: 24px; + height: 24px; + margin-left: 3px; + margin-right: 3px; +} .illust .illust-other-works > a { display: inline-flex; align-items: center; @@ -578,5 +617,43 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img { display: none; } } +.tag-header { + display: flex; +} +.tag-header .tag-thumbnail { + width: 120px; + height: 120px; + border-radius: 5px; + margin-right: 20px; + object-fit: cover; + object-position: center center; +} +.tag-header .tag-details .main-tag { + font-size: 1.6rem; +} + +.tag-container { + background-color: #222; + display: inline-flex; + align-items: center; + justify-content: center; + padding-left: 20px; + padding-right: 20px; + margin-right: 10px; + width: max-content; + height: 40px; + margin-bottom: 4px; + text-align: center; + font-weight: bold; + font-size: 1rem; + border-radius: 4px; +} +.tag-container .main { + font-size: 1.6em; +} +.tag-container .sub { + font-size: 1.2em; + font-weight: normal; +} /*# sourceMappingURL=style.css.map */ diff --git a/template/css/style.scss b/template/css/style.scss index 5ebfdd4..999f177 100644 --- a/template/css/style.scss +++ b/template/css/style.scss @@ -1,5 +1,4 @@ - -$bg: #111; +$bg: #131516; $bg-secondary: #222; $fg: #fff; $fg-secondary: #aaa; @@ -40,6 +39,14 @@ a { text-decoration: none; } +.special-symbol { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.8rem; + height: 1.8rem; + font-size: 1.8rem; +} [hidden] { display: none; @@ -83,6 +90,8 @@ textarea { input[type="text"], textarea { width: calc(100% - 1.6rem); + background-color: $bg-secondary; + color: $fg-secondary; } input[readonly], @@ -130,7 +139,7 @@ input[type="submit"], button, input[type="submit"], .switch-button, -.pagination-button { +.pagination-button { font-family: $font-family; } @@ -144,8 +153,7 @@ input[type="submit"]:active, button:hover, input[type="submit"]:hover, .switch-button, -.pagination-button { - +.pagination-button { cursor: pointer; filter: brightness($hover-brightness); } @@ -155,7 +163,7 @@ a strong, button, input[type="submit"], .switch-button, -.pagination-button { +.pagination-button { background-color: $link; border: 2px solid $link; color: $fg; @@ -175,10 +183,10 @@ input[type="submit"][hidden] { } nav { - margin-top: 15px; - margin-bottom: 15px; - margin-left: 20px; - margin-right: 20px; + margin-top: 15px; + margin-bottom: 15px; + margin-left: 20px; + margin-right: 20px; .navigation-wrapper { display: flex; justify-content: space-between; @@ -192,6 +200,7 @@ nav { span { font-weight: bold; font-size: 1.3em; + color: $fg; } } @@ -308,7 +317,10 @@ nav { .artwork-container { display: grid; - grid-template-columns: repeat(auto-fit, minmax(calc($small-artwork-width + 15px), 1fr)); + grid-template-columns: repeat( + auto-fit, + minmax(calc($small-artwork-width + 15px), 1fr) + ); align-items: center; } @@ -338,8 +350,7 @@ nav { .artwork-author { max-width: $large-artwork-width; a { - - max-width: $small-artwork-width; + max-width: $small-artwork-width; } } } @@ -358,8 +369,7 @@ nav { max-width: $small-artwork-width; a { - - max-width: $small-artwork-width; + max-width: $small-artwork-width; } } } @@ -393,35 +403,35 @@ nav { background-color: rgba(0, 0, 0, 0.32); } .artwork-profanity-label { - display: flex; - align-items: center; - justify-content: center; -font-size: 10px; - border-radius: 20px; - padding: 0.3rem; - background-color: $highlight; - color: $fg; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + border-radius: 20px; + padding: 0.4rem; + background-color: $highlight; + color: $fg; } .artwork-page-count { -display: flex; -justify-content: center; -align-items: center; -flex: 0 0 auto; -box-sizing: border-box; -height: 20px; -min-width: 20px; -color: $fg; -font-weight: bold; -padding: 0px 6px; -background: rgba(0, 0, 0, 0.32); -border-radius: 10px; -font-size: 10px; -line-height: 10px; + display: flex; + justify-content: center; + align-items: center; + flex: 0 0 auto; + box-sizing: border-box; + height: 20px; + min-width: 20px; + color: $fg; + font-weight: bold; + padding: 0px 6px; + background: rgba(0, 0, 0, 0.32); + border-radius: 10px; + font-size: 10px; + line-height: 10px; -.boxbox { - font-size: 9px; -} + .boxbox { + font-size: 9px; + } } } @@ -465,12 +475,11 @@ line-height: 10px; } span { - font-size: 14px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 22px; } } } @@ -512,13 +521,15 @@ line-height: 10px; } .illust-author { font-size: 0.8em; - color: $fg-secondary; + a { + color: $fg-secondary; + } } } } .illust-description { - font-size: 0.9em; + font-size: 0.85em; } .illust-tags { @@ -552,6 +563,36 @@ line-height: 10px; } } + .comment { + display: flex; + margin-bottom: 10px; + + p { + margin: 0; + font-size: 0.8em; + } + + .comment-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; + } + + .stamp { + width: 96px; + height: 96px; + border-radius: 4px; + } + + .emoji { + width: 24px; + height: 24px; + margin-left: 3px; + margin-right: 3px; + } + } + .illust-other-works { & > a { display: inline-flex; @@ -559,27 +600,25 @@ line-height: 10px; text-decoration: none; color: $fg; - & > img { - aspect-ratio: 1/1; - width: 50px; - height: 50px; - border-radius: 50%; - margin-right: 5px; + & > img { + aspect-ratio: 1/1; + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 5px; + } } - } - - } } .background-cover { - background: repeating-linear-gradient( - 52.5deg, - rgba(32, 32, 32, 0.8), - rgba(32, 32, 32, 0.8) 14px, - rgba(240, 248, 255, 0) 14px, - rgba(240, 248, 255, 0) 28px - ); + background: repeating-linear-gradient( + 52.5deg, + rgba(32, 32, 32, 0.8), + rgba(32, 32, 32, 0.8) 14px, + rgba(240, 248, 255, 0) 14px, + rgba(240, 248, 255, 0) 28px + ); height: 10vw; min-height: 100px; overflow: hidden; @@ -600,27 +639,26 @@ line-height: 10px; } .user { - transform: translateY(-8rem); + transform: translateY(-8rem); - .user-avatar { + .user-avatar { + margin: auto; + aspect-ratio: 1/1; + width: 170px; + height: 170px; - margin: auto; - aspect-ratio: 1/1; - width: 170px; - height: 170px; - - img { - border-radius: 50%; - } + img { + border-radius: 50%; } + } - .user-details { - text-align: center; + .user-details { + text-align: center; - h2 { - margin: 0; - } + h2 { + margin: 0; } + } } #calendar { @@ -675,3 +713,49 @@ line-height: 10px; display: none; } } + +.tag-header { + display: flex; + + .tag-thumbnail { + width: 120px; + height: 120px; + border-radius: 5px; + margin-right: 20px; + + object-fit: cover; + object-position: center center; + } + + .tag-details { + .main-tag { + font-size: 1.6rem; + } + } +} + +.tag-container { + background-color: $bg-secondary; + display: inline-flex; + align-items: center; + justify-content: center; + padding-left: 20px; + padding-right: 20px; + margin-right: 10px; + + width: max-content; + height: 40px; + margin-bottom: 4px; + text-align: center; + font-weight: bold; + font-size: 1rem; + border-radius: 4px; + + .main { + font-size: 1.6em; + } + .sub { + font-size: 1.2em; + font-weight: normal; + } +} diff --git a/template/layout.jet.html b/template/layout.jet.html index ef1d0da..20195cd 100644 --- a/template/layout.jet.html +++ b/template/layout.jet.html @@ -98,9 +98,8 @@ + Icon - - Icon PixivFE diff --git a/template/pages/artwork.jet.html b/template/pages/artwork.jet.html index 87efdcf..47909ae 100644 --- a/template/pages/artwork.jet.html +++ b/template/pages/artwork.jet.html @@ -37,7 +37,9 @@
{{ Illust.Title }}
-
{{ Illust.User.Name }}
+
+ {{ Illust.User.Name }} +
@@ -84,8 +86,9 @@
{{ Illust.User.Name }} - Other works by {{ Illust.User.Name }} + >{{ Illust.User.Name }} Other + works by {{ Illust.User.Name }} + »
{{ range Illust.RecentWorks }} @@ -100,7 +103,7 @@ {{ if Illust.CommentDisabled == 1 }}

The creator turned comments off

{{ else if Illust.Comments == 0 }} -

There is no comment yet

+

There are no comments yet

{{ else }} {{ range Illust.CommentsList }}
{{ .AuthorName }} diff --git a/template/pages/components/thumbnail-dt.jet.html b/template/pages/components/thumbnail-dt.jet.html index 016f7c3..b7e222a 100644 --- a/template/pages/components/thumbnail-dt.jet.html +++ b/template/pages/components/thumbnail-dt.jet.html @@ -8,5 +8,5 @@ {{ end }}
- {{ .Title }} + {{ .Title }} diff --git a/template/pages/tag.jet.html b/template/pages/tag.jet.html index cab01cb..7204709 100644 --- a/template/pages/tag.jet.html +++ b/template/pages/tag.jet.html @@ -21,9 +21,13 @@
-
+
{{ range Data.RelatedTags }} - #{{ . }} + +
+
#{{ . }}
+
+ {{ end }}
@@ -52,7 +56,7 @@
{{ if Data.Popular.Recent }}

Popular artworks

-
+
{{ include "components/small-tn" Data.Popular.Recent }} {{ include "components/small-tn" Data.Popular.Permanent }}
@@ -60,7 +64,9 @@

Works

-
{{ include "components/small-tn" Data.Artworks.Artworks }}
+
+ {{ include "components/small-tn" Data.Artworks.Artworks }} +