feat: add some style

assets/sass/article.scss

@@ -9,3 +9,7 @@
         max-width: 100%;
     }
 }
+
+.article {
+    line-height: 1.8rem;
+}

assets/sass/gallery.scss

@@ -5,11 +5,21 @@
     grid-template-columns: repeat(12, 1fr);
     grid-column-gap: 1rem;
 }
+
 .gallery__side {
     grid-column-start: 1;
     grid-column-end: 3;
 }
 
+.gallery__side {
+    margin-bottom: .5rem;
+}
+
+.gallery-tags__title {
+
+
+}
+
 .gallery__items-container {
     grid-column-start: 3;
     grid-column-end: 13;
@@ -21,6 +31,7 @@
 
     grid-gap: 1rem;
 }
+
 .gallery__item {
     aspect-ratio: 1;
     // $size: 25rem;
@@ -54,6 +65,9 @@
     .gallery__items {
         grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     }
+    .gallery__side {
+        margin-bottom: 1rem;
+    }
 }
 
 @media (max-width: $xs-breakpoint) {

assets/sass/general.scss

@@ -1,6 +1,7 @@
 body {
     // font-family: 'Trebuchet MS', Tahoma,sans-serif;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-family: "Open Sans","Segoe UI",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
     margin: 0;
 }
 
@@ -28,3 +29,5 @@ a {
 a:hover {
     opacity: 0.8;
 }
+
+

assets/sass/main.scss

@@ -1,3 +1,4 @@
+$xl-breakpoint: 1800px;
 $lg-breakpoint: 1600px;
 $md-breakpoint: 1100px;
 $sm-breakpoint: 900px;
@@ -23,3 +24,6 @@ $secondary: #f15a24;
 @import 'single_image.scss';
 @import 'footer.scss';
 
+// components
+@import 'tags.scss';
+

assets/sass/news.scss

@@ -18,9 +18,9 @@
     
     figure {
         margin: 0;
+        height: 100%;
     }
     img {
-        max-height: 12rem;
         width: 100%;
         height: 100%;
         object-fit: cover;

assets/sass/page_container.scss

@@ -6,6 +6,12 @@
     padding: 0 2rem;
 }
 
+@media (min-width: $xl-breakpoint) {
+    .page-container {
+        width: 50% !important;
+    }
+}
+
 @media (min-width: $lg-breakpoint) {
     .page-container {
         width: 58%;
@@ -26,14 +32,11 @@
 
 @media (max-width: $sm-breakpoint) {
     .page-container {
-        width: 90%;
+        width: 100%;
+        padding: 0 .8rem;
     }
     .page-full {
-        padding: 0;
+        padding: 0 .8rem;
     }
 }
 
-@media (max-width: $xs-breakpoint) {
-
-}
-

assets/sass/single_image.scss

@@ -39,23 +39,6 @@
         }
     }
     .single-image__tags {
-        ul {
-            margin: 0;
-            list-style-type: none;
-            display: flex;
-            align-items: center;
-            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;
-            }
-        }
     }
 
 }