Skip to content

Commit 9f8b865

Browse files
JulianPrieberJulianPrieber
committed
Added theme "Stargazer"
1 parent 2028862 commit 9f8b865

File tree

7 files changed

+791
-0
lines changed

7 files changed

+791
-0
lines changed

‎themes/stargazer/animations.css

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
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{
66+
display: inline-block;
67+
vertical-align: middle;
68+
-webkit-transform: perspective(1px) translateZ(0);
69+
transform: perspective(1px) translateZ(0);
70+
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
71+
-webkit-transition-duration: 0.9s;
72+
transition-duration: 0.9s;
73+
}
74+
.button-hover:active,
75+
.button-hover:focus,
76+
.button-hover:hover{
77+
-webkit-transform: scale(1.1);
78+
transform: scale(1.1);
79+
-webkit-transition-timing-function: cubic-bezier(0.47, 2.7, 0.31, -0.36);
80+
transition-timing-function: cubic-bezier(0.47, 2.7, 0.31, -0.36);
81+
}
82+
83+
.credit-hover{
84+
display:inline-block;
85+
-webkit-transform:perspective(1px) translateZ(0);
86+
transform:perspective(1px) translateZ(0);
87+
box-shadow:0 0 1px rgba(0,0,0,0);
88+
-webkit-transition-duration:.3s;
89+
transition-duration:.3s;
90+
-webkit-transition-property:transform;
91+
transition-property:transform
92+
}
93+
.credit-hover:active,
94+
.credit-hover:focus,
95+
.credit-hover:hover{
96+
-webkit-transform:scale(1.1);
97+
transform:scale(1.1)
98+
}
99+
100+
/* Icon hover animations
101+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
102+
103+
/* .icon-hover{
104+
display:inline-block;
105+
-webkit-transform:perspective(1px) translateZ(0);
106+
transform:perspective(1px) translateZ(0);
107+
box-shadow:0 0 1px rgba(0,0,0,0);
108+
-webkit-transition-duration:.3s;
109+
transition-duration:.3s
110+
}
111+
.icon-hover .hvr-icon{
112+
-webkit-transform:translateZ(0);
113+
transform:translateZ(0)
114+
}
115+
.icon-hover:active .hvr-icon,.icon-hover:focus .hvr-icon,.icon-hover:hover .hvr-icon{
116+
-webkit-animation-name:icon-hover;
117+
animation-name:icon-hover;
118+
-webkit-animation-duration:1s;
119+
animation-duration:1s;
120+
-webkit-animation-timing-function:ease-in-out;
121+
animation-timing-function:ease-in-out;
122+
-webkit-animation-iteration-count:1;
123+
animation-iteration-count:1
124+
}
125+
126+
@-webkit-keyframes icon-hover{
127+
16.65%{
128+
-webkit-transform:translateY(6px);
129+
transform:translateY(6px)
130+
}
131+
33.3%{
132+
-webkit-transform:translateY(-5px);
133+
transform:translateY(-5px)
134+
}
135+
49.95%{
136+
-webkit-transform:translateY(4px);
137+
transform:translateY(4px)
138+
}
139+
66.6%{
140+
-webkit-transform:translateY(-2px);
141+
transform:translateY(-2px)
142+
}
143+
83.25%{
144+
-webkit-transform:translateY(1px);
145+
transform:translateY(1px)
146+
}
147+
100%{
148+
-webkit-transform:translateY(0);
149+
transform:translateY(0)
150+
}
151+
}
152+
@keyframes icon-hover{
153+
16.65%{
154+
-webkit-transform:translateY(6px);
155+
transform:translateY(6px)
156+
}
157+
33.3%{
158+
-webkit-transform:translateY(-5px);
159+
transform:translateY(-5px)
160+
}
161+
49.95%{
162+
-webkit-transform:translateY(4px);
163+
transform:translateY(4px)
164+
}
165+
66.6%{
166+
-webkit-transform:translateY(-2px);
167+
transform:translateY(-2px)
168+
}
169+
83.25%{
170+
-webkit-transform:translateY(1px);
171+
transform:translateY(1px)
172+
}
173+
100%{
174+
-webkit-transform:translateY(0);
175+
transform:translateY(0)
176+
}
177+
} */
178+
179+
180+
/* Footer hover animations
181+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
182+
183+
.footer-hover{
184+
display:inline-block;
185+
-webkit-transform:perspective(1px) translateZ(0);
186+
transform:perspective(1px) translateZ(0);
187+
box-shadow:0 0 1px rgba(0,0,0,0);
188+
-webkit-transition-duration:.3s;
189+
transition-duration:.3s;
190+
-webkit-transition-property:transform;
191+
transition-property:transform;
192+
-webkit-transition-timing-function:ease-out;
193+
transition-timing-function:ease-out
194+
}
195+
.footer-hover:active,.footer-hover:focus,.footer-hover:hover{
196+
-webkit-transform:translateY(-8px);
197+
transform:translateY(-8px)
198+
}

‎themes/stargazer/brands.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
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 #ffffff;
19+
box-shadow: 0px 0px 0px 3px #ffffff;
20+
background-color: #ffffff !important;
21+
width: 150px;
22+
height: 150px;
23+
}
24+
25+
26+
/* Buttons
27+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
28+
29+
:root {
30+
/* violet */
31+
--primary-color: 111, 76, 255;
32+
33+
/* white */
34+
--text-color: 256, 256, 256;
35+
}
36+
37+
.button {
38+
font-family: 'DM Sans', sans-serif;
39+
font-size: 18px;
40+
padding: 12px 32px;
41+
margin: 1rem;
42+
cursor: pointer;
43+
border-radius: 4px;
44+
transition: all 0.3s ease;
45+
border-radius: 50px;
46+
color: rgba(var(--text-color));
47+
border: 2px double transparent;
48+
background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
49+
background-origin: border-box;
50+
background-clip: padding-box, border-box;
51+
max-width: 300px;
52+
width: 70%;
53+
}
54+
55+
.button:hover {
56+
transition: all 0.3s ease;
57+
box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px;
58+
color: rgba(var(--text-color));
59+
opacity: 0.85;
60+
}
61+
62+
63+
/* Brand Icons
64+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
65+
66+
.icon {
67+
padding: 0px 8px 3.5px 0px;
68+
/* position: absolute;
69+
left: 20px;
70+
top: 15px; */
71+
vertical-align: middle;
72+
width: 20px;
73+
height: 20px;
74+
}
75+

‎themes/stargazer/config.php

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<?php
2+
3+
return [
4+
5+
/*
6+
|--------------------------------------------------------------------------
7+
| Theme Config
8+
|--------------------------------------------------------------------------
9+
|
10+
| Description.
11+
|
12+
*/
13+
14+
// Some themes may not be compatible with custom buttons created by the Button Editor.
15+
// If 'false' the default button CSS is used.
16+
'allow_custom_buttons' => 'false',
17+
18+
'open_links_in_same_tab' => 'false',
19+
20+
21+
/*
22+
|--------------------------------------------------------------------------
23+
| Custom Code
24+
|--------------------------------------------------------------------------
25+
|
26+
| Description.
27+
|
28+
*/
29+
30+
'enable_custom_code' => 'false',
31+
32+
// Disable individual files (only applies if above is 'true').
33+
'enable_custom_head' => 'true',
34+
'enable_custom_body' => 'true',
35+
'enable_custom_body_end' => 'true',
36+
37+
38+
/*
39+
|--------------------------------------------------------------------------
40+
| Custom Icons
41+
|--------------------------------------------------------------------------
42+
|
43+
| Description.
44+
|
45+
*/
46+
47+
'use_custom_icons' => 'false',
48+
49+
// Is not set correct this will cause errors.
50+
'custom_icon_extension' => '.svg', // (.png, .jpg ...)
51+
52+
53+
54+
];

‎themes/stargazer/preview.png

141 KB
Loading

‎themes/stargazer/readme.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# A LittleLink Custom Theme
2+
Find more themes: https://github.com/JulianPrieber/llc-themes
3+
4+
* Theme Name: Stargazer
5+
* Theme Version: 1.1
6+
* Theme Date: 2022-09-01
7+
* Theme Author: JulianPrieber
8+
* Theme Author URI: https://github.com/JulianPrieber
9+
* Theme License: GPLv3
10+
11+
## Preview:
12+
![Preview](https://i.imgur.com/S84rKl4.gif)
13+
14+
15+
### Used assets:
16+
* Built using:
17+
* https://github.com/dhg/Skeleton
18+
* License: MIT
19+
20+
* Built using:
21+
* https://codepen.io/SuneBear/pen/YzVgebG
22+
* License: MIT
23+
24+
* Built using:
25+
* https://codepen.io/trishalim/pen/WNEOdWK
26+
* License: MIT

0 commit comments

Comments
 (0)