Create main parts of short codes

themes/tsc_vfl/assets/css/main.scss

@@ -25,6 +25,7 @@ body {
     margin: 0px;
     background-color: #ececec;
     font: 90% 'Open Sans', sans-serif;
+    height: 100vh;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -44,7 +45,8 @@ h1 {
     max-width: 1280px;
     margin: auto;
     background-color: #fcfcfc;
-    
+    overflow: auto;
+
     #header {
         border-bottom: 2px solid rgba(173,173,173,.5);
         margin: 0 auto 30px;
@@ -63,6 +65,7 @@ h1 {
 
         > .slider {
             width: calc(100% - 60px);
+            // visibility: hidden;
             // height: 250px;
             display: flex;
             padding: 0 10px;
@@ -264,6 +267,46 @@ h1 {
     }    
 }
 
+#overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    z-index: 10;
+
+    &.hidden {
+        display: none;
+    }
+
+    .background {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: -10;
+        background-color: lightgrey;
+        opacity: 50%;
+    }
+
+    .spacer {
+        flex: auto 1 0;
+    }
+    .dialog-column {
+        flex: 0 1 1;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .dialog {
+            background-color: white;
+            padding: 10px;
+            flex: 30% 0 0;
+            // height: 30%;
+        }
+    }
+}
+
 .person-list {
     display: flex;
     flex-wrap: wrap;
@@ -306,28 +349,48 @@ h1 {
 .news-blog {
     .blog-entry {
         .header {
+
+            margin: 5px 0 10px;
             a {
-                &::before {
-                    content: '' !important;
-                }
                 font-size: larger;
             }
         }
         .details {
             display: flex;
-            min-height: 240px;
+            // min-height: 240px;
+            margin-right: 2px;
 
             .teaser-image {
                 flex: 33% 1 0;
                 background-color: lightcyan;
+                
+                img {
+                    width: 90%;
+                    height: 190px;
+                    object-fit: contain;
+                    object-position: left top;
+                }
             }
-            .intro {
+            .right-side {
                 flex: 66% 1 1;
+                display: flex;
+                flex-direction: column;
+
+                .intro {
+                    padding-right: 40px;
+                }
+                .more {
+                    // float: right;
+                    margin-top: 20px;
+                    text-align: right;
+                }
             }
-            .teaser-image, .intro {
+            // .teaser-image, .intro {
                 // display: ;
-            }
+            // }
+
         }
+
     }
 
     .pagination {
@@ -347,6 +410,24 @@ h1 {
     }
 }
 
+.tsc-gallery {
+    display: grid;
+    
+    &.cols-2 {
+        grid-template-columns: 1fr 1fr;
+    }
+    &.cols-3 {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    &.cols-4 {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    .tsc-gallery-img {
+        margin: none;
+    }
+}
+
 @font-face{
     font-family: 'Open Sans Condensed';
     font-style: normal;