From 6115aaceb87ce23c42ef884b13eb0fe152b000f4 Mon Sep 17 00:00:00 2001
From: thinkpadmaster <a.scerba02@gmail.com>
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 @@
<h1>About</h1>
<section class="postBackground">
<div class="postContent">
- <h2>Me and This Website</h2>
- <figure>
- <img src="/static/media/alex_profile_512.jpg" alt="Highschool senior photo portrait of Alex next to Yerkes Observatory.">
- <figcaption>Highschool senior photo.</figcaption>
- </figure>
+ <img src="/static/media/alex_profile_512.jpg" alt="Highschool senior photo portrait of Alex next to Yerkes Observatory.">
<p>My name is Alex Scerba, and I am a design student at the College for Creative Studies in Detroit, MI.</p>
<blockquote>"It's just a machine. Open it up and see what's wrong."</blockquote>
<p>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.</p>
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" }}
- <h1 style="animation: 1s ease-out 0s 1 fadeIn">alexscerba.com</h1>
- <div class="frontpage-subtitle" style="animation: 1s ease-out 0s 1 fadeIn">
- <div class="subtitle-text">
- <p>My place to:</p>
- <p><strong>showcase design projects.<br>post life updates.<br>bulid web-development skills.</strong></p>
- </div>
- </div>
- <section class="bottom">
- <h2>Latest Design Projects</h2>
- <div class="posts">
+ <h1>Design Projects</h1>
+ <section class="projects even-2-col-grid">
{{ range .Posts.Contents }}
- <figure class="thumbnail">
- <a href="/projects/{{ .FileName }}">
- {{ .Image }}
- <figcaption>{{ .Title }}</figcaption>
- </a>
- </figure>
+ <a href="/projects/{{ .FileName }}" class="thumbnail">
+ {{ .Image }}
+ <p>{{ .Title }}</p>
+ </a>
{{ end }}
- </div>
- </section>
+ </section>
{{ 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 @@
<!DOCTYPE html>
<html lang="en-US">
-
<head>
-
- <meta charset="utf-8" />
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Alexander Rees Scerba" />
<title>{{block "title" .}}Page{{end}} - Alex Scerba</title>
<meta name="description" content="{{block "description" .}}Alex's personal site{{end}}" />
<meta name="keywords" content="{{block "keywords" .}}personal site{{end}}">
<link rel="canonical" href="https://www.alexscerba.com{{block "canonical" .}}{{end}}">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="stylesheet" href="/static/style.css" />
+ <link rel="stylesheet" href="/static/style-revised.css" />
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
-
</head>
-
<body>
-
- <input type="checkbox" class="toggler">
- <div class="hamburger"><div></div></div>
- <nav aria-labelledby="global-navigation" class="menu">
- <a href="/">Home</a>
- <a href="/projects">Projects</a>
- <a href="/blog">Blog</a>
- <a href="/about">About</a>
- </nav>
+ <header>
+ <div class="logo-w-name">
+ <img src="/static/logo.svg" alt="Logo" class="logo"/>
+ <span class="name">Alex Scerba</span>
+ </div>
+ <div class="main-nav-position">
+ <input type="checkbox" class="toggler">
+ <div class="hamburger"><div></div></div>
+ <nav aria-labelledby="global-navigation" class="main-nav">
+ <a href="/">Projects</a>
+ <a href="/static/Documents/Resume_Scerba_Fall2023.pdf">Résumé</a>
+ <a href="/about">About</a>
+ </nav>
+ </div>
+ </header>
<main>
-{{ template "main" . }}
+ {{ template "main" . }}
</main>
- </body>
-</html>
+ <footer>
+ <img src="/static/logo.svg" alt="Logo" class="footer-logo"/>
+ <address>
+ <p>Contact: <a href="mailto:alex@alexscerba.com">alex@alexscerba.com</a></p>
+ <p>LinkedIn: <a href="https://linkedin.com/in/ascerba">linkedin.com/in/ascerba</a></p></p>
+ </address>
+ </footer>
+ </body>
+</html>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300.98 333.79">
+ <defs>
+ <style>
+ .cls-1 {
+ stroke-width: 0px;
+ }
+ </style>
+ </defs>
+ <g id="Layer_1-2" data-name="Layer 1">
+ <path class="cls-1" d="m246.34,193.56c-3.55-3.51-3.57-9.24-.06-12.78l33.44-33.74-43.76-43.38-76.74,77.42,44.09,43.71c4.69,4.65,4.73,12.23.07,16.92l-21.04,21.22-8.5-8.42,15.45-15.58c3.09-3.11,3.06-8.14-.05-11.23l-38.46-38.12-11.33-11.23h-.01s-64.65-64.06-64.65-64.06c-2.46-2.43-2.47-6.4-.04-8.85l31.97-32.26c2.43-2.46,6.4-2.47,8.85-.04l64.65,64.08,44.38-44.78L141.62,10.15c-13.74-13.62-35.93-13.53-49.55.22L10.15,93.01c-13.62,13.74-13.53,35.93.22,49.55l188.55,186.89c5.86,5.81,15.33,5.77,21.14-.09l80.92-81.63-54.64-54.16Z"/>
+ </g>
+</svg>
\ 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