A bit more responsive

exhibit.go

@@ -13,9 +13,9 @@ import (
 
 func main() {
 	http.HandleFunc("/", handleIndex)
-	// http.Handle("/blog", handleBlog)
+	http.HandleFunc("/blog", handleBlog)
-	// http.Handle("/about", handleAbout)
+	http.HandleFunc("/about", handleAbout)
-	// http.Handle("/contact", handleContact)
+	http.HandleFunc("/contact", handleContact)
 	http.Handle("/inc/", http.StripPrefix("/inc/", http.FileServer(http.Dir("inc"))))
 	log.Fatalln(http.ListenAndServe(":8080", nil))
 }
@@ -38,23 +38,23 @@ type Exhibition struct {
 func handleIndex(w http.ResponseWriter, r *http.Request) {
 	var exhibit Exhibition
 	exhibit.parsePictures("./inc/images")
-	// for _, f := range readPictureNames("inc/thumbs") {
+	t, _ := template.ParseFiles("tmpl/layouts/index.html", "tmpl/gallery.html", "tmpl/header.html")
-	// 	fmt.Printf("%s, ", f)
-	// }
-	t, _ := template.ParseFiles("tmpl/layouts/base.html", "tmpl/index.html", "tmpl/header.html")
 	t.Execute(w, exhibit)
 }
 
 func handleBlog(w http.ResponseWriter, r *http.Request) {
-
+	t, _ := template.ParseFiles("tmpl/layouts/base.html", "tmpl/soon.html", "tmpl/header.html")
+	t.Execute(w, nil)
 }
 
 func handleAbout(w http.ResponseWriter, r *http.Request) {
-
+	t, _ := template.ParseFiles("tmpl/layouts/base.html", "tmpl/soon.html", "tmpl/header.html")
+	t.Execute(w, nil)
 }
 
 func handleContact(w http.ResponseWriter, r *http.Request) {
-
+	t, _ := template.ParseFiles("tmpl/layouts/base.html", "tmpl/soon.html", "tmpl/header.html")
+	t.Execute(w, nil)
 }
 
 func (ex *Exhibition) parsePictures(dir string) {

inc/css/main.css

@@ -41,6 +41,10 @@ header, #bg-box, #exhibition, .flying-text {
     border-radius: 0.8vh;
 }
 
+.hidden {
+    visibility: hidden;
+}
+
 /******************* HEADER *******************/
 
 header {
@@ -80,6 +84,12 @@ a:hover {
     filter: grayscale(0);
 }
 
+@media only screen and (max-width: 800px) {
+    header {
+        width: 95%;
+    }
+}
+
 /******************* EXHIBITION *******************/
 
 /* Remove scrollbar in all browsers */
@@ -149,7 +159,6 @@ a:hover {
 }
 
 #info-box table {
-    /* box-sizing: border-box; */
     display: inline-block;
     position: absolute;
     height: auto;
@@ -170,8 +179,9 @@ a:hover {
     text-align: left;
 }
 
-.hidden {
+#info-box img {
-    visibility: hidden;
+    height: 100%;
+    max-width: 100%;
 }
 
 #btn-close {
@@ -190,11 +200,6 @@ a:hover {
     cursor: pointer;
 }
 
-#info-box img {
-    height: 100%;
-    max-width: 100%;
-}
-
 /******************* MAGNIFY *******************/
 
 .magnify {
@@ -206,6 +211,41 @@ a:hover {
     background-clip: content-box;
 }
 
+@media only screen and (max-width: 800px) {
+
+    #bg-box {
+        width: 100%;
+        height: 100%;
+        background-color: var(--c1);
+        overflow: hidden;
+    }
+
+    #info-box table {
+        box-sizing: border-box;
+        display: block;
+        position: relative;
+        padding: 0 2.5vh;
+        margin-top: 7.5vh;
+    }
+
+    #info-box table * {
+        font-size: 2.0vw;
+    }
+
+    #info-box img {
+        max-height: 50%;
+        width: 100%;
+    }
+
+    .magnify {
+        position: relative;
+        top: 5vh;
+        left: 2.5%;
+        max-width: 95%;
+        max-height: 50%;
+    }
+}
+
 /******************* HEADER *******************/
 
 #welcome {
