diff --git a/handler/template.go b/handler/template.go index ffd0503..9a620cf 100644 --- a/handler/template.go +++ b/handler/template.go @@ -7,6 +7,7 @@ import ( "net/url" "regexp" "strconv" + "time" ) func GetRandomColor() string { @@ -105,6 +106,10 @@ func ParsePixivRedirect(s string) template.HTML { return template.HTML(escaped) } +func ParseTime(date time.Time) string { + return date.Format("2006-01-02 15:04") +} + func GetTemplateFunctions() template.FuncMap { return template.FuncMap{ "toInt": func(s string) int { @@ -143,5 +148,8 @@ func GetTemplateFunctions() template.FuncMap { } return fmt.Sprintf("%s-%s-%s", s[4:], s[2:4], s[:2]) }, + "parseTime": func(date time.Time) string { + return ParseTime(date) + }, } } diff --git a/template/assets/banner.jpg b/template/assets/banner.jpg deleted file mode 100644 index 2e4360a..0000000 Binary files a/template/assets/banner.jpg and /dev/null differ diff --git a/template/assets/calendar.png b/template/assets/calendar.png new file mode 100644 index 0000000..0c8bc73 Binary files /dev/null and b/template/assets/calendar.png differ diff --git a/template/assets/cog.svg b/template/assets/cog.svg new file mode 100644 index 0000000..cf7e41e --- /dev/null +++ b/template/assets/cog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/assets/cross.png b/template/assets/cross.png new file mode 100644 index 0000000..310327b Binary files /dev/null and b/template/assets/cross.png differ diff --git a/template/assets/eye.png b/template/assets/eye.png new file mode 100644 index 0000000..620d329 Binary files /dev/null and b/template/assets/eye.png differ diff --git a/template/assets/globe.png b/template/assets/globe.png new file mode 100644 index 0000000..679cc9d Binary files /dev/null and b/template/assets/globe.png differ diff --git a/template/assets/heart-solid.png b/template/assets/heart-solid.png new file mode 100644 index 0000000..0b36266 Binary files /dev/null and b/template/assets/heart-solid.png differ diff --git a/template/assets/like.png b/template/assets/like.png new file mode 100644 index 0000000..96b30d8 Binary files /dev/null and b/template/assets/like.png differ diff --git a/template/assets/search.svg b/template/assets/search.svg new file mode 100644 index 0000000..a99779f --- /dev/null +++ b/template/assets/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/css/style.css b/template/css/style.css index f39ab15..ea72c23 100644 --- a/template/css/style.css +++ b/template/css/style.css @@ -1,438 +1,570 @@ -* { - box-sizing: border-box; -} - -a { - color: #7aa2f7; - text-decoration: none; +html { + scrollbar-color: #666 #201c29; + font-size: 62.5%; } body { top: 0; margin: 0; - font-family: "Noto Sans CJK JP", "Open Sans", "Noto Sans", sans-serif; - font-size: 1rem; - color: #c0caf5; - background-color: #1a1b26; + background-color: #131516; + color: #fff; + font-size: 1.8rem; + font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP"; + margin-bottom: 10px; + margin-left: 5px; + margin-right: 5px; } -.container { - max-width: 1200px; - min-height: 85vh; - margin-left: auto; - margin-right: auto; - padding-left: 10px; - padding-right: 10px; -} -.container h2 { - font-size: 20px; - margin-bottom: 0; +a { + color: #118bee; + text-decoration: none; } -.thumbnail-container { - overflow-x: scroll; - overflow-y: hidden; - white-space: nowrap; - margin-top: 5px; - margin-bottom: 5px; - padding-bottom: 3px; - scrollbar-width: thin; +.special-symbol { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.8rem; + height: 1.8rem; + font-size: 1.8rem; } +[hidden] { + display: none; +} + +input, +label, +select, +textarea { + display: block; + font-size: inherit; + max-width: 600px; +} + +input[type=checkbox], +input[type=radio] { + display: inline-block; +} + +input[type=checkbox] + label, +input[type=radio] + label { + display: inline-block; + font-weight: normal; + position: relative; + top: 1px; +} + +input[type=range] { + padding: 0.4rem 0; +} + +input, +select, +textarea { + border: 1px solid #222; + border-radius: 5px; + margin-bottom: 1rem; + padding: 0.4rem 0.8rem; +} + +input[type=text], +textarea { + width: calc(100% - 1.6rem); + background-color: #222; + color: #aaa; +} + +input[readonly], +textarea[readonly] { + background-color: #222; +} + +label { + font-weight: bold; + margin-bottom: 0.2rem; +} + +.form-field { + border: 1px solid #222; + border-radius: 5px; + box-shadow: 2px 2px 10px rgba(187, 187, 187, 0.1254901961); + display: block; + max-width: 800px; + min-width: 460px; + padding: 1.5rem; +} +.form-field header { + margin: 1.5rem 0; + padding: 1.5rem 0; +} + +a b, +a em, +a i, +a strong, +button, +input[type=submit], +.switch-button, +.pagination-button { + border-radius: 5px; + display: inline-block; + font-size: medium; + font-weight: bold; + line-height: 1.5; + margin: 0.5rem 0; + padding: 0.5rem 1rem; +} + +button, +input[type=submit], +.switch-button, +.pagination-button { + font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP"; +} + +button:active, +input[type=submit]:active, +.switch-button, +.pagination-button { + filter: brightness(0.85); +} + +button:hover, +input[type=submit]:hover, +.switch-button, +.pagination-button { + cursor: pointer; + filter: brightness(1.2); +} + +a b, +a strong, +button, +input[type=submit], +.switch-button, +.pagination-button { + background-color: #118bee; + border: 2px solid #118bee; + color: #fff; +} + +input[type=submit][hidden] { + display: none; +} + +.switch-seperator { + display: inline-block; + margin-left: 10px; +} + +.pagination { + text-align: center; +} + +nav { + margin-top: 15px; + margin-bottom: 15px; + margin-left: 20px; + margin-right: 20px; +} +nav .navigation-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: auto; +} +nav .navigation-wrapper .navbar-brand { + display: inline-flex; + gap: 10px; +} +nav .navigation-wrapper .navbar-brand span { + font-weight: bold; + font-size: 1.3em; + color: #fff; +} +nav .navigation-wrapper .navbar-entry img { + width: 30px; + height: 30px; +} +nav .navigation-wrapper .search-form input { + margin: 0; +} +nav .navigation-wrapper .sidebar-toggler { + display: none; +} +nav .navigation-wrapper .sidebar-toggler:checked ~ .sidebar { + transform: translateX(0); +} +nav .navigation-wrapper .sidebar-label { + margin-right: 9px; + cursor: pointer; +} +nav .navigation-wrapper .sidebar { + background-color: #131516; + position: absolute; + padding-top: 6px; + left: 0; + width: 220px; + transform: translateX(-220px); + transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1); + z-index: 999; +} +nav .navigation-wrapper .sidebar br { + align-self: stretch; + margin-top: 10px; +} +nav .navigation-wrapper .sidebar .sidebar-list { + list-style-type: none; + margin: 0; + padding: 0; +} +nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item { + display: flex; + align-items: center; + list-style: none; + color: #fff; + font-size: 0.9em; + text-decoration: none; + padding: 10px; +} +nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item:hover { + background-color: #222; +} +nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img { + width: 30px; + height: 30px; + margin-left: 1.2rem; + margin-right: 10px; +} + +@media screen and (max-width: 600px) { + nav .search-form { + display: none; + } +} .component-header { display: flex; justify-content: space-between; + align-items: center; } .component-header h2 { margin: 0; display: inline-block; } -.navbar { - margin-left: 2rem; - margin-right: 2rem; -} -.navbar .navbar-brand { - display: inline-flex; - align-items: center; - font-size: 1.2rem; - color: #c0caf5; - text-decoration: none; -} -.navbar .navbar-brand img { - margin-right: 9px; - width: 30px; - height: 30px; -} -.navbar .navbar-list { - display: flex; - padding: 0; - justify-content: space-between; - list-style-type: none; -} -.navbar .search-bar { - width: 500px; -} -.navbar .search-bar .search-form-text { - width: 100%; - background-color: #24283b; - padding: 7px 10px; - margin: 0; - border: none; - color: #c0caf5; -} -.navbar .search-bar .search-form-text::placeholder { - color: #c0caf5; -} -.navbar .navbar-button { - display: inline-block; - margin-left: 5px; +.container { + max-width: 1200px; + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; } -.sidebar-toggler { - display: none; -} -.sidebar-toggler:checked ~ .sidebar { - transform: translateX(0); +.artwork-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(199px, 1fr)); + align-items: center; } -.sidebar-label { - margin-right: 9px; - cursor: pointer; -} - -.sidebar { - background-color: #1a1b26; - position: absolute; - margin-top: 16px; - left: 0; - width: 200px; - transform: translateX(-200px); - transition: transform 250ms ease-in-out; - z-index: 999; -} -.sidebar .sidebar-list { - list-style-type: none; - margin: 0; - padding: 0; -} -.sidebar .sidebar-list .sidebar-item { +.artwork-container-scroll { display: flex; - align-items: center; - list-style: none; - color: #c0caf5; - text-decoration: none; - padding: 10px; - width: 100%; -} -.sidebar .sidebar-list .sidebar-item:hover { - background-color: #24283b; -} -.sidebar .sidebar-list .sidebar-item img { - width: 30px; - height: 30px; - margin-left: 1rem; - margin-right: 10px; -} - -.artwork-thumbnail { - position: relative; - display: inline-block; - margin-right: 0.5rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} -.artwork-thumbnail img { - object-fit: cover; -} -.artwork-thumbnail .artwork-rank-circle { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - width: 1rem; - height: 1rem; - top: 0.3rem; - left: 0.3rem; - border-radius: 50%; - padding: 1rem; - background-color: #24283b; -} -.artwork-thumbnail .artwork-page-count { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0.3rem; - right: 0.3rem; - border-radius: 20px; - padding: 0.3rem; - background-color: rgba(26, 27, 38, 0.6); -} -.artwork-thumbnail .artwork-page-count span { - display: flex; - font-size: 0.7rem; - font-weight: bold; - align-items: center; - justify-content: center; - width: max-content; - height: 0.5rem; -} -.artwork-thumbnail .artwork-profanity-label { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0.3rem; - left: 0.3rem; - border-radius: 20px; - padding: 0.3rem; - background-color: #f7768e; - color: white; -} -.artwork-thumbnail .artwork-profanity-label span { - display: flex; - font-size: 0.7rem; - font-weight: bold; - align-items: center; - justify-content: center; - width: max-content; - height: 0.5rem; -} -.artwork-thumbnail .artwork-thumbnail-title { - margin: 0.4rem; - max-width: 100%; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: block; - color: inherit; - text-decoration: none; - font-weight: bold; - font-size: 0.9rem; - line-height: 1.2rem; -} -.artwork-thumbnail .artwork-master-image { - width: 100%; - height: 100%; - object-position: center center; - border-radius: 8px; -} -.artwork-thumbnail .artwork-thumbnail-artist { - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-decoration: none; - color: inherit; - display: flex; - align-items: center; -} -.artwork-thumbnail .artwork-thumbnail-artist-avatar { - margin-right: 5px; - width: 24px; - height: 24px; - object-position: center top; + overflow-x: scroll; } -.artwork-thumbnail-small { - width: 184px; - height: 184px; +.artwork-container a, +.artwork-container-scroll a { + text-decoration: none; + color: #fff; } - -.artwork-thumbnail-large { +.artwork-container .artwork-large img, +.artwork-container-scroll .artwork-large img { width: 288px; height: 288px; } - -.spotlight-thumbnail { - width: 400px; - height: 250px; - display: inline-block; - position: relative; - text-align: left; - color: white; +.artwork-container .artwork-large .artwork-title, +.artwork-container-scroll .artwork-large .artwork-title { + max-width: 288px; } -.spotlight-thumbnail .spotlight-master-image { - width: 100%; - height: 100%; +.artwork-container .artwork-large .artwork-author, +.artwork-container-scroll .artwork-large .artwork-author { + max-width: 288px; +} +.artwork-container .artwork-large .artwork-author a, +.artwork-container-scroll .artwork-large .artwork-author a { + max-width: 184px; +} +.artwork-container .artwork-small img, +.artwork-container-scroll .artwork-small img { + width: 184px; + height: 184px; +} +.artwork-container .artwork-small .artwork-title, +.artwork-container-scroll .artwork-small .artwork-title { + max-width: 184px; +} +.artwork-container .artwork-small .artwork-author, +.artwork-container-scroll .artwork-small .artwork-author { + max-width: 184px; +} +.artwork-container .artwork-small .artwork-author a, +.artwork-container-scroll .artwork-small .artwork-author a { + max-width: 184px; +} +.artwork-container .artwork, +.artwork-container-scroll .artwork { + padding: 5px; + width: fit-content; + position: relative; +} +.artwork-container .artwork .artwork-additional, +.artwork-container-scroll .artwork .artwork-additional { + position: absolute; + top: 4px; + left: 4px; + right: 4px; + box-sizing: border-box; + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 4px 4px 0px; + pointer-events: none; +} +.artwork-container .artwork .artwork-additional .artwork-position, +.artwork-container-scroll .artwork .artwork-additional .artwork-position { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + font-weight: bold; + width: 40px; + height: 40px; + font-size: 16px; + background-color: rgba(0, 0, 0, 0.32); +} +.artwork-container .artwork .artwork-additional .artwork-profanity-label, +.artwork-container-scroll .artwork .artwork-additional .artwork-profanity-label { + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + border-radius: 20px; + padding: 0.4rem; + background-color: #fc365b; + color: #fff; +} +.artwork-container .artwork .artwork-additional .artwork-page-count, +.artwork-container-scroll .artwork .artwork-additional .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: #fff; + font-weight: bold; + padding: 0px 6px; + background: rgba(0, 0, 0, 0.32); + border-radius: 10px; + font-size: 10px; + line-height: 10px; +} +.artwork-container .artwork .artwork-additional .artwork-page-count .boxbox, +.artwork-container-scroll .artwork .artwork-additional .artwork-page-count .boxbox { + font-size: 9px; +} +.artwork-container .artwork img, +.artwork-container-scroll .artwork img { object-fit: cover; object-position: center center; - filter: brightness(75%); + border-radius: 5px; } -.spotlight-thumbnail .spotlight-title-wrapper { - position: absolute; - display: block; - bottom: 0; - left: 0; - width: 100%; -} -.spotlight-thumbnail .spotlight-title-wrapper .spotlight-title { - margin-left: 10px; - margin-right: 10px; - margin-bottom: 10px; - font-size: 1rem; - line-height: 28px; - overflow: hidden; - overflow-wrap: break-word; - word-break: break-word; - hyphens: auto; - text-overflow: ellipsis; -} - -.artwork-page { - background: #24283b; - border-radius: 8px; -} -.artwork-page .artwork-content { - margin: 0 20px; - font-size: 0.9rem; -} -.artwork-page .artwork-content a { - color: #7aa2f7; - text-decoration: none; -} -.artwork-page .artwork-content a:hover { - text-decoration: underline; -} -.artwork-page .artwork-artist { +.artwork-container .artwork .artwork-title, +.artwork-container-scroll .artwork .artwork-title { display: flex; align-items: center; } -.artwork-page .artwork-artist .artwork-artist-avatar { - margin-right: 8px; - width: 50px; - height: 50px; - object-position: center top; -} -.artwork-page .artwork-tags { - display: inline-block; -} -.artwork-page .artwork-tags .artwork-tag-name { - margin-right: 5px; - color: #7aa2f7; +.artwork-container .artwork .artwork-title a, +.artwork-container-scroll .artwork .artwork-title a { + font-size: 14px; + display: inline; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 22px; font-weight: bold; } -.artwork-page .artwork-tags .artwork-tag-altname { - margin-right: 8px; -} -.artwork-page .artwork-tags .emphasize { - color: #f7768e; -} -.artwork-page .artwork-images { +.artwork-container .artwork .artwork-author, +.artwork-container-scroll .artwork .artwork-author { display: flex; align-items: center; - flex-direction: column; - width: 100%; } -.artwork-page .artwork-images .artwork-image-page { - margin: 10px auto; - max-height: 1000px; - width: auto; - max-width: 100%; +.artwork-container .artwork .artwork-author a, +.artwork-container-scroll .artwork .artwork-author a { + display: flex; + align-items: center; } -.artwork-page .comment { +.artwork-container .artwork .artwork-author a img, +.artwork-container-scroll .artwork .artwork-author a img { + aspect-ratio: 1/1; + width: 24px; + height: 24px; + object-fit: cover; + object-position: center top; + border-radius: 50%; + margin-right: 5px; +} +.artwork-container .artwork .artwork-author a span, +.artwork-container-scroll .artwork .artwork-author a span { + font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 22px; +} + +.illust { + background-color: #222; + border-radius: 5px; + padding: 5px 15px; +} +.illust .illust-images { + display: flex; + flex-flow: column wrap; + align-items: center; +} +.illust .illust-images img { + margin-top: 15px; +} +.illust .illust-attr { + display: flex; + align-items: center; + margin-top: 10px; + margin-bottom: 10px; +} +.illust .illust-attr .illust-avatar { + width: 62px; + height: 62px; + border-radius: 50px; +} +.illust .illust-attr .attr-wrap { + margin-left: 5px; +} +.illust .illust-attr .attr-wrap .illust-title { + font-weight: bold; +} +.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.85em; +} +.illust .illust-tags { + font-size: 0.9em; +} +.illust .illust-tags .illust-tag-attr { + display: inline-flex; + align-items: center; + margin-right: 15px; +} +.illust .illust-tags .illust-tag-attr img { + aspect-ratio: 1/1; + width: 18px; + height: 18px; + margin-right: 5px; +} +.illust .illust-tags .illust-tag { + margin-right: 10px; +} +.illust .illust-tags .illust-tag #highlight { + color: #fc365b; +} +.illust .illust-tags .illust-tag .illust-tag-name { + color: #118bee; + font-weight: bold; + margin-right: 5px; +} +.illust .comment { display: flex; margin-bottom: 10px; } -.artwork-page .comment p { +.illust .comment p { margin: 0; + font-size: 0.8em; } -.artwork-page .comment .comment-avatar { +.illust .comment .comment-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } -.artwork-page .comment .stamp { +.illust .comment .stamp { width: 96px; height: 96px; border-radius: 4px; } -.artwork-page .comment .emoji { +.illust .comment .emoji { width: 24px; height: 24px; margin-left: 3px; margin-right: 3px; } - -.user-background { - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - height: 40vw; -} -.user-background img { - width: 100%; -} - -.user-background-placeholder { - display: flex; - height: 10vw; - min-height: 100px; - background-color: #24283b; -} - -.user-page { - transform: translateY(-4rem); -} -.user-page .user-details { - text-align: center; -} -.user-page .user-details .user-name, -.user-page .user-details .user-id { - margin: 2px; -} -.user-page .user-details .user-avatar { - width: 144px; - height: 144px; - border-radius: 50%; - object-fit: cover; - object-position: center center; -} -.user-page .user-details .user-comment { - font-size: 0.9em; -} - -.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.2rem; -} - -.tag-container { - background-color: #24283b; +.illust .illust-other-works > a { display: inline-flex; align-items: center; - justify-content: center; - flex-direction: column; - height: 40px; - padding-left: 20px; - padding-right: 20px; - margin-bottom: 4px; text-decoration: none; + color: #fff; +} +.illust .illust-other-works > a > 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); + height: 10vw; + min-height: 100px; + overflow: hidden; + padding-top: 10px; + padding-bottom: 10px; +} +.background-cover img { + width: 100%; + height: 100%; + object-fit: cover; +} + +#hasbg { + height: 40vw; + min-height: 100px; + max-height: 60vh; +} + +.user { + transform: translateY(-8rem); +} +.user .user-avatar { + margin: auto; + aspect-ratio: 1/1; + width: 170px; + height: 170px; +} +.user .user-avatar img { + border-radius: 50%; +} +.user .user-details { text-align: center; - color: white; - font-weight: bold; - font-size: 1rem; - border-radius: 4px; } -.tag-container .main { - font-size: 0.8em; -} -.tag-container .sub { - font-size: 0.7em; - font-weight: normal; +.user .user-details h2 { + margin: 0; } #calendar { @@ -460,13 +592,13 @@ body { border-radius: 8px; background-size: cover; background-position: center; - background-color: #24283b; + background-color: #222; position: relative; } .calendar-node span { font-size: small; - color: #c0caf5; - background-color: rgba(26, 27, 38, 0.6); + color: #fff; + background-color: #222; position: absolute; top: 0.3rem; left: 0.3rem; @@ -476,72 +608,6 @@ body { justify-content: center; } -.switcher { - border-radius: 10px; -} -.switcher .switch-title { - margin-right: 5px; -} -.switcher .switch-button { - display: inline-block; - transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); - padding: 8px 12px; - margin-top: 5px; - background-color: #24283b; - color: #c0caf5; - text-decoration: none; - text-decoration-color: #c0caf5; -} -.switcher .switch-button:hover { - background-color: rgba(26, 27, 38, 0.6); - text-decoration: underline; - box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; - transform: translateY(-2px); -} -.switcher .switch-seperator { - display: inline-block; - margin-left: 10px; -} - -.pagination { - width: 100%; - text-align: center; - margin-top: 8px; - margin-bottom: 8px; -} -.pagination .pagination-button { - display: inline-block; - transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); - padding: 8px 12px; - margin-top: 5px; - background-color: #24283b; - color: #c0caf5; - text-decoration: none; - text-decoration-color: #c0caf5; -} -.pagination .pagination-button:hover { - background-color: rgba(26, 27, 38, 0.6); - text-decoration: underline; - box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; - transform: translateY(-2px); -} -.pagination .disabled { - pointer-events: none; - background-color: rgba(26, 27, 38, 0.6); - color: #a9b1d6; -} - -.footer { - text-align: center; - font-size: small; - margin-top: 8px; - margin-bottom: 8px; -} -.footer a { - color: #c0caf5; - text-decoration: none; -} - @media screen and (max-width: 950px) { .calendar-board { justify-content: center; @@ -551,39 +617,43 @@ body { display: none; } } -@media screen and (max-width: 800px) { - .navbar .navbar-buttons { - display: none; - } - .navbar .search-bar { - width: 75px; - } -} -@media screen and (min-width: 400px) and (max-width: 800px) { - .artwork-thumbnail-small { - height: auto; - } - .artwork-mobile { - width: 47.4%; - aspect-ratio: 1/1; - object-fit: cover; - } -} -@media screen and (max-width: 400px) { - .artwork-mobile { - width: 47%; - } -} -.border-rounded { - border-radius: 50%; -} - -.flex { +.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; +} -.no-margin { - margin: 0; +.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 3a40df8..999f177 100644 --- a/template/css/style.scss +++ b/template/css/style.scss @@ -1,65 +1,305 @@ -// $bg: #131516; -// $fg: #f5f5f5; -// $bg-alt: #262a2b; -// $bg-alt-dimmed: #262a2b99; -// $blue: #3d7699; -// $red: #ff4060; +$bg: #131516; +$bg-secondary: #222; +$fg: #fff; +$fg-secondary: #aaa; +$link: #118bee; +$highlight: #fc365b; +$border-radius: 5px; +$line-height: 1.5; +$active-brightness: 0.85; +$hover-brightness: 1.2; +$box-shadow: 2px 2px 10px; +$color-shadow: #bbbbbb20; +$font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP"; +$small-artwork-width: 184px; +$large-artwork-width: 288px; -$bg: #1a1b26; -$bg-alt: #24283b; -$bg-alt-dimmed: #1a1b2699; -$fg: #c0caf5; -$fg-alt: #a9b1d6; -$blue: #7aa2f7; -$red: #f7768e; - -* { - box-sizing: border-box; -} - -a { - color: $blue; - text-decoration: none; +html { + scrollbar-color: #666 #201c29; + font-size: 62.5%; } body { top: 0; margin: 0; - font-family: "Noto Sans CJK JP", "Open Sans", "Noto Sans", sans-serif; - font-size: 1rem; - - color: $fg; background-color: $bg; + color: $fg; + + font-size: 1.8rem; + font-family: $font-family; + + margin-bottom: 10px; + margin-left: 5px; + margin-right: 5px; } -.container { - max-width: 1200px; - min-height: 85vh; - margin-left: auto; - margin-right: auto; - padding-left: 10px; - padding-right: 10px; +a { + color: $link; + text-decoration: none; +} - h2 { - font-size: 20px; - margin-bottom: 0; +.special-symbol { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.8rem; + height: 1.8rem; + font-size: 1.8rem; +} + +[hidden] { + display: none; +} + +input, +label, +select, +textarea { + display: block; + font-size: inherit; + max-width: 600px; +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; +} + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; + font-weight: normal; + position: relative; + top: 1px; +} + +input[type="range"] { + padding: 0.4rem 0; +} + +input, +select, +textarea { + border: 1px solid $bg-secondary; + border-radius: $border-radius; + margin-bottom: 1rem; + padding: 0.4rem 0.8rem; +} + +input[type="text"], +textarea { + width: calc(100% - 1.6rem); + background-color: $bg-secondary; + color: $fg-secondary; +} + +input[readonly], +textarea[readonly] { + background-color: $bg-secondary; +} + +label { + font-weight: bold; + margin-bottom: 0.2rem; +} + +.form-field { + border: 1px solid $bg-secondary; + border-radius: $border-radius; + box-shadow: $box-shadow $color-shadow; + display: block; + max-width: 800px; + min-width: 460px; + padding: 1.5rem; + + header { + margin: 1.5rem 0; + padding: 1.5rem 0; } } -.thumbnail-container { - overflow-x: scroll; - overflow-y: hidden; - white-space: nowrap; - margin-top: 5px; - margin-bottom: 5px; - padding-bottom: 3px; - scrollbar-width: thin; +a b, +a em, +a i, +a strong, +button, +input[type="submit"], +.switch-button, +.pagination-button { + border-radius: $border-radius; + display: inline-block; + font-size: medium; + font-weight: bold; + line-height: $line-height; + margin: 0.5rem 0; + padding: 0.5rem 1rem; +} + +button, +input[type="submit"], +.switch-button, +.pagination-button { + font-family: $font-family; +} + +button:active, +input[type="submit"]:active, +.switch-button, +.pagination-button { + filter: brightness($active-brightness); +} + +button:hover, +input[type="submit"]:hover, +.switch-button, +.pagination-button { + cursor: pointer; + filter: brightness($hover-brightness); +} + +a b, +a strong, +button, +input[type="submit"], +.switch-button, +.pagination-button { + background-color: $link; + border: 2px solid $link; + color: $fg; +} + +input[type="submit"][hidden] { + display: none; +} + +.switch-seperator { + display: inline-block; + margin-left: 10px; +} + +.pagination { + text-align: center; +} + +nav { + margin-top: 15px; + margin-bottom: 15px; + margin-left: 20px; + margin-right: 20px; + .navigation-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: auto; + + .navbar-brand { + display: inline-flex; + gap: 10px; + + span { + font-weight: bold; + font-size: 1.3em; + color: $fg; + } + } + + .navbar-entry { + img { + width: 30px; + height: 30px; + } + } + + .search-form { + input { + margin: 0; + } + } + + .sidebar-toggler { + display: none; + + &:checked ~ .sidebar { + transform: translateX(0); + } + } + + .sidebar-label { + margin-right: 9px; + cursor: pointer; + } + + .sidebar { + background-color: $bg; + position: absolute; + padding-top: 6px; + left: 0; + width: 220px; + transform: translateX(-220px); + transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1); + z-index: 999; + + br { + align-self: stretch; + margin-top: 10px; + } + + .sidebar-list { + list-style-type: none; + + margin: 0; + padding: 0; + + .sidebar-item { + display: flex; + align-items: center; + list-style: none; + color: $fg; + font-size: 0.9em; + text-decoration: none; + padding: 10px; + + &:hover { + background-color: $bg-secondary; + } + + img { + width: 30px; + height: 30px; + margin-left: 1.2rem; + margin-right: 10px; + } + } + } + } + } + + // .navbar-shadow { + // width: 100%; + // height: 10px; + // background: repeating-linear-gradient( + // 52.5deg, + // rgba(32, 32, 32, 0.7), + // rgba(32, 32, 32, 0.7) 14px, + // rgba(240, 248, 255, 0) 14px, + // rgba(240, 248, 255, 0) 28px + // ); + // } +} + +@media screen and (max-width: 600px) { + nav { + .search-form { + display: none; + } + } } .component-header { display: flex; justify-content: space-between; + align-items: center; h2 { margin: 0; @@ -67,329 +307,259 @@ body { } } -.navbar { - margin-left: 2rem; - margin-right: 2rem; +.container { + max-width: 1200px; + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; +} - .navbar-brand { - display: inline-flex; - align-items: center; +.artwork-container { + display: grid; + grid-template-columns: repeat( + auto-fit, + minmax(calc($small-artwork-width + 15px), 1fr) + ); + align-items: center; +} - font-size: 1.2rem; - color: $fg; +.artwork-container-scroll { + display: flex; + overflow: hidden; + overflow-x: scroll; +} + +.artwork-container, +.artwork-container-scroll { + a { text-decoration: none; + color: $fg; + } + .artwork-large { img { - margin-right: 9px; - width: 30px; - height: 30px; + width: $large-artwork-width; + height: $large-artwork-width; + } + + .artwork-title { + max-width: $large-artwork-width; + } + + .artwork-author { + max-width: $large-artwork-width; + a { + max-width: $small-artwork-width; + } } } - .navbar-list { - display: flex; - padding: 0; - justify-content: space-between; - list-style-type: none; + .artwork-small { + img { + width: $small-artwork-width; + height: $small-artwork-width; + } + + .artwork-title { + max-width: $small-artwork-width; + } + + .artwork-author { + max-width: $small-artwork-width; + + a { + max-width: $small-artwork-width; + } + } } - .search-bar { - width: 500px; + .artwork { + padding: 5px; + width: fit-content; + position: relative; - .search-form-text { - width: 100%; - background-color: $bg-alt; - padding: 7px 10px; - margin: 0; - border: none; - color: $fg; + .artwork-additional { + position: absolute; + top: 4px; + left: 4px; + right: 4px; + box-sizing: border-box; + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 4px 4px 0px; + pointer-events: none; - &::placeholder { + .artwork-position { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + font-weight: bold; + width: 40px; + height: 40px; + font-size: 16px; + 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.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; + + .boxbox { + font-size: 9px; + } + } + } + + img { + object-fit: cover; + object-position: center center; + border-radius: $border-radius; + } + + .artwork-title { + display: flex; + align-items: center; + + a { + font-size: 14px; + display: inline; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 22px; + font-weight: bold; + } + } + + .artwork-author { + display: flex; + align-items: center; + + a { + display: flex; + align-items: center; + + img { + aspect-ratio: 1/1; + width: 24px; + height: 24px; + object-fit: cover; + object-position: center top; + border-radius: 50%; + margin-right: 5px; + } + + span { + font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 22px; + } + } + } + } +} + +.illust { + background-color: $bg-secondary; + border-radius: $border-radius; + padding: 5px 15px; + + .illust-images { + display: flex; + flex-flow: column wrap; + align-items: center; + + img { + margin-top: 15px; } } - .navbar-button { - display: inline-block; - margin-left: 5px; - } -} + .illust-attr { + display: flex; + align-items: center; + margin-top: 10px; + margin-bottom: 10px; -.sidebar-toggler { - display: none; + .illust-avatar { + width: 62px; + height: 62px; + border-radius: 50px; + } - &:checked ~ .sidebar { - transform: translateX(0); - } -} + .attr-wrap { + margin-left: 5px; -.sidebar-label { - margin-right: 9px; - cursor: pointer; -} - -.sidebar { - background-color: $bg; - position: absolute; - margin-top: 16px; - left: 0; - width: 200px; - transform: translateX(-200px); - transition: transform 250ms ease-in-out; - z-index: 999; - - .sidebar-list { - list-style-type: none; - - margin: 0; - padding: 0; - - .sidebar-item { - display: flex; - align-items: center; - list-style: none; - color: $fg; - text-decoration: none; - padding: 10px; - width: 100%; - - &:hover { - background-color: $bg-alt; + .illust-title { + font-weight: bold; } + .illust-author { + font-size: 0.8em; + a { + color: $fg-secondary; + } + } + } + } + + .illust-description { + font-size: 0.85em; + } + + .illust-tags { + font-size: 0.9em; + + .illust-tag-attr { + display: inline-flex; + align-items: center; + margin-right: 15px; img { - width: 30px; - height: 30px; - margin-left: 1rem; - margin-right: 10px; + aspect-ratio: 1/1; + width: 18px; + height: 18px; + margin-right: 5px; } } - } -} -.artwork-thumbnail { - position: relative; - display: inline-block; - margin-right: 0.5rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - - img { - object-fit: cover; - } - - .artwork-rank-circle { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - width: 1rem; - height: 1rem; - top: 0.3rem; - left: 0.3rem; - border-radius: 50%; - padding: 1rem; - background-color: $bg-alt; - } - - .artwork-page-count { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0.3rem; - right: 0.3rem; - border-radius: 20px; - padding: 0.3rem; - background-color: $bg-alt-dimmed; - - span { - display: flex; - font-size: 0.7rem; - font-weight: bold; - align-items: center; - justify-content: center; - width: max-content; - height: 0.5rem; - } - } - - .artwork-profanity-label { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0.3rem; - left: 0.3rem; - border-radius: 20px; - padding: 0.3rem; - background-color: $red; - color: white; - - span { - display: flex; - font-size: 0.7rem; - font-weight: bold; - align-items: center; - justify-content: center; - width: max-content; - height: 0.5rem; - } - } - - .artwork-thumbnail-title { - margin: 0.4rem; - max-width: 100%; - - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - display: block; - color: inherit; - text-decoration: none; - font-weight: bold; - font-size: 0.9rem; - line-height: 1.2rem; - } - - .artwork-master-image { - width: 100%; - height: 100%; - object-position: center center; - - border-radius: 8px; - } - - .artwork-thumbnail-artist { - max-width: 100%; - - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - text-decoration: none; - color: inherit; - - display: flex; - align-items: center; - } - - .artwork-thumbnail-artist-avatar { - margin-right: 5px; - width: 24px; - height: 24px; - object-position: center top; - } -} - -.artwork-thumbnail-small { - width: 184px; - height: 184px; -} - -.artwork-thumbnail-large { - width: 288px; - height: 288px; -} - -.spotlight-thumbnail { - width: 400px; - height: 250px; - display: inline-block; - position: relative; - text-align: left; - color: white; - - .spotlight-master-image { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center center; - filter: brightness(75%); - } - - .spotlight-title-wrapper { - position: absolute; - display: block; - bottom: 0; - left: 0; - width: 100%; - - .spotlight-title { - margin-left: 10px; + .illust-tag { margin-right: 10px; - margin-bottom: 10px; - font-size: 1rem; - line-height: 28px; - overflow: hidden; - overflow-wrap: break-word; - word-break: break-word; - hyphens: auto; - text-overflow: ellipsis; - } - } -} -.artwork-page { - background: $bg-alt; - border-radius: 8px; - - .artwork-content { - margin: 0 20px; - font-size: 0.9rem; - - a { - color: $blue; - text-decoration: none; - - &:hover { - text-decoration: underline; + #highlight { + color: $highlight; } - } - } - .artwork-artist { - display: flex; - align-items: center; - - .artwork-artist-avatar { - margin-right: 8px; - width: 50px; - height: 50px; - object-position: center top; - } - } - - .artwork-tags { - display: inline-block; - - .artwork-tag-name { - margin-right: 5px; - color: $blue; - font-weight: bold; - } - .artwork-tag-altname { - margin-right: 8px; - } - - .emphasize { - color: $red; - } - } - - .artwork-images { - display: flex; - align-items: center; - flex-direction: column; - width: 100%; - - .artwork-image-page { - margin: 10px auto; - max-height: 1000px; - width: auto; - max-width: 100%; + .illust-tag-name { + color: $link; + font-weight: bold; + margin-right: 5px; + } } } @@ -399,6 +569,7 @@ body { p { margin: 0; + font-size: 0.8em; } .comment-avatar { @@ -421,96 +592,72 @@ body { margin-right: 3px; } } -} -.user-background { - display: flex; - justify-content: center; - align-items: center; + .illust-other-works { + & > a { + display: inline-flex; + align-items: center; + text-decoration: none; + color: $fg; - overflow: hidden; - height: 40vw; - - img { - width: 100%; + & > img { + aspect-ratio: 1/1; + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 5px; + } + } } } -.user-background-placeholder { - display: flex; +.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 + ); height: 10vw; min-height: 100px; - background-color: $bg-alt; + overflow: hidden; + padding-top: 10px; + padding-bottom: 10px; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } } -.user-page { - transform: translateY(-4rem); +#hasbg { + height: 40vw; + min-height: 100px; + max-height: 60vh; +} + +.user { + transform: translateY(-8rem); + + .user-avatar { + margin: auto; + aspect-ratio: 1/1; + width: 170px; + height: 170px; + + img { + border-radius: 50%; + } + } .user-details { text-align: center; - .user-name, - .user-id { - margin: 2px; + h2 { + margin: 0; } - - .user-avatar { - width: 144px; - height: 144px; - border-radius: 50%; - object-fit: cover; - object-position: center center; - } - - .user-comment { - font-size: 0.9em; - } - } -} - -.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.2rem; - } - } -} - -.tag-container { - background-color: $bg-alt; - display: inline-flex; - align-items: center; - justify-content: center; - flex-direction: column; - height: 40px; - padding-left: 20px; - padding-right: 20px; - margin-bottom: 4px; - text-decoration: none; - text-align: center; - color: white; - font-weight: bold; - font-size: 1rem; - border-radius: 4px; - - .main { - font-size: 0.8em; - } - .sub { - font-size: 0.7em; - font-weight: normal; } } @@ -539,13 +686,13 @@ body { border-radius: 8px; background-size: cover; background-position: center; - background-color: $bg-alt; + background-color: $bg-secondary; position: relative; span { font-size: small; color: $fg; - background-color: $bg-alt-dimmed; + background-color: $bg-secondary; position: absolute; top: 0.3rem; left: 0.3rem; @@ -556,80 +703,6 @@ body { } } -.switcher { - border-radius: 10px; - - .switch-title { - margin-right: 5px; - } - - .switch-button { - display: inline-block; - transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); - padding: 8px 12px; - margin-top: 5px; - background-color: $bg-alt; - color: $fg; - text-decoration: none; - text-decoration-color: $fg; - - &:hover { - background-color: $bg-alt-dimmed; - text-decoration: underline; - box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; - transform: translateY(-2px); - } - } - - .switch-seperator { - display: inline-block; - margin-left: 10px; - } -} - -.pagination { - width: 100%; - text-align: center; - margin-top: 8px; - margin-bottom: 8px; - - .pagination-button { - display: inline-block; - transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); - padding: 8px 12px; - margin-top: 5px; - background-color: $bg-alt; - color: $fg; - text-decoration: none; - text-decoration-color: $fg; - - &:hover { - background-color: $bg-alt-dimmed; - text-decoration: underline; - box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; - transform: translateY(-2px); - } - } - - .disabled { - pointer-events: none; - background-color: $bg-alt-dimmed; - color: $fg-alt; - } -} - -.footer { - text-align: center; - font-size: small; - margin-top: 8px; - margin-bottom: 8px; - - a { - color: $fg; - text-decoration: none; - } -} - @media screen and (max-width: 950px) { .calendar-board { justify-content: center; @@ -641,48 +714,48 @@ body { } } -@media screen and (max-width: 800px) { - .navbar { - .navbar-buttons { - display: none; - } - - .search-bar { - width: 75px; - } - } - -} - -@media screen and (min-width: 400px) and (max-width: 800px) { - .artwork-thumbnail-small { - height: auto; - } - - .artwork-mobile { - width: 47.4%; - aspect-ratio: 1/1; - object-fit: cover; - } - -} - -@media screen and (max-width: 400px) { - .artwork-mobile { - // width: 94vw; - // height: 94vw; - width: 47%; - } -} - -.border-rounded { - border-radius: 50%; -} - -.flex { +.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; + } + } } -.no-margin { - margin: 0; +.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 192ad57..20195cd 100644 --- a/template/layout.jet.html +++ b/template/layout.jet.html @@ -1,13 +1,8 @@ - + - - - {{ title := "" }} - {{ if isset(Title) }} - {{ title = Title }} - {{ else }} - {{ title = "PixivFE" }} - {{ end }} + + {{ title := "" }} {{ if isset(Title) }} {{ title = Title }} {{ else }} {{ + title = "PixivFE" }} {{ end }} {{ title }} - PixivFE @@ -18,95 +13,127 @@ {{ if BaseURL }} - + - - + + - {{ if isset(PageType) }} - - {{ if PageType == "artwork" }} - {{ if ! Illust.XRestrict }} - - + {{ if isset(PageType) }} {{ if PageType == "artwork" }} {{ if ! + Illust.XRestrict }} + + {{ else }} - - - {{ end }} - - - {{ else if PageType == "user" }} - + + + {{ end }} {{ else if PageType == "user" }} + {{ if User.BackgroundImage }} - + {{ else }} - - {{ end }} - {{ end }} + + {{ end }} {{ end }} {{ else }} + + + {{ end }} {{ end }} + + + {{ embed() }} - -
- -

Join the development on Codeberg!

- -
- - + diff --git a/template/pages/artwork.jet.html b/template/pages/artwork.jet.html index 94c3be9..47909ae 100644 --- a/template/pages/artwork.jet.html +++ b/template/pages/artwork.jet.html @@ -1,95 +1,132 @@ -
-
-
- {{ if !Illust.IsUgoira }} -
- {{ range index := Illust.Images }} - - Page {{ index }} - - {{ end }} -
- {{ else }} -
- - - -
- Go to ugoira.com for more options - {{ end }} -

{{ Illust.Title }}

-

{{ raw: parsePixivRedirect(Illust.Description) }}

- -
- {{ if Illust.AiType == 2 }} - AI-generated - {{ end }} {{ range Illust.Tags }} {{ if isEmphasize(.Name) }} - {{ .Name }} - {{ else }} - #{{ .Name }}{{ .TranslatedName }} - {{ end }} {{ end }} -
-
- {{ Illust.Views }} views | {{ Illust.Bookmarks }} bookmarks | {{ - Illust.Likes }} likes + {{ if !Illust.IsUgoira }} +
+ {{ range index := Illust.Images }} + + Page {{ index }} + + {{ end }} +
+ {{ else }} +
+ + {{ Illust.User.Name }} - {{ Illust.User.Name }} -
- {{ range Illust.RecentWorks }} -
- {{ include "components/thumbnail-dt" . }} -
- {{ end }} + Unable to load ugoira. + + +
+ Go to ugoira.com for more options + {{ end }} +
+ {{ Illust.User.Name }} + +
+
{{ Illust.Title }}
+
+ {{ Illust.User.Name }}
-
-

Comments

- {{ if Illust.CommentDisabled == 1 }} -

The creator turned comments off

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

There is no comment yet

- {{ else }} {{ range Illust.CommentsList }} -
- {{ .AuthorName }} -
- {{ .AuthorName }} -

- {{ if .Stamp }} - https://s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg - {{ else }} {{ raw: parseEmojis(.Context) }} {{ end }} -

- - {{ .Date }} -
-
- {{ end }} {{ end }}
-

Related works

-
{{ include "components/small-tn" Illust.RelatedWorks }}
+ +
+ + Views + {{ Illust.Views }} + + + Bookmarks + {{ Illust.Bookmarks }} + + + Likes + {{ Illust.Likes }} + + + Date + {{ parseTime: Illust.Date }} + +
+ +
+ {{ if Illust.AiType == 2 }} + + AI-generated + + {{ end }} {{ range Illust.Tags }} {{ if isEmphasize(.Name) }} + + {{ .Name }} + + {{ else }} + + #{{ .Name }}{{ .TranslatedName }} + + {{ end }} {{ end }} +
+
+
+ {{ raw: parsePixivRedirect(Illust.Description) }} +
+
+
+ {{ Illust.User.Name }} Other + works by {{ Illust.User.Name }} + » + +
+ {{ range Illust.RecentWorks }} +
+ {{ include "components/thumbnail-dt" . }} +
+ {{ end }} +
+
+
+

Comments

+ {{ if Illust.CommentDisabled == 1 }} +

The creator turned comments off

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

There are no comments yet

+ {{ else }} {{ range Illust.CommentsList }} +
+ {{ .AuthorName }} +
+ {{ .AuthorName }} +

+ {{ if .Stamp }} + https://s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg + {{ else }} {{ raw: parseEmojis(.Context) }} {{ end }} +

+ + {{ .Date }} +
+
+ {{ end }} {{ end }} +
+
+

Related works

+
+ {{ include "components/small-tn" Illust.RelatedWorks }} +
diff --git a/template/pages/components/small-tn.jet.html b/template/pages/components/small-tn.jet.html index 3d33329..91b4f03 100644 --- a/template/pages/components/small-tn.jet.html +++ b/template/pages/components/small-tn.jet.html @@ -1,16 +1,18 @@ {{ range . }} {{ if .ID == "#" }} -
- {{ .Title }} - -

{{ .Title }}

- - {{ .ArtistName }} - {{ .ArtistName }} +
+ {{ .Title }} +
+ {{ .Title }} +
+
+ {{ .ArtistName }} + {{ .ArtistName }}
{{ else if .ID }} -
- {{ include "thumbnail-dt" . }} {{ include "thumbnail-tt" . }} {{ include - "thumbnail-at" . }} +
+ {{ include "thumbnail-dt" . }} {{ include "thumbnail-tt" . }} {{ include + "thumbnail-at" . }}
{{ end }} {{ end }} diff --git a/template/pages/components/thumbnail-at.jet.html b/template/pages/components/thumbnail-at.jet.html index a2b6947..535c077 100644 --- a/template/pages/components/thumbnail-at.jet.html +++ b/template/pages/components/thumbnail-at.jet.html @@ -1,3 +1,6 @@ -{{ .ArtistName }} - {{ .ArtistName }} +
+ {{ .ArtistName }} + {{ .ArtistName }} +
diff --git a/template/pages/components/thumbnail-dt.jet.html b/template/pages/components/thumbnail-dt.jet.html index 41e36ba..b7e222a 100644 --- a/template/pages/components/thumbnail-dt.jet.html +++ b/template/pages/components/thumbnail-dt.jet.html @@ -1,10 +1,12 @@ -{{ if .XRestrict != 0 }} -
+
+ {{ if .XRestrict != 0 }} +
{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }} +
+ {{ end }} {{ if .Pages > 1 }} +
⧉ {{ .Pages }}
+ {{ end }}
-{{ end }} {{ if .Pages > 1 }} -
⧉ {{ .Pages }}
-{{ end }} - {{ .Title }} + {{ .Title }} diff --git a/template/pages/components/thumbnail-tt.jet.html b/template/pages/components/thumbnail-tt.jet.html index 27de2d7..e87311a 100644 --- a/template/pages/components/thumbnail-tt.jet.html +++ b/template/pages/components/thumbnail-tt.jet.html @@ -1,3 +1,3 @@ - -

{{ .Title }}

- +
+ {{ .Title }} +
diff --git a/template/pages/discovery.jet.html b/template/pages/discovery.jet.html index 988a816..67cee27 100644 --- a/template/pages/discovery.jet.html +++ b/template/pages/discovery.jet.html @@ -1,14 +1,16 @@
-

Discover works

-
- {{ url := "/discovery?mode=" }} - Filter - All - Safe - R-18 -
-
{{ include "components/small-tn" Artworks }}
- +

Discover works

+
+ {{ url := "/discovery?mode=" }} +
Filter
+ All + Safe + R-18 +
+
+ {{ include "components/small-tn" Artworks }} +
+
diff --git a/template/pages/following.jet.html b/template/pages/following.jet.html index 33757e4..1f9846f 100644 --- a/template/pages/following.jet.html +++ b/template/pages/following.jet.html @@ -1,23 +1,24 @@
-

Newest works from people you follow

-
- Filter - All - Safe - R-18 -
-
{{ include "components/small-tn" Artworks }}
-
diff --git a/template/pages/index.jet.html b/template/pages/index.jet.html index cf6515d..1521e89 100644 --- a/template/pages/index.jet.html +++ b/template/pages/index.jet.html @@ -88,42 +88,51 @@
{{ else }}

Login to access more features!

+

+ Enjoying this frontend so far? I need your opinions and ideas to improve + this UI! Share them + here! +

Daily rankings

See more
-
+
{{ range rank := Artworks.Rankings }} -
-
{{ rank + 1 }}
- {{ if toInt(.Pages) > 1 }} -
⧉ {{ .Pages }}
- {{ end }} +
+
+
{{ rank + 1 }}
+ + {{ if .Pages > 1 }} +
+ ⧉  + 2 +
+ {{ end }} +
- {{ .Title }} + {{ .Title }} - -

{{ .Title }}

- - {{ .ArtistName }} - {{ .ArtistName }} +
+ {{ .Title }} +
+
+ + {{ .ArtistName }} + {{ .ArtistName }} +
{{ end }}

-

Pixivision

+ + {{ end }}
diff --git a/template/pages/newest.jet.html b/template/pages/newest.jet.html index 754cb23..75472f5 100644 --- a/template/pages/newest.jet.html +++ b/template/pages/newest.jet.html @@ -1,9 +1,9 @@
-

Newest works from all users

-
- Filter - Safe - R-18 -
-
{{ include "components/small-tn" Items }}
+

Newest works from all users

+
+
Filter
+ Safe + R-18 +
+
{{ include "components/small-tn" Items }}
diff --git a/template/pages/rank.jet.html b/template/pages/rank.jet.html index 89c4b56..4cbd41e 100644 --- a/template/pages/rank.jet.html +++ b/template/pages/rank.jet.html @@ -1,79 +1,93 @@
-

{{ Title }}

+

{{ Title }}

-
- {{ url := "/ranking?mode=" + Queries.Mode + "&date=" + Data.CurrentDate + "&page=1&content=" }} - Content - Overall - Illustrations - Mangas -
-
+
+ {{ url := "/ranking?mode=" + Queries.Mode + "&date=" + Data.CurrentDate + + "&page=1&content=" }} +
Content
+ Overall + Illustrations + Mangas +
+
-
- {{ url := "/ranking?content=" + Queries.Content +"&date=" + Data.CurrentDate + "&page=1&mode=" }} - Modes - Daily - Weekly - Monthly - Rookie - - Daily (R-18) - Weekly (R-18) -
-
+
+ {{ url := "/ranking?content=" + Queries.Content +"&date=" + Data.CurrentDate + + "&page=1&mode=" }} +
Modes
+ Daily + Weekly + Monthly + Rookie + + Daily (R-18) + Weekly (R-18) +
+
-
- {{ url := "/ranking?content=" + Queries.Content + "&mode=" + Queries.Mode + "&page=1" }} - Date - {{ if Data.PrevDate != "false" }} - Yesterday - {{ end }} - {{ if Data.NextDate != "false" }} - Next day - {{ end }} - Latest - - Ranking calendar -
-
+
+ {{ url := "/ranking?content=" + Queries.Content + "&mode=" + Queries.Mode + + "&page=1" }} +
Date
+ {{ if Data.PrevDate != "false" }} + Yesterday + {{ end }} {{ if Data.NextDate != "false" }} + Next day + {{ end }} + Latest + + Ranking calendar +
+
+
{{ range Data.Artworks }} -
-
{{ .Rank }}
+
+
+
{{ .Rank }}
{{ if toInt(.Pages) > 1 }}
⧉ {{ .Pages }}
{{ end }} - - {{ .Title }} - +
- -

{{ .Title }}

- - {{ .ArtistName }} - {{ .ArtistName }} + + {{ .Title }} + +
+ {{ .Title }} +
+
+ {{ .ArtistName }} + {{ .ArtistName }} +
{{ end }} +
-
diff --git a/template/pages/settings.jet.html b/template/pages/settings.jet.html index 60cd41a..ba6731a 100644 --- a/template/pages/settings.jet.html +++ b/template/pages/settings.jet.html @@ -2,9 +2,9 @@

Login

Go to this page to login

Settings

-
+
+

Image proxy server

- Image proxy server
@@ -20,16 +20,14 @@
-
+
-
-
-
+
diff --git a/template/pages/tag.jet.html b/template/pages/tag.jet.html index 05c98e5..7204709 100644 --- a/template/pages/tag.jet.html +++ b/template/pages/tag.jet.html @@ -1,75 +1,85 @@
-
- {{ if Tag.Metadata.ID }} - - {{ Tag.Name }} - - {{ end }} - -
- #{{ Tag.Name }} - {{ Tag.Metadata.Name }} -
-
- {{ Data.Artworks.Total }} works - -

{{ Tag.Metadata.Detail }}

-
-
- -
- {{ range Data.RelatedTags }} - #{{ . }} - {{ end }} -
- -
- {{ url := "/tags/" + Tag.Name + "?order=" + Queries.Order + "&mode=" + - Queries.Mode + "&page=1" + "&category=" }} - Type - All - Illustrations - Manga -
-
- {{ url := "/tags/" + Tag.Name + "?category=" + Queries.Category + "&mode=" + - Queries.Mode + "&page=1" + "&order=" }} - Order - Newest - Oldest -
-
- Filter - {{ url := "/tags/" + Tag.Name + "?category=" + Queries.Category + "&order=" - + Queries.Order + "&page=1" + "&mode=" }} - All - Safe - R-18 -
- {{ if Data.Popular.Recent }} -

Popular artworks

-
- {{ include "components/small-tn-normal" Data.Popular.Recent }} {{ include - "components/small-tn-normal" Data.Popular.Permanent }} -
+
+ {{ if Tag.Metadata.ID }} + + {{ Tag.Name }} + {{ end }} - -
-

Works

-
{{ include "components/small-tn" Data.Artworks.Artworks }}
- + +
+ {{ range Data.RelatedTags }} + +
+
#{{ . }}
+
+ + {{ end }} +
+ +
+ {{ url := "/tags/" + Tag.Name + "?order=" + Queries.Order + "&mode=" + + Queries.Mode + "&page=1" + "&category=" }} +
Type
+ All + Illustrations + Manga +
+
+ {{ url := "/tags/" + Tag.Name + "?category=" + Queries.Category + "&mode=" + + Queries.Mode + "&page=1" + "&order=" }} +
Order
+ Newest + Oldest +
+
+
Filter
+ {{ url := "/tags/" + Tag.Name + "?category=" + Queries.Category + "&order=" + + Queries.Order + "&page=1" + "&mode=" }} + All + Safe + R-18 +
+ {{ if Data.Popular.Recent }} +

Popular artworks

+
+ {{ include "components/small-tn" Data.Popular.Recent }} {{ include + "components/small-tn" Data.Popular.Permanent }} +
+ {{ end }} + +
+

Works

+
+ {{ include "components/small-tn" Data.Artworks.Artworks }} +
+ +
diff --git a/template/pages/user.jet.html b/template/pages/user.jet.html index add9dec..efcbb63 100644 --- a/template/pages/user.jet.html +++ b/template/pages/user.jet.html @@ -1,67 +1,83 @@ {{ if ! User.BackgroundImage }} -
+
{{ else }} -
- {{ User.Name }} +
+ {{ User.Name }}
{{ end }} -
-
-
- avatar -

{{ User.Name }}

-

- {{ User.Following }} Following | {{ User.MyPixiv }} MyPixiv -

-

{{ raw: parsePixivRedirect(User.Comment) }}

-
-
-
- Category - All - Illustrations - Mangas - Bookmarks -
-
-

Illustrations and Mangas

+
+
+ avatar +
+
+

{{ User.Name }}

+ {{ User.Following }} Following | {{ User.MyPixiv }} MyPixiv +

{{ raw: parsePixivRedirect(User.Comment) }}

+
+
+
Category
+ All + Illustrations + Mangas + Bookmarks +
+
+

Illustrations and Mangas

-
- {{ range User.FrequentTags }} - -
- {{ if ! .TranslatedName }} -
{{ .Name }}
-
#
- {{ else }} -
{{ .TranslatedName }}
-
#{{ .Name }}
+ - {{ include "components/small-tn" User.Artworks }} +
+ {{ include "components/small-tn" User.Artworks }}
- + + {{ if Page == PageLimit - 1 }} + Next + Last + {{ else }} + Next + Last + {{ end }} +