Added and merged desktop styles

slt/css/style.scss

@@ -1,3 +1,20 @@
+// Some Mixins for various screen sizes
+
+@mixin for-desktop {
+    @media screen and (min-width: 1000px) {
+        @content;
+    }
+}
+
+@mixin for-wide-desktop {
+    @media screen and (min-width: 1200px) {
+        @content;
+    }
+}
+
+
+// The main styles
+
 body {
     margin: 0;
     min-height: 100.1vh;
@@ -7,10 +24,22 @@ body {
 
     /*    padding: 0px 20px 10px 20px; */
     padding: 0;
+
+    @include for-desktop {
+        overflow: scroll;
+        padding: 0;
+    }
 }
 
 #page-div {
     width: 100%;
+
+    @include for-desktop(){
+        display: flex;
+        flex-flow: row;
+        // width: 100%;
+        justify-content: space-around;
+    }
 }
 
 #page {
@@ -20,10 +49,58 @@ body {
     flex-direction: column;
     width: 100%;
     min-height: 100vh;
+
+    @include for-desktop() {
+        flex: 0 0 auto;
+        width: 1000px;
+
+        background-color: inherit;
+    }
+}
+
+#page,
+#page-div {
+    @include for-desktop {
+        min-height: calc(100vh - 40px);
+    }
 }
 
 #page-bg {
     display: none;
+
+    @include for-desktop() {
+        display: block;
+        position: fixed;
+
+        width: 1000px;
+        height: calc(100% - 40px);
+        bottom: 0;
+        z-index: -9;
+        left: calc((100% - 1000px) / 2);
+    }
+}
+
+@include for-desktop {
+    #left_side-image,
+    #right_side-image {
+        position: fixed;
+        height: 100vh;
+        width: calc((100% - 980px) / 2);
+        z-index: -10;
+
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+        opacity: 0.5;
+    }
+    
+    #left_side-image {
+        left: 0;
+    }
+    
+    #right_side-image {
+        right: 0;
+    }
 }
 
 /*
@@ -54,6 +131,12 @@ body {
 
 .nav-child {
     font-size: small;
+
+    > li > a {
+        @include for-desktop {
+            display: block;
+        }
+    }
 }
 
 /*
@@ -62,8 +145,127 @@ body {
 
 #topmenu {
     display: none;
+
+    @include for-desktop {
+        position: fixed;
+        display: flex;
+        width: 100vw;
+        z-index: 5000;
+
+        font-weight: bold;
+        text-align: center;
+
+        a {
+            color: inherit;
+        }
+    }
+
+    > .topmenu-sep {
+        display: inline-block;
+        flex: 1 1 auto;
+    }
+
+    .nav {
+        flex: 0 0 auto;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        position: relative;
+        align-items: center;
+
+        @include for-desktop {
+            padding: 0 10px;
+            margin: 0;
+            height: 40px;
+            width: 980px;
+        }
+        
+        > li {
+            display: inline-block;
+
+            @include for-desktop {
+                text-align: left;
+            }
+    
+            > a {
+                position: relative;
+
+                @include for-desktop {
+                    font-size: large;
+                    padding: 10px;
+                    z-index: 3001;
+
+                    font-size: large;
+                }
+            }
+    
+            > .nav-child {
+                position: absolute;
+                display: none;
+    
+                @include for-desktop {
+                    z-index: 3000;
+                    margin: 0 20px 10px 0;
+                    border: none;
+                    padding: 0;
+                }
+
+                > li {
+
+                    @include for-desktop {
+                        padding: 0 5px;
+                    }
+
+                    > a {
+                        display: block;
+    
+                        @include for-desktop {
+                            padding: 10px 5px 10px 4px;
+                            border-left-color: transparent;
+                            border-left-style: solid;
+                            border-left-width: 6px;
+                        }
+                    }
+                }
+            }
+    
+            &:hover > .nav-child {
+                display: block;
+
+                @include for-desktop {
+                    box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
+                }
+            }
+
+        }
+    }
+
+    @include for-desktop {
+        li > a,
+        li:hover > a,
+        li:focus > a,
+        li:active > a {
+            background-color: inherit;
+            color: inherit;
+        }
+
+        .nav-child > li:hover > a:hover,
+        .nav-child > li:focus > a:hover,
+        .nav-child > li:hover > a:focus {
+            text-decoration: none;
+        }
+    }
+    
 }
 
+#topmenu-div {
+    @include for-desktop {
+        width: 100vw;
+        height: 40px;
+    }
+}
+
+
 /*
  * Header line positioning
  */
