Skip to content

Commit d541825

Browse files
JulianPrieberJulianPrieber
committed
Added dark/light mode override to ll and home page
1 parent 1eb92e5 commit d541825

File tree

6 files changed

+72
-6
lines changed

6 files changed

+72
-6
lines changed

‎littlelink/css/skeleton-auto.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@
3131
- Code
3232
- Spacing
3333
- Utilities
34+
- Misc
35+
- Credit footer
3436
*
3537
* You'll find the button css in css/brands.css.
3638
*
@@ -240,4 +242,23 @@
240242
border: 3px none #ffffff;
241243
}
242244

243-
}
245+
}
246+
247+
/* Credit footer
248+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
249+
.credit-txt {
250+
font-weight: 700;
251+
font-size: 15px;
252+
text-decoration: none;
253+
}
254+
255+
@media (prefers-color-scheme: dark) {
256+
.credit-txt-clr{
257+
color: #FFF !important;
258+
}
259+
}
260+
@media (prefers-color-scheme: light) {
261+
.credit-txt-clr{
262+
color: #100a26 !important;
263+
}
264+
}

‎littlelink/css/skeleton-dark.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@
3131
- Code
3232
- Spacing
3333
- Utilities
34+
- Misc
35+
- Credit footer
3436
*
3537
* You'll find the button css in css/brands.css.
3638
*
@@ -198,3 +200,15 @@ hr {
198200
border-radius: 30px;
199201
border: 3px none #ffffff;
200202
}
203+
204+
/* Credit footer
205+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
206+
.credit-txt {
207+
font-weight: 700;
208+
font-size: 15px;
209+
text-decoration: none;
210+
}
211+
212+
.credit-txt-clr {
213+
color: #FFF !important;
214+
}

‎littlelink/css/skeleton-light.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@
3131
- Code
3232
- Spacing
3333
- Utilities
34+
- Misc
35+
- Credit footer
3436
*
3537
* You'll find the button css in css/brands.css.
3638
*
@@ -196,3 +198,15 @@ hr {
196198
border-radius: 30px;
197199
border: 3px none #ffffff;
198200
}
201+
202+
/* Credit footer
203+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
204+
.credit-txt {
205+
font-weight: 700;
206+
font-size: 15px;
207+
text-decoration: none;
208+
}
209+
210+
.credit-txt-clr {
211+
color: #100a26 !important;
212+
}

‎resources/views/home.blade.php‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
1010
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
11-
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
1211
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
1312
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
1413
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
@@ -17,6 +16,16 @@
1716
@else
1817
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
1918
@endif
19+
20+
<?php // override dark/light mode if override cookie is set
21+
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
22+
@if ($color_scheme_override == 'dark')
23+
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
24+
@elseif ($color_scheme_override == 'light')
25+
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
26+
@else
27+
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
28+
@endif
2029
</head>
2130
<body>
2231

‎resources/views/layouts/footer.blade.php‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@
88
</div>
99

1010
@if(env('DISPLAY_CREDIT') === true)
11-
<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>
12-
<a class="spacing" href="https://littlelink-custom.com" target="_blank" title="Learn more">
11+
<a style="text-decoration: none;" class="spacing" href="https://littlelink-custom.com" target="_blank" title="Learn more">
1312
<section class="hvr-grow fadein">
1413
<div class="parent-footer" >
1514
<img id="footer_spin" class="footer_spin image-footer1 generic" src="{{ asset('littlelink/images/just-gear.svg') }}" alt="LittleLink Custom"></img>
1615
<img class="image-footer2" src="{{ asset('littlelink/images/just-ll.svg') }}" alt="LittleLink Custom"></img>
1716
</div>
1817

19-
<a href="https://littlelink-custom.com" class="txt txt-clr">Powered by LittleLink Custom</a>
18+
<a href="https://littlelink-custom.com" target="_blank" title="Learn more" class="credit-txt credit-txt-clr">Powered by LittleLink Custom</a>
2019
</section>
2120
</a><br><br><br>
2221
@endif

‎resources/views/littlelink.blade.php‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040

4141
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
4242
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
43-
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
4443
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
4544
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
4645
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
@@ -50,6 +49,16 @@
5049
@else
5150
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
5251
@endif
52+
53+
<?php // override dark/light mode if override cookie is set
54+
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
55+
@if ($color_scheme_override == 'dark')
56+
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
57+
@elseif ($color_scheme_override == 'light')
58+
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
59+
@else
60+
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
61+
@endif
5362
</head>
5463
<body>
5564

0 commit comments

Comments
 (0)