Updates to design

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

@ -3,19 +3,19 @@
{
"title": "Paycor",
"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/"
},
{
"title": "Gmail",
"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"
},
{
"title": "Workplace",
"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"
}
]

@ -12,29 +12,29 @@
<script>require('bootstrap')</script>
</head>
<body hidden ONLOAD="$('body').removeAttr('hidden');">
<header>
<div class="collapse bg-primary" id="navbarHeader">
<div class="collapse bg-secondary" id="navbarHeader">
<div class="container">
<div class="row">
<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
track of them all? Explore ResourceFinder. From payroll to project-management, ResourceFinder
can help you locate the tools you need.</p>
<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>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<ul class="list-unstyled">
<li><a href="#" class="text-success">Help</a></li>
<li><a href="#" class="text-success">Feedback</a></li>
<li><a href="#" class="text-warning">Help</a></li>
<li><a href="#" class="text-warning">Feedback</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-secondary shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-left">
<strong>ResourceFinder</strong>
<div class="navbar navbar-light bg-primary shadow-sm">
<div class="container d-flex justify-content-between">
<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
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
@ -42,33 +42,30 @@
</button>
</div>
</div>
</header>
<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>
<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">
</div>
<div class="album py-5">
<div class="container bg-primary">
<div class="album py-5 bg-secondary">
<div class="container bg-secondary">
<!-- div container-->
<div id="grid-container" class="row">
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer">
<div class="container">
<p class="float-right text-white">
<p class="float-right text-warning">
<a href="#">Back to top</a>
</p>
</div>

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

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

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