commit b56b3d9b299a79b7ec0f48b2a8fd86a8766a8d80
Author: Adam Mištera <amistera@students.zcu.cz>
Date:   Mon Apr 27 13:03:20 2020 +0200

    Issue #7845 @1h
    [+] Fix funkčnosti a vizualizace po provedení merge

diff --git a/app/Http/Controllers/FavoriteArtefactsController.php b/app/Http/Controllers/FavoriteArtefactsController.php
index df6f9f0..c9b62ac 100644
--- a/app/Http/Controllers/FavoriteArtefactsController.php
+++ b/app/Http/Controllers/FavoriteArtefactsController.php
@@ -24,20 +24,17 @@ class FavoriteArtefactsController extends Controller
     {
         if(Auth::check())
         {
-            $userId = Auth::user()->id;
-            $list = ArtefactUser::where('user_id', $userId)->get();
-            $finalData = array();
-            foreach($list as $item)
+            $id = Auth::id();
+            $artefacts = User::find($id)->likesArtefacts()->get();
+            foreach($artefacts as $item)
             {
-                $tmp = Artefact::where('id', $item->artefact_id)->get();
-                $tmp['likes'] = Artefact::find($item->artefact_id)->users()->count();
-                array_push($finalData, $tmp);
+                $item['likes'] = Artefact::find($item->id)->users()->count();
             }
 
             $data = array(
                 'title' => 'Favorite artefacts',
-                'user' => User::find($userId),
-                'artefacts' => $finalData
+                'user' => $id,
+                'artefacts' => $artefacts
             );
             return view('favartefacts.index') -> with($data);
         }
@@ -59,21 +56,19 @@ class FavoriteArtefactsController extends Controller
      */
     public function show($id)
     {
-        $list = ArtefactUser::where('user_id', $id)->get();
-        $finalData = array();
-        foreach($list as $item)
+        $artefacts = User::find($id)->likesArtefacts()->get();
+        foreach($artefacts as $item)
         {
-            $tmp = Artefact::where('id', $item->artefact_id)->get();
-            $tmp['likes'] = Artefact::find($item->artefact_id)->users()->count();
-            array_push($finalData, $tmp);
+            $item['likes'] = Artefact::find($item->id)->users()->count();
         }
 
+
         $data = array(
             'title' => 'Favorite artefacts',
             'id' => $id,
             'user' => User::find($id),
-            'userId' => Auth::user()->id,
-            'artefacts' => $finalData
+            'userId' => Auth::id(),
+            'artefacts' => $artefacts
         );
         return view('favartefacts.index') -> with($data);
     }
diff --git a/public/css/app.css b/public/css/app.css
index bc9d075..e6a65ba 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -18,7 +18,7 @@
   --green: #38c172;
   --teal: #4dc0b5;
   --cyan: #6cb2eb;
-  --white: #ffff;
+  --white: #ffffff;
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #3490dc;
@@ -546,7 +546,7 @@ a > code {
 kbd {
   padding: 0.2rem 0.4rem;
   font-size: 87.5%;
-  color: #ffff;
+  color: #ffffff;
   background-color: #212529;
   border-radius: 0.2rem;
 }
@@ -2049,7 +2049,7 @@ pre code {
 }
 
 .table .thead-dark th {
-  color: #ffff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #454d55;
 }
@@ -2061,7 +2061,7 @@ pre code {
 }
 
 .table-dark {
-  color: #ffff;
+  color: #ffffff;
   background-color: #343a40;
 }
 
@@ -2080,7 +2080,7 @@ pre code {
 }
 
 .table-dark.table-hover tbody tr:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: rgba(255, 255, 255, 0.075);
 }
 
@@ -2156,7 +2156,7 @@ pre code {
   font-weight: 400;
   line-height: 1.6;
   color: #495057;
-  background-color: #ffff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
@@ -2181,7 +2181,7 @@ pre code {
 
 .form-control:focus {
   color: #495057;
-  background-color: #ffff;
+  background-color: #ffffff;
   border-color: #a1cbef;
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
@@ -2220,7 +2220,7 @@ pre code {
 
 select.form-control:focus::-ms-value {
   color: #495057;
-  background-color: #ffff;
+  background-color: #ffffff;
 }
 
 .form-control-file,
@@ -2370,7 +2370,7 @@ textarea.form-control {
   margin-top: 0.1rem;
   font-size: 0.7875rem;
   line-height: 1.6;
-  color: #ffff;
+  color: #ffffff;
   background-color: rgba(56, 193, 114, 0.9);
   border-radius: 0.25rem;
 }
@@ -2408,7 +2408,7 @@ textarea.form-control.is-valid {
 .custom-select.is-valid {
   border-color: #38c172;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #ffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #ffffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 
 .was-validated .custom-select:valid:focus,
@@ -2484,7 +2484,7 @@ textarea.form-control.is-valid {
   margin-top: 0.1rem;
   font-size: 0.7875rem;
   line-height: 1.6;
-  color: #ffff;
+  color: #ffffff;
   background-color: rgba(227, 52, 47, 0.9);
   border-radius: 0.25rem;
 }
@@ -2522,7 +2522,7 @@ textarea.form-control.is-invalid {
 .custom-select.is-invalid {
   border-color: #e3342f;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") #ffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") #ffffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 
 .was-validated .custom-select:invalid:focus,
@@ -2695,20 +2695,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-primary {
-  color: #ffff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
 
 .btn-primary:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #227dc7;
   border-color: #2176bd;
 }
 
 .btn-primary:focus,
 .btn-primary.focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #227dc7;
   border-color: #2176bd;
   box-shadow: 0 0 0 0.2rem rgba(82, 161, 225, 0.5);
@@ -2716,7 +2716,7 @@ fieldset:disabled a.btn {
 
 .btn-primary.disabled,
 .btn-primary:disabled {
-  color: #ffff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -2724,7 +2724,7 @@ fieldset:disabled a.btn {
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #2176bd;
   border-color: #1f6fb2;
 }
@@ -2736,20 +2736,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-secondary {
-  color: #ffff;
+  color: #ffffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
 
 .btn-secondary:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #5a6268;
   border-color: #545b62;
 }
 
 .btn-secondary:focus,
 .btn-secondary.focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #5a6268;
   border-color: #545b62;
   box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
@@ -2757,7 +2757,7 @@ fieldset:disabled a.btn {
 
 .btn-secondary.disabled,
 .btn-secondary:disabled {
-  color: #ffff;
+  color: #ffffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -2765,7 +2765,7 @@ fieldset:disabled a.btn {
 .btn-secondary:not(:disabled):not(.disabled):active,
 .btn-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-secondary.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #545b62;
   border-color: #4e555b;
 }
@@ -2777,20 +2777,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-success {
-  color: #ffff;
+  color: #ffffff;
   background-color: #38c172;
   border-color: #38c172;
 }
 
 .btn-success:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #2fa360;
   border-color: #2d995b;
 }
 
 .btn-success:focus,
 .btn-success.focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #2fa360;
   border-color: #2d995b;
   box-shadow: 0 0 0 0.2rem rgba(86, 202, 135, 0.5);
@@ -2798,7 +2798,7 @@ fieldset:disabled a.btn {
 
 .btn-success.disabled,
 .btn-success:disabled {
-  color: #ffff;
+  color: #ffffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -2806,7 +2806,7 @@ fieldset:disabled a.btn {
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #2d995b;
   border-color: #2a9055;
 }
@@ -2824,14 +2824,14 @@ fieldset:disabled a.btn {
 }
 
 .btn-info:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #4aa0e6;
   border-color: #3f9ae5;
 }
 
 .btn-info:focus,
 .btn-info.focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #4aa0e6;
   border-color: #3f9ae5;
   box-shadow: 0 0 0 0.2rem rgba(97, 157, 206, 0.5);
@@ -2847,7 +2847,7 @@ fieldset:disabled a.btn {
 .btn-info:not(:disabled):not(.disabled):active,
 .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #3f9ae5;
   border-color: #3495e3;
 }
@@ -2900,20 +2900,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-danger {
-  color: #ffff;
+  color: #ffffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
 
 .btn-danger:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #d0211c;
   border-color: #c51f1a;
 }
 
 .btn-danger:focus,
 .btn-danger.focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #d0211c;
   border-color: #c51f1a;
   box-shadow: 0 0 0 0.2rem rgba(231, 82, 78, 0.5);
@@ -2921,7 +2921,7 @@ fieldset:disabled a.btn {
 
 .btn-danger.disabled,
 .btn-danger:disabled {
-  color: #ffff;
+  color: #ffffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -2929,7 +2929,7 @@ fieldset:disabled a.btn {
 .btn-danger:not(:disabled):not(.disabled):active,
 .btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #c51f1a;
   border-color: #b91d19;
 }
@@ -2982,20 +2982,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-dark {
-  color: #ffff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #343a40;
 }
 
 .btn-dark:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #23272b;
   border-color: #1d2124;
 }
 
 .btn-dark:focus,
 .btn-dark.focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #23272b;
   border-color: #1d2124;
   box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
@@ -3003,7 +3003,7 @@ fieldset:disabled a.btn {
 
 .btn-dark.disabled,
 .btn-dark:disabled {
-  color: #ffff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3011,7 +3011,7 @@ fieldset:disabled a.btn {
 .btn-dark:not(:disabled):not(.disabled):active,
 .btn-dark:not(:disabled):not(.disabled).active,
 .show > .btn-dark.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #1d2124;
   border-color: #171a1d;
 }
@@ -3028,7 +3028,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-primary:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -3047,7 +3047,7 @@ fieldset:disabled a.btn {
 .btn-outline-primary:not(:disabled):not(.disabled):active,
 .btn-outline-primary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-primary.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -3064,7 +3064,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-secondary:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -3083,7 +3083,7 @@ fieldset:disabled a.btn {
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
 .btn-outline-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-secondary.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -3100,7 +3100,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-success:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -3119,7 +3119,7 @@ fieldset:disabled a.btn {
 .btn-outline-success:not(:disabled):not(.disabled):active,
 .btn-outline-success:not(:disabled):not(.disabled).active,
 .show > .btn-outline-success.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -3208,7 +3208,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-danger:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -3227,7 +3227,7 @@ fieldset:disabled a.btn {
 .btn-outline-danger:not(:disabled):not(.disabled):active,
 .btn-outline-danger:not(:disabled):not(.disabled).active,
 .show > .btn-outline-danger.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -3280,7 +3280,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-dark:hover {
-  color: #ffff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3299,7 +3299,7 @@ fieldset:disabled a.btn {
 .btn-outline-dark:not(:disabled):not(.disabled):active,
 .btn-outline-dark:not(:disabled):not(.disabled).active,
 .show > .btn-outline-dark.dropdown-toggle {
-  color: #ffff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3435,7 +3435,7 @@ input[type=button].btn-block {
   color: #212529;
   text-align: left;
   list-style: none;
-  background-color: #ffff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
@@ -3622,7 +3622,7 @@ input[type=button].btn-block {
 
 .dropdown-item.active,
 .dropdown-item:active {
-  color: #ffff;
+  color: #ffffff;
   text-decoration: none;
   background-color: #3490dc;
 }
@@ -3984,7 +3984,7 @@ input[type=button].btn-block {
 }
 
 .custom-control-input:checked ~ .custom-control-label::before {
-  color: #ffff;
+  color: #ffffff;
   border-color: #3490dc;
   background-color: #3490dc;
 }
@@ -3998,7 +3998,7 @@ input[type=button].btn-block {
 }
 
 .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-  color: #ffff;
+  color: #ffffff;
   background-color: #cce3f6;
   border-color: #cce3f6;
 }
@@ -4028,7 +4028,7 @@ input[type=button].btn-block {
   height: 1rem;
   pointer-events: none;
   content: "";
-  background-color: #ffff;
+  background-color: #ffffff;
   border: #adb5bd solid 1px;
 }
 
@@ -4048,7 +4048,7 @@ input[type=button].btn-block {
 }
 
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
@@ -4057,7 +4057,7 @@ input[type=button].btn-block {
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23ffff' d='M0 2h4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23ffffff' d='M0 2h4'/%3e%3c/svg%3e");
 }
 
 .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -4073,7 +4073,7 @@ input[type=button].btn-block {
 }
 
 .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffff'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
 }
 
 .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -4108,7 +4108,7 @@ input[type=button].btn-block {
 }
 
 .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
-  background-color: #ffff;
+  background-color: #ffffff;
   transform: translateX(0.75rem);
 }
 
@@ -4126,7 +4126,7 @@ input[type=button].btn-block {
   line-height: 1.6;
   color: #495057;
   vertical-align: middle;
-  background: #ffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+  background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   -webkit-appearance: none;
@@ -4142,7 +4142,7 @@ input[type=button].btn-block {
 
 .custom-select:focus::-ms-value {
   color: #495057;
-  background-color: #ffff;
+  background-color: #ffffff;
 }
 
 .custom-select[multiple],
@@ -4228,7 +4228,7 @@ input[type=button].btn-block {
   font-weight: 400;
   line-height: 1.6;
   color: #495057;
-  background-color: #ffff;
+  background-color: #ffffff;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
 }
@@ -4495,7 +4495,7 @@ input[type=button].btn-block {
 
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
-  color: #ffff;
+  color: #ffffff;
   background-color: #3490dc;
 }
 
@@ -4906,12 +4906,12 @@ input[type=button].btn-block {
 }
 
 .navbar-dark .navbar-brand {
-  color: #ffff;
+  color: #ffffff;
 }
 
 .navbar-dark .navbar-brand:hover,
 .navbar-dark .navbar-brand:focus {
-  color: #ffff;
+  color: #ffffff;
 }
 
 .navbar-dark .navbar-nav .nav-link {
@@ -4931,7 +4931,7 @@ input[type=button].btn-block {
 .navbar-dark .navbar-nav .active > .nav-link,
 .navbar-dark .navbar-nav .nav-link.show,
 .navbar-dark .navbar-nav .nav-link.active {
-  color: #ffff;
+  color: #ffffff;
 }
 
 .navbar-dark .navbar-toggler {
@@ -4948,12 +4948,12 @@ input[type=button].btn-block {
 }
 
 .navbar-dark .navbar-text a {
-  color: #ffff;
+  color: #ffffff;
 }
 
 .navbar-dark .navbar-text a:hover,
 .navbar-dark .navbar-text a:focus {
-  color: #ffff;
+  color: #ffffff;
 }
 
 .card {
@@ -4962,7 +4962,7 @@ input[type=button].btn-block {
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #ffff;
+  background-color: #ffffff;
   background-clip: border-box;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
@@ -5233,7 +5233,7 @@ input[type=button].btn-block {
   margin-left: -1px;
   line-height: 1.25;
   color: #3490dc;
-  background-color: #ffff;
+  background-color: #ffffff;
   border: 1px solid #dee2e6;
 }
 
@@ -5264,7 +5264,7 @@ input[type=button].btn-block {
 
 .page-item.active .page-link {
   z-index: 3;
-  color: #ffff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -5273,7 +5273,7 @@ input[type=button].btn-block {
   color: #6c757d;
   pointer-events: none;
   cursor: auto;
-  background-color: #ffff;
+  background-color: #ffffff;
   border-color: #dee2e6;
 }
 
@@ -5349,13 +5349,13 @@ a.badge:focus {
 }
 
 .badge-primary {
-  color: #ffff;
+  color: #ffffff;
   background-color: #3490dc;
 }
 
 a.badge-primary:hover,
 a.badge-primary:focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #2176bd;
 }
 
@@ -5366,13 +5366,13 @@ a.badge-primary.focus {
 }
 
 .badge-secondary {
-  color: #ffff;
+  color: #ffffff;
   background-color: #6c757d;
 }
 
 a.badge-secondary:hover,
 a.badge-secondary:focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #545b62;
 }
 
@@ -5383,13 +5383,13 @@ a.badge-secondary.focus {
 }
 
 .badge-success {
-  color: #ffff;
+  color: #ffffff;
   background-color: #38c172;
 }
 
 a.badge-success:hover,
 a.badge-success:focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #2d995b;
 }
 
@@ -5434,13 +5434,13 @@ a.badge-warning.focus {
 }
 
 .badge-danger {
-  color: #ffff;
+  color: #ffffff;
   background-color: #e3342f;
 }
 
 a.badge-danger:hover,
 a.badge-danger:focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #c51f1a;
 }
 
@@ -5468,13 +5468,13 @@ a.badge-light.focus {
 }
 
 .badge-dark {
-  color: #ffff;
+  color: #ffffff;
   background-color: #343a40;
 }
 
 a.badge-dark:hover,
 a.badge-dark:focus {
-  color: #ffff;
+  color: #ffffff;
   background-color: #1d2124;
 }
 
@@ -5677,7 +5677,7 @@ a.badge-dark.focus {
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: #ffff;
+  color: #ffffff;
   text-align: center;
   white-space: nowrap;
   background-color: #3490dc;
@@ -5746,7 +5746,7 @@ a.badge-dark.focus {
   position: relative;
   display: block;
   padding: 0.75rem 1.25rem;
-  background-color: #ffff;
+  background-color: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -5764,12 +5764,12 @@ a.badge-dark.focus {
 .list-group-item:disabled {
   color: #6c757d;
   pointer-events: none;
-  background-color: #ffff;
+  background-color: #ffffff;
 }
 
 .list-group-item.active {
   z-index: 2;
-  color: #ffff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -5957,7 +5957,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-primary.list-group-item-action.active {
-  color: #ffff;
+  color: #ffffff;
   background-color: #1b4b72;
   border-color: #1b4b72;
 }
@@ -5974,7 +5974,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-secondary.list-group-item-action.active {
-  color: #ffff;
+  color: #ffffff;
   background-color: #383d41;
   border-color: #383d41;
 }
@@ -5991,7 +5991,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-success.list-group-item-action.active {
-  color: #ffff;
+  color: #ffffff;
   background-color: #1d643b;
   border-color: #1d643b;
 }
@@ -6008,7 +6008,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-info.list-group-item-action.active {
-  color: #ffff;
+  color: #ffffff;
   background-color: #385d7a;
   border-color: #385d7a;
 }
@@ -6025,7 +6025,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-warning.list-group-item-action.active {
-  color: #ffff;
+  color: #ffffff;
   background-color: #857b26;
   border-color: #857b26;
 }
@@ -6042,7 +6042,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-danger.list-group-item-action.active {
-  color: #ffff;
+  color: #ffffff;
   background-color: #761b18;
   border-color: #761b18;
 }
@@ -6059,7 +6059,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-light.list-group-item-action.active {
-  color: #ffff;
+  color: #ffffff;
   background-color: #818182;
   border-color: #818182;
 }
@@ -6076,7 +6076,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-dark.list-group-item-action.active {
-  color: #ffff;
+  color: #ffffff;
   background-color: #1b1e21;
   border-color: #1b1e21;
 }
@@ -6087,7 +6087,7 @@ a.badge-dark.focus {
   font-weight: 700;
   line-height: 1;
   color: #000;
-  text-shadow: 0 1px 0 #ffff;
+  text-shadow: 0 1px 0 #ffffff;
   opacity: 0.5;
 }
 
@@ -6257,7 +6257,7 @@ a.close.disabled {
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
-  background-color: #ffff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0.3rem;
@@ -6488,7 +6488,7 @@ a.close.disabled {
 .tooltip-inner {
   max-width: 200px;
   padding: 0.25rem 0.5rem;
-  color: #ffff;
+  color: #ffffff;
   text-align: center;
   background-color: #000;
   border-radius: 0.25rem;
@@ -6517,7 +6517,7 @@ a.close.disabled {
   line-break: auto;
   font-size: 0.7875rem;
   word-wrap: break-word;
-  background-color: #ffff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0.3rem;
@@ -6561,7 +6561,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=top] > .arrow::after {
   bottom: 1px;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: #ffff;
+  border-top-color: #ffffff;
 }
 
 .bs-popover-right,
@@ -6588,7 +6588,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=right] > .arrow::after {
   left: 1px;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #ffff;
+  border-right-color: #ffffff;
 }
 
 .bs-popover-bottom,
@@ -6612,7 +6612,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=bottom] > .arrow::after {
   top: 1px;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #ffff;
+  border-bottom-color: #ffffff;
 }
 
 .bs-popover-bottom .popover-header::before,
@@ -6651,7 +6651,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=left] > .arrow::after {
   right: 1px;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #ffff;
+  border-left-color: #ffffff;
 }
 
 .popover-header {
@@ -6763,7 +6763,7 @@ a.close.disabled {
   align-items: center;
   justify-content: center;
   width: 15%;
-  color: #ffff;
+  color: #ffffff;
   text-align: center;
   opacity: 0.5;
   transition: opacity 0.15s ease;
@@ -6780,7 +6780,7 @@ a.close.disabled {
 .carousel-control-prev:focus,
 .carousel-control-next:hover,
 .carousel-control-next:focus {
-  color: #ffff;
+  color: #ffffff;
   text-decoration: none;
   outline: 0;
   opacity: 0.9;
@@ -6803,11 +6803,11 @@ a.close.disabled {
 }
 
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
 }
 
 .carousel-indicators {
@@ -6833,7 +6833,7 @@ a.close.disabled {
   margin-left: 3px;
   text-indent: -999px;
   cursor: pointer;
-  background-color: #ffff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
@@ -6859,7 +6859,7 @@ a.close.disabled {
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: #ffff;
+  color: #ffffff;
   text-align: center;
 }
 
@@ -7043,7 +7043,7 @@ button.bg-dark:focus {
 }
 
 .bg-white {
-  background-color: #ffff !important;
+  background-color: #ffffff !important;
 }
 
 .bg-transparent {
@@ -7123,7 +7123,7 @@ button.bg-dark:focus {
 }
 
 .border-white {
-  border-color: #ffff !important;
+  border-color: #ffffff !important;
 }
 
 .rounded-sm {
@@ -10664,7 +10664,7 @@ button.bg-dark:focus {
 }
 
 .text-white {
-  color: #ffff !important;
+  color: #ffffff !important;
 }
 
 .text-primary {
@@ -10857,7 +10857,7 @@ a.text-dark:focus {
 
   .table td,
   .table th {
-    background-color: #ffff !important;
+    background-color: #ffffff !important;
   }
 
   .table-bordered th,
@@ -10904,48 +10904,10 @@ body {
   background-color: #272727;
 }
 
-h5 {
-  color: #efdab3;
-  font-family: "Avenir Medium LINK";
-  line-height: 20pt;
-  font-size: 21pt;
-}
-
-h6 {
-  color: #efdab3;
-  font-size: 14pt;
-  font-weight: lighter;
-  font-family: "Avenir Roman LINK";
-}
-
-img {
-  border: transparent;
-  border-radius: 1px;
-}
-
-.card {
-  margin: 10px;
-  border: none !important;
-}
-
-.left_panel_info {
-  margin-top: 20pt;
-  margin-left: -10pt;
-  max-width: 250px;
-}
-
-.right_panel_info {
-  margin-top: 15pt;
-}
-
-.card-cus-bottom {
-  background-color: #272727;
-}
-
 body .head-title h1 {
   color: #ffffff;
-  font-family: "Avenir Black LINK";
-  font-size: 45pt;
+  font-family: Avenir;
+  font-size: 60pt;
   font-weight: bold;
   letter-spacing: 3px;
 }
@@ -10990,18 +10952,59 @@ body .carousel .carousel-caption {
   bottom: auto;
   transform: translateY(-50%);
   background-color: rgba(239, 218, 179, 0.5);
+  /*h2 {
+      font-family: Avenir Black;
+      font-size: 11pt;
+      letter-spacing: 3pt;
+      color: $white;
+
+  }*/
 }
 
-body .carousel .carousel-caption h2 {
-  font-family: Avenir Black;
+body .carousel .carousel-caption p {
+  font-size: 8pt;
+  color: #272727;
+}
+
+body .text {
+  font-family: Avenir Roman;
+  font-size: 8pt;
+  line-height: 9pt;
+}
+
+body .text2 {
+  font-family: Avenir Medium;
+  font-size: 8pt;
+}
+
+body .kaplicky {
+  color: #ffffff;
   font-size: 11pt;
+  font-family: Avenir Black;
   letter-spacing: 3pt;
-  color: #ffff;
 }
 
-body .carousel .carousel-caption p {
-  font-size: 8pt;
-  color: #000;
+body .text-author {
+  font-family: Avenir Roman;
+  font-size: 7pt;
+  color: #ead4b0;
+}
+
+body .text-number {
+  font-family: Avenir Medium;
+  font-size: 5pt;
+  color: #ead4b0;
+}
+
+body .text-headline {
+  font-family: Avenir Medium;
+  font-size: 12pt;
+  color: #ead4b0;
+}
+
+body .text-page {
+  font-family: Avenir Medium;
+  font-size: 7pt;
 }
 
 body .auth .card {
@@ -11010,10 +11013,6 @@ body .auth .card {
   font-size: 8pt;
 }
 
-body .auth .btn {
-  font-size: 8pt;
-}
-
 body .auth .col-form-label {
   text-align: left;
   padding-top: 0px;
@@ -11025,24 +11024,12 @@ body .auth .form-control {
   height: 17pt;
 }
 
-body .auth .button-square {
-  width: 100pt;
-}
-
 body .card-body {
   background-color: #272727;
-  font-family: Avenir;
+  font-family: Avenir Roman;
   color: #ead4b0;
 }
 
-body .logo {
-  color: #ffffff;
-  font-size: 11pt;
-  font-family: Avenir Black;
-  width: 100pt;
-  letter-spacing: 1pt;
-}
-
 body .form-control {
   background-color: #272727;
   margin-top: -1px;
@@ -11070,11 +11057,12 @@ body .form-control:focus {
 body .button-square {
   font-size: 8pt;
   background-color: #272727;
-  color: #ffff;
-  border: 0.5pt solid #ffff;
+  color: #ffffff;
+  border: 0.5pt solid #ffffff;
   border-radius: 0;
   width: 6.5rem;
   height: 2rem;
+  font-family: Avenir Roman;
 }
 
 body .button-square:active,
@@ -11100,42 +11088,83 @@ body .button-image:before {
   background-position: center center;
   background-repeat: no-repeat;
 }
-.inter_info:before {
-  background-image: url(/images/Button_Info_60.png?fed957d534034a220f3fb939523ba297);
-  content: "";
+
+body .artefacts-area h5 {
+  color: #ddd1b9;
+  font-family: "Avenir Medium LINK";
+  line-height: 20pt;
+  font-size: 21pt;
+}
+
+body .artefacts-area h6 {
+  color: #ddd1b9;
+  font-size: 14pt;
+  font-weight: lighter;
+  font-family: "Avenir Roman LINK";
+}
+
+body .artefacts-area img {
+  border: transparent;
+  border-radius: 1px;
+}
+
+body .artefacts-area .card {
+  margin: 10px;
+  border: none !important;
+}
+
+body .artefacts-area .left_panel_info {
+  margin-top: 15px;
+  margin-left: -10px;
+  max-width: 250px;
+}
+
+body .artefacts-area .right_panel_info {
+  margin-top: 15px;
+  margin-right: -15px;
+}
+
+body .artefacts-area .card-cus-bottom {
+  background-color: #272727;
+}
+
+body .artefacts-area .inter_info:before {
+  background-image: url(/images/Button_Info_50.png?cf6e509b9294d4138459f1846c7effdf);
   width: 60px;
   height: 60px;
 }
 
-.inter_info:focus,
-.inter_info:active,
-.inter_info:hover {
-  background-color: transparent !important;
-  border-color: transparent !important;
-  outline: none !important;
-  box-shadow: none !important;
+body .artefacts-area .inter_like {
+  display: none;
 }
 
-.inter_like:before,
-.inter_like_filled:before {
-  background-image: url(/images/Hearth_Empty_60.png?07807b2bf7f8018c15473360e4cb97e0);
+body .artefacts-area .inter_like:before {
+  background-image: url(/images/Hearth_Empty_50.png?d969cd4d381634ef975e503608b3ab48);
   width: 60px;
   height: 60px;
 }
 
-.inter_like_filled:before {
-  background-image: url(/images/Hearth_Filled_60.png?e1a8e6298bf4fdce9b9592128ee82e81);
+body .artefacts-area .inter_like_filled:before {
+  background-image: url(/images/Hearth_Filled_50.png?77bb26c3aba063c00aba1a2f07059d71);
   width: 60px;
   height: 60px;
 }
 
-.inter_like {
-  display: none;
+body .artefacts-area .inter_info,
+body .artefacts-area .inter_like,
+body .artefacts-area .inter_like_filled {
+  padding: 0;
 }
 
-.inter_like:focus,
-.inter_like:active,
-.inter_like:hover {
+body .artefacts-area .inter_info:focus,
+body .artefacts-area .inter_info:active,
+body .artefacts-area .inter_info:hover,
+body .artefacts-area .inter_like:focus,
+body .artefacts-area .inter_like:active,
+body .artefacts-area .inter_like:hover,
+body .artefacts-area .inter_like_filled:focus,
+body .artefacts-area .inter_like_filled:active,
+body .artefacts-area .inter_like_filled:hover {
   background-color: transparent !important;
   border-color: transparent !important;
   outline: none !important;
@@ -11169,25 +11198,24 @@ body .content {
   position: relative;
 }
 
-body .content .btn-circle.rounded-circle.btn-sm,
-body .content .btn-group-sm > .btn-circle.rounded-circle.btn {
-  position: absolute;
-  width: 120px;
-  height: 120px;
+body .content .btn-circle.rounded-circle {
   padding: 6px 0px;
-  border-radius: 15px;
   font-size: 16px;
   text-align: center;
+}
+
+body .content .btn-categories {
+  position: absolute;
+  border-width: 5px;
   background-color: #272727;
   border-color: #ead4b0;
-  border-width: 5px;
   color: #ead4b0;
   outline: none !important;
   box-shadow: none !important;
+  font-family: Avenir Medium;
 }
 
-body .content .btn-circle.rounded-circle.btn-sm:active,
-body .content .btn-group-sm > .btn-circle.rounded-circle.btn:active {
+body .content .btn-categories:active {
   background-color: #efdab3;
   border-color: #ead4b0;
   outline: none !important;
@@ -11195,52 +11223,20 @@ body .content .btn-group-sm > .btn-circle.rounded-circle.btn:active {
   color: #272727;
 }
 
-body .content .btn-circle.rounded-circle.btn-dm {
-  position: absolute;
-  width: 240px;
-  height: 240px;
-  padding: 6px 0;
-  border-radius: 15px;
-  font-size: 16px;
-  text-align: center;
-  background-color: #272727;
-  border-color: #ead4b0;
-  color: #ead4b0;
-  border-width: 5px;
-  outline: none !important;
-  box-shadow: none !important;
+body .content .btn-sm,
+body .content .btn-group-sm > .btn {
+  width: 120px;
+  height: 120px;
 }
 
-body .content .btn-circle.rounded-circle.btn-dm:active {
-  background-color: #efdab3;
-  border-color: #ead4b0;
-  outline: none !important;
-  box-shadow: none !important;
-  color: #272727;
+body .content .btn-dm {
+  width: 240px;
+  height: 240px;
 }
 
-body .content .btn-circle.rounded-circle.btn-xl {
-  position: absolute;
+body .content .btn-xl {
   width: 360px;
   height: 360px;
-  padding: 6px 0px;
-  border-radius: 15px;
-  font-size: 16px;
-  text-align: center;
-  background-color: #272727;
-  border-color: #ead4b0;
-  color: #ead4b0;
-  border-width: 5px;
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-body .content .btn-circle.rounded-circle.btn-xl:active {
-  background-color: #efdab3;
-  border-color: #ead4b0;
-  outline: none !important;
-  box-shadow: none !important;
-  color: #272727;
 }
 
 @media only screen and (max-width: 540px) {
@@ -11263,9 +11259,7 @@ body .content .btn-circle.rounded-circle.btn-xl:active {
     width: 180px;
     height: 180px;
   }
-}
 
-@media only screen and (max-width: 540px) {
   body .carousel .carousel-inner .social-logo {
     padding-left: 30px;
     top: 20%;
diff --git a/public/images/Button_Info_50.png b/public/images/Button_Info_50.png
new file mode 100644
index 0000000..9a44a37
Binary files /dev/null and b/public/images/Button_Info_50.png differ
diff --git a/public/images/Hearth_Empty_50.png b/public/images/Hearth_Empty_50.png
new file mode 100644
index 0000000..6faeb75
Binary files /dev/null and b/public/images/Hearth_Empty_50.png differ
diff --git a/public/images/Hearth_Filled.png b/public/images/Hearth_Filled.png
deleted file mode 100644
index 4cfaae0..0000000
Binary files a/public/images/Hearth_Filled.png and /dev/null differ
diff --git a/public/images/Hearth_Filled_50.png b/public/images/Hearth_Filled_50.png
new file mode 100644
index 0000000..505a640
Binary files /dev/null and b/public/images/Hearth_Filled_50.png differ
diff --git a/public/images/Hearth_Filled_60.png b/public/images/Hearth_Filled_60.png
deleted file mode 100644
index 6ddffc0..0000000
Binary files a/public/images/Hearth_Filled_60.png and /dev/null differ
diff --git a/resources/images/interface/Button_Info_50.png b/resources/images/interface/Button_Info_50.png
new file mode 100644
index 0000000..9a44a37
Binary files /dev/null and b/resources/images/interface/Button_Info_50.png differ
diff --git a/resources/images/interface/Hearth_Empty_50.png b/resources/images/interface/Hearth_Empty_50.png
new file mode 100644
index 0000000..6faeb75
Binary files /dev/null and b/resources/images/interface/Hearth_Empty_50.png differ
diff --git a/resources/images/interface/Hearth_Filled_50.png b/resources/images/interface/Hearth_Filled_50.png
new file mode 100644
index 0000000..505a640
Binary files /dev/null and b/resources/images/interface/Hearth_Filled_50.png differ
diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss
index 9014dee..019762f 100644
--- a/resources/sass/_custom.scss
+++ b/resources/sass/_custom.scss
@@ -215,44 +215,83 @@ body {
             background-repeat:no-repeat;
         }
     }
-    
-    .inter_info:before {
-    	background-image : url(../images/interface/Button_Info_60.png);
-    	content: "";
-    	width: 60px;
-    	height: 60px;
-	}
 
-	.inter_info:focus, .inter_info:active, .inter_info:hover {
-    	background-color: transparent !important;
-    	border-color: transparent !important;
-    	outline: none !important;
-    	box-shadow: none !important;
-	}
+    .artefacts-area {
 
-	.inter_like:before, .inter_like_filled:before {
-	    background-image : url(../images/interface/Hearth_Empty_60.png);
-	    width: 60px;
-	    height: 60px;
-	}
+        h5 {
+            color: $theme-color-two;
+            font-family: "Avenir Medium LINK";
+            line-height: 20pt;
+            font-size: 21pt;
+        }
 
-	.inter_like_filled:before {
-	    background-image : url(../images/interface/Hearth_Filled_60.png);
-	    width: 60px;
-	    height: 60px;
-	}
+        h6 {
+            color: $theme-color-two;
+            font-size: 14pt;
+            font-weight: lighter;
+            font-family: "Avenir Roman LINK";
+        }
 
-	.inter_like {
-	    display: none;
-	}
+        img {
+            border: transparent;
+            border-radius: 1px;
+        }
 
+        .card {
+            margin: 10px;
+            border: none !important;
+        }
 
-	.inter_like:focus, .inter_like:active, .inter_like:hover {
-    	background-color: transparent !important;
-    	border-color: transparent !important;
-    	outline: none !important;
-    	box-shadow: none !important;
-	}
+        .left_panel_info {
+            margin-top: 15px;
+            margin-left: -10px;
+            max-width: 250px;
+        }
+
+        .right_panel_info {
+            margin-top: 15px;
+            margin-right: -15px;
+        }
+
+        .card-cus-bottom {
+            background-color: $theme-color-five;
+        }
+
+        .inter_info {
+            &:before {
+                background-image: url(../images/interface/Button_Info_50.png);
+                width: 60px;
+                height: 60px;
+            }
+        }
+
+        .inter_like {
+            display: none;
+            &:before {
+                background-image : url(../images/interface/Hearth_Empty_50.png);
+                width: 60px;
+                height: 60px;
+            }
+        }
+
+        .inter_like_filled {
+            &:before {
+                background-image : url(../images/interface/Hearth_Filled_50.png);
+                width: 60px;
+                height: 60px;
+            }
+        }
+
+        .inter_info, .inter_like, .inter_like_filled {
+            padding: 0;
+            &:focus, &:active, &:hover {
+                background-color: transparent !important;
+                border-color: transparent !important;
+                outline: none !important;
+                box-shadow: none !important;
+            };
+        }
+    }
 
     .monButton {
 
diff --git a/resources/views/favartefacts/index.blade.php b/resources/views/favartefacts/index.blade.php
index da55cea..74c9700 100644
--- a/resources/views/favartefacts/index.blade.php
+++ b/resources/views/favartefacts/index.blade.php
@@ -11,24 +11,24 @@
                     <div class="artefacts-area mb-5">
                         <div class="card">
                         {{--<svg class="bd-placeholder-img card-img-top" width="100%" height="180" src="{{asset('images/artefacts/book_cover_01.jpg')}}" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>{{$artefact[0]->name}}</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="45%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>--}}
-                        <a href="{{ url('/artefact/' . $artefact[0]->id) }}">
+                        <a href="{{ url('/artefact/' . $artefact->id) }}">
                             <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto>
                         </a>
                         <div class="container card-cus-bottom">
                             <div class="flex-row row-list">
                                 <div class="col-xs-2 float-left left_panel_info">
-                                    <h5 class="card-title ">{{$artefact[0]->name}}</h5>
-                                    <h6 class="card-title">{{$artefact[0]->author}}</h6>
+                                    <h5 class="card-title ">{{$artefact->name}}</h5>
+                                    <h6 class="card-title">{{$artefact->author}}</h6>
                                 </div>
                                 <div class="col-xs-2 float-right right_panel_info">
                                     <div class="float-left">
-                                        <button id="info_butt_{{$artefact[0]->id}}" type="button" class="btn btn-primary bouton-image inter_info"></button>
+                                        <button id="info_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_info"></button>
                                     </div>
                                     <div class="float-right text-center">
-                                        <button id="like_butt_{{$artefact[0]->id}}" onclick="myFunction({{$artefact[0]->id}}, 1)" type="button" class="btn btn-primary bouton-image inter_like"></button>
-                                        <button id="like_butt2_{{$artefact[0]->id}}" onclick="myFunction({{$artefact[0]->id}}, 0)" type="button" class="btn btn-primary bouton-image inter_like_filled"></button>
+                                        <button id="like_butt_{{$artefact->id}}" onclick="myFunction({{$artefact->id}}, 1)" type="button" class="btn btn-primary button-image inter_like"></button>
+                                        <button id="like_butt2_{{$artefact->id}}" onclick="myFunction({{$artefact->id}}, 0)" type="button" class="btn btn-primary button-image inter_like_filled"></button>
                                         <span class="likes_text">
-                                          <h6>{{$artefact['likes']}}</h6>
+                                          <h6>{{$artefact->likes}}</h6>
                                         </span>
                                     </div>
                                 </div>
