✨ update start ui

src/main/resources/admin/admin-about.ftl

@@ -32,7 +32,7 @@
                 ${checkingVersionLabel}
             </div>
 
-            <iframe src="https://ghbtns.com/github-btn.html?user=b3log&repo=solo&type=star&count=true&size=large"
+            <iframe src="https://ghbtns.com/github-btn.html?user=88250&repo=solo&type=star&count=true&size=large"
                     frameborder="0" scrolling="0" width="160px" height="30px" class="about__iframe"
                     style="margin: 21px 0 0 20px;border: 0"
                     class="fn__left"></iframe>

src/main/resources/common-template/start.ftl

@@ -20,31 +20,39 @@
 <#include "macro-common_page.ftl">
 
 <@commonPage "${welcomeToSoloLabel}!">
-<h2>
+    <h2>
         <span>${welcomeToSoloLabel}</span>
         <a target="_blank" href="https://solo.b3log.org">
             <span class="error">&nbsp;Solo</span>
         </a>
-</h2>
+    </h2>
 
-<div id="github">
-    <div class="github__icon startAction">
-        <img src="${staticServePath}/images/hacpai.png"/>
+    <div class="start">
+        <a href="${servePath}/login/redirect?referer=${referer}">
+            <svg class="start__icon" viewBox="0 0 32 32">
+                <path fill="#d23f31" style="fill: var(--color1, #d23f31)"
+                      d="M5.787 17.226h17.033l5.954 9.528c0.47 0.752 0.003 1.361-1.042 1.361h-15.141z"></path>
+                <path d="M10.74 3.927h17.033c1.045 0 1.512 0.609 1.042 1.361l-5.954 9.528h-19.872l6.379-10.209c0.235-0.376 0.849-0.681 1.372-0.681z"></path>
+                <path d="M2.953 17.226h2.839l6.804 10.889h-1.892c-0.523 0-1.137-0.305-1.372-0.681z"></path>
+            </svg>
+        </a>
+        <div class="start__action">
+            <a class="btn" href="${servePath}/login/redirect?referer=${referer}">${useHacPaiAccountLoginLabel}</a>
+            <a href="https://hacpai.com/article/1576294445994" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+                    <path d="M19.652 25v6c0 0.55-0.45 1-1 1h-6c-0.55 0-1-0.45-1-1v-6c0-0.55 0.45-1 1-1h6c0.55 0 1 0.45 1 1zM27.552 10c0 4.75-3.225 6.575-5.6 7.9-1.475 0.85-2.4 2.575-2.4 3.3v0c0 0.55-0.425 1.2-1 1.2h-6c-0.55 0-0.9-0.85-0.9-1.4v-1.125c0-3.025 3-5.625 5.2-6.625 1.925-0.875 2.725-1.7 2.725-3.3 0-1.4-1.825-2.65-3.85-2.65-1.125 0-2.15 0.35-2.7 0.725-0.6 0.425-1.2 1.025-2.675 2.875-0.2 0.25-0.5 0.4-0.775 0.4-0.225 0-0.425-0.075-0.625-0.2l-4.1-3.125c-0.425-0.325-0.525-0.875-0.25-1.325 2.7-4.475 6.5-6.65 11.6-6.65 5.35 0 11.35 4.275 11.35 10z"></path>
+                </svg>
+            </a>
+        </div>
     </div>
-    <br>
-    <button class="startAction">${useHacPaiAccountLoginLabel}</button><br>
-</div>
-<script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script>
-<script type="text/javascript">
+    <script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script>
+    <script type="text/javascript">
       (function () {
         try {
-            $('.startAction').click(function () {
-                window.location.href = '${servePath}/login/redirect?referer=${referer}'
-                $('#github').addClass('github--loading')
-            })
+          $('.startAction')
         } catch (e) {
           document.querySelector('.main').innerHTML = "${staticErrorLabel}"
         }
       })()
-</script>
+    </script>
 </@commonPage>

src/main/resources/scss/start.scss

@@ -20,14 +20,14 @@
 *
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
 * @author <a href="http://88250.b3log.org">Liang Ding</a>
-* @version 2.0.0.4, Mar 17, 2019
+* @version 2.1.0.0, Dec 14, 2019
 */
-
 @import "reset";
 @import "vditor/src/assets/scss/classic";
 
 /* reset */
-button {
+button,
+.btn {
   background-size: 110% 110%;
   border: 1px solid rgba(27, 31, 35, .2);
   font-size: 13px;
@@ -43,13 +43,14 @@ button {
   padding: 7px 15px;
   margin-top: 10px;
   cursor: pointer;
-}
 
-button:hover {
+  &:hover {
     background-color: #e6ebf1;
     background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
     background-position: -.5em;
     border-color: rgba(27, 31, 35, .35);
+    text-decoration: none;
+  }
 }
 
 a {
@@ -63,6 +64,7 @@ h2 {
   font-size: 16px;
   margin: 0;
   padding: 10px 20px;
+
   a:hover {
     color: #d23f31;
   }
@@ -153,92 +155,47 @@ input[type=text]:focus {
   &__btns {
     text-align: right;
   }
+
   &__img {
     float: right;
     margin: -280px 0 0 0;
   }
+
   .vditor-reset {
     margin: 10px;
   }
 }
+
 /* end kill */
 
 /* start */
-#github {
-    position: relative;
-    text-align: center;
-}
-
-#github.github--loading:after {
-    content: "Loading...";
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: 7;
-    background-color: rgba(255, 255, 255, 0.6);
-    font-size: 22px;
+.start {
+  display: block;
+  margin: 20px auto 40px;
+  width: 280px;
   text-align: center;
-    padding-top: 135px;
-    color: #000;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-}
 
-#github .github__icon {
+  &__icon {
     height: 200px;
     width: 210px;
-    background-image: url("../images/hacpai.png");
-    margin: 0 auto;
+    margin: 0 auto 20px;
     background-size: contain;
-    cursor: pointer;
-}
-
-#github .github__icon:hover {
-    background-image: url("../images/hacpai.png");
-}
-
-#github img {
-    display: none;
-}
-
-.github__text {
-    cursor: pointer;
-    font-size: 12px;
-    color: #666;
-}
-
-.github__text ul {
-    display: none;
-    text-align: left;
-    margin: 5px auto 0;
-    width: 280px;
-    padding-left: 24px;
-    box-sizing: border-box;
-}
+    color: #3b3e43;
+    transition: $transition;
+    padding-right: 24px;
 
-.github__link {
-    font-size: 12px;
-    text-decoration: underline;
-    margin-top: 10px;
-    display: block;
-}
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
 
-.github__check {
-    font-size: 12px;
+  &__action {
     display: inline-flex;
-    margin: 10px auto 0;
     align-items: center;
-    line-height: 20px;
-    color: #999;
-    a {
-        color: #999;
-        text-decoration: underline;
   }
-    input {
-        width: auto;
-        margin-right: 5px;
+
+  .btn {
+    margin: 0 10px 0 0;
   }
 }
 
@@ -284,6 +241,7 @@ input[type=text]:focus {
 
 .search__articles {
   width: 600px;
+
   .tag {
     color: #616161;
     padding: 2px 5px;
@@ -298,9 +256,10 @@ input[type=text]:focus {
     font-size: 12px;
     display: inline-block;
     margin-right: 5px;
+
     &:hover {
       color: #000;
-            box-shadow: 0 1px 2px rgba(0,0,0,.2);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
       text-decoration: none;
     }
   }