Skip to content

Commit 2824fd6

Browse files
JulianPrieberJulianPrieber
committed
Added theme files
1 parent f86fe99 commit 2824fd6

File tree

7 files changed

+623
-0
lines changed

7 files changed

+623
-0
lines changed

‎animations.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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+
animation-delay: calc(var(--delay)/10);
30+
}
31+
32+
@keyframes popUp {
33+
from {
34+
opacity: 0;
35+
transform: scale3d(0.3, 0.3, 0.3);
36+
}
37+
38+
50% {
39+
opacity: 1;
40+
}
41+
} */
42+
43+
/* .fadein {
44+
animation-name: fadein;
45+
animation-duration: 3s;
46+
animation-fill-mode: both;
47+
}
48+
49+
@keyframes fadein {
50+
from {
51+
opacity: 0;
52+
}
53+
54+
to {
55+
opacity: 1;
56+
}
57+
} */
58+
59+
60+
/* Button hover animations
61+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
62+
/* (Also apply to icon) */
63+
64+
.button-hover, .credit-hover{
65+
display:inline-block;
66+
-webkit-transform:perspective(1px) translateZ(0);
67+
transform:perspective(1px) translateZ(0);
68+
box-shadow:0 0 1px rgba(0,0,0,0);
69+
-webkit-transition-duration:.1s;
70+
transition-duration:.1s;
71+
-webkit-transition-property:transform;
72+
transition-property:transform
73+
}
74+
.button-hover:active,
75+
.button-hover:focus,
76+
.button-hover:hover{
77+
-webkit-transform:scale(1.02);
78+
transform:scale(1.02)
79+
}
80+
.credit-hover:active,
81+
.credit-hover:focus,
82+
.credit-hover:hover{
83+
-webkit-transform:scale(1.04);
84+
transform:scale(1.04)
85+
}
86+
87+
88+
/* Footer hover animations
89+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
90+
91+
.footer-hover{
92+
display:inline-block;
93+
-webkit-transform:perspective(1px) translateZ(0);
94+
transform:perspective(1px) translateZ(0);
95+
box-shadow:0 0 1px rgba(0,0,0,0);
96+
-webkit-transition-duration:.3s;
97+
transition-duration:.3s;
98+
-webkit-transition-property:transform;
99+
transition-property:transform;
100+
-webkit-transition-timing-function:ease-out;
101+
transition-timing-function:ease-out
102+
}
103+
.footer-hover:active,.footer-hover:focus,.footer-hover:hover{
104+
-webkit-transform:translateY(-8px);
105+
transform:translateY(-8px)
106+
}

‎brands.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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+
-webkit-box-shadow: 0px 0px 0px 3px var(--button-background-color);
19+
box-shadow: 0px 0px 0px 3px var(--button-background-color);
20+
background-color: var(--button-background-color) !important;
21+
width: var(--image-width);
22+
height: var(--image-height);
23+
}
24+
25+
26+
/* Buttons
27+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
28+
29+
.button {
30+
display: flex;
31+
align-items: center;
32+
justify-content: center;
33+
text-decoration: none;
34+
font-size: 1em;
35+
color: var(--button-text-color);
36+
min-height: 58px;
37+
line-height: 58px;
38+
cursor: pointer;
39+
40+
color: var(--button-text-color);
41+
background-color: var(--button-background-color);
42+
width: 100%;
43+
max-width: 600px;
44+
border-radius: 14px;
45+
margin-bottom: 13px;
46+
}
47+
48+
49+
/* Brand Icons
50+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
51+
52+
.icon {
53+
right: 10px;
54+
bottom: 2px;
55+
position: relative;
56+
vertical-align: middle;
57+
width: 20px;
58+
height: 20px;
59+
-webkit-filter: grayscale(100%);
60+
-moz-filter: grayscale(100%);
61+
filter: grayscale(100%);
62+
}
63+
64+
svg {
65+
color: white !important;
66+
}

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

563 KB
Loading

‎readme.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# A LittleLink Custom Theme
2+
Find more themes: https://github.com/JulianPrieber/llc-themes
3+
4+
* Theme Name: Dark
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 License: MIT
10+
* Source code: https://github.com/JulianPrieber/Dark
11+
12+
13+
### Used assets:
14+
* Built using:
15+
* https://github.com/dhg/Skeleton
16+
* License: MIT
17+
18+
*
19+
* https://github.com/ardacarofficial/links-website
20+
* License: MIT -> https://github.com/ardacarofficial/links-website/blob/main/LICENSE

‎share.button.css‎

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

0 commit comments

Comments
 (0)