jepler/circuitpython-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

more new design for landing page

Browse source
This commit is contained in:
Justin Cooper 2019-11-04 13:11:48 -06:00
parent 8df267738d
commit baeffcfd0b
2 changed files with 80 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
assets/sass/pages/_home.scss
View file

@ -16,7 +16,7 @@
margin-bottom: 30px;
}
.image-headline, .video-headline {
.image-headline {
object-fit: cover;
width: 100%;
height: 100%;
@ -55,7 +55,7 @@
width: 75%;
grid-column: 2;
grid-row: 2;
font-size: 58px;
font-size: 54px;
font-weight: bold;
margin-bottom: 15px;
}
@ -67,6 +67,20 @@
font-size: 20px;
}
}
&.supported-section {
height: 680px;
text-align: center;
.text {
grid-template-rows: 4fr 1fr 1fr 4fr;
.title, .tagline {
width: 100%;
}
}
}
}
.banner {
@ -86,6 +100,8 @@
}
.content {
text-align: center;
h2 {
width: 75%;
margin: 20px auto;

109
index.html
View file

@ -27,8 +27,69 @@ layout: home
</p>
</div>
<div class="headline-banner supported-section">
<img class="image-headline" alt="hero image"
src="{{ "assets/images/CircuitPython_Hero.jpg" |
relative_url }}"
/>
<div class="text">
<div class="title"><span>Supported by all of the best microcontrollers</span></div>
<div class="tagline">
<span>
<a href="/downloads">See them all</a>
</span>
</div>
</div>
</div>
<div class="content">
<section>
<h2>More reasons to use CircuitPython</h2>
<div class="home-table">
<div class="item">
<h3>Quick and Easy</h3>
<p>
Create a file, edit your code, save the file, and it runs immediately.
There is no compiling, no downloading and no uploading needed.
</p>
</div>
<div class="item">
<h3>Beginner Friendly</h3>
<p>
CircuitPython is designed with education in mind. It's easy to start
learning how to code and you get immediate feedback from the board.
</p>
</div>
<div class="item">
<h3>Easy Code Updates</h3>
<p>
Since your code lives on the disk drive, you can edit it whenever you
like, you can also keep multiple files around for easy experimentation.
</p>
</div>
<div class="item">
<h3>Serial Console + REPL</h3>
<p>
These allow for live feedback from your code and interactive programming.
</p>
</div>
<div class="item">
<h3>File Storage</h3>
<p>
The internal storage for CircuitPython makes it great for data-logging,
playing audio clips, and otherwise interacting with files.
</p>
</div>
<div class="item">
<h3>Strong Hardware Support</h3>
<p>
There are many libraries and drivers for sensors, breakout boards
and other external components.
</p>
</div>
</div>
</section>
</div>
@ -93,52 +154,6 @@ layout: home
</p>
</section>
<hr />
<section>
<h2>More reasons to use CircuitPython</h2>
<div class="home-table">
<div class="item">
<h3>Quick and Easy</h3>
<p>
Create a file, edit your code, save the file, and it runs immediately.
There is no compiling, no downloading and no uploading needed.
</p>
</div>
<div class="item">
<h3>Beginner Friendly</h3>
<p>
CircuitPython is designed with education in mind. It's easy to start
learning how to code and you get immediate feedback from the board.
</p>
</div>
<div class="item">
<h3>Easy Code Updates</h3>
<p>
Since your code lives on the disk drive, you can edit it whenever you
like, you can also keep multiple files around for easy experimentation.
</p>
</div>
<div class="item">
<h3>Serial Console + REPL</h3>
<p>
These allow for live feedback from your code and interactive programming.
</p>
</div>
<div class="item">
<h3>File Storage</h3>
<p>
The internal storage for CircuitPython makes it great for data-logging,
playing audio clips, and otherwise interacting with files.
</p>
</div>
<div class="item">
<h3>Strong Hardware Support</h3>
<p>
There are many libraries and drivers for sensors, breakout boards
and other external components.
</p>
</div>
</div>
</section>
<hr />
<section>
<h2>Just the beginning...</h2>