diff --git a/slt/css/style.scss b/slt/css/style.scss index 6e1e68a..22c4e63 100644 --- a/slt/css/style.scss +++ b/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 { - display: none; +a.facebook { + 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 */