Skip to content

Commit da88caf

Browse files
JulianPrieberJulianPrieber
committed
Added files
0 parents  commit da88caf

File tree

6 files changed

+736
-0
lines changed

6 files changed

+736
-0
lines changed

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

‎brands.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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+
width: 300px;
52+
}
53+
54+
.button:hover {
55+
transition: all 0.3s ease;
56+
box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px;
57+
color: rgba(var(--text-color));
58+
opacity: 0.7;
59+
}
60+
61+
62+
/* Brand Icons
63+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
64+
65+
.icon {
66+
padding: 0px 8px 3.5px 0px;
67+
/* position: absolute;
68+
left: 20px;
69+
top: 15px; */
70+
vertical-align: middle;
71+
width: 20px;
72+
height: 20px;
73+
}
74+

‎preview.png‎

92.7 KB
Loading

‎readme.md‎

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

‎share.button.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.share-icon {
2+
padding: 0px 8px 3.5px 0px;
3+
vertical-align: middle;
4+
color: #FFF !important;
5+
width: 10px;
6+
height: 10px;
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+
.sharebutton,
43+
sharebutton {
44+
display: inline-block;
45+
/* height: 48px; */
46+
text-align: center;
47+
vertical-align: middle;
48+
width: 24px;
49+
/* line-height: 48px; */
50+
scale: 2;
51+
border-radius: 8px;
52+
cursor: pointer;
53+
color: #FFF;
54+
background-color: rgb(1, 110, 218);
55+
background-image: linear-gradient(315deg, rgb(1, 110, 218), rgb(217, 0, 192));
56+
}
57+
58+
sharebutton:hover,
59+
.sharebutton:hover {
60+
color: #FFF;
61+
opacity: 0.85;
62+
opacity: 1 !important;
63+
filter: alpha(opacity=40);
64+
border-color: #888;
65+
outline: 0; }
66+
.sharebutton.sharebutton-primary {
67+
color: #FFFFFF;
68+
filter: brightness(90%) }
69+
.sharebutton.sharebutton-primary:hover,
70+
.sharebutton.sharebutton-primary:focus {
71+
color: #FFFFFF;
72+
filter: brightness(90%) }
73+
74+
75+
.sharebutton-mb {
76+
display: none;
77+
}
78+
.sharebutton-img {
79+
position: relative;
80+
left: 5px;
81+
margin-left: auto;
82+
margin-right: auto;
83+
}
84+

0 commit comments

Comments
 (0)