Minor bugs and made side images fixed on viewport
This commit is contained in:
parent
f9555a2dc3
commit
6adc768c6a
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user