A bit more responsive
This commit is contained in:
Toerd@480
parent
c7fafdb4cc
commit
8ed171a311
20
exhibit.go
20
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) {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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}}
|
||||
|
||||
15
tmpl/layouts/index.html
Normal file
15
tmpl/layouts/index.html
Normal file
@ -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>
|
||||
3
tmpl/soon.html
Normal file
3
tmpl/soon.html
Normal file
@ -0,0 +1,3 @@
|
||||
{{define "body"}}
|
||||
<h1 class="coming-soon">❤ COMING SOON ❤</h1>
|
||||
{{end}}
|
||||
Loading…
x
Reference in New Issue
Block a user