From 6a498c45332aad573d2a311dbcac9fabd8919378 Mon Sep 17 00:00:00 2001 From: thinkpadmaster Date: Sat, 10 Feb 2024 10:30:15 -0500 Subject: Restyle and restructure --- handle.go | 36 ----------------- html/main/about.tmpl.html | 28 +++++++------ html/main/index.tmpl.html | 26 ++++++++---- html/master.tmpl.html | 1 - main.go | 2 - static/style.css | 101 ++++++++++++++++++++++++++++++++++++++-------- 6 files changed, 118 insertions(+), 76 deletions(-) diff --git a/handle.go b/handle.go index bab3c70..7414665 100644 --- a/handle.go +++ b/handle.go @@ -27,48 +27,12 @@ func (app *application) home(w http.ResponseWriter, r *http.Request) { } } -func (app *application) about(w http.ResponseWriter, r *http.Request) { - w.Header().Set("Content-Type", "text/html; charset=utf-8") - - path := strings.Split(r.URL.Path, "/") - pathLen := len(path) - - if pathLen == 3 && path[2] == "" { - http.Redirect(w, r, "/about", http.StatusFound) - return - } else if pathLen == 3 && path[2] != "" || pathLen > 3 { - app.notFound(w) - return - } - err := renderTemplate(w, "main/about", nil) - if err != nil { - app.serverError(w, err) - return - } -} - -func (app *application) aggregate(w http.ResponseWriter, r *http.Request) { - w.Header().Set("Content-Type", "text/html; charset=utf-8") - - p, err := app.loadPosts("html"+strings.TrimSuffix(r.URL.Path, "/"), -1) - if err != nil { - app.notFound(w) - } - - renderTemplate(w, "main/"+strings.TrimPrefix(strings.TrimSuffix(r.URL.Path, "/"), "/"), p) -} - func (app *application) post(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "text/html; charset=utf-8") path := strings.Split(r.URL.Path, "/") if len(path) > 4 { app.notFound(w) - } else if r.URL.Path == "/projects" { - app.aggregate(w, r) - } else if path[2] == "" { - http.Redirect(w, r, "/"+path[1], http.StatusFound) - return } else if len(path) == 4 && path[3] == "" { http.Redirect(w, r, "/"+path[1]+"/"+path[2], http.StatusFound) } else { diff --git a/html/main/about.tmpl.html b/html/main/about.tmpl.html index c5b2d4e..1ea7e99 100644 --- a/html/main/about.tmpl.html +++ b/html/main/about.tmpl.html @@ -4,18 +4,20 @@ {{ define "canonical" }}/about{{end}} {{ define "main" }} -

About

-
-
- Highschool senior photo portrait of Alex next to Yerkes Observatory. -

My name is Alex Scerba, a Junior in the College for Creative Studies: Transportation Design program in Detroit, MI.

-

Growing up in Lake Geneva, WI, I developed a passion for making and tinkering, which lead me down the path of industrial design. I love working with my hands, fixing up and riding motorcycles and cars, and learning new skills.

-

In addition to sketching, rendering, and modeling, my hobby skills include programming (this website), bookbinding, and woodworking.

-
"It's just a machine. Open it up and see what's wrong."
-

This summer, I hope to secure an internship to learn more skills in the design and manufacturing industry.

-

Connect with me on LinkedIn: linkedin.com/in/ascerba

-

Contact me at me@alexscerba.com

-

View my résumé +

+

About

+ Highschool senior photo portrait of Alex next to Yerkes Observatory. +
+
+

My name is Alex Scerba, a Junior in the College for Creative Studies: Transportation Design program in Detroit, MI.

+

Growing up in Lake Geneva, WI, I developed a passion for making and tinkering, which lead me down the path of industrial design. I love working with my hands, fixing up and riding motorcycles and cars, and learning new skills.

+

In addition to sketching, rendering, and modeling, my hobby skills include programming (this website), bookbinding, and woodworking.

+
"It's just a machine. Open it up and see what's wrong."
+

This summer, I hope to secure an internship to learn more skills in the design and manufacturing industry.

+

Connect with me on LinkedIn: linkedin.com/in/ascerba

+

Contact me at me@alexscerba.com

+

View my résumé +

-
+ {{ end }} \ No newline at end of file diff --git a/html/main/index.tmpl.html b/html/main/index.tmpl.html index 9abcd59..561fcdf 100644 --- a/html/main/index.tmpl.html +++ b/html/main/index.tmpl.html @@ -4,14 +4,26 @@ {{ define "main" }}

Design Projects

-
+
+
+ Highschool senior photo portrait of Alex next to Yerkes Observatory. +
+

My name is Alex Scerba, a Junior in the College for Creative Studies: Transportation Design program in Detroit, MI.

+

Growing up in Lake Geneva, WI, I developed a passion for making and tinkering, which lead me down the path of industrial design. I love working with my hands, fixing up and riding motorcycles and cars, and learning new skills.

+

In addition to sketching, rendering, and modeling, my hobby skills include programming (this website), bookbinding, and woodworking.

+

This summer, I hope to secure an internship to learn more skills in the design and manufacturing industry.

+

Connect with me on LinkedIn:
linkedin.com/in/ascerba

+

Contact me at me@alexscerba.com

+

View my résumé +

+
+
{{ range .Posts.Contents }} - -
+ {{ .Image }} -
-

{{ .Title }}

- + {{ .Title }} + {{ end }} -
+ + {{ end }} \ No newline at end of file diff --git a/html/master.tmpl.html b/html/master.tmpl.html index 4132222..8cd9e87 100644 --- a/html/master.tmpl.html +++ b/html/master.tmpl.html @@ -23,7 +23,6 @@
diff --git a/main.go b/main.go index 0cc9284..8bfb33d 100644 --- a/main.go +++ b/main.go @@ -60,8 +60,6 @@ func main() { mux.HandleFunc("/projects", app.post) mux.HandleFunc("/projects/", app.post) - mux.HandleFunc("/about", app.about) - mux.HandleFunc("/about/", app.about) mux.HandleFunc("/", app.home) if *addr == ":443" { diff --git a/static/style.css b/static/style.css index 3809d9f..4db06f7 100644 --- a/static/style.css +++ b/static/style.css @@ -48,7 +48,7 @@ body { main { padding: 1rem; - padding-top: 4rem; + padding-top: 7rem; padding-bottom: 3rem; max-width: 85rem; margin-left: auto; @@ -62,6 +62,7 @@ header { align-items: center; padding: 1rem; background-color: white; + border-bottom: 0.1rem solid black; } .logo-w-name { @@ -82,11 +83,12 @@ header { } h1 { + display: none; font-size: 2.5rem; - color: rgb(190, 190, 190); - padding-left: 1rem; - border-left: 1rem solid rgb(59, 195, 219); - border-bottom: .12rem solid rgb(196, 196, 196); + color: rgb(143, 143, 143); + /* padding-left: 1rem; */ + /* border-left: 1rem solid rgb(59, 195, 219); */ + /* border-bottom: .12rem solid rgb(196, 196, 196); */ } b { @@ -116,32 +118,65 @@ b { .even-2-col-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: 1rem; } -img { - max-width: 100%; +.uneven-column { + display: flex; + gap: 4rem; } -.img-zoom { - overflow: hidden; +.uneven-column-grid { + display: grid; + gap: 3rem; + grid-template-columns: 25rem 1fr; } -.img-zoom img { +.side-info { + min-width: 20rem; + max-width: 30%; + /*background-color: rgb(240,240,240);*/ +} + +img { + max-width: 100%; + height: auto; + vertical-align: middle; + font-style: italic; + shape-margin: 1rem; +} + +.thumbnail img { width: fit-content; - aspect-ratio: 16/9; + aspect-ratio: 4/3; object-fit: cover; display: block; position: relative; z-index: -1; +} + +.thumbnail { + position: relative; +} - filter: grayscale(1); - transition: all .3s ease-in-out; +.title { + z-index: -1; + opacity: 0; + display: block; + position: absolute; + top: 0; + left: 0; + padding: 8rem 1rem; + text-align: center; + font-weight: bold; + color: white; + background-color: rgba(27, 27, 27, 0.726); + min-width: 100%; + min-height: 100%; + transition: all 0.3s ease-in-out; } -.thumbnail:hover img { - filter: grayscale(0); - transform: scale(1.05); +.thumbnail:hover .title { + opacity: 100%; } a { @@ -199,6 +234,34 @@ blockquote { display: none; } +.back-button { + background-color: orange; +} + +@media screen and (max-width: 82rem) { + main { + margin-left: 5rem; + margin-right: 5rem; + } + .uneven-column { + flex-direction: column-reverse; + } + .side-info { + max-width: 100%; + } + .side-info img { + display: block; + margin: auto; + } +} + +@media screen and (max-width: 70rem) { + main { + margin-left: 1rem; + margin-right: 1rem; + } +} + @media screen and (min-width: 45rem) { address { display: flex; @@ -206,6 +269,10 @@ blockquote { } @media screen and (max-width: 45rem) { + main { + margin-left: 0.5rem; + margin-right: 0.5rem; + } nav { display: none; } -- cgit v1.2.3