Tweak the general placement of things and add a template navbar

This commit is contained in:
Kevin MacMartin 2015-07-16 22:30:53 -04:00
parent c29d899f82
commit 74776cb69a
4 changed files with 61 additions and 9 deletions

View file

@ -1,5 +1,6 @@
@import "bootstrap"; @import "bootstrap";
@import "var"; @import "var";
@import "nav";
/* /*
| |
@ -13,25 +14,39 @@ html, body {
} }
body { body {
min-width: 300px;
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 1.5; line-height: 1.5;
font-weight: 100;
color: @c_text; color: @c_text;
} }
body.index { body.index {
display: table;
font-weight: 100;
.container { .container {
text-align: center;
display: table-cell;
vertical-align: middle;
.content { .content {
text-align: center; text-align: center;
display: inline-block;
.title { font-size: 96px; } .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;
}
}
} }
} }
} }

3
resources/assets/less/nav.less vendored Normal file
View file

@ -0,0 +1,3 @@
nav {
z-index: 1;
}

View file

@ -0,0 +1,33 @@
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Hypothetical Creations</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Section A</li>
<li><a href="#">Dropdown Option A1</a></li>
<li><a href="#">Dropdown Option A2</a></li>
<li><a href="#">Dropdown Option A3</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Section B</li>
<li><a href="#">Dropdown Option B1</a></li>
<li><a href="#">Dropdown Option B2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

View file

@ -15,6 +15,7 @@
<link rel="stylesheet" href="{{ elixir('css/app.css') }}"> <link rel="stylesheet" href="{{ elixir('css/app.css') }}">
</head> </head>
<body class="{{ Request::path() == "/" ? "index" : Request::path() }}"> <body class="{{ Request::path() == "/" ? "index" : Request::path() }}">
@include('elements.nav')
@yield('page') @yield('page')
</body> </body>
</html> </html>