Skip to content

Commit

Permalink
added list item to libraries section
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArcherDiLunaire
ArcherDiLunaire committed Mar 22, 2024
1 parent 17925a3 commit f1526e5
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 35 deletions.
53 changes: 38 additions & 15 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,21 +256,44 @@ <h3> Victor Oliva</h3>
<div class="line line-h"></div>
<h2 class="scroll-animate highlight"><span>Our Libraries</span></h2>
<div class="line line-h" style="transform: translateY(-2px)"></div>
<div class="title-wrapper">
<h3>Polkadot-API:</h3>
<a class="arrow-icon" href="https://github.com/polkadot-api" target="_blank"
aria-label="extrenal link to go to the library page">
<svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.01 40" fill="white"
width="24" height="24">
<polygon
points="38.01 0 38.01 0 0 0 0 2.01 36.58 2.01 .04 38.55 1.45 39.96 38.01 3.41 38.01 40 40.01 40 40.01 0 38.01 0" />
</svg>
</a>
</div>
<p>Polkadot-API aims to surpass PolkadotJs by offering meticulously crafted, composable libraries aligned with a
"light-client first" philosophy. It empowers decentralized app developers, enhancing the overall developer
experience and setting a new standard for efficiency, adaptability, and performance in the Polkadot
ecosystem.</p>
<ul>
<li>
<div class="title-wrapper">
<h3>Polkadot-API:</h3>
<a class="arrow-icon" href="https://github.com/polkadot-api" target="_blank"
aria-label="extrenal link to go to the library page">
<svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.01 40"
fill="white" width="24" height="24">
<polygon
points="38.01 0 38.01 0 0 0 0 2.01 36.58 2.01 .04 38.55 1.45 39.96 38.01 3.41 38.01 40 40.01 40 40.01 0 38.01 0" />
</svg>
</a>
</div>
<p>Polkadot-API aims to surpass PolkadotJs by offering meticulously crafted, composable libraries
aligned with a
"light-client first" philosophy. It empowers decentralized app developers, enhancing the overall
developer
experience and setting a new standard for efficiency, adaptability, and performance in the Polkadot
ecosystem.</p>
</li>
<li>
<div class="title-wrapper">
<h3>React.js:</h3>
<a class="arrow-icon" href="https://github.com/polkadot-api" target="_blank"
aria-label="extrenal link to go to the library page">
<svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.01 40"
fill="white" width="24" height="24">
<polygon
points="38.01 0 38.01 0 0 0 0 2.01 36.58 2.01 .04 38.55 1.45 39.96 38.01 3.41 38.01 40 40.01 40 40.01 0 38.01 0" />
</svg>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</li>
</ul>
</section>
<footer id="contact-us">
<div class="content">
Expand Down
11 changes: 9 additions & 2 deletions public/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion public/style.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

48 changes: 31 additions & 17 deletions scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ body {
background: radial-gradient(at 40% 40%, rgba(13, 20, 33, 0.5), rgba(10, 9, 15, 0.1)),
radial-gradient(at 60% 60%, rgba(20, 33, 66, 0.8), rgba(0, 0, 0, 0));

&.loaded{
.hero-img{
&.loaded {
.hero-img {
opacity: 1;
transition: opacity 1s linear .3s;
}
Expand Down Expand Up @@ -417,21 +417,23 @@ section {
width: 100%;
margin-bottom: var(--margin-1);

&.scroll-animate{
&.scroll-animate {
.strip {
will-change: transform;
transform: scaleX(0.8);
}
&.animate{
.strip{

&.animate {
.strip {
transform: scaleX(1);
transition: 1s cubic-bezier(.77,0,.18,1) 0.3s;
transition: 1s cubic-bezier(.77, 0, .18, 1) 0.3s;

&:nth-child(2) {
transform: scaleX(1) translateX(-16px);
transform: scaleX(1) translateX(-16px);
}

&:nth-child(3) {
transform: scaleX(1) translateX(16px);
transform: scaleX(1) translateX(16px);
}
}
}
Expand All @@ -445,7 +447,7 @@ section {
height: 32px;
align-items: center;

&.scroll-translate{
&.scroll-translate {
transform: translateX(0px);

}
Expand All @@ -456,11 +458,13 @@ section {

&:nth-child(2) {
background: #e0c9ff;
&.scroll-animate{

&.scroll-animate {
will-change: transform;
transform: translateX(0);
&.animate{
transition: 1s cubic-bezier(.77,0,.18,1) 0.3s;

&.animate {
transition: 1s cubic-bezier(.77, 0, .18, 1) 0.3s;
transform: translateX(-16px);
}
}
Expand All @@ -469,11 +473,13 @@ section {
&:nth-child(3) {
background: #b7cbff;
justify-content: end;
&.scroll-animate{

&.scroll-animate {
will-change: transform;
transform: translateX(0);
&.animate{
transition: 1s cubic-bezier(.77,0,.18,1) 0.3s;

&.animate {
transition: 1s cubic-bezier(.77, 0, .18, 1) 0.3s;
transform: translateX(16px);
}
}
Expand Down Expand Up @@ -601,6 +607,15 @@ section {
}

#our-libraries {
ul {
padding: 0;
li {
display: block;
padding-bottom: var(--margin-1);
border-bottom: solid 1px $grid-blue;
}
}

.title-wrapper {
display: flex;
align-items: center;
Expand Down Expand Up @@ -628,8 +643,7 @@ section {
}

p {
padding: var(--margin-1);
border-bottom: solid 1px $grid-blue;
padding: var(--margin-0) var(--margin-1);
}
}

Expand Down

0 comments on commit f1526e5

Please sign in to comment.