Modal view, navbar, js folder structure

www/css/gallery.css

@@ -2,6 +2,9 @@ body, main {
     width: 100%;
     margin: 0;
 }
+main {
+    background-color: #ddd;
+}
 .gallery-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -21,6 +24,91 @@ figure {
     max-height: 45vh;
 }
 
+/* #region modal */
+
+.modal-target:hover {opacity: 0.7;}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 5vh;
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%;
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
+}
+
+/* Modal Content (image) */
+.modal-content {
+    margin: auto;
+    display: block;
+    object-fit: scale-down;
+    overflow: visible;
+    
+    /* yolo, it all goes down from here */
+    min-width: 60vw;
+    max-width: 90vw !important;
+    min-height: 60vh;
+    max-height: 80vh !important;
+
+    width: auto;
+    height: auto;
+    opacity: 1 !important;
+}
+
+/* Caption of Modal Image */
+.modal-caption {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 90vw;
+    text-align: center;
+    color: white;
+    font-weight: 700;
+    font-size: 1em;
+    margin-top: 32px;
+}
+
+.modal-content, .modal-caption {  
+    -webkit-animation-name: zoom;
+    -webkit-animation-duration: 0.6s;
+    animation-name: zoom;
+    animation-duration: 0.6s;
+}
+
+@-webkit-keyframes zoom {
+    from {-webkit-atransform:scale(0)} 
+    to {-webkit-transform:scale(1)}
+}
+
+@keyframes zoom {
+    from {transform:scale(0)} 
+    to {transform:scale(1)}
+}
+
+.modal-close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 72px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.modal-close:hover, .modal-close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+}
+/* #endregion modal */
+
+/* #region screen-size media-rules */
 @media only screen and (min-width:320px)  {
     .gallery-container {grid-template-columns: 1fr !important; }
 }
@@ -32,4 +120,5 @@ figure {
 }
 @media only screen and (min-width: 1281px) {
     .gallery-container { grid-template-columns: repeat(4, 1fr) !important;}
-}
+}
+/* #endregion */