forked from acearo/base-laravel
Possible colors
This commit is contained in:
parent
ebcb124adc
commit
0c9b58dfae
4 changed files with 87 additions and 53 deletions
116
public/css/layout.css
vendored
116
public/css/layout.css
vendored
|
|
@ -1,23 +1,26 @@
|
|||
/***color definitions***/
|
||||
:root{
|
||||
/***light/dark determined from here: https://www.hexcolortool.com/ - convert css to sass files at later date and use built in tools***/
|
||||
--primary-bg: #eae4da;/*light blue*/
|
||||
--primary-bg-offset: #ccbca4;/*20% darker*/
|
||||
--primary-bg-dark: #dbd0bf;/*10% darker*/
|
||||
--primary-bg-light: #f9f8f5;/*10% lighter*/
|
||||
--primary-font: #000;/*black*/
|
||||
--primary-highlight: #0006d4;/*red*/
|
||||
--primary-highlight-dark: #00013f;/*20% darker*/
|
||||
--secondary-highlight: #d40074;/*orange*/
|
||||
--transparent: #0000;
|
||||
--primary-bg: #241224aa;/*light blue*/
|
||||
--primary-bg-offset: #120612aa;/*20% darker*/
|
||||
--primary-bg-dark: #120612aa;/*10% darker*/
|
||||
--secondary-bg: #122412aa;/*10% lighter*/
|
||||
--secondary-bg-opaque: #122412;/*10% lighter*/
|
||||
--primary-font: #aaf;/*white*/
|
||||
--primary-highlight: #0000df;/*red*/
|
||||
--primary-highlight-dark: #000064;/*20% darker*/
|
||||
--secondary-highlight: #f80049;/*orange*/
|
||||
}
|
||||
|
||||
/***this is background***/
|
||||
html {
|
||||
background-image: url("/images/background.png");
|
||||
height:100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--primary-bg);
|
||||
background-color: var(--transparent);
|
||||
margin: 0;
|
||||
min-height:100%;
|
||||
padding-bottom:75px;
|
||||
|
|
@ -27,7 +30,7 @@ body {
|
|||
/***this is for page heading***/
|
||||
|
||||
h1 {
|
||||
color: black;
|
||||
color: var(--primary-font);
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 26px;
|
||||
margin:0;
|
||||
|
|
@ -37,7 +40,7 @@ h1 {
|
|||
/***this is for subheading***/
|
||||
|
||||
h2 {
|
||||
color: black;
|
||||
color: var(--primary-font);
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
|
@ -45,7 +48,7 @@ h2 {
|
|||
/***this is the paragraph text***/
|
||||
|
||||
p, .panel-body {
|
||||
color: black;
|
||||
color: var(--primary-font);
|
||||
font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
|
@ -57,49 +60,69 @@ p, .panel-body {
|
|||
/***this is the banner/logo placement***/
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
left: 10px;
|
||||
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#banner_text{
|
||||
font-size:10vw;
|
||||
color: var(--primary-highlight-dark);
|
||||
}
|
||||
|
||||
/***this is placement/style for the right menu***/
|
||||
|
||||
.right-nav{
|
||||
background-color:var(--primary-bg-offset);
|
||||
background-color:var(--transparent);
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
border:none;
|
||||
padding-right:10px;
|
||||
}
|
||||
|
||||
.right-nav .navbar-toggle,.right-nav .navbar-toggle:active{
|
||||
background-color:var(--primary-bg-dark);
|
||||
}
|
||||
|
||||
.right-nav .navbar-toggle:hover{
|
||||
background-color:var(--secondary-bg);
|
||||
}
|
||||
|
||||
/***this is style for links in the right menu***/
|
||||
.right-nav .navbar-brand, .right-nav .navbar-nav>li>a,.right-nav .navbar-text{
|
||||
color:var(--primary-highlight);
|
||||
color:var(--primary-highlight-dark);
|
||||
}
|
||||
/***hover style for links***/
|
||||
.right-nav .navbar-nav>li>a:focus,.right-nav .navbar-nav>li>a:hover{
|
||||
color:var(--primary-highlight-dark);
|
||||
color:var(--primary-highlight);
|
||||
}
|
||||
|
||||
/***this is placement/style for left menu***/
|
||||
|
||||
.left-nav{
|
||||
background-color:var(--primary-bg-offset);
|
||||
background-color:var(--transparent);
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
border:none;
|
||||
margin-bottom:0;
|
||||
padding-left:10 px;
|
||||
}
|
||||
|
||||
/***this is style for links in the left menu***/
|
||||
.left-nav .navbar-brand, .left-nav .navbar-nav>li>a,.left-nav .navbar-text{
|
||||
color:var(--primary-highlight-dark);
|
||||
}
|
||||
.left-nav .navbar-nav>li>a>span{
|
||||
background-color:var(--secondary-bg);
|
||||
padding:10px;
|
||||
border-radius:25px
|
||||
}
|
||||
/***hover style for links***/
|
||||
.left-nav .navbar-nav>li>a:focus,.left-nav .navbar-nav>li>a:hover{
|
||||
color:var(--primary-highlight);
|
||||
}
|
||||
|
||||
/***hover style for links***/
|
||||
.left-nav .navbar-nav>li>a:focus,.left-nav .navbar-nav>li>a:hover{
|
||||
color:var(--primary-highlight-dark);
|
||||
.left-nav .navbar-nav>li>a:focus>span,.left-nav .navbar-nav>li>a:hover>span{
|
||||
background:var(--secondary-bg-opaque);
|
||||
}
|
||||
|
||||
/***active page style for navigation***/
|
||||
|
|
@ -108,12 +131,8 @@ header {
|
|||
color: var(--secondary-highlight);/*orange*/
|
||||
}
|
||||
|
||||
container {
|
||||
background-color:var(--primary-bg);
|
||||
}
|
||||
|
||||
.font {color:var(--primary-highlight);
|
||||
|
||||
.font {
|
||||
color:var(--primary-highlight);
|
||||
}
|
||||
|
||||
.form_name {
|
||||
|
|
@ -146,13 +165,13 @@ list {
|
|||
}
|
||||
|
||||
.list {
|
||||
color: black;
|
||||
color: var(--primary-font);
|
||||
font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.footer_black {
|
||||
color: black;
|
||||
color: var(--primary-font);
|
||||
font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -165,7 +184,7 @@ list {
|
|||
|
||||
/***push footer to bottom of page***/
|
||||
.footer{
|
||||
background-color:var(--primary-bg-offset);
|
||||
background-color:var(--primary-bg-dark);
|
||||
bottom: 0;
|
||||
left:auto;
|
||||
padding:5px;
|
||||
|
|
@ -175,8 +194,32 @@ list {
|
|||
width:100%;
|
||||
}
|
||||
|
||||
.panel-default>.pannel-body,.panel-default>.panel-heading,.panel-default{
|
||||
.footer a, .footer a span{
|
||||
color: var(--primary-highlight);
|
||||
}
|
||||
|
||||
.footer a:hover, .footer a:hover span{
|
||||
color: var(--secondary-highlight);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.panel-default{
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
|
||||
.panel-default>.panel-heading {
|
||||
background-color: var(--primary-bg-dark);
|
||||
border-top-right-radius:15px;
|
||||
border-top-left-radius:15px;
|
||||
}
|
||||
|
||||
.panel-default>.panel-body {
|
||||
background-color: var(--primary-bg);
|
||||
border-bottom-right-radius:15px;
|
||||
border-bottom-left-radius:15px;
|
||||
}
|
||||
|
||||
.panel-default>.panel-body,.panel-default>.panel-heading,.panel-default{
|
||||
border:none;
|
||||
box-shadow:none;
|
||||
}
|
||||
|
|
@ -188,7 +231,7 @@ list {
|
|||
|
||||
/***apply to every other table row***/
|
||||
.table-striped > tbody > tr:nth-of-type(2n){
|
||||
background-color: var(--primary-bg-light);
|
||||
background-color: var(--secondary-bg);
|
||||
}
|
||||
|
||||
/***apply highlight style***/
|
||||
|
|
@ -197,7 +240,7 @@ list {
|
|||
}
|
||||
|
||||
.header-section{
|
||||
background-color: var(--primary-bg-offset)
|
||||
background-color: var(--transparent)
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -205,13 +248,6 @@ list {
|
|||
overflow:hidden
|
||||
}
|
||||
|
||||
.faq-title{
|
||||
font-weight: bold;
|
||||
}
|
||||
.faq-body{
|
||||
background-color: var(--primary-bg-light);
|
||||
}
|
||||
|
||||
.bottomRight{
|
||||
display:none;
|
||||
}
|
||||
|
|
|
|||
BIN
public/images/background.png
Normal file
BIN
public/images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
|
|
@ -1,8 +1,6 @@
|
|||
<div id="header">
|
||||
<!--logo-->
|
||||
<header>
|
||||
<a href="{{ route('home') }}">
|
||||
<img id="banner" class="img-responsive" src="{{ asset('files/images/banner.png')}}" style="width:100%">
|
||||
</a>
|
||||
<a href="{{ route('home') }}"><div id="banner_text">What's for Dinner</div></a>
|
||||
</header>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<li><a href="{{ route($route) }}" class="{{Request::route()->getName() == $route? 'active-page' : ''}}">{{ $text }}</a></li>
|
||||
<li class="test"><a href="{{ route($route) }}" class="test {{Request::route()->getName() == $route? 'active-page' : ''}}"><span>{{ $text }}</span></a></li>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue