diff options
| -rw-r--r-- | README.md | 34 | ||||
| -rw-r--r-- | about.html | 114 | ||||
| -rw-r--r-- | blog.html | 114 | ||||
| -rw-r--r-- | faq.html | 110 | ||||
| -rw-r--r-- | index.html | 98 | ||||
| -rw-r--r-- | static/style.css | 726 | ||||
| -rw-r--r-- | wip.html | 98 |
7 files changed, 647 insertions, 647 deletions
@@ -1,18 +1,18 @@ -# Scerba.org - -This is my personal website that takes the place of [alexscerba.org](https://alexscerba.org) (which is now my design portfolio) as my life update and social page. - -## Structure - -* Index: homepage with brief intro to the purpose, look, and feel of the site. -* Blog: collection of personal stories, thoughts, and projects. -* Gallery: curated collection of images on the site. -* About: longer form intro story about myself -* FAQ: specifics about the site - -## Dev Checklist - -[x] Initial stage: Static page set, no gallery page. -[] Templates and dynamic site: Basic Go webserver akin to what's used on [alexscerba.com](https://alexscerba.com). -[] Advanced tagging system: Integrate lessons learned from [acsq.me](https://acsq.me). +# Scerba.org
+
+This is my personal website that takes the place of [alexscerba.org](https://alexscerba.org) (which is now my design portfolio) as my life update and social page.
+
+## Structure
+
+* Index: homepage with brief intro to the purpose, look, and feel of the site.
+* Blog: collection of personal stories, thoughts, and projects.
+* Gallery: curated collection of images on the site.
+* About: longer form intro story about myself
+* FAQ: specifics about the site
+
+## Dev Checklist
+
+[x] Initial stage: Static page set, no gallery page.
+[] Templates and dynamic site: Basic Go webserver akin to what's used on [alexscerba.com](https://alexscerba.com).
+[] Advanced tagging system: Integrate lessons learned from [acsq.me](https://acsq.me).
[] Image scraping and gallery: Scrape and agregate all images from the site into a lazy-loading image gallery.
\ No newline at end of file @@ -1,57 +1,57 @@ -<!DOCTYPE html> -<html lang="en-US"> - <head> - <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>About - Scerba.org</title> - <meta name="description" content="About" /> - <meta name="keywords" content="about"> - <link rel="canonical" href="https://www.scerba.org/about.html"> - <link rel="stylesheet" href="./static/style.css" /> - <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" /> - </head> - <body> - <header> - <a href="/" class="logo-w-name"> - <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>--> - <span class="name">Alex Scerba</span> - </a> - <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="./index.html">Home</a> - <a href="./blog.html">Blog</a> - <a href="./wip.html">Gallery</a> - <a href="./about.html">About</a> - <a href="./faq.html">FAQ</a> - </nav> - </div> - </header> - - <main> - <section> - <h1>About</h1> - <h2>TL; DR - An Intro</h2> - <p>My name is Alex Scerba, and I am an undergrad design student at the College for Creative Studies (CCS) in Detroit, MI. I enjoy drawing, web development, bicycles, motorcycles, and just overall messing around/tinkering with products and objects.</p> - <p>I use this site to practice graphic design and web development as well as share what I'm doing with friends, family, and whoever else is interested.</p> - <img src="./static/media/alex_profile_512.jpg" alt="Black and white portrait of Alex." style="display: block; margin-left: auto; margin-right: auto;"/> - <h2>Long Story Long</h2> - <h3>Higher Education Journey</h3> - <p>Initially on track to be a software developer or computer scientist, I spent most of high school learning about computers and programming. My first year of school was at the Milwaukee Schoool of Engineering (MSOE) for a degree in computer science in 2020-2021, the first full school year durring the pandemic. Not a great year for school. By the end, I decided that a CS degree wasn't for me. I didn't want to work at a software dev company, and some of the advanced math didn't get me excited.</p> - <p>When I was in elementary school, I would doodle and draw pretty decently, but never did anything with it. Throughout my first year of college, though, I made it a point to try and fill a sketchbook with drawings, so when I decided to leave MSOE it was a guiding factor in choosing where I wanted to go next.</p> - <p>Growing up around motorcycles and cars, and finding enjoyment in working on and fixing them, I looked for a career path that merged vehichles and drawing, and that's how I discovered the Transportation Design department at CCS.</p> - </section> - </main> - - <footer> - <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> --> - <address> - <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p> - <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p> - </address> - </footer> - </body> -</html> +<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <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>About - Scerba.org</title>
+ <meta name="description" content="About" />
+ <meta name="keywords" content="about">
+ <link rel="canonical" href="https://www.scerba.org/about.html">
+ <link rel="stylesheet" href="./static/style.css" />
+ <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" />
+ </head>
+ <body>
+ <header>
+ <a href="/" class="logo-w-name">
+ <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>-->
+ <span class="name">Alex Scerba</span>
+ </a>
+ <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="./index.html">Home</a>
+ <a href="./blog.html">Blog</a>
+ <a href="./wip.html">Gallery</a>
+ <a href="./about.html">About</a>
+ <a href="./faq.html">FAQ</a>
+ </nav>
+ </div>
+ </header>
+
+ <main>
+ <section>
+ <h1>About</h1>
+ <h2>TL; DR - An Intro</h2>
+ <p>My name is Alex Scerba, and I am an undergrad design student at the College for Creative Studies (CCS) in Detroit, MI. I enjoy drawing, web development, bicycles, motorcycles, and just overall messing around/tinkering with products and objects.</p>
+ <p>I use this site to practice graphic design and web development as well as share what I'm doing with friends, family, and whoever else is interested.</p>
+ <img src="./static/media/alex_profile_512.jpg" alt="Black and white portrait of Alex." style="display: block; margin-left: auto; margin-right: auto;"/>
+ <h2>Long Story Long</h2>
+ <h3>Higher Education Journey</h3>
+ <p>Initially on track to be a software developer or computer scientist, I spent most of high school learning about computers and programming. My first year of school was at the Milwaukee Schoool of Engineering (MSOE) for a degree in computer science in 2020-2021, the first full school year durring the pandemic. Not a great year for school. By the end, I decided that a CS degree wasn't for me. I didn't want to work at a software dev company, and some of the advanced math didn't get me excited.</p>
+ <p>When I was in elementary school, I would doodle and draw pretty decently, but never did anything with it. Throughout my first year of college, though, I made it a point to try and fill a sketchbook with drawings, so when I decided to leave MSOE it was a guiding factor in choosing where I wanted to go next.</p>
+ <p>Growing up around motorcycles and cars, and finding enjoyment in working on and fixing them, I looked for a career path that merged vehichles and drawing, and that's how I discovered the Transportation Design department at CCS.</p>
+ </section>
+ </main>
+
+ <footer>
+ <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> -->
+ <address>
+ <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p>
+ <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p>
+ </address>
+ </footer>
+ </body>
+</html>
@@ -1,57 +1,57 @@ -<!DOCTYPE html> -<html lang="en-US"> - <head> - <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>Blog - Scerba.org</title> - <meta name="description" content="Blog" /> - <meta name="keywords" content="blog"> - <link rel="canonical" href="https://www.scerba.org/blog.html"> - <link rel="stylesheet" href="./static/style.css" /> - <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" /> - </head> - <body> - <header> - <a href="/" class="logo-w-name"> - <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>--> - <span class="name">Alex Scerba</span> - </a> - <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="./index.html">Home</a> - <a href="./blog.html">Blog</a> - <a href="./wip.html">Gallery</a> - <a href="./about.html">About</a> - <a href="./faq.html">FAQ</a> - </nav> - </div> - </header> - - <main> - <section> - <h1>Blog</h1> - <p>A collection of thoughts, life updates, projects, and images in chronological order.</p> - <hr /> - <h2>First Post</h2> - <p>New year, new site. Looking forward to working on it.</p> - <img src="./static/media/bike-doodles.jpg" alt="Two pen doodles of adventure-style motorcycles." style="display: block; margin: 3rem auto;" /> - <p>Some motorcycle doodles.</p> - <p><b>Created:</b> 2024-01-09</p> - <hr /> - <h2 class="end">End</h2> - </section> - </main> - - <footer> - <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> --> - <address> - <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p> - <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p> - </address> - </footer> - </body> -</html> +<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <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>Blog - Scerba.org</title>
+ <meta name="description" content="Blog" />
+ <meta name="keywords" content="blog">
+ <link rel="canonical" href="https://www.scerba.org/blog.html">
+ <link rel="stylesheet" href="./static/style.css" />
+ <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" />
+ </head>
+ <body>
+ <header>
+ <a href="/" class="logo-w-name">
+ <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>-->
+ <span class="name">Alex Scerba</span>
+ </a>
+ <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="./index.html">Home</a>
+ <a href="./blog.html">Blog</a>
+ <a href="./wip.html">Gallery</a>
+ <a href="./about.html">About</a>
+ <a href="./faq.html">FAQ</a>
+ </nav>
+ </div>
+ </header>
+
+ <main>
+ <section>
+ <h1>Blog</h1>
+ <p>A collection of thoughts, life updates, projects, and images in chronological order.</p>
+ <hr />
+ <h2>First Post</h2>
+ <p>New year, new site. Looking forward to working on it.</p>
+ <img src="./static/media/bike-doodles.jpg" alt="Two pen doodles of adventure-style motorcycles." style="display: block; margin: 3rem auto;" />
+ <p>Some motorcycle doodles.</p>
+ <p><b>Created:</b> 2024-01-09</p>
+ <hr />
+ <h2 class="end">End</h2>
+ </section>
+ </main>
+
+ <footer>
+ <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> -->
+ <address>
+ <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p>
+ <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p>
+ </address>
+ </footer>
+ </body>
+</html>
@@ -1,55 +1,55 @@ -<!DOCTYPE html> -<html lang="en-US"> - <head> - <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>FAQ - Scerba.org</title> - <meta name="description" content="FAQ" /> - <meta name="keywords" content="faq"> - <link rel="canonical" href="https://www.scerba.org/faq.html"> - <link rel="stylesheet" href="./static/style.css" /> - <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" /> - </head> - <body> - <header> - <a href="/" class="logo-w-name"> - <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>--> - <span class="name">Alex Scerba</span> - </a> - <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="./index.html">Home</a> - <a href="./blog.html">Blog</a> - <a href="./wip.html">Gallery</a> - <a href="./about.html">About</a> - <a href="./faq.html">FAQ</a> - </nav> - </div> - </header> - - <main> - <section> - <h1>FAQ</h1> - <p>General information about this website and other things to know.</p> - <h2>Purpose</h2> - <p>This site serves as my place to share my thoughts and experiences, akin to a social media page but a bit more personal.</p> - <h2>Web-Hosting</h2> - <p>I locally host this page and its cousin, <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a>, on an old Dell Latitude E6500 in my basement. Currently, it is a static site served through Nginx, but it will be moved to Go in the near future.</p> - <h2>TO-DO</h2> - <p>You can view the <a href="./README.md">README</a> for info on site plans.</p> - </section> - </main> - - <footer> - <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> --> - <address> - <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p> - <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p> - </address> - </footer> - </body> -</html> +<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <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>FAQ - Scerba.org</title>
+ <meta name="description" content="FAQ" />
+ <meta name="keywords" content="faq">
+ <link rel="canonical" href="https://www.scerba.org/faq.html">
+ <link rel="stylesheet" href="./static/style.css" />
+ <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" />
+ </head>
+ <body>
+ <header>
+ <a href="/" class="logo-w-name">
+ <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>-->
+ <span class="name">Alex Scerba</span>
+ </a>
+ <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="./index.html">Home</a>
+ <a href="./blog.html">Blog</a>
+ <a href="./wip.html">Gallery</a>
+ <a href="./about.html">About</a>
+ <a href="./faq.html">FAQ</a>
+ </nav>
+ </div>
+ </header>
+
+ <main>
+ <section>
+ <h1>FAQ</h1>
+ <p>General information about this website and other things to know.</p>
+ <h2>Purpose</h2>
+ <p>This site serves as my place to share my thoughts and experiences, akin to a social media page but a bit more personal.</p>
+ <h2>Web-Hosting</h2>
+ <p>I locally host this page and its cousin, <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a>, on an old Dell Latitude E6500 in my basement. Currently, it is a static site served through Nginx, but it will be moved to Go in the near future.</p>
+ <h2>TO-DO</h2>
+ <p>You can view the <a href="./README.md">README</a> for info on site plans.</p>
+ </section>
+ </main>
+
+ <footer>
+ <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> -->
+ <address>
+ <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p>
+ <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p>
+ </address>
+ </footer>
+ </body>
+</html>
@@ -1,49 +1,49 @@ -<!DOCTYPE html> -<html lang="en-US"> - <head> - <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>Home - Scerba.org</title> - <meta name="description" content="Homepage" /> - <meta name="keywords" content="home"> - <link rel="canonical" href="https://www.scerba.org/index.html"> - <link rel="stylesheet" href="./static/style.css" /> - <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" /> - </head> - <body> - <header> - <a href="/" class="logo-w-name"> - <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>--> - <span class="name">Alex Scerba</span> - </a> - <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="./index.html">Home</a> - <a href="./blog.html">Blog</a> - <a href="./wip.html">Gallery</a> - <a href="./about.html">About</a> - <a href="./faq.html">FAQ</a> - </nav> - </div> - </header> - - <main class="landing-page"> - <section class="landing-text"> - <h1>Scerba.org</h1> - <p class="subtext">Design, make, tinker.</p> - </section> - </main> - - <footer> - <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> --> - <address> - <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p> - <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p> - </address> - </footer> - </body> -</html> +<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <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>Home - Scerba.org</title>
+ <meta name="description" content="Homepage" />
+ <meta name="keywords" content="home">
+ <link rel="canonical" href="https://www.scerba.org/index.html">
+ <link rel="stylesheet" href="./static/style.css" />
+ <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" />
+ </head>
+ <body>
+ <header>
+ <a href="/" class="logo-w-name">
+ <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>-->
+ <span class="name">Alex Scerba</span>
+ </a>
+ <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="./index.html">Home</a>
+ <a href="./blog.html">Blog</a>
+ <a href="./wip.html">Gallery</a>
+ <a href="./about.html">About</a>
+ <a href="./faq.html">FAQ</a>
+ </nav>
+ </div>
+ </header>
+
+ <main class="landing-page">
+ <section class="landing-text">
+ <h1>Scerba.org</h1>
+ <p class="subtext">Design, make, tinker.</p>
+ </section>
+ </main>
+
+ <footer>
+ <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> -->
+ <address>
+ <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p>
+ <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p>
+ </address>
+ </footer>
+ </body>
+</html>
diff --git a/static/style.css b/static/style.css index 22047eb..89dcbe1 100644 --- a/static/style.css +++ b/static/style.css @@ -1,364 +1,364 @@ -@font-face { - font-family: 'DejaVu Sans'; - src: url('./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('./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('./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('./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('./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: 1.75rem; - padding-top: 5rem; - padding-bottom: 3rem; - 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-left: .75rem; - padding-right: .75rem; - height: 3rem; - filter: invert(70%) -} - -.name { - font-size: 2rem; - font-weight: bold; - margin: auto 1rem; - color: rgb(100, 100, 100) -} - -.landing-page { - padding: 0; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; -} - -h1 { - font-size: 5rem; - color: rgb(190, 190, 190); - margin: 0; -} - -.subtext { - margin: 0; - font-weight: bold; -} - -.end { - text-align: center; - opacity: 30%; - font-size: 2.5rem; -} - -hr { - margin-top: 2.5rem; -} - -b { - color:rgb(100, 100, 100); -} - -h2, h3, h4, h5, h6 { - margin-top: 2rem; - margin-bottom: 0.7rem; -} - -h3, h4, h5, h6 { - opacity: 50%; -} - -.main-nav-position { - display: flex; - justify-content: right; - flex-grow: 1; - padding-right: 2rem; -} - -.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 { - color: black; -} - -header a, .projects a { - text-decoration: none; -} - -.projects p { - margin-top: 0.2rem; - border-right: .5rem solid rgb(196, 196, 196); - border-top: .12rem solid rgb(196, 196, 196); -} - -.footer-logo { - filter: invert(100%); - height: 1rem; - margin-left: .75rem; -} - -footer { - background-color: black; - padding-left: 1rem; - padding-right: 1rem; -} - -address { - gap: 2rem; - font-size: .7rem; - display: flex; - justify-content: center; -} - -footer * { - color: white; -} - -blockquote { - font-style: italic; -} - -.sketchbook > img:first-of-type { - display: none; -} - -@media screen and (max-width: 45rem) { - .landing-text h1 { - font-size: 3rem; - } - nav { - display: none; - } - .footer-logo { - height: 1.5rem; - } - - 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: .75rem; - right: 1rem; - cursor: pointer; - opacity: 0; - margin: 0; - } - - .hamburger{ - z-index: 3; - position: fixed; - top: .75rem; - 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: 6rem 2rem 1rem 2rem; - align-items: center; - - /* 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; - } -} - -@media screen and (max-width: 27rem) { - .logo { - height: 10vw; - } - .name { - font-size: 6.5vw; - } - .address { - font-size: .5rem; - } - .toggler{ - top: .4rem; - } - .hamburger{ - top: .4rem; - } +@font-face {
+ font-family: 'DejaVu Sans';
+ src: url('./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('./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('./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('./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('./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: 1.75rem;
+ padding-top: 5rem;
+ padding-bottom: 3rem;
+ 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-left: .75rem;
+ padding-right: .75rem;
+ height: 3rem;
+ filter: invert(70%)
+}
+
+.name {
+ font-size: 2rem;
+ font-weight: bold;
+ margin: auto 1rem;
+ color: rgb(100, 100, 100)
+}
+
+.landing-page {
+ padding: 0;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+h1 {
+ font-size: 5rem;
+ color: rgb(190, 190, 190);
+ margin: 0;
+}
+
+.subtext {
+ margin: 0;
+ font-weight: bold;
+}
+
+.end {
+ text-align: center;
+ opacity: 30%;
+ font-size: 2.5rem;
+}
+
+hr {
+ margin-top: 2.5rem;
+}
+
+b {
+ color:rgb(100, 100, 100);
+}
+
+h2, h3, h4, h5, h6 {
+ margin-top: 2rem;
+ margin-bottom: 0.7rem;
+}
+
+h3, h4, h5, h6 {
+ opacity: 50%;
+}
+
+.main-nav-position {
+ display: flex;
+ justify-content: right;
+ flex-grow: 1;
+ padding-right: 2rem;
+}
+
+.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 {
+ color: black;
+}
+
+header a, .projects a {
+ text-decoration: none;
+}
+
+.projects p {
+ margin-top: 0.2rem;
+ border-right: .5rem solid rgb(196, 196, 196);
+ border-top: .12rem solid rgb(196, 196, 196);
+}
+
+.footer-logo {
+ filter: invert(100%);
+ height: 1rem;
+ margin-left: .75rem;
+}
+
+footer {
+ background-color: black;
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+address {
+ gap: 2rem;
+ font-size: .7rem;
+ display: flex;
+ justify-content: center;
+}
+
+footer * {
+ color: white;
+}
+
+blockquote {
+ font-style: italic;
+}
+
+.sketchbook > img:first-of-type {
+ display: none;
+}
+
+@media screen and (max-width: 45rem) {
+ .landing-text h1 {
+ font-size: 3rem;
+ }
+ nav {
+ display: none;
+ }
+ .footer-logo {
+ height: 1.5rem;
+ }
+
+ 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: .75rem;
+ right: 1rem;
+ cursor: pointer;
+ opacity: 0;
+ margin: 0;
+ }
+
+ .hamburger{
+ z-index: 3;
+ position: fixed;
+ top: .75rem;
+ 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: 6rem 2rem 1rem 2rem;
+ align-items: center;
+
+ /* 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;
+ }
+}
+
+@media screen and (max-width: 27rem) {
+ .logo {
+ height: 10vw;
+ }
+ .name {
+ font-size: 6.5vw;
+ }
+ .address {
+ font-size: .5rem;
+ }
+ .toggler{
+ top: .4rem;
+ }
+ .hamburger{
+ top: .4rem;
+ }
}
\ No newline at end of file @@ -1,49 +1,49 @@ -<!DOCTYPE html> -<html lang="en-US"> - <head> - <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>WIP - Scerba.org</title> - <meta name="description" content="Work in progress" /> - <meta name="keywords" content="wip"> - <link rel="canonical" href="https://www.scerba.org/wip.html"> - <link rel="stylesheet" href="./static/style.css" /> - <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" /> - </head> - <body> - <header> - <a href="/" class="logo-w-name"> - <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>--> - <span class="name">Alex Scerba</span> - </a> - <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="./index.html">Home</a> - <a href="./blog.html">Blog</a> - <a href="./wip.html">Gallery</a> - <a href="./about.html">About</a> - <a href="./faq.html">FAQ</a> - </nav> - </div> - </header> - - <main> - <section> - <h1>Work In Progress</h1> - <p>You can view the <a href="./README.md">README</a> for info on site plans.</p> - </section> - </main> - - <footer> - <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> --> - <address> - <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p> - <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p> - </address> - </footer> - </body> -</html> +<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <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>WIP - Scerba.org</title>
+ <meta name="description" content="Work in progress" />
+ <meta name="keywords" content="wip">
+ <link rel="canonical" href="https://www.scerba.org/wip.html">
+ <link rel="stylesheet" href="./static/style.css" />
+ <link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" />
+ </head>
+ <body>
+ <header>
+ <a href="/" class="logo-w-name">
+ <!--<img src="/static/logo.svg" alt="Logo" class="logo"/>-->
+ <span class="name">Alex Scerba</span>
+ </a>
+ <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="./index.html">Home</a>
+ <a href="./blog.html">Blog</a>
+ <a href="./wip.html">Gallery</a>
+ <a href="./about.html">About</a>
+ <a href="./faq.html">FAQ</a>
+ </nav>
+ </div>
+ </header>
+
+ <main>
+ <section>
+ <h1>Work In Progress</h1>
+ <p>You can view the <a href="./README.md">README</a> for info on site plans.</p>
+ </section>
+ </main>
+
+ <footer>
+ <!-- <img src="/static/logo.svg" alt="Logo" class="footer-logo"/> -->
+ <address>
+ <p>Contact: <a href="mailto:alex@scerba.org">alex@scerba.org</a></p>
+ <p>Design Site: <a href="https://alexscerba.com" target="_blank" rel="noopener noreferrer">alexscerba.com</a></p>
+ </address>
+ </footer>
+ </body>
+</html>
|