mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-12-22 09:40:23 -05:00
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
parent
5a02de472d
commit
77c9bf3c6a
11 changed files with 48 additions and 110 deletions
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
36
resources/assets/less/app.less
vendored
36
resources/assets/less/app.less
vendored
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
9
resources/assets/less/elements/footer.less
vendored
9
resources/assets/less/elements/footer.less
vendored
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
77
resources/assets/less/elements/nav.less
vendored
77
resources/assets/less/elements/nav.less
vendored
|
|
@ -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,33 +38,9 @@ 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; }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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%); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
16
resources/assets/less/elements/subscription.less
vendored
Normal file
16
resources/assets/less/elements/subscription.less
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
2
resources/assets/less/var.less
vendored
2
resources/assets/less/var.less
vendored
|
|
@ -26,5 +26,5 @@
|
|||
@c_dashboard_delete: #87483e;
|
||||
|
||||
// Sizes
|
||||
@nav_height: 96px;
|
||||
@nav_height: 60px;
|
||||
@mobile_nav_height: 50px;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue