diff options
| -rw-r--r-- | gallery.html | 54 | ||||
| -rw-r--r-- | static/style.css | 10 |
2 files changed, 61 insertions, 3 deletions
diff --git a/gallery.html b/gallery.html new file mode 100644 index 0000000..862f30e --- /dev/null +++ b/gallery.html @@ -0,0 +1,54 @@ +<!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>
+ <div class="top-bar">
+ <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>
+ </div>
+ </header>
+
+ <main>
+ <section>
+ <h1>Gallery</h1>
+ <p>A collection of images on the site.</p>
+ </section>
+ <div class="gallery">
+ <img src="./static/media/20240209_Bike-ride-group-sidex1000.jpg" alt="Group photo of my friends and our bicycles on the steps in front of the GM RenCen by the Detroit River." width="1000" height="750" />
+ </div>
+ </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 caf9776..d8361ef 100644 --- a/static/style.css +++ b/static/style.css @@ -50,7 +50,7 @@ main { padding: 1.75rem;
padding-top: 5rem;
padding-bottom: 3rem;
- max-width: 80rem;
+ max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
@@ -237,8 +237,9 @@ blockquote { font-style: italic;
}
-.sketchbook > img:first-of-type {
- display: none;
+.gallery {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 45rem) {
@@ -252,6 +253,9 @@ blockquote { .even-2-col-grid {
grid-template-columns: 1fr;
}
+ .gallery {
+ grid-template-columns: repeat(2, 1fr);
+ }
.toggler{
/* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING : */
|