many changes to header, css, page contentHEADmaster

2 files changed, 101 insertions, 28 deletions

diff --git a/content/assets/ring.js b/content/assets/ring.js
new file mode 100644
index 0000000..a094844
--- /dev/null
+++ b/content/assets/ring.js
@@ -0,0 +1,12 @@
+fetch('https://umaring.github.io/bdunahu.json')
+    .then(function(ret) { return ret.json(); })
+    .then(function(json) {
+        document.getElementById('umaring-id').innerHTML = `<ul>
+	<li> <a href=${json.prev.url}>${json.prev.name}</a> </li>
+	<li> <span>←</span>
+	<li> <a href="https://github.com/umacabal/umaring">umass ring</a> </li>
+	<li> <span>→</span>
+	<li> <a href=${json.next.url}>${json.next.name}</a> </li>
+</ul>`
+    })
+    .catch(function() {});
diff --git a/content/assets/site.css b/content/assets/site.css
index 8d8b885..faf1ad9 100644
--- a/content/assets/site.css
+++ b/content/assets/site.css
@@ -1,3 +1,24 @@
+@font-face {
+    font-family: 'medieval-sharp';
+    src: url('/assets/fonts/MedievalSharp-Book.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'medieval-sharp';
+    src: url('/assets/fonts/MedievalSharp-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'medieval-sharp';
+    src: url('/assets/fonts/MedievalSharp-BookOblique.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+
 html {
   background: url(background.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
@@ -38,7 +59,7 @@ body {
 }
 
 body article {
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.8);
     margin: 0px;
     width: 100%;
     padding: 20px;
@@ -46,9 +67,9 @@ body article {
     box-sizing: border-box;
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1000px) {
     .container {
-	width: 60%
+	width: 960px;
     }
 }
 
@@ -56,6 +77,7 @@ body h1,
 body h2,
 body h3,
 body h4 {
+    font-family: sans-serif;
     font-weight: normal;
     margin: 0;
     padding: 0;
@@ -65,6 +87,7 @@ body h1 b,
 body h2 b,
 body h3 b,
 body h4 b {
+    font-family: sans-serif;
     display: block;
     line-height: 1;
     font-size: 150%;
@@ -78,6 +101,7 @@ body h4 img {
 }
 
 body h1 {
+    font-family: sans-serif;
     font-weight: bold;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
     padding: 0px;
@@ -120,16 +144,16 @@ body p {
 
 body a {
     text-decoration: none;
-    color: #7776ff;
+    color: #00e64d;
 }
 
 body a:hover {
-    color: #841076;
+    color: #99ffbb;
     text-decoration: underline;
 }
 
 a:visited {
-    color: #606060;
+    color: #cc9933;
 }
 
 .c {
@@ -174,10 +198,6 @@ body img {
     }
 }
 
-body img.no-border {
-    border: none;
-}
-
 blockquote {
     padding-left: 2rem;
     border-left: 5px solid #eee;
@@ -190,24 +210,64 @@ blockquote {
 
 /* Header */
 
-.grid-container, .grid-item {
-    margin: 0;
-    padding: 0;
-    border: none;
-}
-
 intro {
-    background: rgba(0, 0, 0, 0.8);
     display: flex;
     align-items: center;
-    justify-content: center;
+    padding: 0 24px;
+    height: 60px;
+    background: rgba(0, 0, 0, 0.9);
     color: #ccc;
-    gap: 16px;
-    margin: 0;
-    padding: 8px;
+    box-sizing: border-box;
+}
+
+intro .intro-ava {
+    width: 100px;
+    height: 60px;
+    background-image: url("/assets/wolf.png");
+    background-size: 70px 70px;
+    background-repeat: no-repeat;
+    background-position: left center;
+    opacity: 0.2;
+    transition: opacity 0.3s ease;
+}
+
+intro .divider {
+    width: 1px;
+    height: 40px;
+    background: #ccc;
+    margin-right: 24px;
+}
+
+.intro-main {
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+    align-items: center;
+}
+
+.intro-left, .intro-right {
+    display: flex;
+    align-items: center;
+}
+
+.intro-right {
+    margin-left: auto;
+}
+
+@media (max-width: 800px) {
+    .intro-main {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .intro-left, .intro-right {
+        width: 100%;
+        margin-bottom: 0px;
+    }
 }
 
 intro h1 {
+    font-family: sans-serif;
     font-size: 32px;
     font-weight: bold;
     line-height: 1em;
@@ -220,25 +280,24 @@ intro p {
     margin: 0;
 }
 
-intro img {
-    max-height: 100%;
-    width: 100px;
-    border-radius: 100%;
+intro .intro-ava:hover {
+    opacity: 1;
 }
 
 nav {
-    flex: 0 0 auto;
     font-size: 14px;
 }
 
 nav ul {
     list-style: none;
     padding: 0;
+    margin: 0;
 }
 
 nav li {
     color: #ccc;
     display: inline-block;
+    padding: 0;
     margin: 0;
 }
 
@@ -247,11 +306,13 @@ nav li:first-child {
 }
 
 nav a {
+    font-family: san-serif;
     display: inline-block;
-    padding-right: 12px;
+    padding: 0px 8px 0px 8px;
     border-radius: 0;
     font-weight: normal;
     color: #aeaeae;
+    user-select: none;
 }
 
 nav a:hover {
@@ -267,7 +328,7 @@ nav a:visited {
 footer {
     width: 100%;
     padding: 20px;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.9);
     font-size: 0.8em;
     line-height: 1.8em;
     text-align: center;