Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-04-24 15:37:12 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update animation

Browse Source
This commit is contained in:
Jip Fr 2020-05-07 20:18:05 +02:00
parent b776d0f919
commit 9c5c6fab1c
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/main.css
View File

@ -19,17 +19,20 @@ body {
}
.animateDot {
animation: dotAnimation 20s infinite;
animation: dotAnimation 10s infinite;
}
@keyframes dotAnimation {
0% {
cx: 0;
cy: 0;
}
50% {
cx: 20px;
cx: 10px;
cy: 10px;
}
100% {
cx: 0;
cy: 0;
}
}
@ -38,7 +41,7 @@ body {
max-width: 1590px;
}
h1.dot:after, h2.dot:after {
h1.dot:not([data-title-suffix]):after, h2.dot:not([data-title-suffix]):after {
/* content: ".";
color: #9D6FF3; */
content: "";
@ -48,6 +51,11 @@ h1.dot:after, h2.dot:after {
border-radius: 50%;
display: inline-block;
}
h1.dot[data-title-suffix]:after, h2.dot[data-title-suffix]:after {
content: attr(data-title-suffix);
display: inline-block;
color: #9D6FF3;
}
header {
display: flex;

12
views/home.handlebars
View File

@ -13,7 +13,7 @@
<section class="hero">
<div class="hero-meta">
<h3 class="subtitle">{{ locale.hero.subtitle }}</h3>
<h1 class="title dot">{{ locale.hero.title }}</h1>
<h1 class="title dot" {{#if locale.hero.titleSuffix}}data-title-suffix="{{locale.hero.titleSuffix}}"{{/if}}>{{ locale.hero.title }}</h1>
<p class="text">
{{ locale.hero.text }}
</p>
@ -60,8 +60,8 @@
</g>
<circle class="animateDot" id="Ellipse_15" data-name="Ellipse 15" cx="23" cy="23" r="23" transform="translate(1586.473 353) rotate(-45)" fill="#9d6ff3"/>
<ellipse class="animateDot" id="Ellipse_21" data-name="Ellipse 21" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1588.958 188.514) rotate(-45)" fill="#9d6ff3"/>
<ellipse class="animateDot" id="Ellipse_25" data-name="Ellipse 25" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1143.958 1021.514) rotate(-45)" fill="#9d6ff3"/>
<ellipse class="animateDot" id="Ellipse_26" data-name="Ellipse 26" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1064.958 158.514) rotate(-45)" fill="#9d6ff3"/>
<ellipse id="Ellipse_25" data-name="Ellipse 25" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1143.958 1021.514) rotate(-45)" fill="#9d6ff3"/>
<ellipse id="Ellipse_26" data-name="Ellipse 26" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1064.958 158.514) rotate(-45)" fill="#9d6ff3"/>
<circle class="animateDot" id="Ellipse_16" data-name="Ellipse 16" cx="23" cy="23" r="23" transform="translate(1169.473 524) rotate(-45)" fill="#59c9a5"/>
</g>
</svg>
@ -77,7 +77,7 @@
<section class="progress column-2">
<div class="left sect">
<div class="left-meta">
<h2 class="dot title" id="about">{{ locale.aboutUs.title }}</h2>
<h2 class="dot title" id="about" {{#if locale.aboutUs.titleSuffix}}data-title-suffix="{{locale.aboutUs.titleSuffix}}"{{/if}}>{{ locale.aboutUs.title }}</h2>
{{#each locale.aboutUs.paragraphs}}
<p class="text">{{ this }}</p>
{{/each}}
@ -93,7 +93,7 @@
<section class="faq">
<div class="sect-top sect">
<h2 class="dot title" id="faq">{{ locale.faq.title }}</h2>
<h2 class="dot title" id="faq" {{#if locale.faq.titleSuffix}}data-title-suffix="{{locale.faq.titleSuffix}}"{{/if}}>{{ locale.faq.title }}</h2>
<p class="text">{{ locale.faq.text }}</p>
</div>
<div class="questions column-2">
@ -112,7 +112,7 @@
<section class="team">
<div class="sect-top sect team-top">
<h2 class="dot title" id="credits">{{ locale.credits.title }}</h2>
<h2 class="dot title" id="credits" {{#if locale.credits.titleSuffix}}data-title-suffix="{{locale.credits.titleSuffix}}"{{/if}}>{{ locale.credits.title }}</h2>
<p class="text">{{ locale.credits.text }}</p>
</div>
<div class="team-cards">