madmaurice
d0865e4d6e
This adds scrollbars to the navigation when the browser is too narrow but too wide for the mobile version of the menu. This prevents the navigation from wrapping around and messing up the design.
173 lines
2.9 KiB
CSS
173 lines
2.9 KiB
CSS
.last {
|
|
margin-bottom:0;
|
|
}
|
|
|
|
body {
|
|
background:#f0f0f3 url(../images/noise_blue3.png);
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
background: #393f42;
|
|
/* background: linear-gradient( #464d51 , #393f42 ); */
|
|
background: #393f42 url(../images/background-grayblue.png);
|
|
/* background-size: cover; */
|
|
position: relative;
|
|
overflow: visible;
|
|
padding-top: 0.7rem;
|
|
padding-bottom: 3.8rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.header .loginButton {
|
|
display:inline;
|
|
position:absolute;
|
|
top:10px;
|
|
right:10px;
|
|
font:10px sans-serif;
|
|
}
|
|
|
|
.header .loginButton a {
|
|
color: #1eb513;
|
|
text-shadow: 1px 1px 0 #333;
|
|
}
|
|
|
|
/* header menu hides on mobile screen, no padding needed anymore */
|
|
@media screen and (max-width:39.99em) {
|
|
.header {
|
|
padding-bottom:0.7rem;
|
|
}
|
|
}
|
|
|
|
.header .headline {
|
|
text-align:left;
|
|
color: #ffe;
|
|
margin: 0;
|
|
}
|
|
|
|
.header .tagline {
|
|
color: #eeeeef /* #aaaaac */;
|
|
font-size: 1.2rem;
|
|
margin: 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.header-subnav {
|
|
float: none;
|
|
position: absolute;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
bottom: 0;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.header-subnav li {
|
|
float: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.header-subnav li a {
|
|
padding: 0.9rem 1rem;
|
|
font-size: 0.75rem;
|
|
color: #eef;
|
|
text-transform: uppercase;
|
|
display: block;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
/* transition: all 0.35s ease-in-out; */
|
|
}
|
|
|
|
.header-subnav li a.is-active {
|
|
/* background: #ffffff; */
|
|
color: #393f42;
|
|
background-image:url(../images/noise_blue3.png);
|
|
}
|
|
|
|
.header-subnav li a:not(.is-active):hover {
|
|
background: rgba(250,250,250,0.15);
|
|
transition: all 0.35s ease-in-out;
|
|
}
|
|
|
|
.mobile-menu {
|
|
/* background-color:#f3f3f0; */
|
|
list-style: none;
|
|
margin: -0.5em -1em;
|
|
}
|
|
|
|
.mobile-menu li {
|
|
padding:0;
|
|
}
|
|
|
|
.mobile-menu li a {
|
|
display:block;
|
|
width:100%;
|
|
height:100%;
|
|
margin:0;
|
|
padding:0.3em;
|
|
padding-bottom:0em;
|
|
padding-left: 1em;
|
|
font-size: 1.4em;
|
|
font-weight:500;
|
|
text-transform:uppercase;
|
|
}
|
|
|
|
.mobile-menu li a.is-active {
|
|
background-color:#1eb513;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.columns {
|
|
padding:0 10px;
|
|
}
|
|
|
|
.whitebox {
|
|
background-color:#f3f3f0;
|
|
box-shadow: 4px 4px 5px rgba(100,100,100,0.1);
|
|
padding:1rem;
|
|
margin-bottom:1em;
|
|
}
|
|
|
|
.whitebox a {
|
|
color: #1eb513 !important;
|
|
}
|
|
|
|
.whitebox h1 { color: #1eb513; font-size: 2em; }
|
|
.whitebox h2 { color: #1eb513; font-size: 1.5em; }
|
|
.whitebox h3 { color: #1eb513; font-size: 1em; }
|
|
|
|
.whitebox .lang-list {
|
|
font-size: 0.8rem;
|
|
display: inline;
|
|
float: right;
|
|
}
|
|
|
|
.sidebar .boxhead {
|
|
font-size:1.1rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sidebar .list {
|
|
list-style: none;
|
|
}
|
|
|
|
.sidebar .list li a {
|
|
color: #2199e8;
|
|
}
|
|
|
|
.sidebar .searchbox {
|
|
margin:0;
|
|
}
|
|
|
|
.sidebar {
|
|
margin:0;
|
|
}
|
|
|
|
.footer {
|
|
text-align:center;
|
|
font-size:0.7rem;
|
|
text-transform:lowercase;
|
|
color: #555;
|
|
}
|