diff --git a/slt1/css/desktop.css b/slt1/css/desktop.css new file mode 100644 index 0000000..36eb556 --- /dev/null +++ b/slt1/css/desktop.css @@ -0,0 +1,127 @@ +#topmenu a { + color: inherit; +} + +#topmenu { + background-color: black; + color: white; + font-weight: bold; + text-align: center; + position: fixed; + width: 100vw; + display: block; +} + + +#topmenu > .nav { + display: flex; + flex-flow: row nowrap; + justify-content: space-around; + padding: 0px; + margin: 0px; + position: relative; + align-items: center; + height: 40px; +} + +#topmenu > .nav > li { + padding: 10px; + display: inline-block; + text-align: left; +} + +#topmenu > .nav > li:hover { + background-color: white; + color: black; +} + +#topmenu > .nav > li > .nav-child { + position: absolute; + display: none; + z-index: 10; + background-color: white; + margin: 10px 20px 10px 0px; + border: none; + padding: 0px; +} + +#topmenu > .nav > li:hover > .nav-child { + display: block; + box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5); +} + +#topmenu > .nav > li > .nav-child > li { + display: block; + padding: 10px; +} + +#topmenu > .nav > li > .nav-child > li:hover { + background-color: gray; +} + + +#page { + padding-top: 35px; + +} + +/* + * Header line positioning + */ + +#slideshow { + display: inline-block; +} + + +/* + * Content positioning + */ + +#content { + display: flex; +} + +#left_menu { + flex: 1 1 20%; + margin: 15px 0px 15px 5px; + display: block; +} + +#main_column { + flex: 1 1 60%; + display: flex; + flex-flow: column nowrap; +} + +#main_content{ + flex: 1 1 100%; +} + +#footline { + flex: none; +} + +#right_column { + flex: 1 1 15%; + margin: 15px 5px 15px 0px; + display: block; +} + +/* + * Footer positioning + */ + +#mobile_menu { + display: none; +} + +/* + * Debug + */ + +/*#right_column,#left_menu,#main_content,#footline { + background-color: rgba(0,0,0,0.1); +}*/ + + diff --git a/slt1/css/main.css b/slt1/css/main.css index f9e6eb9..0e20f0e 100644 --- a/slt1/css/main.css +++ b/slt1/css/main.css @@ -1,277 +1,5 @@ +@import "visual.css"; -body { - margin: 0px; - height: 100vh -} - -#page { - box-shadow: 30vw 0px 5vw -10vw green inset; -} - -/* - * Menu configuration - */ - -.nav { - padding: 0px; -} - -.nav > li { - display: block; -} - -.nav > li > .nav { - padding-left: 5px; - margin-left: 5px; - border-left: solid gray 1px; - font-size: smaller; -} - -.nav > li > .nav > li > .nav { - font-size: x-small; -} - -/* - * Topmenu positioning and styling - */ - -#topmenu { - display: none; -} -@media only screen and ( min-width: 1000px){ - - #topmenu { - background-color: black; - color: white; - font-weight: bold; - text-align: center; - position: fixed; - width: 100vw; - display: block; - } - - - #topmenu > .nav { - display: flex; - flex-flow: row nowrap; - justify-content: space-around; - padding: 0px; - margin: 0px; - position: relative; - align-items: center; - height: 40px; - } - - #topmenu > .nav > li { - padding: 10px; - display: inline-block; - text-align: left; - } - - #topmenu > .nav > li:hover { - background-color: white; - color: black; - } - - #topmenu > .nav > li > .nav { - position: absolute; - display: none; - z-index: 10; - background-color: white; - margin: 10px 20px 10px 0px; - border: none; - padding: 0px; - } - - #topmenu > .nav > li:hover > .nav { - display: block; - box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5); - } - - #topmenu > .nav > li > .nav > li { - display: block; - padding: 10px; - } - - #topmenu > .nav > li > .nav > li:hover { - background-color: gray; - } - - - #page { - padding-top: 35px; - - } -} - -/* - * Header line positioning - */ - -#header { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; -} - -#header > div { - margin: 20px; - align-items: center; -} - -#logo, #slideshow { - flex: 0; -} - -#logo { - display: inline-block; -} - -#slideshow { - display: none; -} - -#logo > img { - height: 150px; -} - -#slideshow > img { - height: 150px; -} - -@media only screen and (min-width: 1000px) { - #slideshow { - display: inline-block; - } -} - - -/* - * Content positioning - */ - - -#left_menu { - display: none; -} - -#main_column { - margin: 15px; -} - -#right_column { - display: none; -} - -#footline { - margin-top: 10px; -} - -@media only screen and (min-width: 1000px) { - - #content { - display: flex; - } - - #left_menu { - flex: 1 1 20%; - margin: 15px 0px 15px 5px; - display: block; - } - - #main_column { - flex: 1 1 60%; - display: flex; - flex-flow: column nowrap; - } - - #main_content{ - flex: 1 1 100%; - } - - #footline { - flex: none; - } - - #right_column { - flex: 1 1 15%; - margin: 15px 5px 15px 0px; - display: block; - } - -} - -/* - * Footer positioning - */ - -#footer { - background-color: black; - color: white; - text-align: center; - margin-top: 30px; - padding: 5px; -} - - -/* - * Mobile menu positioning - */ - -#mobile_menu li > a { - margin: 5px 0px 5px 0px; - background-color: rgb(200,255,200); - padding: 0px; - display: block; -} - -#mobile_menu li > a.selected { - background-color: rgb(150,255,150); -} - -#mobile_menu .nav { - padding: 0px; - border: none; - margin-left: 0px; -} - -#mobile_menu li { - margin-left: 5px; - margin-right: 5px; -} - -#mobile_menu li > ul.nav { - margin-left: -5px; - margin-right: -5px; -} - -#mobile_menu > .level-1 > li > ul { - display: flex; - flex-wrap: wrap; -} - -#mobile_menu > .level-1 > li > ul > li { - display: inline-block; - flex: 1 1 40%; -} - -#mobile_menu > .level-1 > li > ul > li > a { - display: block; -} - -@media only screen and (min-width: 1000px) -{ - #mobile_menu { - display: none; - } -} - -/* - * Debug - */ - -/*#right_column,#left_menu,#main_content,#footline { - background-color: rgba(0,0,0,0.1); -}*/ - +@import "mobile.css"; +@import "desktop.css" ( min-width: 1000px); diff --git a/slt1/css/mobile.css b/slt1/css/mobile.css new file mode 100644 index 0000000..b49afe4 --- /dev/null +++ b/slt1/css/mobile.css @@ -0,0 +1,175 @@ +body { + margin: 0px; + height: 100.1vh; + display: flex; + flex-direction: column; +} + +#page { + box-shadow: 30vw 0px 5vw -10vw green inset; + flex: 1; + display: flex; + flex-direction: column; +} + +/* + * Menu configuration + */ + +.nav, .nav-child { + padding: 0px; +} + +.nav > li, .nav-child > li { + display: block; +} + +.nav > li > .nav-child, .nav-child > li > .nav-child { + padding-left: 5px; + margin-left: 5px; + border-left: solid gray 1px; + font-size: smaller; +} + +.nav > li > .nav-child .nav-child { + font-size: x-small; +} + +/* + * Topmenu positioning and styling + */ + +#topmenu { + display: none; +} + +/* + * Header line positioning + */ + +#header { + flex: 0; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; +} + +#header > div { + margin: 20px; + align-items: center; +} + +#logo, #slideshow { + flex: 0; +} + +#logo { + display: inline-block; +} + +#slideshow { + display: none; +} + +#logo > img { + height: 150px; +} + +#slideshow > img { + height: 150px; +} + + +/* + * Content positioning + */ + +#content { + flex: 1; +} + +#left_menu { + display: none; +} + +#main_column { + margin: 15px; +} + +#right_column { + display: none; +} + +#footline { + margin-top: 10px; +} + +/* + * Footer positioning + */ + +#footer { + flex: 0; + background-color: black; + color: white; + text-align: center; + margin-top: 30px; + padding: 5px; +} + + +/* + * Mobile menu positioning + */ + +#mobile_menu li > a { + margin: 5px 0px 5px 0px; + background-color: rgb(200,255,200); + padding: 0px; + display: block; + flex: 0; +} + +#mobile_menu li.active > a { + background-color: rgb(150,255,150); +} + +#mobile_menu .nav { + padding: 0px; + border: none; + margin-left: 0px; +} + +#mobile_menu li { + margin-left: 5px; + margin-right: 5px; +} + +#mobile_menu li > ul.nav { + margin-left: -5px; + margin-right: -5px; +} + +#mobile_menu > .level-1 > li > ul { + display: flex; + flex-wrap: wrap; +} + +#mobile_menu > .level-1 > li > ul > li { + display: inline-block; + flex: 1 1 40%; +} + +#mobile_menu > .level-1 > li > ul > li > a { + display: block; +} + +/* + * Debug + */ + +/*#right_column,#left_menu,#main_content,#footline { + background-color: rgba(0,0,0,0.1); +}*/ + + diff --git a/slt1/css/visual.css b/slt1/css/visual.css new file mode 100644 index 0000000..e69de29 diff --git a/slt1/index.php b/slt1/index.php index 0cc2f9b..f7534a3 100644 --- a/slt1/index.php +++ b/slt1/index.php @@ -11,8 +11,8 @@ $app = JFactory::getApplication();
-