Skip to content

Commit

Permalink
Merge pull request #483 from Chia-Network/academy-landing-page
Browse files Browse the repository at this point in the history 
carousel fix
  • Loading branch information
@BrandtH22
BrandtH22 authored Jan 23, 2024
2 parents 0b61cf4 + cfcebb8 commit 130f03a
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 63 deletions.
88 changes: 57 additions & 31 deletions docs/academy/academy-intro/academy-home.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,9 @@ Below, you'll find several curated courses covering the everything from the basi

#### Chialisp Overview

<div class="horizontal-scroll-wrapper">
<div class="horizontal-scroll squares">
<section class="carousel">
<ol class="carousel-inner">
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -42,7 +43,9 @@ Below, you'll find several curated courses covering the everything from the basi
</a>
</div>
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -54,7 +57,9 @@ Below, you'll find several curated courses covering the everything from the basi
</a>
</div>
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -66,28 +71,32 @@ Below, you'll find several curated courses covering the everything from the basi
</a>
</div>
</div>
</div>
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={InnerPuzzles} alt='Inner Puzzles' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/chialisp-inner-puzzle'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={InnerPuzzles} alt='Inner Puzzles' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/chialisp-inner-puzzle'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
</li>
</ol>
</section>

---

#### Blockchain Basics

<div class="horizontal-scroll-wrapper">
<div class="horizontal-scroll squares">
<section class="carousel">
<ol class="carousel-inner">
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -100,6 +109,8 @@ Below, you'll find several curated courses covering the everything from the basi
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -112,6 +123,8 @@ Below, you'll find several curated courses covering the everything from the basi
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -124,6 +137,8 @@ Below, you'll find several curated courses covering the everything from the basi
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -136,6 +151,8 @@ Below, you'll find several curated courses covering the everything from the basi
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -148,27 +165,31 @@ Below, you'll find several curated courses covering the everything from the basi
</div>
</div>
</div>
</div>
</div>
</li>
</ol>
</section>

---

#### Plotting & Farming

<div class="horizontal-scroll-wrapper">
<div class="horizontal-scroll squares">
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={FarmingOverview} alt='Farming Overview' />
</div>
<section class="carousel">
<ol class="carousel-inner">
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
<img src={FarmingOverview} alt='Farming Overview' />
</div>
<div class="card__footer">
<a href='https://docs.chia.net/farming-overview'>
<button class="button button--primary button--block">Learn</button>
</a>
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -181,6 +202,8 @@ Below, you'll find several curated courses covering the everything from the basi
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -193,6 +216,8 @@ Below, you'll find several curated courses covering the everything from the basi
</div>
</div>
</div>
</li>
<li class="carousel-item">
<div class="card-demo">
<div class="card">
<div class="card__image">
Expand All @@ -205,8 +230,9 @@ Below, you'll find several curated courses covering the everything from the basi
</div>
</div>
</div>
</div>
</div>
</li>
</ol>
</section>

---

Expand Down
2 changes: 1 addition & 1 deletion docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const katex = require('rehype-katex');
},
{
type: 'doc',
docId: 'academy/academy-intro/academy-overview',
docId: 'academy/academy-intro/academy-home',
position: 'left',
label: 'Chia Academy',
},
Expand Down
51 changes: 20 additions & 31 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ figcaption {

.eqnumber {
font-style: italic;
color:#999999;
color: #999999;
text-align: center;
margin-top:-10px;
margin-top: -10px;
margin-bottom: 25px;
width: 100%;
}
Expand All @@ -67,42 +67,31 @@ html {
scroll-padding-top: 5rem;
}


/* Academy Home Carousel*/

.horizontal-scroll-wrapper {
display: block;
width: 20px;
max-height: 220px;
ol,
li {
list-style: none;
margin: 0;
padding-top: 1px;
padding: 10px;
}

.horizontal-scroll {
display: block;
width: 251px;
max-height: 55vw;
margin: 0;
padding-top: 1px;
overflow-x: hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateY(-250px);
transform-origin: right top;
.carousel {
position: relative;
}

.horizontal-scroll > div {
display: block;
padding: 5px;
transform: rotate(90deg) translateX(250px);
transform-origin: right top;
.carousel-inner {
display: flex;
padding: 10px;
overflow-x: scroll;
counter-reset: item;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}

.squares {
padding: 0 0 0 0;
.carousel-item {
position: relative;
flex: 0 0 40%;
width: 100%;
counter-increment: item;
}

.squares > div {
width: 250px;
height: 250px;
margin: 10px 0;
}

0 comments on commit 130f03a

Please sign in to comment.