new design

src/views/_base.pug

@@ -19,15 +19,15 @@ html
         link(rel='stylesheet' href='/assets/style.css')
         block style
     body
-        .xd-main
+        .background
-            h1: a(href="/") みす廃あらーと
+        .xd-container.xd-vstack
             block content
-            footer.xd-footer.xd-container
+            footer
+                .xd-card
                     a(href="/terms") 利用規約
                     | ・
                     +exta(href="https://github.com/Xeltica/misshaialert") リポジトリ
-                p (C)2020 Xeltica - 
+                    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')

src/views/_components.pug

@@ -5,9 +5,7 @@ mixin exta()
 mixin serverInfo()
     .xd-card
         .header
-            h1.title
+            h1.title サービスの情報
-                i.fas.fa-info-circle
-                |  サービスの情報
         .body
             dl
                 dt

src/views/about.pug

@@ -1,6 +1,8 @@
 extends _base
 
 block content
+    .xd-card
+        h1: a(href="/") みす廃あらーと
         section
             h2 バージョン !{version}
             ul

src/views/error.pug

@@ -1,6 +1,7 @@
 extends _base
 
 block content
-    section
+    h1: a(href="/") みす廃あらーと
+    section.xd-card
         h2 エラー
         p= error

src/views/mypage.pug

@@ -1,6 +1,8 @@
 extends _base
 
 block content
+    .xd-card
+        h1: a(href="/") みす廃あらーと
         h2 マイページ
         case from
             when "updateSettings"
@@ -10,14 +12,12 @@ block content
             default
                 p おかえりなさい、@!{ user.username }@!{ user.host } さん。
     
-    section#scores
+    section#scores.xd-vstack
-        .xd-cards.center
+        .xd-hstack
             +serverInfo()
             .xd-card
                 .header
-                    h1.title
+                    h1.title みす廃データ
-                        i.fas.fa-chart-area
-                        |  あなたの廃人度は…
                 .body
                     table
                         thead
@@ -41,9 +41,7 @@ block content
     
         section.xd-card#settings
                 .header
-                    h1.title
+                    h1.title 設定
-                        i.fas.fa-cog
-                        |  設定
                 .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
+                    h1.title 操作
-                        i.fas.fa-sliders-h
-                        |  操作
                 .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") ログアウト

src/views/term.pug

@@ -1,6 +1,8 @@
 extends _base
 
 block content
+    .xd-card
+        h1: a(href="/") みす廃あらーと
         section
             h2 利用規約
             ul

src/views/welcome.pug

@@ -1,36 +1,32 @@
 extends _base
 
 block content
-    section
     case from
         when 'logout'
-                p: strong ログアウトしました。
+            .xd-card: p: strong ログアウトしました。
         when 'optout'
-                p: strong 連携を解除しました。
+            .xd-card: p: strong 連携を解除しました。
+    .xd-card
+        h1: a(href="/") みす廃あらーと
         h2= welcomeMessage
+    .xd-hstack
+        section.xd-card
             p Misskey は楽しいものです。気がついたら1日中入り浸っていることも多いでしょう。
-            strong みす廃あらーと
+            p さあ、今すぐみす廃アラートをインストールして、今日のあなたの Misskey 活動を把握しよう。
-            | をあなたの Misskey アカウントにインストールして、今日のあなたの Misskey 活動を把握しましょう。
+        section.xd-card
             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
+    section.xd-hstack
-        .xd-cards.center
         +serverInfo()
         .xd-card
             .header
-                    h1.title
+                h1.title 開発者
-                        i.fas.fa-phone-alt
-                        |  開発者
             .body
                 p 何か困ったことがあったら、以下のアカウントにメッセージを送ってください。
                 ul
@@ -40,12 +36,10 @@ block content
                     li: +exta(href="mailto:xeltica@gmail.com") xeltica@gmail.com
         .xd-card
             .header
-                    h1.title
+                h1.title タイムライン
-                        i.fas.fa-hashtag
-                        |  タイムライン
             .body
                 p 近いうちに、ここで #misshaialert タグのタイムラインを表示します。まだ工事中です
-
+    <a href="https://github.com/xeltica/misshaialert" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
 block script
     script.

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;
+  background: var(--bg);
-  font-family: 'Noto Sans JP', sans-serif;
+  color: var(--fg);
-  color: $fg;
-}
-
-section:not(:last-child) {
-  margin-bottom: 16px;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -80,15 +71,15 @@ h6 { font-size: 1.05rem; }
 
 input.xd-input {
   outline: none;
-  border-radius: 2px;
+  border-radius: var(--radius);
-  color: $fg;
+  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-radius: var(--radius);
-  border: 1px solid $divider;
+  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;
+  color: var(--fg);
-  background: $bg;
+  background: var(--bg);
-  border: 1px solid $bg-pale-1;
+  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;
+    background: var(--primary);
-    color: $primary-fg;
+    color: var(--primary-fg);
-    border-color: $primary-dark;
+    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;
+    background: var(--bg-danger);
-    color: $md-white;
+    color: white;
-    border-color: $md-red-900;
+    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;
+  color: var(--primary);
-  border-bottom: 1px solid $primary;
   &:hover {
     opacity: 0.7;
   }
 }
 
 table {
-  border: 1px solid $divider;
+  border: 1px solid var(--divider);
-  border-radius: 2px;
+  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;
+    border-bottom: 1px solid var(--overlay);
-    &:nth-child(odd) {
-      background: $table-bg-odd;
-    }
   }
   th, td {
     padding: 4px 8px;
@@ -205,23 +196,54 @@ 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;
+  background: var(--bg);
-  color: $card-fg;
+  padding: 16px;
-  border: 1px solid $divider;
+  border-radius: var(--radius);
-  border-radius: 2px;
+  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; }
   h3 { font-size: 1.3rem; }
@@ -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;
+    background: var(--bg-pale-1);
-    border-top: 1px solid $divider;
+    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;
+  background: var(--bg);
-  border: 1px solid $alert-border;
+  border: 1px solid var(--bg-pale-2);
-  color: $alert-fg;
+  color: var(--fg);
   font-size: 75%;
 
   &.danger {
-    background: $alert-bg-danger;
+    background: var(--bg-danger);
-    border: 1px solid $alert-border-danger;
+    border: 1px solid var(--divider-danger);
-    color: $alert-fg-danger;
+    color: var(--fg-danger);
   }
 
 }

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;
+}