From 6115aaceb87ce23c42ef884b13eb0fe152b000f4 Mon Sep 17 00:00:00 2001 From: thinkpadmaster Date: Wed, 8 Nov 2023 18:08:16 -0500 Subject: Full visual overhaul --- html/main/about.tmpl.html | 6 +- html/main/index.tmpl.html | 25 +--- html/master.tmpl.html | 48 ++++--- static/logo.svg | 13 ++ static/oldStyle.css | 348 ---------------------------------------------- static/style-revised.css | 277 ++++++++++++++++++++++++++++++++++++ 6 files changed, 327 insertions(+), 390 deletions(-) create mode 100644 static/logo.svg delete mode 100644 static/oldStyle.css create mode 100644 static/style-revised.css diff --git a/html/main/about.tmpl.html b/html/main/about.tmpl.html index ec88c22..afb6fcd 100644 --- a/html/main/about.tmpl.html +++ b/html/main/about.tmpl.html @@ -7,11 +7,7 @@

About

Me and This Website

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

My name is Alex Scerba, and I am a design student at the College for Creative Studies in Detroit, MI.

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

This phrase is mostly what my life revolves around. Tinkering, making, repairing, and improving the world through these outlets is what I strive to do in my lifetime.

diff --git a/html/main/index.tmpl.html b/html/main/index.tmpl.html index 6760fae..55acf81 100644 --- a/html/main/index.tmpl.html +++ b/html/main/index.tmpl.html @@ -3,24 +3,13 @@ {{ define "keywords" }}home{{end}} {{ define "main" }} -

alexscerba.com

My place to:

showcase design projects.
post life updates.
bulid web-development skills.

Latest Design Projects

Design Projects

{{ range .Posts.Contents }} -

- - {{ .Image }} -

- - + + {{ .Image }} +

+ {{ end }} -

{{ end }} \ No newline at end of file diff --git a/html/master.tmpl.html b/html/master.tmpl.html index 145d299..d107826 100644 --- a/html/master.tmpl.html +++ b/html/master.tmpl.html @@ -1,36 +1,46 @@ - - - + + + {{block "title" .}}Page{{end}} - Alex Scerba - - + - - - - -

- +

+ Alex Scerba +

+ +

-{{ template "main" . }} + {{ template "main" . }}