@@ -74,6 +276,10 @@ body {
     flex-flow: row nowrap;
     justify-content: space-between;
 
+    @include for-desktop {
+        justify-content: space-around;
+    }
+
     > div {
         margin: 20px;
         align-items: center;
@@ -82,10 +288,11 @@ body {
 
 #slideshow {
     flex: 1;
-}
-
-#slideshow {
     display: none;
+
+    @include for-desktop {
+        display: inline-block;
+    }
 }
 
 /*
@@ -94,22 +301,69 @@ body {
 
 #content {
     flex: 1 0 auto;
+
+    @include for-desktop {
+        display: flex;
+    }
 }
 
+
 #left_menu {
     display: none;
+
+    @include for-desktop {
+        flex: 0 1 20%;
+        display: block;
+
+        margin: 15px 0 15px 5px;
+
+        > ul.menu {
+            padding: 10px;
+
+            &:hover {
+                box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
+            }
+
+            li > a {
+                padding: 2px 5px;
+            }
+        }
+    }
 }
 
 #main_column {
     margin: 15px;
+
+    @include for-desktop {
+        flex: 1 1 60%;
+        display: flex;
+        flex-flow: column nowrap;
+    }
+}
+
+#main_content {
+    @include for-desktop {
+        flex: 1 1 auto;
+    }
 }
 
 #right_column {
     display: none;
+
+    @include for-desktop {
+        flex: 1 1 15%;
+        display: block;
+
+        margin: 15px 5px 15px 0;
+    }
 }
 
 #footline {
     margin-top: 10px;
+
+    @include for-desktop {
+        flex: none;
+    }
 }
 
 /*
@@ -181,6 +435,10 @@ body {
 
     &.visible {
         display: block;
+
+        @include for-desktop {
+            display: none;
+        }
     }
 
     li > a {
@@ -214,14 +472,12 @@ body {
         border: none;
     }
 
-
     a {
         font-size: initial;
         margin-right: 0;
         padding-right: 0;
     }
 
-
     > ul.menu {
         background-color: initial;
         color: initial;
@@ -232,6 +488,10 @@ body {
 #mobile_menu_switch {
     flex: 0 0 auto;
     text-align: right;
+
+    @include for-desktop {
+        display: none;
+    }
 }
 
 #btn_mobile_menu {
@@ -240,14 +500,73 @@ body {
     box-sizing: initial;
 }
 
-a.facebook img {
+a.facebook {
-    display: none;
+    img {
+        display: none;
+
+        @include for-desktop {
+            display: inline;
+        }
+    }
+
+    > span.image-title {
+        @include for-desktop {
+            display: none;
+        }
+    }
 }
 
 .article-info {
     font-size: smaller;
 }
 
+/********************************* Desktop.css */
+
+@media screen and (min-width: 1000px) {
+
+   
+    /*
+Additional content
+*/
+
+
+    #left_side-image,
+    #right_side-image {
+        
+    }
+
+    #page {
+    }
+
+    p.readmore {
+        text-align: right;
+        font-size: smaller;
+    }
+
+    .btn {
+        border-radius: 0;
+    }
+
+    .readmore > .btn {
+        font-size: inherit;
+        background-image: none;
+        border: none;
+        text-shadow: unset;
+    }
+
+    p.readmore > .btn > span[class^="icon-"] {
+        display: none;
+    }
+
+    /*
+ * Debug
+ */
+
+    /* #right_column,#left_menu,#main_content,#footline {
+    background-color: rgba(0,0,0,0.1);
+} */
+}
+
 /*
  * Debug
  */