slt/template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Minor bugs and made side images fixed on viewport

Browse Source
This commit is contained in:
Christian Wolf 2017-11-09 11:37:05 +01:00
parent f9555a2dc3
commit 6adc768c6a
3 changed files with 44 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
slt/css/desktop.css
View File

@ -52,11 +52,7 @@ Structure of page
flex-flow: row; flex-flow: row;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
} justify-content: space-around;
#left_side, #right_side
{
flex: 1 0 auto;
} }
#page #page
@ -128,7 +124,7 @@ body
#topmenu > .nav { #topmenu > .nav {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
min-height: 40px; height: 40px;
} }
#topmenu .nav > li > a { #topmenu .nav > li > a {
@ -152,16 +148,33 @@ body
padding: 10px; padding: 10px;
} }
#left_side, #right_side #page-div
{ {
padding-top: 35px; margin-top: 40px;
} }
#page { #page {
padding-top: 35px;
width: 1000px; width: 1000px;
} }
#left_side-image, #right_side-image
{
position: fixed;
height: 100vh;
width: calc( (100% - 980px) / 2 );
z-index: -10;
}
#left_side-image
{
left: 0px;
}
#right_side-image
{
right: 0px;
}
#left_menu { #left_menu {
margin: 15px 0px 15px 5px; margin: 15px 0px 15px 5px;
} }
@ -211,15 +224,20 @@ Additional content
} }
#topmenu .nav > li > a, #topmenu .nav > li > a,
#topmenu .nav > li:hover > a { #topmenu .nav > li:hover > a,
#topmenu .nav > li:focus > a
{
background-color: inherit; background-color: inherit;
} }
#topmenu > .nav > li > .nav-child > li:hover > a:hover { #topmenu > .nav > li > .nav-child > li:hover > a:hover,
#topmenu > .nav > li > .nav-child > li:focus > a:hover,
#topmenu > .nav > li > .nav-child > li:hover > a:focus
{
text-decoration: none; text-decoration: none;
} }
#left_side, #right_side #left_side-image, #right_side-image
{ {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;

4
slt/css/mobile.css
View File

@ -15,7 +15,7 @@ body {
#page { #page {
/*box-shadow: 30vw 0px 5vw -10vw green inset;*/ /*box-shadow: 30vw 0px 5vw -10vw green inset;*/
flex: 1 1 auto; flex: 1 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
@ -82,7 +82,7 @@ body {
*/ */
#content { #content {
flex: 1 1 auto; flex: 1 0 auto;
} }
#left_menu { #left_menu {

18
slt/index.php
View File

@ -88,7 +88,9 @@ ul.menu li.current > a
} }
ul.nav > li > a:hover, ul.nav > li > a:hover,
ul.nav-child > li > a:hover ul.nav > li > a:focus,
ul.nav-child > li > a:hover,
ul.nav-child > li > a:focus
{ {
background-color: <?php echo $params{'bgcolor2'}; ?>; background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>; color: <?php echo $params{'fgcolor2'}; ?>;
@ -99,7 +101,9 @@ ul.nav-child > li > a:hover
color: <?php echo $params{'fgcolor1'}; ?>; color: <?php echo $params{'fgcolor1'}; ?>;
} }
#topmenu > .nav > li:hover { #topmenu > .nav > li:hover,
#topmenu > .nav > li:focus
{
background-color: <?php echo $params{'bgcolor2'}; ?>; background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>; color: <?php echo $params{'fgcolor2'}; ?>;
} }
@ -109,12 +113,14 @@ ul.nav-child > li > a:hover
color: <?php echo $params{'fgcolor3'}; ?>; color: <?php echo $params{'fgcolor3'}; ?>;
} }
#topmenu > .nav > li > .nav-child > li:hover > a { #topmenu > .nav > li > .nav-child > li:hover > a,
#topmenu > .nav > li > .nav-child > li:focus > a
{
background-color: <?php echo $params{'bgcolor2'}; ?>; background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>; color: <?php echo $params{'fgcolor2'}; ?>;
} }
#left_side #left_side-image
{ {
background-image: <?php echo $leftImageValue; ?>; background-image: <?php echo $leftImageValue; ?>;
} }
@ -151,7 +157,7 @@ table.alternating tr:nth-child(even) {
</div> <!-- #topmenu-div --> </div> <!-- #topmenu-div -->
<div id='page-div'> <div id='page-div'>
<div id='left_side'></div> <div id='left_side-image'></div>
<div id='page'> <div id='page'>
<div id='header'> <div id='header'>
@ -186,7 +192,7 @@ table.alternating tr:nth-child(even) {
</div> <!-- #footer --> </div> <!-- #footer -->
</div> <!-- #page --> </div> <!-- #page -->
<div id='right_side'></div> <div id='right_side-image'></div>
</div> <!-- #page-div --> </div> <!-- #page-div -->
</body> </body>