A bit more responsive

5 years ago · 8ed171a311
parent c7fafdb4cc
commit 8ed171a311
9 changed files with 97 additions and 31 deletions
--- a/exhibit.go
+++ b/exhibit.go
@ -13,9 +13,9 @@ import (

 func main() {
 	http.HandleFunc("/", handleIndex)
-	// http.Handle("/blog", handleBlog)
-	// http.Handle("/about", handleAbout)
-	// http.Handle("/contact", handleContact)
+	http.HandleFunc("/blog", handleBlog)
+	http.HandleFunc("/about", handleAbout)
+	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") {
-	// 	fmt.Printf("%s, ", f)
-	// }
-	t, _ := template.ParseFiles("tmpl/layouts/base.html", "tmpl/index.html", "tmpl/header.html")
+	t, _ := template.ParseFiles("tmpl/layouts/index.html", "tmpl/gallery.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) {
--- a/inc/css/main.css
+++ b/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 {
-    visibility: hidden;
+#info-box img {
+    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);
+}
--- a/inc/js/text.js
+++ b/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",
--- a/inc/js/zoom.js
+++ b/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) => {
--- a/tmpl/gallery.html
+++ b/tmpl/gallery.html
--- a/tmpl/header.html
+++ b/tmpl/header.html
@ -1,16 +1,16 @@
 {{define "header"}}
 <header>
    <nav>
-        <a href="">GALLERY</a>
-        <a href="blog.html">BLOG</a>
+        <a href="/">GALLERY</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="contact.html">CONTACT</a>
+        <a href="/about">ABOUT</a>
+        <a href="/contact">CONTACT</a>
    </nav>
 </header>
 {{end}}
--- a/tmpl/layouts/base.html
+++ b/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}}
--- a/tmpl/layouts/index.html
+++ b/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>
--- a/tmpl/soon.html
+++ b/tmpl/soon.html
@ -0,0 +1,3 @@
+{{define "body"}}
+<h1 class="coming-soon">❤ COMING SOON ❤</h1>
+{{end}}