Skip to content

Commit 4127cc0

Browse files
JulianPrieberJulianPrieber
committed
Added theme files
1 parent b1d2e7f commit 4127cc0

File tree

7 files changed

+1197
-0
lines changed

7 files changed

+1197
-0
lines changed

‎animations.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* ************************************************************* */
2+
/*
3+
/* Use this file to add custom CSS animations.
4+
/* Delete this file if you wish to use the default animations.
5+
/* If you do not want to have animations in your theme,
6+
/* remove or comment them and include this file in your theme.
7+
/*
8+
/* ************************************************************* */
9+
10+
11+
/* Table of contents
12+
––––––––––––––––––––––––––––––––––––––––––––––––––
13+
- Entrance animations
14+
- Button hover animations
15+
- Icon hover animations
16+
- Footer hover animations
17+
18+
*/
19+
20+
21+
22+
/* Entrance animations
23+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
24+
25+
.button-entrance {
26+
animation-name: popUp;
27+
animation-duration: 1s;
28+
animation-fill-mode: both;
29+
/* Used to start button entrance animation one after another */
30+
animation-delay: calc(var(--delay)/10);
31+
}
32+
33+
@keyframes popUp {
34+
from {
35+
opacity: 0;
36+
transform: scale3d(0.3, 0.3, 0.3);
37+
}
38+
39+
50% {
40+
opacity: 1;
41+
}
42+
}
43+
44+
.fadein {
45+
animation-name: fadein;
46+
animation-duration: 3s;
47+
animation-fill-mode: both;
48+
}
49+
50+
@keyframes fadein {
51+
from {
52+
opacity: 0;
53+
}
54+
55+
to {
56+
opacity: 1;
57+
}
58+
}
59+
60+
61+
/* Button hover animations
62+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
63+
/* (Also apply to icon) */
64+
65+
.button-hover, .credit-hover{
66+
display:inline-block;
67+
-webkit-transform:perspective(1px) translateZ(0);
68+
transform:perspective(1px) translateZ(0);
69+
box-shadow:0 0 1px rgba(0,0,0,0);
70+
-webkit-transition-duration:.1s;
71+
transition-duration:.1s;
72+
-webkit-transition-property:transform;
73+
transition-property:transform
74+
}
75+
.button-hover:active,.credit-hover:active,
76+
.button-hover:focus,.credit-hover:focus,
77+
.button-hover:hover,.credit-hover:hover{
78+
-webkit-transform:scale(1.02);
79+
transform:scale(1.02)
80+
}
81+
82+
83+
/* Footer hover animations
84+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
85+
86+
.footer-hover{
87+
display:inline-block;
88+
-webkit-transform:perspective(1px) translateZ(0);
89+
transform:perspective(1px) translateZ(0);
90+
box-shadow:0 0 1px rgba(0,0,0,0);
91+
-webkit-transition-duration:.3s;
92+
transition-duration:.3s;
93+
-webkit-transition-property:transform;
94+
transition-property:transform;
95+
-webkit-transition-timing-function:ease-out;
96+
transition-timing-function:ease-out
97+
}
98+
.footer-hover:active,.footer-hover:focus,.footer-hover:hover{
99+
-webkit-transform:translateY(-8px);
100+
transform:translateY(-8px)
101+
}

‎brands.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
2+
/* Table of contents
3+
––––––––––––––––––––––––––––––––––––––––––––––––––
4+
5+
- Rounded user avatars
6+
- Buttons
7+
- Brand Styles
8+
9+
*/
10+
11+
12+
/* Rounded avatars
13+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
14+
15+
/* Disable this if you don't want rounded avatars for users */
16+
.rounded-avatar {
17+
border-radius: 50%;
18+
position: relative;
19+
width: auto !important;
20+
height: 96px !important;
21+
display: block;
22+
margin: 40px auto 20px;
23+
border-radius: 50%;
24+
-webkit-tap-highlight-color: transparent;
25+
}
26+
27+
28+
/* Buttons
29+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
30+
31+
:root {
32+
--bgColor: #0F2034;
33+
--bgColor2: #0C1B2E;
34+
--accentColor: #131931;
35+
--textColor: #ffffff;
36+
--font: 'Karla', sans-serif;
37+
--font2: 'Noto Sans Mono', monospace;
38+
39+
--delay: .3s;
40+
--heading: #C0C0C0;
41+
}
42+
43+
.button {
44+
position: relative;
45+
height: 23px;
46+
background-color:var(--accentColor);
47+
color: var(--textColor);
48+
border: solid var(--accentColor) 2px;
49+
border-radius: 10px;
50+
font-size: 1rem;
51+
text-align: center;
52+
display: block;
53+
margin-left: 10px;
54+
margin-right: 10px;
55+
margin-bottom: 10px;
56+
padding: 10px; /* 17px */
57+
text-decoration: none;
58+
/* transition: all .25s cubic-bezier(.08, .59, .29, .99); */
59+
-webkit-tap-highlight-color: transparent;
60+
}
61+
62+
@media (hover: hover) {
63+
.buttonhover {
64+
background-color: var(--accentColor);
65+
color: #1BD0D9;
66+
}
67+
}
68+
69+
.button:active {
70+
border: solid #fff 2px;
71+
}
72+
73+
74+
/* Brand Icons
75+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
76+
77+
.icon {
78+
padding: 0px 8px 3.5px 0px;
79+
vertical-align: middle;
80+
width: 20px;
81+
height: 20px;
82+
-webkit-filter: grayscale(100%);
83+
-moz-filter: grayscale(100%);
84+
filter: grayscale(100%);
85+
}
86+
87+
/* .button:hover .icon {
88+
-webkit-filter: invert(100%) grayscale(100%);
89+
-moz-filter: invert(100%) grayscale(100%);
90+
filter: invert(100%) grayscale(100%);
91+
} */