@@ -226,12 +266,23 @@ a:hover {
 .flying-text {
     position: absolute;
     display: inline-block;
-    color: black;
+    color: var(--c2);
     font-size: 0.01vw;
-    background-color: white;
+    background-color: var(--c1);
     padding: 0.5vw;
     text-align: center;
     top: 50%;
     left: 50%;
     z-index: -1;
 }
+
+/******************* COMING SOON *******************/
+
+.coming-soon {
+    position: relative;
+    display: inline-block;
+    font-size: 8vmin;
+    color: var(--c2);
+    top: 30vh;
+    background-color: var(--c1);
+}

inc/js/text.js

@@ -8,7 +8,7 @@
 // set a global var "run" to true before running this function
 async function flyingText(canvas) {
     // TODO: move to argument, load from backend
-    let statements = ["Keyboard-Nerd", "❤", "Emacs",
+    let statements = ["Keyboard-Nerd", "🖤", "Emacs",
                       "Life == VI Bindings", "GNU/Linux", "Arch Linux",
                       "Computer Science", "Design",
                       "Javascript", "C/C++", "Go", "Bash",

inc/js/zoom.js

@@ -20,7 +20,7 @@ function zoom(factor, imgName) {
         magni.style.padding = offset.y + "px " + offset.x + "px";
         // adjust the margin to ged rid of the extra size gained from padding
         magni.style.margin = -offset.y + "px " + -offset.x + "px";
-    }, 500);
+    }, 10);
 
     // Added a mouse(enter|move|leave) to make img transparent and show bg-img when it should be visible
     img.addEventListener("mouseenter", (e) => {

tmpl/header.html

@@ -1,16 +1,16 @@
 {{define "header"}}
 <header>
     <nav>
-        <a href="">GALLERY</a>
+        <a href="/">GALLERY</a>
-        <a href="blog.html">BLOG</a>
+        <a href="/blog">BLOG</a>
 
         <!-- <a class="nav-center"></a> -->
-        <a id="logo" href=""><img src="/inc/logo/logo.svg" alt="" /></a>
+        <a id="logo" href="/"><img src="/inc/logo/logo.svg" alt="" /></a>
         <!-- <a id="logo" href=""></a> -->
         <!-- <a class="nav-center"></a> -->
 
-        <a href="about.html">ABOUT</a>
+        <a href="/about">ABOUT</a>
-        <a href="contact.html">CONTACT</a>
+        <a href="/contact">CONTACT</a>
     </nav>
 </header>
 {{end}}

tmpl/layouts/base.html

@@ -2,11 +2,8 @@
     <head>
         <meta charset="UTF-8"/>
 	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Portfolio</title>
+        <title>PHGA 🤓 teord</title>
         <link href="/inc/css/main.css" rel="stylesheet"/>
-        <script src="/inc/js/main.js"></script>
-        <script src="/inc/js/zoom.js"></script>
-        <script src="/inc/js/text.js"></script>
     </head>
     <body>
         {{block "header" .}}NO HEADER DEFINED{{end}}

tmpl/layouts/index.html

@@ -0,0 +1,15 @@
+<html>
+    <head>
+        <meta charset="UTF-8"/>
+	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>PHGA 🤓 teord</title>
+        <link href="/inc/css/main.css" rel="stylesheet"/>
+        <script src="/inc/js/main.js"></script>
+        <script src="/inc/js/zoom.js"></script>
+        <script src="/inc/js/text.js"></script>
+    </head>
+    <body>
+        {{block "header" .}}NO HEADER DEFINED{{end}}
+        {{block "body" .}}NOTHING TO SEE HERE{{end}}
+    </body>
+</html>

tmpl/soon.html

@@ -0,0 +1,3 @@
+{{define "body"}}
+<h1 class="coming-soon">❤ COMING SOON ❤</h1>
+{{end}}