Added theme PolySleek
This commit is contained in:
Julian Prieber
parent
ccab1ae660
commit
da32eddf2f
|
|
@ -0,0 +1,106 @@
|
|||
/* ************************************************************* */
|
||||
/*
|
||||
/* Use this file to add custom CSS animations.
|
||||
/* Delete this file if you wish to use the default animations.
|
||||
/* If you do not want to have animations in your theme,
|
||||
/* remove or comment them and include this file in your theme.
|
||||
/*
|
||||
/* ************************************************************* */
|
||||
|
||||
|
||||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
- Entrance animations
|
||||
- Button hover animations
|
||||
- Icon hover animations
|
||||
- Footer hover animations
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* Entrance animations
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* .button-entrance {
|
||||
animation-name: popUp;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
animation-delay: calc(var(--delay)/10);
|
||||
}
|
||||
|
||||
@keyframes popUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
} */
|
||||
|
||||
/* .fadein {
|
||||
animation-name: fadein;
|
||||
animation-duration: 3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
/* Button hover animations
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* (Also apply to icon) */
|
||||
|
||||
.button-hover, .credit-hover{
|
||||
display:inline-block;
|
||||
-webkit-transform:perspective(1px) translateZ(0);
|
||||
transform:perspective(1px) translateZ(0);
|
||||
box-shadow:0 0 1px rgba(0,0,0,0);
|
||||
-webkit-transition-duration:.1s;
|
||||
transition-duration:.1s;
|
||||
-webkit-transition-property:transform;
|
||||
transition-property:transform
|
||||
}
|
||||
.button-hover:active,
|
||||
.button-hover:focus,
|
||||
.button-hover:hover{
|
||||
-webkit-transform:scale(1.02);
|
||||
transform:scale(1.02)
|
||||
}
|
||||
.credit-hover:active,
|
||||
.credit-hover:focus,
|
||||
.credit-hover:hover{
|
||||
-webkit-transform:scale(1.04);
|
||||
transform:scale(1.04)
|
||||
}
|
||||
|
||||
|
||||
/* Footer hover animations
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.footer-hover{
|
||||
display:inline-block;
|
||||
-webkit-transform:perspective(1px) translateZ(0);
|
||||
transform:perspective(1px) translateZ(0);
|
||||
box-shadow:0 0 1px rgba(0,0,0,0);
|
||||
-webkit-transition-duration:.3s;
|
||||
transition-duration:.3s;
|
||||
-webkit-transition-property:transform;
|
||||
transition-property:transform;
|
||||
-webkit-transition-timing-function:ease-out;
|
||||
transition-timing-function:ease-out
|
||||
}
|
||||
.footer-hover:active,.footer-hover:focus,.footer-hover:hover{
|
||||
-webkit-transform:translateY(-8px);
|
||||
transform:translateY(-8px)
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
|
||||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
- Rounded user avatars
|
||||
- Buttons
|
||||
- Brand Styles
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* Rounded avatars
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* Disable this if you don't want rounded avatars for users */
|
||||
.rounded-avatar {
|
||||
border-radius: 50%;
|
||||
-webkit-box-shadow: 0px 0px 0px 3px var(--button-background-color);
|
||||
box-shadow: 0px 0px 0px 3px var(--button-background-color);
|
||||
background-color: var(--button-background-color) !important;
|
||||
width: var(--image-width);
|
||||
height: var(--image-height);
|
||||
}
|
||||
|
||||
@-webkit-keyframes rainbow {
|
||||
0%{background-position:0% 82%}
|
||||
50%{background-position:100% 19%}
|
||||
100%{background-position:0% 82%}
|
||||
}
|
||||
@-moz-keyframes rainbow {
|
||||
0%{background-position:0% 82%}
|
||||
50%{background-position:100% 19%}
|
||||
100%{background-position:0% 82%}
|
||||
}
|
||||
@-o-keyframes rainbow {
|
||||
0%{background-position:0% 82%}
|
||||
50%{background-position:100% 19%}
|
||||
100%{background-position:0% 82%}
|
||||
}
|
||||
@keyframes rainbow {
|
||||
0%{background-position:0% 82%}
|
||||
50%{background-position:100% 19%}
|
||||
100%{background-position:0% 82%}
|
||||
}
|
||||
|
||||
|
||||
.social-icon {
|
||||
font-size: 32px;
|
||||
padding: 10px;
|
||||
}
|
||||
.social-icon-div {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.social-icon{color:#fff;}
|
||||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
color: var(--button-text-color);
|
||||
min-height: 58px;
|
||||
line-height: 58px;
|
||||
cursor: pointer;
|
||||
|
||||
color: var(--button-text-color);
|
||||
background-color: var(--button-background-color);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
border-radius: 14px;
|
||||
margin-bottom: 20px !important;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(3, 218, 198, 30%);
|
||||
}
|
||||
.button:hover {
|
||||
box-shadow: 0 0 6px rgba(3, 218, 198, 30%);
|
||||
}
|
||||
|
||||
/* Brand Icons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.icon {
|
||||
right: 10px;
|
||||
bottom: 2px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
svg {
|
||||
color: white !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Theme Config
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| The theme config allows you to configure how LittleLink Custom should treat your theme.
|
||||
| All settings can either be set to "true" or "false", unless stated otherwise.
|
||||
|
|
||||
| The settings below change how your buttons behave.
|
||||
|
|
||||
*/
|
||||
|
||||
// Some themes may not be compatible with custom buttons created by the Button Editor.
|
||||
// If 'false' the default button CSS is used.
|
||||
'allow_custom_buttons' => 'false',
|
||||
|
||||
'open_links_in_same_tab' => 'false',
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Custom Code
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Custom code allows you to inject customized Blade, PHP, HTML, JavaScript and CSS code.
|
||||
|
|
||||
| In your "extra" folder, you will find 3 separate files for injecting your code to
|
||||
| different places on the final page (head, body, at the end of the body).
|
||||
|
|
||||
| You may also attach custom assets like CSS, JS, or images.
|
||||
| You can find instructions for this in the files in your extra folder.
|
||||
|
|
||||
*/
|
||||
|
||||
'enable_custom_code' => 'true',
|
||||
|
||||
// Disable individual files (only applies if above is 'true').
|
||||
'enable_custom_head' => 'true',
|
||||
'enable_custom_body' => 'true',
|
||||
'enable_custom_body_end' => 'true',
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Custom Icons
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| You may add custom icons to your theme.
|
||||
| These icons are stored under: .../extra/custom-icons.
|
||||
|
|
||||
| You can adjust the file extension types to use other files than just SVGs.
|
||||
|
|
||||
*/
|
||||
|
||||
'use_custom_icons' => 'false',
|
||||
|
||||
// Is not set correct this will cause errors.
|
||||
'custom_icon_extension' => '.svg', // (.png, .jpg ...)
|
||||
|
||||
|
||||
|
||||
];
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
|
||||
<script>
|
||||
/* Credit and Thanks:
|
||||
Matrix - Particles.js;
|
||||
SliderJS - Ettrics;
|
||||
Design - Sara Mazal Web;
|
||||
Fonts - Google Fonts
|
||||
*/
|
||||
|
||||
window.onload = function () {
|
||||
Particles.init({
|
||||
selector: ".background"
|
||||
});
|
||||
};
|
||||
const particles = Particles.init({
|
||||
selector: ".background",
|
||||
color: ["#03dac6", "#ff0266", "#000000"],
|
||||
connectParticles: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
color: ["#faebd7", "#03dac6", "#ff0266"],
|
||||
maxParticles: 43,
|
||||
connectParticles: false
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
class NavigationPage {
|
||||
constructor() {
|
||||
this.currentId = null;
|
||||
this.currentTab = null;
|
||||
this.tabContainerHeight = 70;
|
||||
this.lastScroll = 0;
|
||||
let self = this;
|
||||
$(".nav-tab").click(function () {
|
||||
self.onTabClick(event, $(this));
|
||||
});
|
||||
$(window).scroll(() => {
|
||||
this.onScroll();
|
||||
});
|
||||
$(window).resize(() => {
|
||||
this.onResize();
|
||||
});
|
||||
}
|
||||
|
||||
onTabClick(event, element) {
|
||||
event.preventDefault();
|
||||
let scrollTop =
|
||||
$(element.attr("href")).offset().top - this.tabContainerHeight + 1;
|
||||
$("html, body").animate({ scrollTop: scrollTop }, 600);
|
||||
}
|
||||
|
||||
onScroll() {
|
||||
this.checkHeaderPosition();
|
||||
this.findCurrentTabSelector();
|
||||
this.lastScroll = $(window).scrollTop();
|
||||
}
|
||||
|
||||
onResize() {
|
||||
if (this.currentId) {
|
||||
this.setSliderCss();
|
||||
}
|
||||
}
|
||||
|
||||
checkHeaderPosition() {
|
||||
const headerHeight = 75;
|
||||
if ($(window).scrollTop() > headerHeight) {
|
||||
$(".nav-container").addClass("nav-container--scrolled");
|
||||
} else {
|
||||
$(".nav-container").removeClass("nav-container--scrolled");
|
||||
}
|
||||
let offset =
|
||||
$(".nav").offset().top +
|
||||
$(".nav").height() -
|
||||
this.tabContainerHeight -
|
||||
headerHeight;
|
||||
if (
|
||||
$(window).scrollTop() > this.lastScroll &&
|
||||
$(window).scrollTop() > offset
|
||||
) {
|
||||
$(".nav-container").addClass("nav-container--move-up");
|
||||
$(".nav-container").removeClass("nav-container--top-first");
|
||||
$(".nav-container").addClass("nav-container--top-second");
|
||||
} else if (
|
||||
$(window).scrollTop() < this.lastScroll &&
|
||||
$(window).scrollTop() > offset
|
||||
) {
|
||||
$(".nav-container").removeClass("nav-container--move-up");
|
||||
$(".nav-container").removeClass("nav-container--top-second");
|
||||
$(".nav-container-container").addClass("nav-container--top-first");
|
||||
} else {
|
||||
$(".nav-container").removeClass("nav-container--move-up");
|
||||
$(".nav-container").removeClass("nav-container--top-first");
|
||||
$(".nav-container").removeClass("nav-container--top-second");
|
||||
}
|
||||
}
|
||||
|
||||
findCurrentTabSelector(element) {
|
||||
let newCurrentId;
|
||||
let newCurrentTab;
|
||||
let self = this;
|
||||
$(".nav-tab").each(function () {
|
||||
let id = $(this).attr("href");
|
||||
let offsetTop = $(id).offset().top - self.tabContainerHeight;
|
||||
let offsetBottom =
|
||||
$(id).offset().top + $(id).height() - self.tabContainerHeight;
|
||||
if (
|
||||
$(window).scrollTop() > offsetTop &&
|
||||
$(window).scrollTop() < offsetBottom
|
||||
) {
|
||||
newCurrentId = id;
|
||||
newCurrentTab = $(this);
|
||||
}
|
||||
});
|
||||
if (this.currentId != newCurrentId || this.currentId === null) {
|
||||
this.currentId = newCurrentId;
|
||||
this.currentTab = newCurrentTab;
|
||||
this.setSliderCss();
|
||||
}
|
||||
}
|
||||
|
||||
setSliderCss() {
|
||||
let width = 0;
|
||||
let left = 0;
|
||||
if (this.currentTab) {
|
||||
width = this.currentTab.css("width");
|
||||
left = this.currentTab.offset().left;
|
||||
}
|
||||
$(".nav-tab-slider").css("width", width);
|
||||
$(".nav-tab-slider").css("left", left);
|
||||
}
|
||||
}
|
||||
|
||||
new NavigationPage();
|
||||
/* Credit and Thanks:
|
||||
Matrix - Particles.js;
|
||||
SliderJS - Ettrics;
|
||||
Design - Sara Mazal Web;
|
||||
Fonts - Google Fonts
|
||||
*/
|
||||
</script>
|
||||
<script>
|
||||
$('.txt').html(function(i, html) {
|
||||
var chars = $.trim(html).split("");
|
||||
|
||||
return '<h1>' + chars.join('</h1><h1>') + '</h1>';
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<canvas class="background"></canvas>
|
||||
|
|
@ -0,0 +1,665 @@
|
|||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script>
|
||||
<style>
|
||||
/*
|
||||
* Animation module with all animation code
|
||||
*/
|
||||
h1,
|
||||
h1:hover {
|
||||
/*
|
||||
* Animation variables
|
||||
*/
|
||||
/*
|
||||
* Elements settings
|
||||
*/
|
||||
/*
|
||||
* Keyframe loop
|
||||
*/
|
||||
/*
|
||||
* Element animation delay loop
|
||||
*/
|
||||
}
|
||||
h1,
|
||||
h1:hover {
|
||||
-webkit-animation-name: anim-text-flow-keys;
|
||||
animation-name: anim-text-flow-keys;
|
||||
-webkit-animation-duration: 50s;
|
||||
animation-duration: 50s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
animation-direction: alternate;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@-webkit-keyframes anim-text-flow-keys {
|
||||
0% {
|
||||
color: #d6b15c;
|
||||
}
|
||||
5% {
|
||||
color: #785cd6;
|
||||
}
|
||||
10% {
|
||||
color: #6ed65c;
|
||||
}
|
||||
15% {
|
||||
color: #a55cd6;
|
||||
}
|
||||
20% {
|
||||
color: #d65c6c;
|
||||
}
|
||||
25% {
|
||||
color: #83d65c;
|
||||
}
|
||||
30% {
|
||||
color: #ced65c;
|
||||
}
|
||||
35% {
|
||||
color: #5cd695;
|
||||
}
|
||||
40% {
|
||||
color: #5c91d6;
|
||||
}
|
||||
45% {
|
||||
color: #5c68d6;
|
||||
}
|
||||
50% {
|
||||
color: #5cb4d6;
|
||||
}
|
||||
55% {
|
||||
color: #5cabd6;
|
||||
}
|
||||
60% {
|
||||
color: #d6b15c;
|
||||
}
|
||||
65% {
|
||||
color: #5cd65c;
|
||||
}
|
||||
70% {
|
||||
color: #d6a55c;
|
||||
}
|
||||
75% {
|
||||
color: #b15cd6;
|
||||
}
|
||||
80% {
|
||||
color: #5c9fd6;
|
||||
}
|
||||
85% {
|
||||
color: #d66c5c;
|
||||
}
|
||||
90% {
|
||||
color: #5c93d6;
|
||||
}
|
||||
95% {
|
||||
color: #5cbcd6;
|
||||
}
|
||||
100% {
|
||||
color: #c65cd6;
|
||||
}
|
||||
}
|
||||
@keyframes anim-text-flow-keys {
|
||||
0% {
|
||||
color: #d6b15c;
|
||||
}
|
||||
5% {
|
||||
color: #785cd6;
|
||||
}
|
||||
10% {
|
||||
color: #6ed65c;
|
||||
}
|
||||
15% {
|
||||
color: #a55cd6;
|
||||
}
|
||||
20% {
|
||||
color: #d65c6c;
|
||||
}
|
||||
25% {
|
||||
color: #83d65c;
|
||||
}
|
||||
30% {
|
||||
color: #ced65c;
|
||||
}
|
||||
35% {
|
||||
color: #5cd695;
|
||||
}
|
||||
40% {
|
||||
color: #5c91d6;
|
||||
}
|
||||
45% {
|
||||
color: #5c68d6;
|
||||
}
|
||||
50% {
|
||||
color: #5cb4d6;
|
||||
}
|
||||
55% {
|
||||
color: #5cabd6;
|
||||
}
|
||||
60% {
|
||||
color: #d6b15c;
|
||||
}
|
||||
65% {
|
||||
color: #5cd65c;
|
||||
}
|
||||
70% {
|
||||
color: #d6a55c;
|
||||
}
|
||||
75% {
|
||||
color: #b15cd6;
|
||||
}
|
||||
80% {
|
||||
color: #5c9fd6;
|
||||
}
|
||||
85% {
|
||||
color: #d66c5c;
|
||||
}
|
||||
90% {
|
||||
color: #5c93d6;
|
||||
}
|
||||
95% {
|
||||
color: #5cbcd6;
|
||||
}
|
||||
100% {
|
||||
color: #c65cd6;
|
||||
}
|
||||
}
|
||||
h1:nth-of-type(1),
|
||||
h1:hover:nth-of-type(1) {
|
||||
-webkit-animation-delay: -19.8s;
|
||||
animation-delay: -19.8s;
|
||||
}
|
||||
h1:nth-of-type(2),
|
||||
h1:hover:nth-of-type(2) {
|
||||
-webkit-animation-delay: -19.6s;
|
||||
animation-delay: -19.6s;
|
||||
}
|
||||
h1:nth-of-type(3),
|
||||
h1:hover:nth-of-type(3) {
|
||||
-webkit-animation-delay: -19.4s;
|
||||
animation-delay: -19.4s;
|
||||
}
|
||||
h1:nth-of-type(4),
|
||||
h1:hover:nth-of-type(4) {
|
||||
-webkit-animation-delay: -19.2s;
|
||||
animation-delay: -19.2s;
|
||||
}
|
||||
h1:nth-of-type(5),
|
||||
h1:hover:nth-of-type(5) {
|
||||
-webkit-animation-delay: -19s;
|
||||
animation-delay: -19s;
|
||||
}
|
||||
h1:nth-of-type(6),
|
||||
h1:hover:nth-of-type(6) {
|
||||
-webkit-animation-delay: -18.8s;
|
||||
animation-delay: -18.8s;
|
||||
}
|
||||
h1:nth-of-type(7),
|
||||
h1:hover:nth-of-type(7) {
|
||||
-webkit-animation-delay: -18.6s;
|
||||
animation-delay: -18.6s;
|
||||
}
|
||||
h1:nth-of-type(8),
|
||||
h1:hover:nth-of-type(8) {
|
||||
-webkit-animation-delay: -18.4s;
|
||||
animation-delay: -18.4s;
|
||||
}
|
||||
h1:nth-of-type(9),
|
||||
h1:hover:nth-of-type(9) {
|
||||
-webkit-animation-delay: -18.2s;
|
||||
animation-delay: -18.2s;
|
||||
}
|
||||
h1:nth-of-type(10),
|
||||
h1:hover:nth-of-type(10) {
|
||||
-webkit-animation-delay: -18s;
|
||||
animation-delay: -18s;
|
||||
}
|
||||
h1:nth-of-type(11),
|
||||
h1:hover:nth-of-type(11) {
|
||||
-webkit-animation-delay: -17.8s;
|
||||
animation-delay: -17.8s;
|
||||
}
|
||||
h1:nth-of-type(12),
|
||||
h1:hover:nth-of-type(12) {
|
||||
-webkit-animation-delay: -17.6s;
|
||||
animation-delay: -17.6s;
|
||||
}
|
||||
h1:nth-of-type(13),
|
||||
h1:hover:nth-of-type(13) {
|
||||
-webkit-animation-delay: -17.4s;
|
||||
animation-delay: -17.4s;
|
||||
}
|
||||
h1:nth-of-type(14),
|
||||
h1:hover:nth-of-type(14) {
|
||||
-webkit-animation-delay: -17.2s;
|
||||
animation-delay: -17.2s;
|
||||
}
|
||||
h1:nth-of-type(15),
|
||||
h1:hover:nth-of-type(15) {
|
||||
-webkit-animation-delay: -17s;
|
||||
animation-delay: -17s;
|
||||
}
|
||||
h1:nth-of-type(16),
|
||||
h1:hover:nth-of-type(16) {
|
||||
-webkit-animation-delay: -16.8s;
|
||||
animation-delay: -16.8s;
|
||||
}
|
||||
h1:nth-of-type(17),
|
||||
h1:hover:nth-of-type(17) {
|
||||
-webkit-animation-delay: -16.6s;
|
||||
animation-delay: -16.6s;
|
||||
}
|
||||
h1:nth-of-type(18),
|
||||
h1:hover:nth-of-type(18) {
|
||||
-webkit-animation-delay: -16.4s;
|
||||
animation-delay: -16.4s;
|
||||
}
|
||||
h1:nth-of-type(19),
|
||||
h1:hover:nth-of-type(19) {
|
||||
-webkit-animation-delay: -16.2s;
|
||||
animation-delay: -16.2s;
|
||||
}
|
||||
h1:nth-of-type(20),
|
||||
h1:hover:nth-of-type(20) {
|
||||
-webkit-animation-delay: -16s;
|
||||
animation-delay: -16s;
|
||||
}
|
||||
h1:nth-of-type(21),
|
||||
h1:hover:nth-of-type(21) {
|
||||
-webkit-animation-delay: -15.8s;
|
||||
animation-delay: -15.8s;
|
||||
}
|
||||
h1:nth-of-type(22),
|
||||
h1:hover:nth-of-type(22) {
|
||||
-webkit-animation-delay: -15.6s;
|
||||
animation-delay: -15.6s;
|
||||
}
|
||||
h1:nth-of-type(23),
|
||||
h1:hover:nth-of-type(23) {
|
||||
-webkit-animation-delay: -15.4s;
|
||||
animation-delay: -15.4s;
|
||||
}
|
||||
h1:nth-of-type(24),
|
||||
h1:hover:nth-of-type(24) {
|
||||
-webkit-animation-delay: -15.2s;
|
||||
animation-delay: -15.2s;
|
||||
}
|
||||
h1:nth-of-type(25),
|
||||
h1:hover:nth-of-type(25) {
|
||||
-webkit-animation-delay: -15s;
|
||||
animation-delay: -15s;
|
||||
}
|
||||
h1:nth-of-type(26),
|
||||
h1:hover:nth-of-type(26) {
|
||||
-webkit-animation-delay: -14.8s;
|
||||
animation-delay: -14.8s;
|
||||
}
|
||||
h1:nth-of-type(27),
|
||||
h1:hover:nth-of-type(27) {
|
||||
-webkit-animation-delay: -14.6s;
|
||||
animation-delay: -14.6s;
|
||||
}
|
||||
h1:nth-of-type(28),
|
||||
h1:hover:nth-of-type(28) {
|
||||
-webkit-animation-delay: -14.4s;
|
||||
animation-delay: -14.4s;
|
||||
}
|
||||
h1:nth-of-type(29),
|
||||
h1:hover:nth-of-type(29) {
|
||||
-webkit-animation-delay: -14.2s;
|
||||
animation-delay: -14.2s;
|
||||
}
|
||||
h1:nth-of-type(30),
|
||||
h1:hover:nth-of-type(30) {
|
||||
-webkit-animation-delay: -14s;
|
||||
animation-delay: -14s;
|
||||
}
|
||||
h1:nth-of-type(31),
|
||||
h1:hover:nth-of-type(31) {
|
||||
-webkit-animation-delay: -13.8s;
|
||||
animation-delay: -13.8s;
|
||||
}
|
||||
h1:nth-of-type(32),
|
||||
h1:hover:nth-of-type(32) {
|
||||
-webkit-animation-delay: -13.6s;
|
||||
animation-delay: -13.6s;
|
||||
}
|
||||
h1:nth-of-type(33),
|
||||
h1:hover:nth-of-type(33) {
|
||||
-webkit-animation-delay: -13.4s;
|
||||
animation-delay: -13.4s;
|
||||
}
|
||||
h1:nth-of-type(34),
|
||||
h1:hover:nth-of-type(34) {
|
||||
-webkit-animation-delay: -13.2s;
|
||||
animation-delay: -13.2s;
|
||||
}
|
||||
h1:nth-of-type(35),
|
||||
h1:hover:nth-of-type(35) {
|
||||
-webkit-animation-delay: -13s;
|
||||
animation-delay: -13s;
|
||||
}
|
||||
h1:nth-of-type(36),
|
||||
h1:hover:nth-of-type(36) {
|
||||
-webkit-animation-delay: -12.8s;
|
||||
animation-delay: -12.8s;
|
||||
}
|
||||
h1:nth-of-type(37),
|
||||
h1:hover:nth-of-type(37) {
|
||||
-webkit-animation-delay: -12.6s;
|
||||
animation-delay: -12.6s;
|
||||
}
|
||||
h1:nth-of-type(38),
|
||||
h1:hover:nth-of-type(38) {
|
||||
-webkit-animation-delay: -12.4s;
|
||||
animation-delay: -12.4s;
|
||||
}
|
||||
h1:nth-of-type(39),
|
||||
h1:hover:nth-of-type(39) {
|
||||
-webkit-animation-delay: -12.2s;
|
||||
animation-delay: -12.2s;
|
||||
}
|
||||
h1:nth-of-type(40),
|
||||
h1:hover:nth-of-type(40) {
|
||||
-webkit-animation-delay: -12s;
|
||||
animation-delay: -12s;
|
||||
}
|
||||
h1:nth-of-type(41),
|
||||
h1:hover:nth-of-type(41) {
|
||||
-webkit-animation-delay: -11.8s;
|
||||
animation-delay: -11.8s;
|
||||
}
|
||||
h1:nth-of-type(42),
|
||||
h1:hover:nth-of-type(42) {
|
||||
-webkit-animation-delay: -11.6s;
|
||||
animation-delay: -11.6s;
|
||||
}
|
||||
h1:nth-of-type(43),
|
||||
h1:hover:nth-of-type(43) {
|
||||
-webkit-animation-delay: -11.4s;
|
||||
animation-delay: -11.4s;
|
||||
}
|
||||
h1:nth-of-type(44),
|
||||
h1:hover:nth-of-type(44) {
|
||||
-webkit-animation-delay: -11.2s;
|
||||
animation-delay: -11.2s;
|
||||
}
|
||||
h1:nth-of-type(45),
|
||||
h1:hover:nth-of-type(45) {
|
||||
-webkit-animation-delay: -11s;
|
||||
animation-delay: -11s;
|
||||
}
|
||||
h1:nth-of-type(46),
|
||||
h1:hover:nth-of-type(46) {
|
||||
-webkit-animation-delay: -10.8s;
|
||||
animation-delay: -10.8s;
|
||||
}
|
||||
h1:nth-of-type(47),
|
||||
h1:hover:nth-of-type(47) {
|
||||
-webkit-animation-delay: -10.6s;
|
||||
animation-delay: -10.6s;
|
||||
}
|
||||
h1:nth-of-type(48),
|
||||
h1:hover:nth-of-type(48) {
|
||||
-webkit-animation-delay: -10.4s;
|
||||
animation-delay: -10.4s;
|
||||
}
|
||||
h1:nth-of-type(49),
|
||||
h1:hover:nth-of-type(49) {
|
||||
-webkit-animation-delay: -10.2s;
|
||||
animation-delay: -10.2s;
|
||||
}
|
||||
h1:nth-of-type(50),
|
||||
h1:hover:nth-of-type(50) {
|
||||
-webkit-animation-delay: -10s;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
h1:nth-of-type(51),
|
||||
h1:hover:nth-of-type(51) {
|
||||
-webkit-animation-delay: -9.8s;
|
||||
animation-delay: -9.8s;
|
||||
}
|
||||
h1:nth-of-type(52),
|
||||
h1:hover:nth-of-type(52) {
|
||||
-webkit-animation-delay: -9.6s;
|
||||
animation-delay: -9.6s;
|
||||
}
|
||||
h1:nth-of-type(53),
|
||||
h1:hover:nth-of-type(53) {
|
||||
-webkit-animation-delay: -9.4s;
|
||||
animation-delay: -9.4s;
|
||||
}
|
||||
h1:nth-of-type(54),
|
||||
h1:hover:nth-of-type(54) {
|
||||
-webkit-animation-delay: -9.2s;
|
||||
animation-delay: -9.2s;
|
||||
}
|
||||
h1:nth-of-type(55),
|
||||
h1:hover:nth-of-type(55) {
|
||||
-webkit-animation-delay: -9s;
|
||||
animation-delay: -9s;
|
||||
}
|
||||
h1:nth-of-type(56),
|
||||
h1:hover:nth-of-type(56) {
|
||||
-webkit-animation-delay: -8.8s;
|
||||
animation-delay: -8.8s;
|
||||
}
|
||||
h1:nth-of-type(57),
|
||||
h1:hover:nth-of-type(57) {
|
||||
-webkit-animation-delay: -8.6s;
|
||||
animation-delay: -8.6s;
|
||||
}
|
||||
h1:nth-of-type(58),
|
||||
h1:hover:nth-of-type(58) {
|
||||
-webkit-animation-delay: -8.4s;
|
||||
animation-delay: -8.4s;
|
||||
}
|
||||
h1:nth-of-type(59),
|
||||
h1:hover:nth-of-type(59) {
|
||||
-webkit-animation-delay: -8.2s;
|
||||
animation-delay: -8.2s;
|
||||
}
|
||||
h1:nth-of-type(60),
|
||||
h1:hover:nth-of-type(60) {
|
||||
-webkit-animation-delay: -8s;
|
||||
animation-delay: -8s;
|
||||
}
|
||||
h1:nth-of-type(61),
|
||||
h1:hover:nth-of-type(61) {
|
||||
-webkit-animation-delay: -7.8s;
|
||||
animation-delay: -7.8s;
|
||||
}
|
||||
h1:nth-of-type(62),
|
||||
h1:hover:nth-of-type(62) {
|
||||
-webkit-animation-delay: -7.6s;
|
||||
animation-delay: -7.6s;
|
||||
}
|
||||
h1:nth-of-type(63),
|
||||
h1:hover:nth-of-type(63) {
|
||||
-webkit-animation-delay: -7.4s;
|
||||
animation-delay: -7.4s;
|
||||
}
|
||||
h1:nth-of-type(64),
|
||||
h1:hover:nth-of-type(64) {
|
||||
-webkit-animation-delay: -7.2s;
|
||||
animation-delay: -7.2s;
|
||||
}
|
||||
h1:nth-of-type(65),
|
||||
h1:hover:nth-of-type(65) {
|
||||
-webkit-animation-delay: -7s;
|
||||
animation-delay: -7s;
|
||||
}
|
||||
h1:nth-of-type(66),
|
||||
h1:hover:nth-of-type(66) {
|
||||
-webkit-animation-delay: -6.8s;
|
||||
animation-delay: -6.8s;
|
||||
}
|
||||
h1:nth-of-type(67),
|
||||
h1:hover:nth-of-type(67) {
|
||||
-webkit-animation-delay: -6.6s;
|
||||
animation-delay: -6.6s;
|
||||
}
|
||||
h1:nth-of-type(68),
|
||||
h1:hover:nth-of-type(68) {
|
||||
-webkit-animation-delay: -6.4s;
|
||||
animation-delay: -6.4s;
|
||||
}
|
||||
h1:nth-of-type(69),
|
||||
h1:hover:nth-of-type(69) {
|
||||
-webkit-animation-delay: -6.2s;
|
||||
animation-delay: -6.2s;
|
||||
}
|
||||
h1:nth-of-type(70),
|
||||
h1:hover:nth-of-type(70) {
|
||||
-webkit-animation-delay: -6s;
|
||||
animation-delay: -6s;
|
||||
}
|
||||
h1:nth-of-type(71),
|
||||
h1:hover:nth-of-type(71) {
|
||||
-webkit-animation-delay: -5.8s;
|
||||
animation-delay: -5.8s;
|
||||
}
|
||||
h1:nth-of-type(72),
|
||||
h1:hover:nth-of-type(72) {
|
||||
-webkit-animation-delay: -5.6s;
|
||||
animation-delay: -5.6s;
|
||||
}
|
||||
h1:nth-of-type(73),
|
||||
h1:hover:nth-of-type(73) {
|
||||
-webkit-animation-delay: -5.4s;
|
||||
animation-delay: -5.4s;
|
||||
}
|
||||
h1:nth-of-type(74),
|
||||
h1:hover:nth-of-type(74) {
|
||||
-webkit-animation-delay: -5.2s;
|
||||
animation-delay: -5.2s;
|
||||
}
|
||||
h1:nth-of-type(75),
|
||||
h1:hover:nth-of-type(75) {
|
||||
-webkit-animation-delay: -5s;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
h1:nth-of-type(76),
|
||||
h1:hover:nth-of-type(76) {
|
||||
-webkit-animation-delay: -4.8s;
|
||||
animation-delay: -4.8s;
|
||||
}
|
||||
h1:nth-of-type(77),
|
||||
h1:hover:nth-of-type(77) {
|
||||
-webkit-animation-delay: -4.6s;
|
||||
animation-delay: -4.6s;
|
||||
}
|
||||
h1:nth-of-type(78),
|
||||
h1:hover:nth-of-type(78) {
|
||||
-webkit-animation-delay: -4.4s;
|
||||
animation-delay: -4.4s;
|
||||
}
|
||||
h1:nth-of-type(79),
|
||||
h1:hover:nth-of-type(79) {
|
||||
-webkit-animation-delay: -4.2s;
|
||||
animation-delay: -4.2s;
|
||||
}
|
||||
h1:nth-of-type(80),
|
||||
h1:hover:nth-of-type(80) {
|
||||
-webkit-animation-delay: -4s;
|
||||
animation-delay: -4s;
|
||||
}
|
||||
h1:nth-of-type(81),
|
||||
h1:hover:nth-of-type(81) {
|
||||
-webkit-animation-delay: -3.8s;
|
||||
animation-delay: -3.8s;
|
||||
}
|
||||
h1:nth-of-type(82),
|
||||
h1:hover:nth-of-type(82) {
|
||||
-webkit-animation-delay: -3.6s;
|
||||
animation-delay: -3.6s;
|
||||
}
|
||||
h1:nth-of-type(83),
|
||||
h1:hover:nth-of-type(83) {
|
||||
-webkit-animation-delay: -3.4s;
|
||||
animation-delay: -3.4s;
|
||||
}
|
||||
h1:nth-of-type(84),
|
||||
h1:hover:nth-of-type(84) {
|
||||
-webkit-animation-delay: -3.2s;
|
||||
animation-delay: -3.2s;
|
||||
}
|
||||
h1:nth-of-type(85),
|
||||
h1:hover:nth-of-type(85) {
|
||||
-webkit-animation-delay: -3s;
|
||||
animation-delay: -3s;
|
||||
}
|
||||
h1:nth-of-type(86),
|
||||
h1:hover:nth-of-type(86) {
|
||||
-webkit-animation-delay: -2.8s;
|
||||
animation-delay: -2.8s;
|
||||
}
|
||||
h1:nth-of-type(87),
|
||||
h1:hover:nth-of-type(87) {
|
||||
-webkit-animation-delay: -2.6s;
|
||||
animation-delay: -2.6s;
|
||||
}
|
||||
h1:nth-of-type(88),
|
||||
h1:hover:nth-of-type(88) {
|
||||
-webkit-animation-delay: -2.4s;
|
||||
animation-delay: -2.4s;
|
||||
}
|
||||
h1:nth-of-type(89),
|
||||
h1:hover:nth-of-type(89) {
|
||||
-webkit-animation-delay: -2.2s;
|
||||
animation-delay: -2.2s;
|
||||
}
|
||||
h1:nth-of-type(90),
|
||||
h1:hover:nth-of-type(90) {
|
||||
-webkit-animation-delay: -2s;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
h1:nth-of-type(91),
|
||||
h1:hover:nth-of-type(91) {
|
||||
-webkit-animation-delay: -1.8s;
|
||||
animation-delay: -1.8s;
|
||||
}
|
||||
h1:nth-of-type(92),
|
||||
h1:hover:nth-of-type(92) {
|
||||
-webkit-animation-delay: -1.6s;
|
||||
animation-delay: -1.6s;
|
||||
}
|
||||
h1:nth-of-type(93),
|
||||
h1:hover:nth-of-type(93) {
|
||||
-webkit-animation-delay: -1.4s;
|
||||
animation-delay: -1.4s;
|
||||
}
|
||||
h1:nth-of-type(94),
|
||||
h1:hover:nth-of-type(94) {
|
||||
-webkit-animation-delay: -1.2s;
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
h1:nth-of-type(95),
|
||||
h1:hover:nth-of-type(95) {
|
||||
-webkit-animation-delay: -1s;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
h1:nth-of-type(96),
|
||||
h1:hover:nth-of-type(96) {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
h1:nth-of-type(97),
|
||||
h1:hover:nth-of-type(97) {
|
||||
-webkit-animation-delay: -0.6s;
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
h1:nth-of-type(98),
|
||||
h1:hover:nth-of-type(98) {
|
||||
-webkit-animation-delay: -0.4s;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
h1:nth-of-type(99),
|
||||
h1:hover:nth-of-type(99) {
|
||||
-webkit-animation-delay: -0.2s;
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
h1:nth-of-type(100),
|
||||
h1:hover:nth-of-type(100) {
|
||||
-webkit-animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!--
|
||||
|
||||
You can download all the icons used for the buttons from here: https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FJulianPrieber%2Flittlelink-custom%2Ftree%2Fmain%2Flittlelink%2Ficons.
|
||||
|
||||
For custom icons to apply you have to enable them in the config first.
|
||||
|
||||
Include your edited icons in the "custom-icons" folder while keeping the original file names.
|
||||
|
||||
You can use other file types like PNG, JPG, etc. by defining a custom file extension in the config.
|
||||
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="0; url=https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FJulianPrieber%2Flittlelink-custom%2Ftree%2Fmain%2Flittlelink%2Ficons" />
|
||||
</head>
|
||||
<body> </body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
# A LittleLink Custom Theme
|
||||
Find more themes: https://github.com/JulianPrieber/llc-themes
|
||||
|
||||
* Theme Name: PolySleek
|
||||
* Theme Version: 1.0
|
||||
* Theme Date: 23/02/2023 <!-- DD/MM/YYYY -->
|
||||
* Theme Author: JulianPrieber
|
||||
* Theme Author URI: https://github.com/JulianPrieber
|
||||
* Theme License: MIT
|
||||
* Source code: https://github.com/JulianPrieber/PolySleek
|
||||
|
||||
|
||||
### Used assets:
|
||||
* Built using:
|
||||
* https://github.com/dhg/Skeleton
|
||||
* License: MIT
|
||||
|
||||
*
|
||||
* https://codepen.io/Saramazal/pen/LYyywNb
|
||||
* License: MIT
|
||||
|
||||
*
|
||||
* https://codepen.io/hendrysadrak/pen/VLMOMJ
|
||||
* License: MIT
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
.share-icon {
|
||||
padding: 0px 5px 3.5px 0px;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.sharediv {
|
||||
position:relative;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.toastdiv {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toastbox {
|
||||
width: 280px;
|
||||
padding: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
position: fixed;
|
||||
top: 105%;
|
||||
-webkit-transition: transform 0.3s linear;
|
||||
transition: transform 0.3s linear;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
}
|
||||
.toastbox.toast-tox--active {
|
||||
-webkit-transform: translateY(-150px);
|
||||
transform: translateY(-150px);
|
||||
}
|
||||
|
||||
.sharebutton,
|
||||
sharebutton {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 18px;
|
||||
width: 48px;
|
||||
font-weight: 700;
|
||||
line-height: 48px;
|
||||
letter-spacing: 0.1px;
|
||||
white-space: wrap;
|
||||
border: solid var(--accentColor) 2px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--button-text-color);
|
||||
background-color: var(--button-background-color);
|
||||
}
|
||||
|
||||
|
||||
.sharebutton {
|
||||
display: inline-block;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(3, 218, 198, 30%);
|
||||
}
|
||||
.sharebutton:hover {
|
||||
box-shadow: 0 0 6px rgba(3, 218, 198, 30%);
|
||||
}
|
||||
|
||||
.sharebutton-mb {
|
||||
display: none;
|
||||
}
|
||||
.sharebutton-img {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
|
||||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
- Grid
|
||||
- Base Styles
|
||||
- Background
|
||||
- Typography
|
||||
- Links
|
||||
- Code
|
||||
- Spacing
|
||||
- Utilities
|
||||
- Misc
|
||||
- Credit footer
|
||||
|
||||
*/
|
||||
|
||||
|
||||
@import url('https://fonts.bunny.net/css?family=Roboto:300,400,700&display=swap');
|
||||
|
||||
|
||||
/* Grid
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box; }
|
||||
.column {
|
||||
position: center;
|
||||
width: 100%;
|
||||
float: center;
|
||||
box-sizing: border-box; }
|
||||
|
||||
/* For devices larger than 400px */
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
@media (min-width: 550px) {
|
||||
.container {
|
||||
width: 80%; }
|
||||
.column,
|
||||
.columns {
|
||||
margin-left: 0; }
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Base Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* NOTE
|
||||
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
||||
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||
|
||||
html {
|
||||
font-size: 100%; }
|
||||
|
||||
/* From the :root element you can easily change the colors of the design, its size and so on. */
|
||||
:root {
|
||||
|
||||
/* You can change the font family in the whole design here. (You need to add the font family to the codes.) */
|
||||
--font-family: 'Roboto', sans-serif;
|
||||
|
||||
/* You can change the font size here, is proportional to all texts. */
|
||||
--font-size: 16px;
|
||||
|
||||
/* You can change the background color by typing the color code. */
|
||||
--background-color: #1e1f26;
|
||||
|
||||
/* You can change the frame thickness and color of the picture by typing the number of pixels and the color code. */
|
||||
--image-border-color: #1f232e;
|
||||
--image-border-px: 3px;
|
||||
|
||||
/* You can change the width and size of the picture by typing the number of pixels. */
|
||||
--image-width: 140px;
|
||||
--image-height: 140px;
|
||||
|
||||
/* You can change the colors of the title and description section by typing the color codes. */
|
||||
--title-color: #fff;
|
||||
--description-color: #fff;
|
||||
|
||||
/* You can change the colors of social media icons by changing the color code. */
|
||||
--svg-color: #fff;
|
||||
|
||||
/* You can change the background, text color and active color of the menu by changing the color codes. */
|
||||
--menu-background-color: #1f232e;
|
||||
--menu-text-color: #fff;
|
||||
--menu-active-text-color: #03dac6;
|
||||
|
||||
/* You can change the button's background, text color and active color by changing the color codes. */
|
||||
--button-background-color: #222840;
|
||||
--button-text-color: #fff;
|
||||
--button-text-hover-color: #03dac6;
|
||||
|
||||
/* You can change the background, text color and active color of the text field by changing the color codes. */
|
||||
--textarea-background-color: #1f232e;
|
||||
--textarea-text-color: #fff;
|
||||
--textarea-link-text-color: #03dac6;
|
||||
|
||||
/* You can change the background, text color and active color of the footer area by changing the color codes. */
|
||||
--footer-background-color: #1f232e;
|
||||
--footer-text-color: #fff;
|
||||
--footer-link-text-color: #03dac6;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #03dac6; /* WebKit/Blink Browsers */
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #03dac6; /* Gecko Browsers */
|
||||
}
|
||||
|
||||
/* Background
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-family) !important;
|
||||
background-color: var(--background-color);
|
||||
color: var(--title-color);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
font-size: var(--font-size);
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.background{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@keyframes transitionAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
0% {
|
||||
background-position: -500%;
|
||||
}
|
||||
100% {
|
||||
background-position: 500%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animStar {
|
||||
from {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
h1 {
|
||||
color: var(--title-color);
|
||||
font-size: 3em;
|
||||
/* font-weight: var(--font-weight); */
|
||||
font-weight: 800px;
|
||||
letter-spacing: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--description-color);
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
font-weight: 300;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 0.3rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.badge-body {
|
||||
fill: #222840;
|
||||
}
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--button-text-hover-color); }
|
||||
|
||||
.spacing {
|
||||
padding: 0 10px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
/* Code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
code {
|
||||
padding: .2rem .5rem;
|
||||
margin: 0 .2rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
background: #F1F1F1;
|
||||
border: 1px solid #E1E1E1;
|
||||
border-radius: 4px; }
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre; }
|
||||
|
||||
/* Spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1rem;
|
||||
display: block !important; }
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset {
|
||||
margin-bottom: 1.5rem; }
|
||||
pre,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
p,
|
||||
ol {
|
||||
margin-bottom: 2.5rem; }
|
||||
|
||||
|
||||
/* Utilities
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-pull-right {
|
||||
float: right; }
|
||||
.u-pull-left {
|
||||
float: left; }
|
||||
|
||||
|
||||
/* Misc
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
hr {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3.5rem;
|
||||
border-width: 0;
|
||||
border-top: 1px solid #E1E1E1; }
|
||||
|
||||
|
||||
/* ===== Hidden Scrollbar ===== */
|
||||
* {
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
scrollbar-width: none; /* Firefox */ }
|
||||
*::-webkit-scrollbar {
|
||||
display: none; /* Safari and Chrome */ }
|
||||
|
||||
|
||||
/* Credit footer
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* Styling for credit footer text */
|
||||
.credit-txt {
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.credit-icon {
|
||||
display: none;
|
||||
right: 5px;
|
||||
}
|
||||
.credit-footer {
|
||||
position: relative;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.credit-footer:hover {
|
||||
text-shadow: rgba(3,218,197,0.5) 0px 0px 6px;
|
||||
}
|
||||
|
||||
/* Switches text color for credit footer for dark/light mode */
|
||||
|
||||
.credit-txt-clr{
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue