Added support for dynamic contrast

Text always stays readable no matter the background color

Author: JulianPrieber

assets/js/dynamic-contrast.min.js

@@ -1,3 +1,3 @@
         <!-- Short Bio -->
         <style>.description-parent * {margin-bottom: 1em;}.description-parent {padding-bottom: 30px;}</style>
-        <center><div class="fadein description-parent"><p class="fadein">@if(env('ALLOW_USER_HTML') === true){!! $info->littlelink_description !!}@else{{ $info->littlelink_description }}@endif</p></div></center>
+        <center><div class="fadein description-parent dynamic-contrast"><p class="fadein">@if(env('ALLOW_USER_HTML') === true){!! $info->littlelink_description !!}@else{{ $info->littlelink_description }}@endif</p></div></center>

resources/views/linkstack/elements/bio.blade.php

@@ -1,3 +1,3 @@
 <?php use App\Models\UserData; ?>
 <!-- Your Name -->
-        <h1 class="fadein">{{ $info->name }}@if(($userinfo->role == 'vip' or $userinfo->role == 'admin') and theme('disable_verification_badge') != "true" and env('HIDE_VERIFICATION_CHECKMARK') != true and UserData::getData($userinfo->id, 'checkmark') != false)<span title="{{__('messages.Verified user')}}">@include('components.verify-svg')@endif</span></h1>
+        <h1 class="fadein dynamic-contrast">{{ $info->name }}@if(($userinfo->role == 'vip' or $userinfo->role == 'admin') and theme('disable_verification_badge') != "true" and env('HIDE_VERIFICATION_CHECKMARK') != true and UserData::getData($userinfo->id, 'checkmark') != false)<span title="{{__('messages.Verified user')}}">@include('components.verify-svg')@endif</span></h1>

resources/views/linkstack/elements/heading.blade.php

@@ -3,7 +3,7 @@
         @if(count($icons) > 0)
         <div class="row fadein social-icon-div">
         @foreach($icons as $icon)
-        <a class="social-hover social-link" href="{{ route('clickNumber') . '/' . $icon->id. "?" . $icon->link}}" title="{{ucfirst($icon->title)}}" aria-label="{{ucfirst($icon->title)}}" @if(theme('open_links_in_same_tab') != "true")target="_blank"@endif><i class="social-icon fa-brands fa-{{$icon->title}}"></i></a>
+        <a class="social-hover social-link" href="{{ route('clickNumber') . '/' . $icon->id. "?" . $icon->link}}" title="{{ucfirst($icon->title)}}" aria-label="{{ucfirst($icon->title)}}" @if(theme('open_links_in_same_tab') != "true")target="_blank"@endif><i class="dynamic-contrast social-icon fa-brands fa-{{$icon->title}}"></i></a>
         @endforeach
         </div>
         @endif

resources/views/linkstack/elements/icons.blade.php

@@ -4,4 +4,7 @@
 @include('layouts.fonts')
 
 <style>{!! file_get_contents(base_path("assets/linkstack/css/normalize.css")) !!}</style>
-<style>{!! file_get_contents(base_path("assets/linkstack/css/animate.css")) !!}</style>
+<style>{!! file_get_contents(base_path("assets/linkstack/css/animate.css")) !!}</style>
+
+<script>{!! file_get_contents(base_path("assets/js/dynamic-contrast.min.js")) !!}</script>
+@include('linkstack.modules.dynamic-contrast')

resources/views/linkstack/modules/assets.blade.php

@@ -0,0 +1,24 @@
+@push('linkstack-body-end')
+<script>
+    BackgroundCheck.init({
+    targets: '.dynamic-contrast',
+    images: 'body'
+  });
+  </script>
+@endpush
+
+@push('linkstack-head-end')
+<style>
+.background--light {
+  color: black !important;
+}
+
+.background--dark {
+  color: white !important;
+}
+
+.background--complex {
+  color: gray !important;
+}
+</style>
+@endpush