devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added support for dynamic contrast 

Text always stays readable no matter the background color
This commit is contained in:
Julian Prieber 2023-12-06 17:42:02 +01:00
parent 3c7d6c0906
commit 9990143bc1
6 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/js/dynamic-contrast.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
resources/views/linkstack/elements/bio.blade.php
View File

@ -1,3 +1,3 @@
<!-- Short Bio --> <!-- Short Bio -->
<style>.description-parent * {margin-bottom: 1em;}.description-parent {padding-bottom: 30px;}</style> <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>

2
resources/views/linkstack/elements/heading.blade.php
View File

@ -1,3 +1,3 @@
<?php use App\Models\UserData; ?> <?php use App\Models\UserData; ?>
<!-- Your Name --> <!-- 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>

2
resources/views/linkstack/elements/icons.blade.php
View File

@ -3,7 +3,7 @@
@if(count($icons) > 0) @if(count($icons) > 0)
<div class="row fadein social-icon-div"> <div class="row fadein social-icon-div">
@foreach($icons as $icon) @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 @endforeach
</div> </div>
@endif @endif

5
resources/views/linkstack/modules/assets.blade.php
View File

@ -4,4 +4,7 @@
@include('layouts.fonts') @include('layouts.fonts')
<style>{!! file_get_contents(base_path("assets/linkstack/css/normalize.css")) !!}</style> <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')

24
resources/views/linkstack/modules/dynamic-contrast.blade.php Normal file
View File

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