Added dark/light mode override to ll and home page

This commit is contained in:
Julian Prieber 2022-05-13 14:06:12 +02:00
parent 1eb92e56b2
commit d5418256a9
6 changed files with 72 additions and 6 deletions

View File

@ -31,6 +31,8 @@
- Code
- Spacing
- Utilities
- Misc
- Credit footer
*
* You'll find the button css in css/brands.css.
*
@ -240,4 +242,23 @@
border: 3px none #ffffff;
}
}
}
/* Credit footer
*/
.credit-txt {
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
.credit-txt-clr{
color: #FFF !important;
}
}
@media (prefers-color-scheme: light) {
.credit-txt-clr{
color: #100a26 !important;
}
}

View File

@ -31,6 +31,8 @@
- Code
- Spacing
- Utilities
- Misc
- Credit footer
*
* You'll find the button css in css/brands.css.
*
@ -198,3 +200,15 @@ hr {
border-radius: 30px;
border: 3px none #ffffff;
}
/* Credit footer
*/
.credit-txt {
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.credit-txt-clr {
color: #FFF !important;
}

View File

@ -31,6 +31,8 @@
- Code
- Spacing
- Utilities
- Misc
- Credit footer
*
* You'll find the button css in css/brands.css.
*
@ -196,3 +198,15 @@ hr {
border-radius: 30px;
border: 3px none #ffffff;
}
/* Credit footer
*/
.credit-txt {
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.credit-txt-clr {
color: #100a26 !important;
}

View File

@ -8,7 +8,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
@ -17,6 +16,16 @@
@else
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
@endif
<?php // override dark/light mode if override cookie is set
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
@if ($color_scheme_override == 'dark')
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
@elseif ($color_scheme_override == 'light')
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
@else
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
@endif
</head>
<body>

View File

@ -8,15 +8,14 @@
</div>
@if(env('DISPLAY_CREDIT') === true)
<style>.txt{font-weight:700;font-size:15px}@media (prefers-color-scheme: dark){.txt-clr{color:#FFF!important;}}@media (prefers-color-scheme: light){.txt-clr{color:#100a26!important;}}</style>
<a class="spacing" href="https://littlelink-custom.com" target="_blank" title="Learn more">
<a style="text-decoration: none;" class="spacing" href="https://littlelink-custom.com" target="_blank" title="Learn more">
<section class="hvr-grow fadein">
<div class="parent-footer" >
<img id="footer_spin" class="footer_spin image-footer1 generic" src="{{ asset('littlelink/images/just-gear.svg') }}" alt="LittleLink Custom"></img>
<img class="image-footer2" src="{{ asset('littlelink/images/just-ll.svg') }}" alt="LittleLink Custom"></img>
</div>
<a href="https://littlelink-custom.com" class="txt txt-clr">Powered by LittleLink Custom</a>
<a href="https://littlelink-custom.com" target="_blank" title="Learn more" class="credit-txt credit-txt-clr">Powered by LittleLink Custom</a>
</section>
</a><br><br><br>
@endif

View File

@ -40,7 +40,6 @@
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
@ -50,6 +49,16 @@
@else
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
@endif
<?php // override dark/light mode if override cookie is set
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
@if ($color_scheme_override == 'dark')
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
@elseif ($color_scheme_override == 'light')
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
@else
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
@endif
</head>
<body>