Home Explore Help
Register Sign In
schtonn
/
public
1
1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

beautify main page

schtonn 2 years ago
parent
3b5c7b8bc1
commit
e067679532
2 changed files with 80 additions and 39 deletions
Split View Show Diff Stats
  1. 13 1
      css/style.css
  2. 67 38
      index.html

+ 13 - 1
css/style.css
View File 

@@ -3,7 +3,10 @@ body {
 
     background-color: floralwhite;
 
 }
 
 
-h1,h2,h3,h4 {
 
+h1,
 
+h2,
 
+h3,
 
+h4 {
 
     font-weight: bold;
 
 }
 
 
@@ -49,4 +52,13 @@ h1,h2,h3,h4 {
 
 .chart {
 
     width: auto;
 
     height: 400px;
 
+}
 
+
 
+.blurred {
 
+    transition-duration: 100ms;
 
+    filter: blur(2px);
 
+}
 
+
 
+.blurred:hover {
 
+    filter: none;
 
 }

+ 67 - 38
index.html
View File 

@@ -15,6 +15,8 @@
 
     <meta name="twitter:card" content="summary">
 
 
     <link rel="canonical" href="https://schtonn.github.io/">
 
+    <!-- <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
 
+        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
 
     <link rel="stylesheet" href="../css/bootstrap.min.css"
 
         integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 
     <link rel="preconnect" href="https://fonts.gstatic.com">
 
@@ -23,52 +25,79 @@
 
     <link rel="stylesheet" href="css/style.css">
 
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
 
     <title>schtonn</title>
 
+    <style>
 
+        .btn {
 
+            text-shadow: rgb(133, 133, 130) 1px 2px 3px;
 
+            transition-duration: 100ms;
 
+            transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
 
+        }
 
 
+        .btn:hover {
 
+            text-shadow: rgb(33, 33, 30, 0.8) 3px 3px 5px;
 
+            transform: rotate(2deg) translate(-2px, -4px);
 
+        }
 
+
 
+        #random:hover {
 
+            text-shadow: -3px -3px 3px rosybrown, 3px 3px 3px royalblue, 3px -3px 5px whitesmoke, -3px 3px 5px whitesmoke, -3px -3px 5px yellow;
 
+        }
 
+
 
+        #paint:hover {
 
+            text-shadow: -3px -3px 3px rgb(95, 192, 150), 3px 3px 3px rgb(131, 221, 226), 3px -3px 5px rgb(151, 124, 225), -3px 3px 5px whitesmoke, -3px -3px 5px yellow;
 
+        }
 
+
 
+        #chess:hover {
 
+            text-shadow: rgb(13, 13, 10, 0.8) -1px -2px 3px, whitesmoke 1px 2px 3px, whitesmoke -1px 2px 3px;
 
+        }
 
+
 
+        #gravity:hover {
 
+            text-shadow: seagreen -1px -2px 3px, grey 1px 2px 3px, whitesmoke -1px 2px 3px;
 
+        }
 
+    </style>
 
 </head>
 
 
 <body itemscope itemtype="http://schema.org/WebPage" style="height:100vh">
 
     <script src="js/cursorEffects.js"></script>
 
     <script type="text/javascript">
 
-        new cursoreffects.bubbleCursor({ emoji: "🤐" });
 
+        new cursoreffects.bubbleCursor();
 
     </script>
 
 
-    <div class="bg">
 
-        <h1>> schtonn</h1>
 
-        <h3>> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></h3>
 
-        <p><a class="btn btn-primary btn-lg" href="/blog" style="text-shadow: black 5px 3px 3px;">
 
-                <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;Blog</a></p>
 
-        <p><a class="btn btn-primary" href="https://schtonn.github.io/" style="text-shadow: black 3px 2px 4px;">
 
-                <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;View on github</a>
 
-            <a class="btn btn-warning" href="https://schtonn.gitee.io/"
 
-                style="text-shadow: rgb(155,55,55) 3px 2px 4px;"><span class="glyphicon glyphicon-thumbs-down"
 
-                    aria-hidden="true"></span>&nbsp;<del>View on gitee</del>(outdated)</a>
 
-        </p>
 
-        <p><a class="btn btn-primary" href="https://github.com/schtonn/schtonn.github.io"
 
-                style="text-shadow: black 3px 2px 4px;"><span class="glyphicon glyphicon-folder-open"
 
-                    aria-hidden="true"></span>&nbsp;&nbsp;Repo on github</a>
 
-            <a class="btn btn-warning" href="https://gitee.com/schtonn/schtonn"
 
-                style="text-shadow: rgb(155,55,55) 3px 2px 4px;"><span class="glyphicon glyphicon-folder-close"
 
-                    aria-hidden="true"></span>&nbsp;<del>Repo on gitee</del> (outdated)</a>
 
-        </p>
 
-        <h3>> 娱乐</h3>
 
-        <p>
 
-            <a class="btn btn-info" href="/core/" style="text-shadow: rgb(133,133,130) 1px 2px 3px;">Core</a>
 
-            <a class="btn btn-info" href="/sans/" style="text-shadow: rgb(133,133,130) 1px 2px 3px;">sans</a>
 
-            <a class="btn btn-info" href="/sans-cheat/" style="text-shadow: rgb(133,133,130) 1px 2px 3px;"><span
 
-                    class="glyphicon glyphicon-wrench" aria-hidden="true"></span>&nbsp;&nbsp;sans</a>
 
-            <a class="btn btn-info" href="/random/" style="text-shadow: rgb(133,133,130) 1px 2px 3px;">random</a>
 
-            <a class="btn btn-info" href="/paint/" style="text-shadow: rgb(133,133,130) 1px 2px 3px;"><span
 
-                class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;&nbsp;绘画板</a>
 
-                <a class="btn btn-info" href="/chess/" style="text-shadow: rgb(133,133,130) 1px 2px 3px;"><span
 
-                    class="glyphicon glyphicon-record" aria-hidden="true"></span>&nbsp;&nbsp;五子棋</a>
 
-            </p>
 
-        <h3>> 小工具</h3>
 
-        <p>
 
-            <a class="btn btn-danger" href="/score/" style="text-shadow: rgb(133,133,130) 1px 2px 3px;"><span
 
-                    class="glyphicon glyphicon-stats" aria-hidden="true"></span>&nbsp;&nbsp;成绩整理</a>
 
-            <a class="btn btn-info" href="/crypty/" style="text-shadow: rgb(133,133,130) 1px 2px 3px;">Crypty</a>
 
-        </p>
 
-    </div>
 
+    <h1>> schtonn</h1>
 
+    <h3>> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></h3>
 
+    <p><a class="btn btn-primary btn-lg" href="/blog" style="text-shadow: black 5px 3px 3px;">
 
+            <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;Blog</a></p>
 
+    <p><a class="btn btn-primary" href="https://schtonn.github.io/" style="text-shadow: black 3px 2px 4px;">
 
+            <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;View on github</a>
 
+        <a class="btn btn-warning" href="https://schtonn.gitee.io/"
 
+            style="text-shadow: rgb(155,55,55) 3px 2px 4px;"><span class="glyphicon glyphicon-thumbs-down"
 
+                aria-hidden="true"></span>&nbsp;<del>View on gitee</del>(outdated)</a>
 
+    </p>
 
+    <p><a class="btn btn-primary" href="https://github.com/schtonn/schtonn.github.io"
 
+            style="text-shadow: black 3px 2px 4px;"><span class="glyphicon glyphicon-folder-open"
 
+                aria-hidden="true"></span>&nbsp;&nbsp;Repo on github</a>
 
+        <a class="btn btn-warning" href="https://gitee.com/schtonn/schtonn"
 
+            style="text-shadow: rgb(155,55,55) 3px 2px 4px;"><span class="glyphicon glyphicon-folder-close"
 
+                aria-hidden="true"></span>&nbsp;<del>Repo on gitee</del> (outdated)</a>
 
+    </p>
 
+    <h3> 娱乐</h3>
 
+    <p>
 
+        <a class="btn btn-info" href="/core/">Core</a>
 
+        <a class="btn btn-info" href="/sans/">sans</a>
 
+        <a class="btn btn-info" href="/sans-cheat/"><span class="glyphicon glyphicon-wrench"
 
+                aria-hidden="true"></span>&nbsp;&nbsp;sans</a>
 
+        <a class="btn btn-info" id="random" href="/random/">random</a>
 
+        <a class="btn btn-info" id="paint" href="/paint/"><span class="glyphicon glyphicon-pencil"
 
+                aria-hidden="true"></span>&nbsp;&nbsp;绘画板</a>
 
+        <a class="btn btn-info" id="chess" href="/chess/"><span class="glyphicon glyphicon-record"
 
+                aria-hidden="true"></span>&nbsp;&nbsp;五子棋</a>
 
+        <a class="btn btn-info" id="gravity" href="/gravity/"><span class="glyphicon glyphicon-magnet"
 
+                aria-hidden="true"></span>&nbsp;&nbsp;引力</a>
 
+    </p>
 
+    <h3>> 小工具</h3>
 
+    <p>
 
+        <a class="btn btn-danger" href="/score/" style="text-shadow: rgb(13,13,10,0.5) 3px 2px 4px;"><span
 
+                class="glyphicon glyphicon-stats" aria-hidden="true"></span>&nbsp;&nbsp;成绩整理</a>
 
+        <a class="btn btn-info" href="/crypty/">Crypty</a>
 
+    </p>
 
 </body>
 
 
 </html>