From 8ed171a311b6b58d570da3aa19263d81513e1c29 Mon Sep 17 00:00:00 2001 From: "Toerd@480" Date: Wed, 23 Oct 2019 20:55:23 +0200 Subject: [PATCH] A bit more responsive --- exhibit.go | 20 ++++----- inc/css/main.css | 71 ++++++++++++++++++++++++++----- inc/js/text.js | 2 +- inc/js/zoom.js | 2 +- tmpl/{index.html => gallery.html} | 0 tmpl/header.html | 10 ++--- tmpl/layouts/base.html | 5 +-- tmpl/layouts/index.html | 15 +++++++ tmpl/soon.html | 3 ++ 9 files changed, 97 insertions(+), 31 deletions(-) rename tmpl/{index.html => gallery.html} (100%) create mode 100644 tmpl/layouts/index.html create mode 100644 tmpl/soon.html diff --git a/exhibit.go b/exhibit.go index 0f2eacd..a7b1b2b 100644 --- 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) { diff --git a/inc/css/main.css b/inc/css/main.css index 33c8097..66bcfbe 100644 --- 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); +} diff --git a/inc/js/text.js b/inc/js/text.js index 3f00c5c..1152580 100644 --- 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", diff --git a/inc/js/zoom.js b/inc/js/zoom.js index 57d4282..6007f20 100644 --- 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) => { diff --git a/tmpl/index.html b/tmpl/gallery.html similarity index 100% rename from tmpl/index.html rename to tmpl/gallery.html diff --git a/tmpl/header.html b/tmpl/header.html index 7285875..6861ded 100644 --- a/tmpl/header.html +++ b/tmpl/header.html @@ -1,16 +1,16 @@ {{define "header"}}
{{end}} diff --git a/tmpl/layouts/base.html b/tmpl/layouts/base.html index 70311a2..06ace99 100644 --- a/tmpl/layouts/base.html +++ b/tmpl/layouts/base.html @@ -2,11 +2,8 @@ - Portfolio + PHGA 🤓 teord - - - {{block "header" .}}NO HEADER DEFINED{{end}} diff --git a/tmpl/layouts/index.html b/tmpl/layouts/index.html new file mode 100644 index 0000000..55d9490 --- /dev/null +++ b/tmpl/layouts/index.html @@ -0,0 +1,15 @@ + + + + + PHGA 🤓 teord + + + + + + + {{block "header" .}}NO HEADER DEFINED{{end}} + {{block "body" .}}NOTHING TO SEE HERE{{end}} + + diff --git a/tmpl/soon.html b/tmpl/soon.html new file mode 100644 index 0000000..3e7d57e --- /dev/null +++ b/tmpl/soon.html @@ -0,0 +1,3 @@ +{{define "body"}} +

❤ COMING SOON ❤

+{{end}}