Add the sticky footer plugin, rip a lot of unnecessary styles out of the nav , add some better defaults to the nav, add some padding to the top of the body to space against the nav, give some default styles for the subscription box, and improve the contact page a bit

This commit is contained in:
Kevin MacMartin 2016-01-28 22:28:05 -05:00
parent 5a02de472d
commit 77c9bf3c6a
11 changed files with 48 additions and 110 deletions

View file

@ -13,6 +13,7 @@
"Sortable": "~1.4.2",
"simplemde": "~1.9.0",
"datetimepicker": "~2.4.5",
"SpinKit": "~1.2.5"
"SpinKit": "~1.2.5",
"jQuery.stickyFooter": "https://github.com/miWebb/jQuery.stickyFooter.git#~1.2.3"
}
}

View file

@ -32,6 +32,7 @@ var jsLocal = [
var jsBower = [
'jquery/dist/jquery.min.js',
'bootstrap/dist/js/bootstrap.min.js',
'jQuery.stickyFooter/assets/js/jquery.stickyfooter.js'
];
var jsDashboardBower = [

View file

@ -1,5 +1,8 @@
// run once the document is ready
$(document).ready(function() {
$('footer').stickyFooter({ content: '#page-content' });
$(window).load(function() { $(this).trigger('resize'); });
switch (SiteVars.page) {
case '':
subscriptionFormInit();

View file

@ -21,12 +21,9 @@ html, body {
html.no-scroll { overflow-y: hidden; }
body {
min-width: 300px;
margin: 0;
padding: 0;
line-height: 1.5;
font-weight: 100;
color: @c_text;
padding-top: @nav_height;
@media (max-width: @grid-float-breakpoint-max) { padding-top: @mobile_nav_height; }
}
* {
@ -35,32 +32,3 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.index {
.container {
.content {
text-align: center;
.title {
position: relative;
top: ~"calc(50vh - 131px)";
font-size: 96px;
@media (max-width: 1225px) {
top: ~"calc(50vh - 119px)";
font-size: 82px;
}
@media (max-width: 1025px) {
top: ~"calc(50vh - 97px)";
font-size: 58px;
}
@media (max-width: (@screen-sm - 1)) {
top: ~"calc(50vh - 83px)";
font-size: 42px;
}
}
}
}
}

View file

@ -3,7 +3,12 @@ footer {
height: 32px;
line-height: 32px;
padding-left: 10px;
background-color: #000;
background-color: @c_base;
color: @c_text_light;
font-size: 11px;
&.sticky-footer {
width: 100%;
position: absolute;
bottom: 0px;
}
}

View file

@ -2,53 +2,27 @@ nav.navbar {
height: @nav_height;
margin-bottom: 0px;
padding-right: 10px;
background: linear-gradient(to right, transparent 0%, fade(@c_base, 40%) 25%, fade(@c_base, 50%) 50%, @c_base 100%);
background-color: @c_base;
border: none;
border-radius: 0px;
z-index: 1;
@media (max-width: @grid-float-breakpoint-max) {
height: @mobile_nav_height;
background: fade(@c_base, 55%);
}
@media (max-width: @grid-float-breakpoint-max) { height: @mobile_nav_height; }
.navbar-logo {
position: fixed;
top: 45px;
left: 63px;
width: 145px;
height: 145px;
position: absolute;
top: 5px;
left: 10px;
width: (@nav_height - 10);
height: (@nav_height - 10);
background-image: url('/img/logo.png');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
transition: transform 200ms;
&:hover { transform: scale(1.03); }
&:active {
transition: transform 100ms;
transform: scale(1.01);
}
@media (max-width: @grid-float-breakpoint-max) {
top: 5px;
left: 10px;
width: 40px;
height: 40px;
}
@media (min-width: @grid-float-breakpoint) {
@logoAnimSpeed: 400ms;
transition: transform 200ms, top @logoAnimSpeed, left @logoAnimSpeed, width @logoAnimSpeed, height @logoAnimSpeed;
&:active { transition: transform 100ms, top @logoAnimSpeed, left @logoAnimSpeed, width @logoAnimSpeed, height @logoAnimSpeed; }
&.scaled {
top: 10px;
left: 15px;
width: @nav_height - 20;
height: @nav_height - 20;
}
width: (@mobile_nav_height - 10);
height: (@mobile_nav_height - 10);
}
}
@ -64,34 +38,10 @@ nav.navbar {
color: @c_text_light;
text-decoration: none;
text-transform: uppercase;
font-size: 36px;
font-weight: 500;
font-stretch: ultra-condensed;
line-height: @nav_height;
transition: color 100ms;
@media (max-width: 1250px) { font-size: 28px; }
@media (max-width: 1050px) { font-size: 24px; }
&:after {
content: "";
display: block;
position: absolute;
bottom: calc(50% ~"-" 0.8em);
left: 50%;
transform: translateX(-50%);
width: calc(100% ~"-" 20px);
height: 3px;
background-color: @c_text_light;
opacity: 0;
transition: opacity 200ms;
@media (max-width: @grid-float-breakpoint-max) { bottom: 0px; }
font-size: 24px;
}
}
&.active a, &.active:hover a, &:hover a, &:focus a { background-color: transparent; }
&:hover a { color: darken(@c_text_light, 25%); }
&.active a:after { opacity: 1; }
}
}
@media (max-width: @grid-float-breakpoint-max) {
@ -99,7 +49,7 @@ nav.navbar {
bottom: 4px;
width: 100vw;
padding-bottom: 5px;
background-color: fade(@c_base, 55%);
background-color: @c_base;
ul.nav li a {
line-height: 40px;
@ -119,9 +69,6 @@ nav.navbar {
width: 27px;
height: 4px;
background-color: @c_text_light;
transition: background-color 150ms;
}
&:hover .icon-bar { background-color: darken(@c_text_light, 25%); }
}
}

View file

@ -0,0 +1,16 @@
#subscription-form {
position: absolute;
top: 50%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
transform: translateY(-50%);
width: 200px;
input {
width: calc(100% ~"-" 10px);
padding: 3px;
margin: 5px;
}
}

View file

@ -26,5 +26,5 @@
@c_dashboard_delete: #87483e;
// Sizes
@nav_height: 96px;
@nav_height: 60px;
@mobile_nav_height: 50px;

View file

@ -11,7 +11,8 @@
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navlink navlink-section-contact"><a href="/contact" title="Contact">Contact</a></li>
<li class="navlink"><a href="/" title="Home">Home</a></li>
<li class="navlink"><a href="/contact" title="Contact">Contact</a></li>
</ul>
</div>
</div>

View file

@ -14,11 +14,7 @@
</head>
<body class="{{ Request::path() == '/' ? 'index' : preg_replace('/\/.*/', '', Request::path()) }}">
@yield('page-top')
<div id="page-content">
@yield('content')
</div>
<div id="page-content">@yield('content')</div>
@yield('page-bottom')
</body>
</html>

View file

@ -3,7 +3,7 @@
@section('content')
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<h1>Contact</h1>
</div>
</div>