Updates to design

pull/1/head
Rebecca Hollis 5 years ago
parent 1bfe148b9d
commit 5c966f6cc0

@ -3,19 +3,19 @@
{ {
"title": "Paycor", "title": "Paycor",
"description": "Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.", "description": "Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.",
"imagePath": "PaycorLogo2-Circle_100x100.png", "imagePath": "PaycorLogo2-Transparent_100x100.png",
"urlText": "https://www.paycor.com/" "urlText": "https://www.paycor.com/"
}, },
{ {
"title": "Gmail", "title": "Gmail",
"description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.", "description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.",
"imagePath": "GmailCircle_100x100.png", "imagePath": "Gmail-Transparent_100x100.png",
"urlText": "https://mail.google.com" "urlText": "https://mail.google.com"
}, },
{ {
"title": "Workplace", "title": "Workplace",
"description": "Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing.", "description": "Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing.",
"imagePath": "WorkplaceLogo-Circle_100x100.png", "imagePath": "WorkplaceLogo-Transparent_100x100.png",
"urlText": "https://jdsfaulkner.workplace.com" "urlText": "https://jdsfaulkner.workplace.com"
} }
] ]

@ -12,29 +12,29 @@
<script>require('bootstrap')</script> <script>require('bootstrap')</script>
</head> </head>
<body hidden ONLOAD="$('body').removeAttr('hidden');"> <body hidden ONLOAD="$('body').removeAttr('hidden');">
<header> <header>
<div class="collapse bg-primary" id="navbarHeader">
<div class="collapse bg-secondary" id="navbarHeader">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-8 col-md-7 py-4"> <div class="col-sm-8 col-md-7 py-4">
<p class="text-success">You rely on a vast amount of resources to do your job. How can you keep <p class="text-warning">You rely on a vast amount of resources to do your job. How can you keep track of them all? Explore ResourceFinder. From payroll to project-management, ResourceFinder can help you locate the tools you need.</p>
track of them all? Explore ResourceFinder. From payroll to project-management, ResourceFinder
can help you locate the tools you need.</p>
</div> </div>
<div class="col-sm-4 offset-md-1 py-4"> <div class="col-sm-4 offset-md-1 py-4">
<ul class="list-unstyled"> <ul class="list-unstyled">
<li><a href="#" class="text-success">Help</a></li> <li><a href="#" class="text-warning">Help</a></li>
<li><a href="#" class="text-success">Feedback</a></li> <li><a href="#" class="text-warning">Feedback</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="navbar navbar-dark bg-secondary shadow-sm">
<div class="navbar navbar-light bg-primary shadow-sm">
<div class="container d-flex justify-content-between"> <div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-left"> <a class="navbar-brand" href="#">
<img src="../images/JDS_faulkner_Logo_NoTextAtBottom.png" height="30" class="d-inline-block align-top" alt="JDSfaulkner logo" loading="lazy">&nbsp;&nbsp;ResourceFinder
<strong>ResourceFinder</strong>
</a> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
@ -42,33 +42,30 @@
</button> </button>
</div> </div>
</div> </div>
</header> </header>
<main> <main>
<div class="album py-5 bg-primary"> <div class="album py-5 bg-secondary">
<button id="theme-toggle" class="btn btn-light mb-2">Push to change theme</button> <button id="theme-toggle" class="btn btn-light mb-2">Push to change theme</button>
<div class="container"> <div class="container">
<input class="form-control form-control-dark w-100 bg-warning border-0" placeholder="Search" <input class="form-control form-control-dark w-100 bg-info border border-boxborder" placeholder="Search"
aria-label="Search"> aria-label="Search">
</div> </div>
<div class="album py-5"> <div class="album py-5 bg-secondary">
<div class="container bg-primary"> <div class="container bg-secondary">
<!-- div container--> <!-- div container-->
<div id="grid-container" class="row"> <div id="grid-container" class="row">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<footer class="page-footer"> <footer class="page-footer">
<div class="container"> <div class="container">
<p class="float-right text-white"> <p class="float-right text-warning">
<a href="#">Back to top</a> <a href="#">Back to top</a>
</p> </p>
</div> </div>

@ -1,32 +1,40 @@
.main { .main {
background-color: primary; background-color: secondary;
color: warning
} }
.container { .album {
background-color: secondary; background-color: secondary;
color: warning
} }
.img-thumbnail { .img-thumbnail {
background-color: secondary; background-color: primary;
} }
.thumbnail {
background-color: primary;
}
.navbar {
color: #c1c0cc;
}
.form-control { .form-control {
color: #c2c2c2; color: #c1c0cc;
} }
.form-control:focus { .form-control:focus {
color: #c2c2c2; color: #c1c0cc;
} }
.form-control::-webkit-input-placeholder { color: #c2c2c2; } /* WebKit, Blink, Edge */ .form-control::-webkit-input-placeholder { color: #c1c0cc; } /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: #c2c2c2; } /* Mozilla Firefox 4 to 18 */ .form-control:-moz-placeholder { color: #c1c0cc; } /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: #c2c2c2; } /* Mozilla Firefox 19+ */ .form-control::-moz-placeholder { color: #c1c0cc; } /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: #c2c2c2; } /* Internet Explorer 10-11 */ .form-control:-ms-input-placeholder { color: #c1c0cc; } /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: #c2c2c2; } /* Microsoft Edge */ .form-control::-ms-input-placeholder { color: #c1c0cc; } /* Microsoft Edge */
.footer { .footer {

@ -12,10 +12,10 @@ $enable-rounded: true !default;
} }
.web-card-background{ .web-card-background{
background-color: map-get($theme-colors, warning); background-color: map-get($theme-colors, inactivecard);
} }
.web-card-background:hover{ .web-card-background:hover{
background-color: map-get($theme-colors, secondary); background-color: map-get($theme-colors, activecard);
} }

@ -1,10 +1,13 @@
$theme-colors: ( $theme-colors: (
"primary": #0B031C, "primary": #707070,
"secondary": #211F37, "secondary": #303033,
"success": #A79D9D, "success": #707070,
"info": #1C1CDE, "info": #202023,
"warning": #303033 "warning": #c1c0cc,
"inactivecard": #002752,
"activecard": #13a04a,
"boxborder": #55555c,
); );
@import "theme-base"; @import "theme-base";
Loading…
Cancel
Save