diff --git a/exhibit.go b/exhibit.go
index c0afdc0..0f2eacd 100644
--- a/exhibit.go
+++ b/exhibit.go
@@ -1,10 +1,10 @@
package main
import (
- "log"
- "net/http"
"html/template"
"io/ioutil"
+ "log"
+ "net/http"
"strings"
// "fmt"
)
@@ -12,7 +12,6 @@ import (
// var t = template.Must(template.ParseFiles("tmpl/layouts/base.html", "tmpl/index.html", "tmpl/blog.html", "tmpl/about.html", "tmpl/contact.html", ))
func main() {
-
http.HandleFunc("/", handleIndex)
// http.Handle("/blog", handleBlog)
// http.Handle("/about", handleAbout)
@@ -22,13 +21,13 @@ func main() {
}
type Picture struct {
- Name string
- Author string
- Size string
- Tools string
- Date string
- Price float32
- Desc string
+ Name string
+ Author string
+ Size string
+ Tools string
+ Date string
+ Price float32
+ Desc string
BlogLink string
}
@@ -65,9 +64,9 @@ func (ex *Exhibition) parsePictures(dir string) {
}
for _, f := range files {
- if ! f.IsDir() {
+ if !f.IsDir() {
ex.Pics = append(ex.Pics,
- Picture{Name: strings.Trim(f.Name(), ".jpg")})
+ Picture{Name: strings.TrimSuffix(f.Name(), ".jpg")})
}
}
}
diff --git a/inc/css/main.css b/inc/css/main.css
index 9d62e61..56640a7 100644
--- a/inc/css/main.css
+++ b/inc/css/main.css
@@ -21,10 +21,8 @@
font-size: 30px;
}
-/* counteract the scale of the hexas (x-scrollbar) */
html, body {
max-width: 100%;
- min-height: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
@@ -81,7 +79,6 @@ a:hover {
background-color: var(--c1);
position: absolute;
- /* bottom: ~15vh; Required in FF (JS)*/
bottom: 0px;
right: -20vh;
width: 20vh;
@@ -90,25 +87,32 @@ a:hover {
overflow-x: hidden;
}
-#exhibition img {
+.thumb-box {
height: 19.5vh;
margin-top: 10vh;
- max-width: 15.5vw;
-
- filter: blur(2px) grayscale(1);
-
+ /* keep the ~ratio of a photo
+ (spacing should be the same all the time) */
+ width: calc(19.5vh*1.49);
transform-origin: bottom left;
transform: rotate(90deg) translateX(-30vh);
}
-#exhibition img:hover {
- filter: grayscale(0);
+.thumb-box:last-child {
+ margin-bottom: 0;
}
-#exhibition img:last-child {
- margin-bottom: 0;
+.thumb {
+ width: 100%;
+ height: 100%;
+ filter: blur(2px) grayscale(1);
}
+.thumb:hover {
+ cursor: pointer;
+ filter: grayscale(0);
+}
+
+
/******************* INFO *******************/
@@ -126,18 +130,13 @@ a:hover {
background-color: var(--c1);
}
-#info-box img {
- height: 100%;
- max-width: 60%;
-}
-
#info-box table {
/* box-sizing: border-box; */
display: inline-block;
position: absolute;
height: auto;
padding: 5vh;
- /* Element won't respect the padding of parent >:|
+ /* Element does not respect the padding of parent >:|
So I will make it respect it...*/
top: 0;
bottom: 0;
@@ -159,7 +158,8 @@ a:hover {
}
#btn-close {
- line-height: 2.0vw; /* I made this a bit smaller to make alignment easier */
+ /* I made this a bit smaller to make alignment easier */
+ line-height: 2.0vw;
font-size: 4.5vw;
position: absolute;
right: 2vw;
@@ -172,3 +172,19 @@ a:hover {
opacity: 0.7;
cursor: pointer;
}
+
+#info-box img {
+ height: 100%;
+ max-width: 100%;
+}
+
+/******************* MAGNIFY *******************/
+
+.magnify {
+ display: inline-block;
+ max-width: 60%;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-clip: content-box;
+}
diff --git a/inc/js/main.js b/inc/js/main.js
index 5183906..ec680a6 100644
--- a/inc/js/main.js
+++ b/inc/js/main.js
@@ -39,7 +39,9 @@ function showOverlay(overlay, imgName) {
// \xD7 is the multiplication sign in hex
overlay.children[0].innerHTML =
`
\xD7
-
+
+
+
@@ -68,6 +70,8 @@ function showOverlay(overlay, imgName) {
`;
overlay.classList.remove("hidden");
+ // call my zoom function (zoom.js)
+ zoom(0.4, imgName);
}
function hideOverlay(overlay) {
diff --git a/inc/js/zoom.js b/inc/js/zoom.js
new file mode 100644
index 0000000..6d78172
--- /dev/null
+++ b/inc/js/zoom.js
@@ -0,0 +1,61 @@
+/*
+* zoom.js
+* function for the purpose of my portfolio to zoom into
+* images inside their box without touching the rest of the layout.
+* Author: phga/teord
+* Date: 2019-10-20
+* Version: 1.0
+*/
+function zoom(factor, imgName) {
+ let img = document.getElementById(imgName);
+ let magni = img.parentElement;
+ magni.style.backgroundImage = `url("${img.src}")`;
+
+ // wait till size of img is calculated
+ setTimeout(() => {
+ var offset = {x: img.width * factor, y: img.height * factor};
+ magni.style.width = img.width;
+ // setup the padding (bigger zoom canvas)
+ 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);
+
+ // Added a mouse(enter|move|leave) to make img transparent and show bg-img when it should be visible
+ img.addEventListener("mouseenter", (e) => {
+ img.style.opacity = 0;
+ });
+
+ img.addEventListener("mousemove", (e) => {
+ moveBackground(getOffsetToMiddle(e));
+ });
+
+ img.addEventListener("mouseleave", (e) => {
+ img.style.opacity = 1;
+ });
+
+ // Function to move the bg-img according to the current position in img
+ let moveBackground = function(pos) {
+ // It is always good to draw stuff the brain can't process :E
+ // * 2 because we have the offset on both sides
+ // -pos because we have inverted controls
+ magni.style.backgroundPosition = -pos.x * factor * 2 + "px " + -pos.y * factor * 2 + "px";
+ };
+
+ let getOffsetToMiddle = function(cursor) {
+ let elem, x = y = 0;
+ cursor = cursor || window.event;
+
+ // get elem bounding box
+ elem = img.getBoundingClientRect();
+
+ // calculate distance to middle of elem
+ x = cursor.pageX - (elem.left + elem.width / 2);
+ y = cursor.pageY - (elem.top + elem.height / 2);
+
+ // We do not have a scrolling page but you never know
+ x = x - window.pageXOffset;
+ y = y - window.pageYOffset;
+ return {x: x, y: y};
+ };
+}
diff --git a/tmpl/head.html b/tmpl/head.html
deleted file mode 100644
index 7cb3dee..0000000
--- a/tmpl/head.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
- {{ .Site.Params.name | default "MEP MEP"}}
-
-
diff --git a/tmpl/index.html b/tmpl/index.html
index c1c2f41..ea2ddc4 100644
--- a/tmpl/index.html
+++ b/tmpl/index.html
@@ -5,7 +5,9 @@
{{range .Pics}}
-
+
+
+