diff --git a/src/views/_base.pug b/src/views/_base.pug index 3045274..5a34509 100644 --- a/src/views/_base.pug +++ b/src/views/_base.pug @@ -19,15 +19,15 @@ html link(rel='stylesheet' href='/assets/style.css') block style body - .xd-main - h1: a(href="/") みす廃あらーと + .background + .xd-container.xd-vstack block content - footer.xd-footer.xd-container - a(href="/terms") 利用規約 - | ・ - +exta(href="https://github.com/Xeltica/misshaialert") リポジトリ - p (C)2020 Xeltica - - a(href="/about") version #{version} - block footer + footer + .xd-card + a(href="/terms") 利用規約 + | ・ + +exta(href="https://github.com/Xeltica/misshaialert") リポジトリ + p (C)2020-2021 Xeltica - + a(href="/about") version #{version} + block footer block script - script(defer src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js') diff --git a/src/views/_components.pug b/src/views/_components.pug index 7daff7f..a5d5d18 100644 --- a/src/views/_components.pug +++ b/src/views/_components.pug @@ -5,9 +5,7 @@ mixin exta() mixin serverInfo() .xd-card .header - h1.title - i.fas.fa-info-circle - | サービスの情報 + h1.title サービスの情報 .body dl dt diff --git a/src/views/about.pug b/src/views/about.pug index 4caa579..9318f19 100644 --- a/src/views/about.pug +++ b/src/views/about.pug @@ -1,8 +1,10 @@ extends _base block content - section - h2 バージョン !{version} - ul - each log in changelog - li= log + .xd-card + h1: a(href="/") みす廃あらーと + section + h2 バージョン !{version} + ul + each log in changelog + li= log diff --git a/src/views/error.pug b/src/views/error.pug index 7b606b3..df61215 100644 --- a/src/views/error.pug +++ b/src/views/error.pug @@ -1,6 +1,7 @@ extends _base block content - section + h1: a(href="/") みす廃あらーと + section.xd-card h2 エラー p= error \ No newline at end of file diff --git a/src/views/mypage.pug b/src/views/mypage.pug index 9260faf..1f4b268 100644 --- a/src/views/mypage.pug +++ b/src/views/mypage.pug @@ -1,23 +1,23 @@ extends _base block content - h2 マイページ - case from - when "updateSettings" - p: strong 設定を変更しました。 - when "updateSettings" - p: strong テスト送信しました。 - default - p おかえりなさい、@!{ user.username }@!{ user.host } さん。 + .xd-card + h1: a(href="/") みす廃あらーと + h2 マイページ + case from + when "updateSettings" + p: strong 設定を変更しました。 + when "updateSettings" + p: strong テスト送信しました。 + default + p おかえりなさい、@!{ user.username }@!{ user.host } さん。 - section#scores - .xd-cards.center + section#scores.xd-vstack + .xd-hstack +serverInfo() .xd-card .header - h1.title - i.fas.fa-chart-area - | あなたの廃人度は… + h1.title みす廃データ .body table thead @@ -41,9 +41,7 @@ block content section.xd-card#settings .header - h1.title - i.fas.fa-cog - | 設定 + h1.title 設定 .body .xd-alert.danger.mb-2 スコア通知方法に「Misskey に通知」を選んでいる場合、Groundpolis v3 および Misskey v12 の最新版以外では動作しません。めいすきーや古いバージョンをお使いの方は、「自動的にノートを投稿」をお使いください。 form(method="post", action="/update-settings") @@ -58,9 +56,7 @@ block content section.xd-card#settings .header - h1.title - i.fas.fa-sliders-h - | 操作 + h1.title 操作 .body form.mb-2(action="/send", method="post"): button#send(style="display: inline-block") アラートをテスト送信 form.mb-2(action="/logout", method="post"): button.danger#logout(style="display: inline-block") ログアウト diff --git a/src/views/term.pug b/src/views/term.pug index 7a0f363..4d709eb 100644 --- a/src/views/term.pug +++ b/src/views/term.pug @@ -1,12 +1,14 @@ extends _base block content - section - h2 利用規約 - ul - li 本サービスは無保証で提供されます。本サービスを利用したことによる損害などについて、管理人は一切責任を負わないものとします。 - li ユーザーはインスタンスの諸規約に従った上で本サービスを使うものとします。インスタンスの規約により、自動投稿が禁止されている場合は本サービスを使用しないでください。 - li 本サービスでは、接続先のアカウントが存在しない、トークンが失効してしまったなどの場合に、自動的にユーザーアカウントを削除します。 - li 本サービスの仕様は、事前の予告無しに変更される可能性があります。 - li 本サービスは、事前の予告無しに突然閉鎖される可能性があります。 - li 本規約は、事前の予告無しに変更される可能性があります。 + .xd-card + h1: a(href="/") みす廃あらーと + section + h2 利用規約 + ul + li 本サービスは無保証で提供されます。本サービスを利用したことによる損害などについて、管理人は一切責任を負わないものとします。 + li ユーザーはインスタンスの諸規約に従った上で本サービスを使うものとします。インスタンスの規約により、自動投稿が禁止されている場合は本サービスを使用しないでください。 + li 本サービスでは、接続先のアカウントが存在しない、トークンが失効してしまったなどの場合に、自動的にユーザーアカウントを削除します。 + li 本サービスの仕様は、事前の予告無しに変更される可能性があります。 + li 本サービスは、事前の予告無しに突然閉鎖される可能性があります。 + li 本規約は、事前の予告無しに変更される可能性があります。 diff --git a/src/views/welcome.pug b/src/views/welcome.pug index 89e83bb..5d3e90f 100644 --- a/src/views/welcome.pug +++ b/src/views/welcome.pug @@ -1,51 +1,45 @@ extends _base block content - section - case from - when 'logout' - p: strong ログアウトしました。 - when 'optout' - p: strong 連携を解除しました。 + case from + when 'logout' + .xd-card: p: strong ログアウトしました。 + when 'optout' + .xd-card: p: strong 連携を解除しました。 + .xd-card + h1: a(href="/") みす廃あらーと h2= welcomeMessage - p Misskey は楽しいものです。気がついたら1日中入り浸っていることも多いでしょう。 - strong みす廃あらーと - | をあなたの Misskey アカウントにインストールして、今日のあなたの Misskey 活動を把握しましょう。 - p 始める前に、 - a(href="/terms") 利用規約 - | を読んでください。 - strong ログインボタンを押した時点で、規約に従ったものとみなします。 - form(action="/login", method="get") - .xd-inputs - input.xd-input(type="text" placeholder="ホスト名(例: misskey.io)" name="host" required) - input.xd-button.primary(type="submit", value="ログイン") - p Misskey 以外のソフトウェアには対応していません。マストドンユーザーは - +exta(href="https://donhaialert.herokuapp.com/") ドン廃あらーと - | をお使いください。 - - section - .xd-cards.center - +serverInfo() - .xd-card - .header - h1.title - i.fas.fa-phone-alt - | 開発者 - .body - p 何か困ったことがあったら、以下のアカウントにメッセージを送ってください。 - ul - li: +exta(href="https://misskey.io/@ebi") @ebi@misskey.io - li: +exta(href="https://groundpolis.app/@X") @X@groundpolis.app - li: +exta(href="https://twitter.com/Xeltica") @Xeltica@twitter.com - li: +exta(href="mailto:xeltica@gmail.com") xeltica@gmail.com - .xd-card - .header - h1.title - i.fas.fa-hashtag - | タイムライン - .body - p 近いうちに、ここで #misshaialert タグのタイムラインを表示します。まだ工事中です + .xd-hstack + section.xd-card + p Misskey は楽しいものです。気がついたら1日中入り浸っていることも多いでしょう。 + p さあ、今すぐみす廃アラートをインストールして、今日のあなたの Misskey 活動を把握しよう。 + section.xd-card + p 始める前に、 + a(href="/terms") 利用規約 + | を読んでください。 + form(action="/login", method="get") + .xd-inputs + input.xd-input(type="text" placeholder="ホスト名(例: misskey.io)" name="host" required) + input.xd-button.primary(type="submit", value="ログイン") + section.xd-hstack + +serverInfo() + .xd-card + .header + h1.title 開発者 + .body + p 何か困ったことがあったら、以下のアカウントにメッセージを送ってください。 + ul + li: +exta(href="https://misskey.io/@ebi") @ebi@misskey.io + li: +exta(href="https://groundpolis.app/@X") @X@groundpolis.app + li: +exta(href="https://twitter.com/Xeltica") @Xeltica@twitter.com + li: +exta(href="mailto:xeltica@gmail.com") xeltica@gmail.com + .xd-card + .header + h1.title タイムライン + .body + p 近いうちに、ここで #misshaialert タグのタイムラインを表示します。まだ工事中です + block script script. diff --git a/styles/_xeltica-design.scss b/styles/_xeltica-design.scss index 8f564ea..380977c 100644 --- a/styles/_xeltica-design.scss +++ b/styles/_xeltica-design.scss @@ -1,55 +1,46 @@ -@import '_colors'; - /* Xeltica Design CSS Framework (C)2020 Xeltica */ -$primary: rgb(134, 179, 0); -$primary-light: lighten($primary, 5%); -$primary-dark: darken($primary, 5%); -$primary-fg: $md-white; -$bg: $md-white; -$bg-pale-1: darken($bg, 5%); -$bg-pale-2: darken($bg-pale-1, 5%); -$fg: $md-black; -$card-bg: $bg; -$card-header: $bg-pale-1; -$card-footer: $bg-pale-1; -$card-fg: $fg; -$divider: rgba($fg, 0.25); -$table-bg-header: $bg-pale-2; -$table-bg-odd: $bg-pale-1; -$table-bg-even: $bg; -$alert-bg: $bg-pale-1; -$alert-border: $divider; -$alert-fg: $fg; -$alert-bg-danger: $md-red-300; -$alert-border-danger: $md-red-900; -$alert-fg-danger: $md-red-50; - -$barSize: 64px; - * { box-sizing: border-box; line-height: 1.8em; } html { + $primary: rgb(134, 179, 0); + $fg: rgba(255, 255, 255, 0.8); + $bg: rgba(24, 24, 24, 0.8); + $overlay: transparentize($bg, 0.5); + $danger: #c72c2c; font-size: 18px; @media screen and (max-width: 640px) { font-size: 15px; } + --primary: #{$primary}; + --primary-light: #{lighten($primary, 5%)}; + --primary-dark: #{darken($primary, 5%)}; + --primary-fg: white; + --bg: #{$bg}; + --bg-pale-1: #{darken($bg, 5%)}; + --bg-pale-2: #{darken($bg, 10%)}; + --overlay: #{$overlay}; + --fg: #{$fg}; + // --divider: rgba(70, 70, 70, 0.25); + --radius: 0px; + --margin: 16px; + + --bg-danger: #{$danger}; + --fg-danger: white; + --divider-danger: #400e0e; + --bg-danger-lighten: #{lighten($danger, 5%)}; + --bg-danger-darken: #{darken($danger, 5%)}; } body { - background: $bg; - font-family: 'Noto Sans JP', sans-serif; - color: $fg; -} - -section:not(:last-child) { - margin-bottom: 16px; + background: var(--bg); + color: var(--fg); } h1, h2, h3, h4, h5, h6 { @@ -80,15 +71,15 @@ h6 { font-size: 1.05rem; } input.xd-input { outline: none; - border-radius: 2px; - color: $fg; + border-radius: var(--radius); + color: var(--fg); background: transparent; - border: 1px solid $fg; + border: 1px solid var(--fg); padding: 2px 8px; font-size: 1rem; &:focus { - border-color: $primary; + border-color: var(--primary); } } @@ -114,22 +105,25 @@ p { } .xd-main { - background: $bg; + background: var(--bg); padding: 32px; - border-radius: 2px; - border: 1px solid $divider; + border-radius: var(--radius); + border: 1px solid var(--divider); max-width: 960px; margin: 24px auto; + backdrop-filter: blur(32px) saturate(4); + -webkit-backdrop-filter: blur(32px) saturate(4); + box-shadow: 0 0 16px black; } button, .xd-button { display: flex; - color: $fg; - background: $bg; - border: 1px solid $bg-pale-1; + color: var(--fg); + background: var(--bg); + border: 1px solid var(--bg-pale-1); align-items: center; justify-content: center; - border-radius: 2px; + border-radius: var(--radius); font-size: 1rem; outline: none; padding: 2px 8px; @@ -137,33 +131,33 @@ button, .xd-button { cursor: pointer; &:hover { - background: $bg-pale-1; + background: var(--bg-pale-1); } &:active { - background: $bg-pale-2; + background: var(--bg-pale-2); } &.primary { - background: $primary; - color: $primary-fg; - border-color: $primary-dark; + background: var(--primary); + color: var(--primary-fg); + border-color: var(--primary-dark); &:hover { - background: $primary-light; + background: var(--primary-light); } &:active { - background: $primary-dark; + background: var(--primary-dark); } } &.danger { - background: $md-red-700; - color: $md-white; - border-color: $md-red-900; + background: var(--bg-danger); + color: white; + border-color: var(--divider-danger); &:hover { - background: $md-red-500; + background: var(--bg-danger-lighten); } &:active { - background: $md-red-800; + background: var(--bg-danger-lighten); } } } @@ -176,28 +170,25 @@ button, .xd-button { a, .link { text-decoration: none; - color: $primary; - border-bottom: 1px solid $primary; + color: var(--primary); &:hover { opacity: 0.7; } } table { - border: 1px solid $divider; - border-radius: 2px; + border: 1px solid var(--divider); + border-radius: var(--radius); + background: var(--overlay); width: 100%; > thead { - background: $table-bg-header; + background: var(--overlay); margin-bottom: 2px; text-align: left; } > tbody > tr { - background: $table-bg-even; - &:nth-child(odd) { - background: $table-bg-odd; - } + border-bottom: 1px solid var(--overlay); } th, td { padding: 4px 8px; @@ -205,22 +196,53 @@ table { } code { - border-radius: 2px; + border-radius: var(--radius); color: #0f0; background: #000; padding: 8px; } .xd-container { - padding: 32px; + max-width: 960px; + margin: 64px auto; +} + +.xd-hstack { + display: flex; + > *:not(:last-child) { + margin-right: var(--margin); + } + + > * { + width: 100%; + } + + @media screen and (max-width: 640px) { + flex-direction: column; + > * { + margin-bottom: var(--margin); + } + } +} + +.xd-vstack { + display: flex; + flex-direction: column; + > *:not(:last-child) { + margin-bottom: var(--margin); + } } .xd-card { - background: $card-bg; - color: $card-fg; - border: 1px solid $divider; - border-radius: 2px; + background: var(--bg); + padding: 16px; + border-radius: var(--radius); + border: 1px solid var(--divider); + // backdrop-filter: blur(32px) saturate(4); + // -webkit-backdrop-filter: blur(32px) saturate(4); + box-shadow: 0 0 16px black; overflow: hidden; + h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } @@ -244,18 +266,19 @@ code { } > .header { - background: $card-header; - border-bottom: 1px solid $divider; > h1.title { - font-size: 1rem; + font-size: 1.5rem; margin: 0; font-weight: bold; } } > .footer { - background: $card-footer; - border-top: 1px solid $divider; + background: var(--bg-pale-1); + border-top: 1px solid var(--divider); + } + @media screen and (max-width: 640px) { + border-radius: 0; } } @@ -422,17 +445,17 @@ img, .xd-responsive { .xd-alert { padding: 8px 16px; - border-radius: 2px; + border-radius: var(--radius); width: 100%; - background: $alert-bg; - border: 1px solid $alert-border; - color: $alert-fg; + background: var(--bg); + border: 1px solid var(--bg-pale-2); + color: var(--fg); font-size: 75%; &.danger { - background: $alert-bg-danger; - border: 1px solid $alert-border-danger; - color: $alert-fg-danger; + background: var(--bg-danger); + border: 1px solid var(--divider-danger); + color: var(--fg-danger); } } diff --git a/styles/style.scss b/styles/style.scss index 98a1dee..0b610c2 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -1,9 +1,52 @@ @import '_xeltica-design.scss'; body { - background: $bg-pale-1; + background: var(--bg-pale-1); } h1> a { border-bottom: none; +} + +.background { + position: fixed; + z-index: -50; + inset: 0; + + background: radial-gradient( + farthest-corner at 0 0, + #86b300 0%, + #86b300 40%, + #6900ba 90%, + #6900ba 100% + ); +} + +.background:before { + z-index: -200; + position: absolute; + inset: 0; + background: radial-gradient( + 60vw at 150vh 50vh, + #ff9900 0%, + #ff9900 20%, + rgba(0, 0, 0, 0) 100% + ); + content: ""; +} + +.background:after { + z-index: -100; + position: absolute; + inset: 0; + background: radial-gradient( + 50vw at 120vw 120vh, + rgba(0, 30, 190, 1) 0%, + rgba(0, 30, 190, 0) 100% + ); + content: ""; +} + +details > summary { + margin-bottom: 8px; } \ No newline at end of file