‎config.php‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<?php
2+
3+
return [
4+
5+
/*
6+
|--------------------------------------------------------------------------
7+
| Theme Config
8+
|--------------------------------------------------------------------------
9+
|
10+
| The theme config allows you to configure how LittleLink Custom should treat your theme.
11+
| All settings can either be set to "true" or "false", unless stated otherwise.
12+
|
13+
| The settings below change how your buttons behave.
14+
|
15+
*/
16+
17+
// Some themes may not be compatible with custom buttons created by the Button Editor.
18+
// If 'false' the default button CSS is used.
19+
'allow_custom_buttons' => 'false',
20+
21+
'open_links_in_same_tab' => 'false',
22+
23+
24+
/*
25+
|--------------------------------------------------------------------------
26+
| Custom Code
27+
|--------------------------------------------------------------------------
28+
|
29+
| Custom code allows you to inject customized Blade, PHP, HTML, JavaScript and CSS code.
30+
|
31+
| In your "extra" folder, you will find 3 separate files for injecting your code to
32+
| different places on the final page (head, body, at the end of the body).
33+
|
34+
| You may also attach custom assets like CSS, JS, or images.
35+
| You can find instructions for this in the files in your extra folder.
36+
|
37+
*/
38+
39+
'enable_custom_code' => 'false',
40+
41+
// Disable individual files (only applies if above is 'true').
42+
'enable_custom_head' => 'true',
43+
'enable_custom_body' => 'true',
44+
'enable_custom_body_end' => 'true',
45+
46+
47+
/*
48+
|--------------------------------------------------------------------------
49+
| Custom Icons
50+
|--------------------------------------------------------------------------
51+
|
52+
| You may add custom icons to your theme. 
53+
| These icons are stored under: .../extra/custom-icons.
54+
|
55+
| You can adjust the file extension types to use other files than just SVGs.
56+
|
57+
*/
58+
59+
'use_custom_icons' => 'false',
60+
61+
// Is not set correct this will cause errors.
62+
'custom_icon_extension' => '.svg', // (.png, .jpg ...)
63+
64+
65+
66+
];

‎preview.png‎

231 KB
Loading

‎readme.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# A LittleLink Custom Theme
2+
Find more themes: https://github.com/JulianPrieber/llc-themes
3+
4+
* Theme Name: Magic Kingdom
5+
* Theme Version: 1.0
6+
* Theme Date: 2022-11-21
7+
* Theme Author: JulianPrieber
8+
* Theme Author URI: https://github.com/JulianPrieber
9+
* Theme Original Author URI: https://github.com/D3FaltX
10+
* Theme License: MIT
11+
* Source code: https://github.com/JulianPrieber/Magic-Kingdom
12+
13+
14+
### Used assets:
15+
* Built using:
16+
* https://github.com/dhg/Skeleton
17+
* License: MIT
18+
19+
* Forked from:
20+
* https://github.com/johnggli/linktree
21+
* License: MIT -> https://github.com/johnggli/linktree/blob/master/LICENSE.md
22+
23+
* Original author:
24+
* https://github.com/D3FaltXD/tree
25+
* License: MIT -> https://github.com/D3FaltXD/tree/blob/main/LICENSE.md
26+
27+
* Background image:
28+
* https://www.andreasrocha.com/projects/dOwxKe
29+
* License: © Andreas Rocha

‎share.button.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.share-icon {
2+
padding: 0px 8px 3.5px 0px;
3+
vertical-align: middle;
4+
width: 20px;
5+
height: 20px;
6+
color: #fff !important;
7+
}
8+
9+
.sharediv {
10+
position:relative;
11+
top: 30px;
12+
right: 30px;
13+
padding-bottom: 40px;
14+
}
15+
16+
.toastdiv {
17+
display: -webkit-flex;
18+
display: flex;
19+
-webkit-align-items: center;
20+
align-items: center;
21+
-webkit-justify-content: center;
22+
justify-content: center;
23+
}
24+
25+
.toastbox {
26+
width: 280px;
27+
padding: 10px;
28+
background-color: rgba(0, 0, 0, 0.7);
29+
color: white;
30+
border-radius: 4px;
31+
position: fixed;
32+
top: 105%;
33+
-webkit-transition: transform 0.3s linear;
34+
transition: transform 0.3s linear;
35+
z-index: 2;
36+
text-align: center;
37+
}
38+
.toastbox.toast-tox--active {
39+
-webkit-transform: translateY(-150px);
40+
transform: translateY(-150px);
41+
}
42+
43+
.sharebutton,
44+
sharebutton {
45+
display: inline-block;
46+
text-decoration: none;
47+
height: 48px;
48+
text-align: center;
49+
vertical-align: middle;
50+
font-size: 18px;
51+
width: 48px;
52+
font-weight: 700;
53+
line-height: 48px;
54+
letter-spacing: 0.1px;
55+
white-space: wrap;
56+
box-shadow: 0px 0px 16px 1px #1bd0d946 !important;
57+
background-color:var(--accentColor);
58+
color: var(--textColor);
59+
border-radius: 10px;
60+
cursor: pointer;
61+
}
62+
63+
.sharebutton:hover .share-icon {
64+
color: #1BD0D9 !important;
65+
}
66+
.sharebutton:hover {
67+
box-shadow: 0px 0px 16px 1px #1bd0d9 !important;
68+
}
69+
70+
71+
.sharebutton-mb {
72+
display: none;
73+
}
74+
.sharebutton-img {
75+
position: relative;
76+
left: 3px;
77+
margin-left: auto;
78+
margin-right: auto;
79+
}

0 commit comments

Comments
 (0)