Layout improvement: hover on card implemented. (website)

6 files changed, 44 insertions, 5 deletions

diff --git a/site/public/css/colors.css b/site/public/css/colors.css
index 99a1707..c0a81aa 100644
--- a/site/public/css/colors.css
+++ b/site/public/css/colors.css
@@ -2,6 +2,7 @@
 	background-color: #1289A7 !important;
 	background-color: #0652DD !important;
 	background-color: #142639 !important;
+	background-image: linear-gradient(359deg, #1289A7 -70%, #142639 100%);
 }
 a, .page-link {
 	color: #142639;
@@ -30,8 +31,19 @@ a.u:hover, .page-link:hover {
 	color: #142639 !important;
 }
 .btn-outline-success {
+	/*
 	color: #1289A7 !important;
 	border: 1px solid #1289A7 !important;
+	*/
+	color: #ddd !important;
+	border: 1px solid #8a98a2 !important;
+	background-image: linear-gradient(20deg, #1289A7 -100%, #142639 100%);
+}
+}
+.btn-outline-success:hover {
+	color: #fff !important;
+	border: 1px solid #fff !important;
+	background-color:  #142639 !important;
 }
 
 .text-primary {
@@ -67,3 +79,6 @@ a.u:hover, .page-link:hover {
 	box-shadow: 1px 1px 2px 1px #142639, 0 0 3px 1px #F89838 !important; 
 
 }
+.form-control {
+	background-image: linear-gradient(0deg,#009688 2px,rgba(0,150,136,0) 0),linear-gradient(0deg,#1289A7 1px,transparent 0);
+}
diff --git a/site/public/css/custom.css b/site/public/css/custom.css
index 2758acd..23f8d32 100644
--- a/site/public/css/custom.css
+++ b/site/public/css/custom.css
@@ -93,8 +93,31 @@ body > .container {
 	box-shadow: 0 .25rem .75rem #d1d8e0;
 	border: 0.5px solid #d1d8e0 !important;
 	box-shadow: 1rem 1rem 1rem #d1d8e0 !important;
+
+	box-shadow: 1rem 1rem 1rem #aaa !important;
+	box-shadow: .5rem .5rem 1rem #aaa, 1rem 1rem 1rem #aaa !important;
+
+	border-top: 2px solid white; 
+	*/
+	box-shadow: 0rem 0rem .1rem .01rem #d1d8e0, 1rem 1rem 1rem #d1d8e0 !important;
+	border-left: 3px solid white; 
+}
+.card:hover {
+	box-shadow: 0.5rem 0.5rem 0.5rem #aaa !important;
+	transition: box-shadow .1s cubic-bezier(.4,0,1,1);
+
+	will-change: box-shadow,transform;
+	/*
+	border-left: 4px solid #d1d8e0; 
+	border-left: 4px solid #12CBC4; 
+	border-left: 3px solid #142639 ; 
+	border-left: 4px solid white; 
+	*/
+	border-left: 3px solid #1289A7; 
+	/*
+	border-top: 4px solid #1289A7; 
+	border-top: 2px solid #1289A7; 
 	*/
-	box-shadow: 0rem 0rem .2rem .05rem #d1d8e0, 1rem 1rem 1rem #d1d8e0 !important;
 }
 
 footer {
@@ -163,6 +186,7 @@ footer {
 
 .border-top { border-top: 1px solid #e5e5e5; }
 .border-bottom { border-bottom: 1px solid #e5e5e5; }
+.border-white { border: 1px solid white; }
 
 .ml-10 {
 	margin-left: 10px !important;
diff --git a/site/resources/views/feeds.blade.php b/site/resources/views/feeds.blade.php
index 8a68b9c..5ab6bb5 100644
--- a/site/resources/views/feeds.blade.php
+++ b/site/resources/views/feeds.blade.php
@@ -68,7 +68,7 @@ foreach( $data as $offer) {
 					<a class="w-100 u" href="/{{ $offer->url }}" style="word-wrap: none;">{{ $offer->linktext }}</a>
 			</div>
 		</a>
-			<img {{ $width }} data-href="/{{ $offer->url }}" class="card-img-right border-left-0 img-thumbnail d-none d-xs-none d-md-block float-right img-responsive js-link-replacement" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{ $offer->name }}">
+			<img {{ $width }} data-href="/{{ $offer->url }}" class="card-img-right border-white img-thumbnail d-none d-xs-none d-md-block float-right img-responsive js-link-replacement" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{ $offer->name }}">
 	</div>
 </div>
 
diff --git a/site/resources/views/index.blade.php b/site/resources/views/index.blade.php
index 54e37e5..1b60c43 100644
--- a/site/resources/views/index.blade.php
+++ b/site/resources/views/index.blade.php
@@ -95,7 +95,7 @@ if ( empty($data) ) {
 			
 			<a class="w-100 u" href="/{{ $offer->url }}" style="word-wrap: none;">{{ $offer->linktext }}</a>
 		</div>
-			<img data-href="/{{ $offer->url }}" class="card-img-right border-left-0 img-thumbnail d-none d-xs-none d-md-block float-right js-link-replacement" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{ $offer->name }}">
+			<img data-href="/{{ $offer->url }}" class="card-img-right border-white img-thumbnail d-none d-xs-none d-md-block float-right js-link-replacement" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{ $offer->name }}">
 	</div>
 </div>
 
diff --git a/site/resources/views/offer.blade.php b/site/resources/views/offer.blade.php
index aa9ffae..7ab04e1 100644
--- a/site/resources/views/offer.blade.php
+++ b/site/resources/views/offer.blade.php
@@ -101,7 +101,7 @@ if ( !$data->count() ) {
 					</p>
 				</div>
 			</div>
-			<img class="card-img-right flex-auto d-none d-md-block border-left-0 img-thumbnail" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{$offer->name}} :: {{ $offer->shop }}">
+			<img class="card-img-right flex-auto d-none d-md-block border-white img-thumbnail" src="{{ $offer->image_url }}" alt="{{ $offer->name }}" title="{{$offer->name}} :: {{ $offer->shop }}">
 
 			<!-- <= sm -->
 			<!-- Maybe make the image a link
diff --git a/site/resources/views/snippets/navbar.blade.php b/site/resources/views/snippets/navbar.blade.php
index 1f07897..4405fcf 100644
--- a/site/resources/views/snippets/navbar.blade.php
+++ b/site/resources/views/snippets/navbar.blade.php
@@ -37,7 +37,7 @@
 -->
           <form class="form-inline mt-2 mt-md-0" action="/search">
             <input class="form-control mr-sm-2" name="q" type="text" placeholder="Suchen… zB Glenfiddich" aria-label="Search">
-            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
+            <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><span class="oi oi-magnifying-glass"></span></button>
           </form>
 <!--
           <ul class="navbar-nav ml-2">