Difference between revisions of "Template:Home"
| Line 5: | Line 5: | ||
<style> | <style> | ||
| − | + | ||
| + | /* Clear the default wiki settings */ | ||
#home_logo, #sideMenu { | #home_logo, #sideMenu { | ||
display: none; | display: none; | ||
| Line 40: | Line 41: | ||
} | } | ||
| − | + | /* font and text */ | |
h1, | h1, | ||
h2, | h2, | ||
| Line 46: | Line 47: | ||
h4, | h4, | ||
h5 { | h5 { | ||
| − | border:0; | + | border: 0; |
| − | color: # | + | color: #ebc163; |
font-weight: 200; | font-weight: 200; | ||
} | } | ||
| Line 54: | Line 55: | ||
h2, | h2, | ||
h3 { | h3 { | ||
| − | margin-top: | + | margin-top: 24px; |
margin-bottom: 14px; | margin-bottom: 14px; | ||
} | } | ||
| Line 62: | Line 63: | ||
font-size: 50px; | font-size: 50px; | ||
} | } | ||
| + | |||
h2 { | h2 { | ||
font-size: 40px; | font-size: 40px; | ||
} | } | ||
| + | |||
h3 { | h3 { | ||
font-size: 30px; | font-size: 30px; | ||
} | } | ||
| + | |||
h4 { | h4 { | ||
font-size: 24px; | font-size: 24px; | ||
} | } | ||
| + | |||
h5 { | h5 { | ||
font-size: 20px; | font-size: 20px; | ||
| + | } | ||
| + | |||
| + | .container p { | ||
| + | line-height: 24px; | ||
| + | font-size: 16px; | ||
| + | color: #333; | ||
} | } | ||
| Line 79: | Line 90: | ||
list-style: square outside none !important; | list-style: square outside none !important; | ||
font-size: 16px; | font-size: 16px; | ||
| − | margin: 20px 0 | + | margin: 20px 0 8px 36px; |
} | } | ||
.container ul li { | .container ul li { | ||
margin-bottom: 8px; | margin-bottom: 8px; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| Line 114: | Line 119: | ||
.navbar-default .navbar-nav > li > a { | .navbar-default .navbar-nav > li > a { | ||
color: white; | color: white; | ||
| + | text-transform: uppercase; | ||
} | } | ||
| Line 119: | Line 125: | ||
.navbar-default .navbar-nav > li > a:hover, | .navbar-default .navbar-nav > li > a:hover, | ||
.navbar-default .navbar-nav > .dropdown > a .caret:hover { | .navbar-default .navbar-nav > .dropdown > a .caret:hover { | ||
| − | color: # | + | color: #ebc163; |
} | } | ||
| Line 125: | Line 131: | ||
.navbar-default .navbar-nav > .open > a:hover, | .navbar-default .navbar-nav > .open > a:hover, | ||
.navbar-default .navbar-nav > .open > a:focus { | .navbar-default .navbar-nav > .open > a:focus { | ||
| − | color: # | + | color: #ebc163; |
background-color: #444; | background-color: #444; | ||
} | } | ||
| Line 137: | Line 143: | ||
border: 0; | border: 0; | ||
} | } | ||
| + | |||
.dropdown-menu > li > a { | .dropdown-menu > li > a { | ||
color: white; | color: white; | ||
| Line 145: | Line 152: | ||
color: #111; | color: #111; | ||
text-decoration: none; | text-decoration: none; | ||
| − | background-color: # | + | background-color: #ebc163; |
} | } | ||
| Line 154: | Line 161: | ||
} | } | ||
| − | .navbar-nav>li>.dropdown-menu { | + | .navbar-nav > li > .dropdown-menu { |
background-color: #444; | background-color: #444; | ||
} | } | ||
| Line 163: | Line 170: | ||
/* HOME banner */ | /* HOME banner */ | ||
| − | .home-banner-image:hover{ | + | .home-banner-image:hover { |
-webkit-animation: swing 2s ease; | -webkit-animation: swing 2s ease; | ||
animation: swing 2s ease; | animation: swing 2s ease; | ||
| Line 172: | Line 179: | ||
/*transform: rotateZ(32deg);*/ | /*transform: rotateZ(32deg);*/ | ||
} | } | ||
| + | |||
.home-banner-image { | .home-banner-image { | ||
| − | width:100%; | + | width: 100%; |
height: 440px; | height: 440px; | ||
background-position: center; | background-position: center; | ||
| Line 180: | Line 188: | ||
background-size: contain; | background-size: contain; | ||
} | } | ||
| − | @-webkit-keyframes swing | + | |
| − | + | @-webkit-keyframes swing { | |
| − | 15% | + | 15% { |
| − | + | ||
-webkit-transform: translateX(5px); | -webkit-transform: translateX(5px); | ||
transform: translateX(5px); | transform: translateX(5px); | ||
} | } | ||
| − | 30% | + | 30% { |
| − | + | ||
-webkit-transform: translateX(-5px); | -webkit-transform: translateX(-5px); | ||
transform: translateX(-5px); | transform: translateX(-5px); | ||
} | } | ||
| − | 50% | + | 50% { |
| − | + | ||
-webkit-transform: translateX(3px); | -webkit-transform: translateX(3px); | ||
transform: translateX(3px); | transform: translateX(3px); | ||
} | } | ||
| − | 65% | + | 65% { |
| − | + | ||
-webkit-transform: translateX(-3px); | -webkit-transform: translateX(-3px); | ||
transform: translateX(-3px); | transform: translateX(-3px); | ||
} | } | ||
| − | 80% | + | 80% { |
| − | + | ||
-webkit-transform: translateX(2px); | -webkit-transform: translateX(2px); | ||
transform: translateX(2px); | transform: translateX(2px); | ||
} | } | ||
| − | 100% | + | 100% { |
| − | + | ||
-webkit-transform: translateX(0); | -webkit-transform: translateX(0); | ||
transform: translateX(0); | transform: translateX(0); | ||
} | } | ||
} | } | ||
| − | @keyframes swing | + | |
| − | + | @keyframes swing { | |
| − | 15% | + | 15% { |
| − | + | ||
-webkit-transform: translateX(5px); | -webkit-transform: translateX(5px); | ||
transform: translateX(5px); | transform: translateX(5px); | ||
} | } | ||
| − | 30% | + | 30% { |
| − | + | ||
-webkit-transform: translateX(-5px); | -webkit-transform: translateX(-5px); | ||
transform: translateX(-5px); | transform: translateX(-5px); | ||
} | } | ||
| − | 50% | + | 50% { |
| − | + | ||
-webkit-transform: translateX(3px); | -webkit-transform: translateX(3px); | ||
transform: translateX(3px); | transform: translateX(3px); | ||
} | } | ||
| − | 65% | + | 65% { |
| − | + | ||
-webkit-transform: translateX(-3px); | -webkit-transform: translateX(-3px); | ||
transform: translateX(-3px); | transform: translateX(-3px); | ||
} | } | ||
| − | 80% | + | 80% { |
| − | + | ||
-webkit-transform: translateX(2px); | -webkit-transform: translateX(2px); | ||
transform: translateX(2px); | transform: translateX(2px); | ||
} | } | ||
| − | 100% | + | 100% { |
| − | + | ||
-webkit-transform: translateX(0); | -webkit-transform: translateX(0); | ||
transform: translateX(0); | transform: translateX(0); | ||
| Line 249: | Line 245: | ||
/* IF THE SCREEN IS LESS THAN 1200PX */ | /* IF THE SCREEN IS LESS THAN 1200PX */ | ||
@media only screen and (max-width: 1024px) { | @media only screen and (max-width: 1024px) { | ||
| − | |||
} | } | ||
| Line 255: | Line 250: | ||
/* IF THE SCREEN IS LESS THAN 768PX */ | /* IF THE SCREEN IS LESS THAN 768PX */ | ||
@media only screen and (max-width: 768px) { | @media only screen and (max-width: 768px) { | ||
| − | .navbar-default .navbar-nav .open .dropdown-menu>li>a { | + | .navbar-default .navbar-nav .open .dropdown-menu > li > a { |
color: #ddd; | color: #ddd; | ||
} | } | ||
| − | .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, | + | |
| − | .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { | + | .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, |
| − | color: # | + | .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { |
| + | color: #ebc163; | ||
} | } | ||
} | } | ||
| Line 266: | Line 262: | ||
/* IF THE SCREEN IS LESS THAN 320PX */ | /* IF THE SCREEN IS LESS THAN 320PX */ | ||
@media only screen and (max-width: 320px) { | @media only screen and (max-width: 320px) { | ||
| − | |||
} | } | ||
Revision as of 21:43, 29 October 2017
