Possible colors

public/css/layout.css

@@ -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*/
+    --transparent: #0000;
-    --primary-bg-offset: #ccbca4;/*20% darker*/
+    --primary-bg: #241224aa;/*light blue*/
-    --primary-bg-dark: #dbd0bf;/*10% darker*/
+    --primary-bg-offset: #120612aa;/*20% darker*/
-    --primary-bg-light: #f9f8f5;/*10% lighter*/
+    --primary-bg-dark: #120612aa;/*10% darker*/
-    --primary-font: #000;/*black*/
+    --secondary-bg: #122412aa;/*10% lighter*/
-    --primary-highlight: #0006d4;/*red*/
+    --secondary-bg-opaque: #122412;/*10% lighter*/
-    --primary-highlight-dark: #00013f;/*20% darker*/
+    --primary-font: #aaf;/*white*/
-    --secondary-highlight: #d40074;/*orange*/
+    --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>span,.left-nav .navbar-nav>li>a:hover>span{
-.left-nav .navbar-nav>li>a:focus,.left-nav .navbar-nav>li>a:hover{
+    background:var(--secondary-bg-opaque);
-    color:var(--primary-highlight-dark);
 }
 
 /***active page style for navigation***/
@@ -108,12 +131,8 @@ header {
     color: var(--secondary-highlight);/*orange*/
 }
 
-container {
+.font {
-    background-color:var(--primary-bg);
+    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;
 }

resources/views/layouts/segments/banner.blade.php

@@ -1,8 +1,6 @@
 <div id="header">
     <!--logo-->
     <header>
-        <a href="{{ route('home') }}">
+        <a href="{{ route('home') }}"><div id="banner_text">What's for Dinner</div></a>
-        <img id="banner" class="img-responsive" src="{{ asset('files/images/banner.png')}}" style="width:100%">
-        </a>
     </header>
 </div>

resources/views/layouts/segments/link.blade.php

@@ -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>