Style and add links to homepage (#1177)

casey · May 4, 2022 · 3adef6d · 3adef6d
1 parent 9a7067e
commit 3adef6d
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 44 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,11 +1,11 @@
 /.vagrant
 /README.html
 /book/src
-/www/book
 /fuzz/artifacts
 /fuzz/corpus
 /fuzz/target
 /target
 /test-utilities/Cargo.lock
 /test-utilities/target
 /tmp
+/www/man
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
 
 `just` is a handy way to save and run project-specific commands.
 
-This readme is also available as a [book](https://just.systems/book/);
+This readme is also available as a [book](https://just.systems/man/);
 
 (非官方中文文档,[这里](https://github.com/chinanf-boy/just-zh),快看过来!)
 

diff --git a/book/book.toml b/book/book.toml
@@ -6,4 +6,4 @@ src = "src"
 title = "Just Programmer's Manual"
 
 [build]
-build-dir = "../www/book"
+build-dir = "../www/man"
diff --git a/www/index.css b/www/index.css
@@ -1,55 +1,68 @@
 :root {
-  --width-target:      calc(100vw / 6);
-  --height-target:     calc(100vh / 3);
-  --size:              min(var(--width-target), var(--height-target));
-  --margin-vertical:   calc((100vh - var(--size) * 2) / 2);
-  --margin-horizontal: calc((100vw - var(--size) * 5) / 2);
+ --width-target: calc(100vw / 6);
+ --height-target: calc(100vh / 3);
+ --size: min(var(--width-target), var(--height-target));
+ --margin-vertical: calc((100vh - var(--size) * 2) / 2);
+ --margin-horizontal: calc((100vw - var(--size) * 5) / 2);
 }
 
 * {
-  margin:  0;
+  margin: 0;
   padding: 0;
 }
 
 html {
   background-color: black;
-  color:            white;
-  overflow:         hidden;
-  text-align:       center;
+  color: white;
+  overflow: hidden;
+  text-align: center;
+  font-family: sans-serif;
+  font-size: var(--size);
+  line-height: var(--size);
 }
 
 a {
-  color:           white;
+  color: white;
   text-decoration: none;
 }
 
-#just {
-  font-family:      sans-serif;
-  font-size:        var(--size);
-  line-height:      var(--size);
-  display:               grid;
+a:hover {
+  text-shadow: 0 0 5px #fff;
+}
+
+body {
+  display: grid;
   grid-template-columns: repeat(4, 1fr);
-  margin-bottom:         var(--margin-vertical);
-  margin-left:           var(--margin-horizontal);
-  margin-right:          var(--margin-horizontal);
-  margin-top:            var(--margin-vertical);
+  margin-bottom: var(--margin-vertical);
+  margin-left: var(--margin-horizontal);
+  margin-right: var(--margin-horizontal);
+  margin-top: var(--margin-vertical);
+}
+
+body > * {
+  width: var(--size);
 }
 
-#just > * {
-  height:       var(--size);
-  width:        var(--size);
+body > div {
+  height: var(--size);
+  text-shadow: 0 0 5px #fff;
 }
 
-#subtitle {
-  font-style: italic;
+body > a {
+  align-items: center;
+  display: flex;
+  font-size: calc(var(--size) / 9);
+  height: calc(var(--size) / 2);
+  justify-content: center;
+  line-height: calc(var(--size) / 9);
 }
 
 /* just is an isogram */
-#j:after        { content: 'j'; }
-#j:hover:after  { content: 'J'; }
-#u:after        { content: 'u'; }
-#u:hover:after  { content: 'U'; }
-#s:after        { content: 's'; }
-#s:hover:after  { content: 'S'; }
-#t:after        { content: 't'; }
-#t:hover:after  { content: 'T'; }
+#j:after       { content: 'j'; }
+#j:hover:after { content: 'J'; }
+#u:after       { content: 'u'; }
+#u:hover:after { content: 'U'; }
+#s:after       { content: 's'; }
+#s:hover:after { content: 'S'; }
+#t:after       { content: 't'; }
+#t:hover:after { content: 'T'; }
diff --git a/www/index.html b/www/index.html
@@ -7,15 +7,14 @@
     <link href="index.css" rel="stylesheet" type="text/css">
   </head>
   <body>
-    <a href="https://github.com/casey/just">
-      <div id="just">
-        <div id="j"></div>
-        <div id="u"></div>
-        <div id="s"></div>
-        <div id="t"></div>
-      </div>
-      <div id="subtitle">a command runner</div>
-    </a>
+    <div id="j"></div>
+    <div id="u"></div>
+    <div id="s"></div>
+    <div id="t"></div>
+    <a href="https://github.com/casey/just">github</a>
+    <a href="man/">manual</a>
+    <a href="https://discord.gg/ezYScXR">discord</a>
+    <a href="https://crates.io/crates/just">crates.io</a>
   </body>
 </html>
 <!-- Love, Casey -->