- - + + + \ No newline at end of file diff --git a/static/logo.svg b/static/logo.svg new file mode 100644 index 0000000..c513188 --- /dev/null +++ b/static/logo.svg @@ -0,0 +1,13 @@ + + \ No newline at end of file diff --git a/static/oldStyle.css b/static/oldStyle.css deleted file mode 100644 index 73a4838..0000000 --- a/static/oldStyle.css +++ /dev/null @@ -1,348 +0,0 @@ -/*@import url('https://fonts.googleapis.com/css?family=Roboto');*/ - - -/* Standard elements */ -* { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -/* Header */ - -header { - padding: 30px; - text-align: center; - background: rgba(0,0,0,0.1); -} - -.header.sticky { - padding-bottom: 99px; -} - -#name { - font-weight: bold; - font-size: 250%; -} - -/* Navigation */ - -.nav.sticky { - display: inline-block; - position: fixed; - min-width: 100%; - top: 0; - left: 0; -} - -.action { - margin: 0; - padding: 0; - background-color: #333; -} - -.action ul { - display: flex; - justify-content: space-around; - list-style: none; - margin: 0; - padding: 0; -} - -.action ul li a { - margin: 0; - padding: 20px; - color: white; - text-decoration: none; - display: inline-block; -} - -.action ul li { - margin: 5px; - border-radius: 15px; -} - -.action ul li:hover { - background-color: #ddd; -} - -.action ul li a:hover { - color: #333; -} - -.action span { - display: none; -} - -#side-navigation { - padding: 20px; - flex: 25%; -} - -#side-nav-scroll-box { - margin: 10px 0; - padding: 5px; - border: 2px #333 solid; - border-radius: 6px; - background-color: rgba(0,0,0,0.1); -} - -::-webkit-scrollbar-track { - background: rgba(0,0,0,0.1); -} - -#outline-navigation { - max-height: 50vh; - overflow: auto; - margin: 0; - padding: 0 0 0 25px; -} - -#outline-navigation li { - margin: 10px; -} - -/* Main content containers */ - -#root-article { - flex: 75%; -} - -#main-wo-aside { - padding: 20px 20%; -} - -#main-w-aside { - display: flex; - flex-wrap: wrap; - padding: 20px 0; - padding-right: 20%; -} - -/* Body and standard tags */ - -body { - /*font-family: 'Roboto', sans-serif; - font-size: 100%;*/ - font-family: Arial, Helvetica, sans-serif; - margin: 0px; -} - -main h1 { - text-align: center; -} - -/* main h1, h2, h3, h4, h5, h6 { - font-family: 'Arial'; -} */ - -main p { - text-align: justify; -} - -main p a { - text-decoration: underline; -} - -main a { - color: black; - text-decoration: none; -} - -main ul { - padding-left: 20px; -} - -main img { - border-radius: 6px; - max-width: 100%; -} - -main figure { - margin: auto; - /*margin: 10px;*/ - border: 2px #333 solid; - border-radius: 6px; - padding: 20px 20px 5px 20px; - max-width: 50%; -} - -blockquote { - font-style: italic; -} - -/* Special classes */ - -.head-bar { - border: 2px black solid; -} - -.framed-article { - margin: 25px; - padding: 5px 25px; - border: 2px #333 solid; - border-radius: 6px; - max-width: 100%; -} - -.framed-article-half { - flex: 50%; - padding: 5px 25px; - border: 2px #333 solid; - border-radius: 6px; - max-width: 100%; -} - -.tile { - display: flex; - flex-wrap: wrap; - padding: 25px; -} - -.tile article { - flex: 40%; - max-width: auto; - padding: 0px 15px 0px 15px; - border: 2px gray solid; - border-radius: 6px; - margin: 5px; -} - -.tile figure { - flex: 40%; - max-width: auto; - padding: 15px; - border: 2px gray solid; - border-radius: 6px; - margin: 5px; -} - -/* Footer */ - -footer { - margin: 0; - padding: 5px; - text-align: center; - color: white; - background-color: #333; -} - -footer a { - color: rgb(189, 212, 255); - padding: 0; -} - -/* Figure resize at 1500px */ - -@media screen and -(max-width: 1500px) { - figure { - max-width: 60%; - } - .tile figure { - max-width: auto; - } -} - -/* Flex side nav to top of screen and resize figure */ - -@media screen and -(max-width: 1200px) { - header, #main-w-aside{ - flex-direction: column; - } - #main-w-aside, #main-wo-aside { - padding-left: 10%; - padding-right: 10%; - } - figure { - max-width: 70%; - } - .tile figure { - max-width: auto; - } -} - -/* Mobile View */ - -@media only screen -and (max-width: 510px) { - main figure { - max-width: 100%; - } - .tile { - flex-direction: column; - } - .tile article { - max-width: 100%; - } - .tile figure { - max-width: 100%; - } - #side-navigation { - padding: 20px 10%; - } - - main a { - text-decoration: none; - } - - .action { - position: fixed; - bottom: 25px; - left: 25px; - width: 50px; - height: 50px; - cursor: pointer; - background: #333; - border-radius: 50%; - box-shadow: 0 5px 5px rgba(0,0,0,0.1); - } - .action span { - position: relative; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - color: white; - font-size: 2em; - transition: 0.3s ease-in-out - } - .action.active span { - transform: rotate(135deg); - } - .action ul { - position: absolute; - bottom: 25px; - background: #333; - min-width: 150px; - padding: 0; - border-radius: 20px; - opacity: 0; - display: inline; - visibility: hidden; - transition: 0.3s; - } - .action.active ul { - bottom: 70px; - opacity: 1; - visibility: visible; - transition: 0.3s; - } - .action ul li { - list-style: none; - display: flex; - justify-content: center; - align-items: center; - border-radius: 15px; - padding: 0; - margin: 5px; - } - - #outline-navigation { - max-height: 25vh; - } -} \ No newline at end of file diff --git a/static/style-revised.css b/static/style-revised.css new file mode 100644 index 0000000..34d3971 --- /dev/null +++ b/static/style-revised.css @@ -0,0 +1,277 @@ +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_regular_macroman/DejaVuSans-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_bold_macroman/DejaVuSans-Bold-webfont.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_oblique_macroman/DejaVuSans-Oblique-webfont.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_boldoblique_macroman/DejaVuSans-BoldOblique-webfont.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'DejaVu Sans'; + src: url('/static/fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_extralight_macroman/DejaVuSans-ExtraLight-webfont.woff') format('woff'); + font-weight: lighter; + font-style: normal; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: 'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; +} + +main { + padding: 1rem; + padding-top: 9.25rem; + max-width: 85rem; + margin-left: auto; + margin-right: auto; +} + +header { + position: fixed; + width: 100%; + display: flex; + align-items: center; + padding: 1rem; + background-color: white; +} + +.logo-w-name { + display: flex; +} + +.logo { + padding: .75rem; + height: 6.25rem; +} + +.name { + font-size: 3rem; + margin: auto 1rem; +} + +.main-nav-position { + display: flex; + justify-content: right; + flex-grow: 1; + padding-right: 2rem; + border-right: .5rem solid rgb(196, 196, 196); +} + +.main-nav { + display: flex; + gap: 2rem; + padding-top: .5rem; + padding-bottom: .5rem; +} + +.toggler, .hamburger { + display: none; +} + +.even-2-col-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +img { + max-width: 100%; +} + +.thumbnail img { + width: fit-content; + aspect-ratio: 16/9; + object-fit: cover; +} + +a { + text-decoration: none; + color: black; +} + +.footer-logo { + filter: invert(100%); + width: 2.75rem; + margin-left: .75rem; +} + +footer { + display: flex; + background-color: black; + padding: 1rem; + gap: 1rem; + align-items: center; +} + +address { + padding-left: 1rem; + display: flex; + gap: 2rem; +} + +footer * { + color: white; +} + +@media screen and (max-width: 45rem) { + nav { + display: none; + } + + header { + width: 100%; + } + + .even-2-col-grid { + grid-template-columns: 1fr; + } + + .toggler{ + /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING : */ + visibility: visible; + display: block; + z-index: 4; + height: 60px; + width: 60px; + position: fixed; + top: 2.5rem; + right: 1rem; + cursor: pointer; + opacity: 0; + margin: 0; + } + + .hamburger{ + z-index: 3; + position: fixed; + top: 2.5rem; + right: 1rem; + height: 60px; + width: 60px; + padding: 5px; + /*border-bottom-left-radius: 8px; + background-color: var(--dark-transparent);*/ + + /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */ + + display: flex; + align-items: center; + justify-content: center; + } + + /* CREATING THE MIDDLE LINE OF THE HAMBURGER : */ + + .hamburger > div{ + position: relative; + top: 0; + right: 0; + background: black; + height: 2px; + width: 60%; + transition: all 0.4s ease; + } + + /* CREATING THE TOP AND BOTTOM LINES : + TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */ + + .hamburger > div::before, + .hamburger > div::after{ + content: ''; + position: absolute; + top: -10px; + background: black; + width: 100%; + height: 2px; + transition: all 0.4s ease; + } + + .hamburger > div::after{ + top: 10px; + } + + /* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE : */ + + .toggler:checked + .hamburger > div{ + background: rgba(0,0,0,0); /*Not bothering with var because one-off*/ + } + + .toggler:checked + .hamburger > div::before{ + top: 0; + transform: rotate(-45deg); + } + + /* AND ROTATING THE TOP AND BOTTOM LINES : */ + + .toggler:checked + .hamburger > div::after{ + top: 0; + transform: rotate(45deg); + } + + /* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT : */ + + .main-nav { + + /* APPLYING TRANSITION TO THE MENU : */ + + display: flex; + flex-direction: column; + position: fixed; + top: 0; + right: 0; + z-index: 2; + background-color: white; + padding: 8rem 1rem 1rem 1rem; + + /* HIDDEN INITIALLY : */ + + visibility: hidden; + } + + .main-nav > a { + margin-top: 15px; + margin-bottom: 15px; + font-size: 34px; + } + + /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT : */ + + .toggler:checked ~ .main-nav{ + visibility: visible; + animation: fadeIn 0.8s ease; + } + .toggler:checked ~ .bg-nav-block { + visibility: visible; + animation: fadeIn 0.8s ease; + } + .toggler:checked ~ .hamburger { + background-color: #00000000; + } + } \ No newline at end of file -- cgit v1.2.3