initial commit

assets/sass/gallery.scss

@@ -0,0 +1,48 @@
+.gallery {
+    // display: flex;
+    // flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-column-gap: 1rem;
+}
+.gallery__side {
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
+.gallery__items-container {
+    grid-column-start: 3;
+    grid-column-end: 13;
+}
+
+.gallery__items {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+
+    grid-gap: 1rem;
+}
+.gallery__item {
+    aspect-ratio: 1;
+    // $size: 25rem;
+    // width: $size;
+    // height: $size;
+    img {
+        width: 0;
+        height: 0;
+        min-height: 100%;
+        min-width: 100%;
+        display: block;
+        object-fit: cover;
+    }
+}
+
+.gallery__nextprev {
+    display: flex;
+    justify-content: space-between;
+}
+
+@media (max-width: $md-breakpoint) {
+    .gallery {
+        display: block; 
+    }
+}

assets/sass/header.scss

@@ -0,0 +1,4 @@
+header {
+    background: #d35400;
+    margin-bottom: 1rem;
+}

assets/sass/main.scss

@@ -0,0 +1,19 @@
+$lg-breakpoint: 1500px;
+$md-breakpoint: 1100px;
+$sm-breakpoint: 900px;
+$xs-breakpoint: 400px;
+
+$primary: #ff00ff;
+$secondary: red;
+
+.pagination-nav {
+    margin-top: 1em;
+    display: flex;
+    justify-content: space-between;
+}
+
+@import 'page_container.scss';
+@import 'header.scss';
+@import 'gallery.scss';
+@import 'single_image.scss';
+

assets/sass/page_container.scss

@@ -0,0 +1,33 @@
+.page-container {
+    width: 80%;
+    margin: 0 auto;
+}
+
+@media (min-width: $lg-breakpoint) {
+  .page-container {
+    width: 58%;
+  }
+}
+
+@media (min-width: $md-breakpoint) {
+  .page-container {
+    width: 65%;
+  }
+}
+
+@media (max-width: $md-breakpoint) {
+  .page-container {
+    width: 75%;
+  }
+}
+
+@media (max-width: $sm-breakpoint) {
+  .page-container {
+    width: 90%;
+  }
+}
+
+@media (max-width: $xs-breakpoint) {
+  
+}
+

assets/sass/single_image.scss

@@ -0,0 +1,70 @@
+.single-image {
+    background: #ecf0f1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 1rem;
+    .single-image__side {
+        padding: 2rem 1rem 2rem 2rem;
+    }
+    .single-image__image-container {
+        background: #95a5a6;
+        min-width: 70vh;
+        min-height: 50vh;
+        max-height: 80vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    
+    .single-image__image {
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
+    }
+    .single-image__property {
+        display: flex;
+        align-items: center;
+        div:first-of-type {
+            margin-right: 1rem;
+        }
+        .icon {
+            margin-right: .5rem;
+        }
+        pre {
+            margin: 0;
+        }
+    }
+    .single-image__tags {
+        ul {
+            margin: 0;
+            list-style-type: none;
+            display: flex;
+            padding: 0;
+            li {
+                border: 1px solid black;
+                border-radius: 3px;
+                margin-right: .3rem;
+                padding: .3rem;
+                font-size: .9rem;
+            }
+            li:last-of-type {
+                margin-right: 0;
+            }
+        }
+    }
+
+}
+
+@media (max-width: $md-breakpoint) {
+    .single-image {
+        display: block;
+        .single-image__image-container {
+            min-width: initial;
+            max-height: initial;
+            width: 100%;
+        }
+    }
+    
+}