made the alt design the working design
parent
39a2c37448
commit
85062144fd
@ -1,154 +0,0 @@
|
|||||||
html {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
html {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 960px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
background-color: secondary;
|
|
||||||
color: navbartext;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-size: 1rem;
|
|
||||||
padding-top: 80px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feather {
|
|
||||||
width: 16px;
|
|
||||||
height: 16 px;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.album {
|
|
||||||
background-color: secondary;
|
|
||||||
color: navbartext;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-thumbnail {
|
|
||||||
background-color: primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail {
|
|
||||||
background-color: primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Sidebar
|
|
||||||
*/
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 100; /* Behind the navbar */
|
|
||||||
padding: 0;
|
|
||||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-sticky {
|
|
||||||
position: -webkit-sticky;
|
|
||||||
position: sticky;
|
|
||||||
top: 48px; /* Height of navbar */
|
|
||||||
height: calc(100vh - 48px);
|
|
||||||
margin-top: 6rem;
|
|
||||||
padding-left: .5rem;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link {
|
|
||||||
font-weight: 500;
|
|
||||||
color: navbartext;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link .feather {
|
|
||||||
margin-right: 4px;
|
|
||||||
color: navbartextfeather;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link.active {
|
|
||||||
color: navbartextactive;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .nav-link:hover .feather,
|
|
||||||
.sidebar .nav-link.active .feather {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-heading {
|
|
||||||
font-size: .75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* End Sidebar
|
|
||||||
*/
|
|
||||||
|
|
||||||
.border-top { border-top: 1px solid #e5e5e5; }
|
|
||||||
.border-bottom { border-bottom: 1px solid #e5e5e5; }
|
|
||||||
.nav-link {
|
|
||||||
color: navbartext;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768 px) {
|
|
||||||
.main {
|
|
||||||
padding-right: 40px;
|
|
||||||
padding-left: 220px; /* 180 + 40 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-image-background{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-align-left{
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control::-webkit-input-placeholder { color: searchfont; } /* WebKit, Blink, Edge */
|
|
||||||
.form-control:-moz-placeholder { color: searchfont; } /* Mozilla Firefox 4 to 18 */
|
|
||||||
.form-control::-moz-placeholder { color: searchfont; } /* Mozilla Firefox 19+ */
|
|
||||||
|
|
||||||
.category-header p {
|
|
||||||
margin: 0 0 .15em 0;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-header h4 {
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
padding-top: 3rem;
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
background: primary;
|
|
||||||
color: footertext;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer p {
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
margin-left: 25rem;
|
|
||||||
padding-left: 25rem;
|
|
||||||
color: footertext;
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<title>Steering Wheel</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="styles/test-resources-landing-page2.css">
|
|
||||||
|
|
||||||
<script>let $ = require('jquery');</script>
|
|
||||||
<script>require('popper.js')</script>
|
|
||||||
<script>require('bootstrap')</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
|
|
||||||
|
|
||||||
<div class="fixed-top d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-0 bg-primary border-top shadow-sm">
|
|
||||||
<a class="navbar-brand text-navbartext my-0 mr-md-auto">
|
|
||||||
<img src="../images/JDS_faulkner_Logo_NoTextAtBottom.png" height="30" class="d-inline-block align-top"
|
|
||||||
alt="JDSfaulkner logo">
|
|
||||||
Steering Wheel
|
|
||||||
</a>
|
|
||||||
<nav class="my-2 my-md-0 mr-md-3">
|
|
||||||
<a class="p-2 text-navbartext" href="#">Help</a>
|
|
||||||
<a class="p-2 text-navbartext" href="#">Feedback</a>
|
|
||||||
</nav>
|
|
||||||
<a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row">
|
|
||||||
<nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar">
|
|
||||||
<div class="sidebar-sticky">
|
|
||||||
<ul class="nav flex-column">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active text-sidebartext" href="#">
|
|
||||||
<span data-feather="home"></span>
|
|
||||||
Top <span class="sr-only">(current)</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-sidebartext">
|
|
||||||
<span>Resource Categories</span>
|
|
||||||
<a class="d-flex align-items-center" href="#">
|
|
||||||
</a>
|
|
||||||
</h6>
|
|
||||||
<ul class="nav flex-column mb-2 ml-4">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link text-sidebartext" href="#human-resources-collapser">
|
|
||||||
<span data-feather="list-ul"></span>
|
|
||||||
Human Resources
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link text-sidebartext" href="#marketing-collapser">
|
|
||||||
<span data-feather="list-ul"></span>
|
|
||||||
Marketing
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link text-sidebartext" href="#productivity-collapser">
|
|
||||||
<span data-feather="list-ul"></span>
|
|
||||||
Productivity
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link text-sidebartext" href="#training-collapser">
|
|
||||||
<span data-feather="list-ul"></span>
|
|
||||||
Training
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link text-sidebartext" href="#workflow-collapser">
|
|
||||||
<span data-feather="list-ul"></span>
|
|
||||||
Workflow
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 text-navbartext">
|
|
||||||
<div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 text-navbartext">
|
|
||||||
|
|
||||||
<div class="album py-5 bg-secondary text-navbartext">
|
|
||||||
<div class="container text-navbartext">
|
|
||||||
<input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont"
|
|
||||||
placeholder="Search (What kind of resource are you looking for?)"
|
|
||||||
aria-label="Search">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="album py-5 bg-secondary text-navbartext">
|
|
||||||
<div class="container bg-secondary text-navbartext">
|
|
||||||
<div id="grid-container">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<footer class="page-footer">
|
|
||||||
<div class="container">
|
|
||||||
<p class="float-left">
|
|
||||||
<a href="resources-landing-page.html">Back to original layout</a>
|
|
||||||
</p>
|
|
||||||
<p class="float-right">
|
|
||||||
<a href="#">Back to top</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="scripts/tsUtil.js"></script>
|
|
||||||
<script>loadTSTarget("themes.js");</script>
|
|
||||||
<script src="scripts/index_app.js"></script>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue