Merge pull request #363 from jwcooper/new-design
Updated Design - header, mobile menu and landing page
This commit is contained in:
Scott Shawcroft
GitHub
commit
b3c1510f03
17 changed files with 499 additions and 121 deletions
|
|
@ -11,4 +11,5 @@
|
|||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
<script src="{{ "/assets/javascript/header_mobile.js" | relative_url }}"></script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,16 @@
|
|||
<header id="site-header">
|
||||
{% assign current = page.url | downcase | split: '/' %}
|
||||
<div class="top-navigation">
|
||||
<div>
|
||||
<div class="navigation">
|
||||
<a {% if current[1] == 'contributing' %}class='active'{% endif %} href="{{ "/contributing" | relative_url }}">Contributing</a>
|
||||
<a href="https://blog.adafruit.com/category/circuitpython">News</a>
|
||||
<a {% if current[1] == 'awesome' %}class='active'{% endif %} href="{{ "/awesome" | relative_url }}">Awesome</a>
|
||||
<a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a>
|
||||
<a href="https://adafru.it/discord"><i class="fab fa-discord"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="content">
|
||||
<div class="site-brand">
|
||||
|
|
@ -12,17 +24,14 @@
|
|||
height="60" width="136">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="site-navigation">
|
||||
<a href="{{ "/downloads" | relative_url }}">DOWNLOADS</a>
|
||||
<a href="{{ "/libraries" | relative_url }}">LIBRARIES</a>
|
||||
<a href="{{ "/contributing" | relative_url }}">CONTRIBUTING</a>
|
||||
<a href="{{ "/blinka" | relative_url }}">BLINKA</a>
|
||||
<a href="https://blog.adafruit.com/category/circuitpython">NEWS</a>
|
||||
<a href="https://adafru.it/discord">DISCORD</a>
|
||||
<a href="{{ "/awesome" | relative_url }}">AWESOME</a>
|
||||
<a href="https://learn.adafruit.com/welcome-to-circuitpython">HELP</a>
|
||||
<a {% if current[1] == 'downloads' %}class='active'{% endif %} href="{{ "/downloads" | relative_url }}">Downloads</a>
|
||||
<a {% if current[1] == 'libraries' %}class='active'{% endif %} href="{{ "/libraries" | relative_url }}">Libraries</a>
|
||||
<a {% if current[1] == 'blinka' %}class='active'{% endif %} href="{{ "/blinka" | relative_url }}">Blinka</a>
|
||||
</div>
|
||||
<div class="get-started">
|
||||
<a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
44
_includes/header_mobile.html
Normal file
44
_includes/header_mobile.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<header id="mobile-header">
|
||||
<div class="header-contents">
|
||||
<div class="site-logo">
|
||||
<a href="{{ "/" | relative_url }}">
|
||||
<img src="{{ "/assets/images/logo.png" | relative_url }}"
|
||||
srcset="{{ "/assets/images/logo.png" | relative_url }} 1x,
|
||||
{{ "/assets/images/logo@2x.png" | relative_url }} 2x,
|
||||
{{ "/assets/images/logo@3x.png" | relative_url }} 3x"
|
||||
alt="CircuitPython Logo"
|
||||
height="60" width="136">
|
||||
</a>
|
||||
</div>
|
||||
<div id="mobile-menu">
|
||||
<div class="menu-toggle">
|
||||
<a href="#" id="mobile-menu-button">
|
||||
<span class="sr-only">Open Mobile Menu</span>
|
||||
<i class="fa fa-bars" aria-hidden='true'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<nav id="mobile-menu-contents" role="navigation" class="hidden"
|
||||
aria-expanded='false' aria-label='Mobile Menu'>
|
||||
<ul>
|
||||
<li><a {% if current[1] == 'downloads' %}class='active'{% endif %}
|
||||
href="{{ "/downloads" | relative_url }}">Downloads</a></li>
|
||||
<li><a {% if current[1] == 'libraries' %}class='active'{% endif %}
|
||||
href="{{ "/libraries" | relative_url }}">Libraries</a></li>
|
||||
<li><a {% if current[1] == 'blinka' %}class='active'{% endif %}
|
||||
href="{{ "/blinka" | relative_url }}">Blinka</a></li>
|
||||
<li><a {% if current[1] == 'contributing' %}class='active'{% endif %}
|
||||
href="{{ "/contributing" | relative_url }}">Contributing</a></li>
|
||||
<li><a href="https://blog.adafruit.com/category/circuitpython">News</a></li>
|
||||
<li><a {% if current[1] == 'awesome' %}class='active'{% endif %}
|
||||
href="{{ "/awesome" | relative_url }}">Awesome</a></li>
|
||||
<li><a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a></li>
|
||||
<li><a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a></li>
|
||||
<li><a href="https://adafru.it/discord">Discord</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="bottom-bar"></div>
|
||||
</header>
|
||||
|
||||
|
|
@ -28,16 +28,16 @@ layout: default
|
|||
{% assign current = page.url | downcase | split: '/' %}
|
||||
<ul class='tabbed-navigation'>
|
||||
<li>
|
||||
<a href="/contributing" {% if current[3] ==
|
||||
<a href="/contributing" {% if current[2] ==
|
||||
nil %}class='active'{% endif %}>Pull Requests</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contributing/open-issues" {% if current[3] ==
|
||||
<a href="/contributing/open-issues" {% if current[2] ==
|
||||
'open-issues' %}class='active'{% endif %}>Open Issues</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contributing/library-infrastructure-issues" {% if
|
||||
current[3] ==
|
||||
current[2] ==
|
||||
'library-infrastructure-issues' %}class='active'{% endif %}>Library Infrastructure Issues</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
<body>
|
||||
{% include header.html %}
|
||||
{% include header_mobile.html %}
|
||||
<div class="wrapper">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@
|
|||
@import 'base/variables';
|
||||
@import 'base/typography';
|
||||
@import 'base/base';
|
||||
@import 'base/mixins';
|
||||
|
||||
@import 'layout/grid';
|
||||
@import 'layout/header';
|
||||
@import 'layout/header_mobile';
|
||||
|
||||
@import 'pages/home';
|
||||
@import 'pages/downloads';
|
||||
|
|
|
|||
BIN
assets/images/CircuitPython_Boards.jpg
Normal file
BIN
assets/images/CircuitPython_Boards.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 451 KiB |
BIN
assets/images/CircuitPython_Hero.jpg
Normal file
BIN
assets/images/CircuitPython_Hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
assets/images/CircuitPython_Hero@2x.jpg
Normal file
BIN
assets/images/CircuitPython_Hero@2x.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
BIN
assets/images/CircuitPython_Pinball.jpg
Normal file
BIN
assets/images/CircuitPython_Pinball.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
BIN
assets/images/sensors_IMG_0101.jpg
Normal file
BIN
assets/images/sensors_IMG_0101.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
18
assets/javascript/header_mobile.js
Normal file
18
assets/javascript/header_mobile.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('mobile-menu-button').addEventListener('click', handleMobileToggle);
|
||||
});
|
||||
|
||||
function handleMobileToggle(event) {
|
||||
event.preventDefault();
|
||||
|
||||
var menuContainer = document.getElementById('mobile-menu-contents');
|
||||
|
||||
menuContainer.classList.toggle('hidden');
|
||||
|
||||
var menuIcon = document.querySelector('#mobile-menu-button > i');
|
||||
if (menuContainer.classList.contains('hidden')) {
|
||||
menuIcon.classList.replace('fa-times', 'fa-bars');
|
||||
} else {
|
||||
menuIcon.classList.replace('fa-bars', 'fa-times');
|
||||
}
|
||||
}
|
||||
26
assets/sass/base/_mixins.scss
Normal file
26
assets/sass/base/_mixins.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
@mixin readable-content {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[full-start] minmax(15px, 1fr)
|
||||
[main-start] minmax(0, 1300px) [main-end]
|
||||
minmax(15px, 1fr) [full-end];
|
||||
|
||||
&> * {
|
||||
grid-column: main;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rounded-button {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
padding: 7px 50px 7px 50px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
border-radius: 50px;
|
||||
border: 3px solid #fff;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
#site-header {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 3px;
|
||||
grid-template-rows: 40px 1fr 3px;
|
||||
grid-column: full;
|
||||
|
||||
&> * {
|
||||
|
|
@ -23,20 +23,43 @@
|
|||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.top-navigation {
|
||||
background-color: #151515;
|
||||
padding-top: 10px;
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
|
||||
a {
|
||||
margin-left: 40px;
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-brand {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.site-banner {
|
||||
|
|
@ -48,38 +71,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
.site-navigation {
|
||||
display:flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
.get-started {
|
||||
margin-left: auto;
|
||||
padding-bottom: 10px;
|
||||
|
||||
a {
|
||||
@include rounded-button;
|
||||
}
|
||||
}
|
||||
|
||||
.site-navigation {
|
||||
padding: 0 0 10px 0;
|
||||
font-size: 18px;
|
||||
|
||||
a {
|
||||
margin-left: 40px;
|
||||
color: #999999;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
background-color: #e90e8b;
|
||||
background-color: #e71c8c;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-xs-max) {
|
||||
#site-header {
|
||||
.wrapper {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-navigation {
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
padding: 2px;
|
||||
}
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
68
assets/sass/layout/_header_mobile.scss
Normal file
68
assets/sass/layout/_header_mobile.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
#mobile-header {
|
||||
background-color: #333;
|
||||
|
||||
.header-contents {
|
||||
padding: 9px 5px 5px 8px;
|
||||
}
|
||||
|
||||
/* screen reader only */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#mobile-menu {
|
||||
float: right;
|
||||
|
||||
.menu-toggle {
|
||||
font-size: 34px;
|
||||
padding: 10px 20px 10px 0;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-menu-contents {
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
|
||||
li {
|
||||
padding: 5px 0 5px 0;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs-max) {
|
||||
#mobile-header {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,15 +1,116 @@
|
|||
#home-page {
|
||||
@include readable-content;
|
||||
grid-row-grap: 1em;
|
||||
background-color: #fff;
|
||||
|
||||
.headline-banner {
|
||||
grid-column: full;
|
||||
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.image-headline {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@include readable-content;
|
||||
grid-template-rows: 1fr 1fr 1fr 8fr;
|
||||
|
||||
&> * {
|
||||
grid-column: main;
|
||||
}
|
||||
|
||||
.title, .tagline {
|
||||
span {
|
||||
line-height: 1.40;
|
||||
margin-left: 16px;
|
||||
padding: 5px 0;
|
||||
opacity: 0.9;
|
||||
|
||||
box-decoration-break: clone;
|
||||
-webkit-box-decoration-break: clone;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 75%;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
font-size: 64px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
width: 40%;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.supported-section {
|
||||
height: 680px;
|
||||
text-align: center;
|
||||
|
||||
hr {
|
||||
width: 75%;
|
||||
margin: 40px auto 40px auto;
|
||||
background-color: #cecece;
|
||||
border: none;
|
||||
height: 1px;
|
||||
.text {
|
||||
grid-template-rows: 4fr 1fr 1fr 4fr;
|
||||
|
||||
.title, .tagline {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
grid-column: full;
|
||||
text-align: center;
|
||||
padding: 20px 55px 20px 55px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.purple {
|
||||
background-color: #63338f;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
margin: 100px 0 100px 0;
|
||||
|
||||
&.short {
|
||||
margin: 50px 0 50px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 75%;
|
||||
margin: 20px auto;
|
||||
|
|
@ -17,7 +118,7 @@
|
|||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
|
|
@ -31,8 +132,22 @@
|
|||
margin-bottom: 20px;
|
||||
|
||||
.item {
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.action-link {
|
||||
@include rounded-button;
|
||||
|
||||
&.include-gap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -44,11 +159,56 @@
|
|||
[full-start] minmax(0em, 1fr)
|
||||
[main-start] minmax(0, 80em) [main-end]
|
||||
minmax(0em, 1fr) [full-end];
|
||||
|
||||
.headline-banner {
|
||||
height: 400px;
|
||||
margin-bottom: 0;
|
||||
|
||||
.text {
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tagline {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
img.pinball {
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
&.supported-section {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 40px 10px 0 10px;
|
||||
margin: 20px 0 20px 0 !important;
|
||||
.home-table {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-row-gap: 0em;
|
||||
|
|
|
|||
157
index.html
157
index.html
|
|
@ -2,66 +2,48 @@
|
|||
layout: home
|
||||
---
|
||||
|
||||
<div id="home-page" class="common-layout">
|
||||
<div class="content">
|
||||
<section>
|
||||
<img class="responsive" src="{{ "/assets/images/blinka-computer.png" | relative_url }}" srcset="{{ "/assets/images/blinka-computer.png" | relative_url }} 1x,
|
||||
{{ "/assets/images/blinka-computer@2x.png" | relative_url }} 2x,
|
||||
{{ "/assets/images/blinka-computer@3x.png" | relative_url }} 3x" alt="Blinka at a computer">
|
||||
<h2>The easiest way to program microcontrollers</h2>
|
||||
<div id="home-page">
|
||||
<div class="headline-banner">
|
||||
<div class="img-overlay"></div>
|
||||
<img class="image-headline" alt="hero image"
|
||||
src="{{ "assets/images/CircuitPython_Hero.jpg" |
|
||||
relative_url }}"
|
||||
/>
|
||||
<div class="text">
|
||||
<div class="title"><span>The easiest way to program microcontrollers</span></div>
|
||||
<div class="tagline">
|
||||
<span>
|
||||
CircuitPython is a programming language designed to simplify
|
||||
experimenting and learning to code on low-cost microcontroller
|
||||
boards.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="purple banner">
|
||||
<p>
|
||||
CircuitPython is a programming language designed to simplify experimenting
|
||||
and learning to code on low-cost microcontroller boards. It makes getting
|
||||
started easier than ever with no upfront desktop downloads needed. Once you
|
||||
get your board set up, open any text editor, and get started editing code.
|
||||
With CircuitPython, there are no upfront desktop downloads needed. Once
|
||||
you get your board set up, open any text editor, and start editing code.
|
||||
It's that simple.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://learn.adafruit.com/welcome-to-circuitpython">Get started with CircuitPython ></a>
|
||||
</p>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<img class="responsive" src="{{ "/assets/images/python.png" | relative_url }}"
|
||||
srcset="{{ "/assets/images/python.png" | relative_url }} 1x,
|
||||
{{ "/assets/images/python@2x.png" | relative_url }} 2x,
|
||||
{{ "/assets/images/python@3x.png" | relative_url }} 3x" alt="Python Logo">
|
||||
<h2>Learn Python with CircuitPython</h2>
|
||||
<p>
|
||||
<a href="https://www.python.org/">Python</a> is the fastest growing programming language.
|
||||
It's taught in schools and universities. It's a high-level programming language which
|
||||
means it's designed to be easier to read, write and maintain. It supports modules and
|
||||
packages which means it's easy to reuse your code for other projects. It has
|
||||
a built in interpreter which means there are no extra steps, like compiling,
|
||||
to get your code to work. And of course, <a href="https://www.python.org/">Python</a>
|
||||
is Open Source Software which means it's free for anyone to use, modify or improve upon.
|
||||
</p>
|
||||
<p>
|
||||
CircuitPython adds hardware support to the core Python language. If you
|
||||
already have Python knowledge, you can easily apply that to using
|
||||
CircuitPython. If you have no previous experience, it's really simple to
|
||||
get started! Learning CircuitPython is learning Python.
|
||||
</p>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<img class="responsive" src="{{ "/assets/images/microcontrollers.png" | relative_url }}"
|
||||
srcset="{{ "/assets/images/microcontrollers.png" | relative_url }} 1x,
|
||||
{{ "/assets/images/microcontrollers@2x.png" | relative_url }} 2x,
|
||||
{{ "/assets/images/microcontrollers@3x.png" | relative_url }} 3x" alt="Image of various microcontrollers">
|
||||
<h2>Supported by your favorite microcontroller</h2>
|
||||
<p>
|
||||
CircuitPython is designed to run on microcontroller boards. A
|
||||
microcontroller board is a circuit board with a microcontroller chip that's
|
||||
essentially an itty-bitty all-in-one computer. CircuitPython is easy to
|
||||
use because all you need is that little board, a USB cable, and a computer
|
||||
with a USB connection.
|
||||
</p>
|
||||
<p>
|
||||
<a href="/downloads">Search for a compatible board</a>
|
||||
</p>
|
||||
</section>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="headline-banner supported-section">
|
||||
<img class="image-headline" alt="hero image"
|
||||
src="{{ "assets/images/CircuitPython_Boards.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" class="action-link">See them all</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section>
|
||||
<h2>More reasons to use CircuitPython</h2>
|
||||
<div class="home-table">
|
||||
|
|
@ -108,8 +90,44 @@ layout: home
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="headline-banner supported-section">
|
||||
<img class="image-headline pinball" alt="hero image"
|
||||
src="{{ "assets/images/CircuitPython_Pinball.jpg" |
|
||||
relative_url }}"
|
||||
/>
|
||||
<div class="text">
|
||||
<div class="title"><span>The simple way to build something amazing</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section>
|
||||
<img class="responsive" src="{{ "/assets/images/python.png" | relative_url }}"
|
||||
srcset="{{ "/assets/images/python.png" | relative_url }} 1x,
|
||||
{{ "/assets/images/python@2x.png" | relative_url }} 2x,
|
||||
{{ "/assets/images/python@3x.png" | relative_url }} 3x" alt="Python Logo">
|
||||
<h2>CircuitPython is based on Python</h2>
|
||||
<p>
|
||||
Python is the fastest growing programming language. It's taught in schools
|
||||
and universities. It's a high-level programming language which means it's
|
||||
designed to be easier to read, write and maintain. It supports modules and
|
||||
packages which means it's easy to reuse your code for other projects. It
|
||||
has a built in interpreter which means there are no extra steps, like
|
||||
compiling, to get your code to work. And of course, Python is Open Source
|
||||
Software which means it's free for anyone to use, modify or improve upon.
|
||||
</p>
|
||||
<p>
|
||||
CircuitPython adds hardware support to all of these amazing features. If you
|
||||
already have Python knowledge, you can easily apply that to using CircuitPython.
|
||||
If you have no previous experience, it's really simple to get started!
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="purple banner">
|
||||
<div class="content short">
|
||||
<h2>Just the beginning...</h2>
|
||||
<p>
|
||||
CircuitPython continues to evolve, and is constantly being updated. We
|
||||
|
|
@ -118,20 +136,31 @@ layout: home
|
|||
concept. This makes CircuitPython better for you and everyone who uses it!
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://learn.adafruit.com/welcome-to-circuitpython">Get started with CircuitPython ></a>
|
||||
<a href="https://learn.adafruit.com/welcome-to-circuitpython"
|
||||
class="action-link include-gap">Get Started</a>
|
||||
</p>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<section>
|
||||
<h2>Thanks</h2>
|
||||
<p>
|
||||
CircuitPython wouldn't exist without the awesome work of <a href="https://micropython.org">Damien George and the MicroPython community</a>. They did the hard work to reimplement Python on microcontrollers and continue to push the boundaries of what is possible.
|
||||
CircuitPython wouldn't exist without the awesome work of
|
||||
<a href="https://micropython.org">Damien George and the MicroPython community</a>.
|
||||
They did the hard work to reimplement Python on microcontrollers and
|
||||
continue to push the boundaries of what is possible.
|
||||
</p>
|
||||
<p>
|
||||
Thank you to <a href="https://adafruit.com">Adafruit</a> for continuing to support
|
||||
CircuitPython's beginner-focused development.
|
||||
Thank you to <a href="https://www.adafruit.com">Adafruit</a> for
|
||||
continuing to support CircuitPython's beginner-focused development.
|
||||
</p>
|
||||
<p>
|
||||
Lastly, thank you to the CircuitPython community members who have spent time testing, triaging, fixing and enhancing CircuitPython, its libraries and its documentation. Together we're all making something incredible.
|
||||
Lastly, thank you to the CircuitPython community members who have spent
|
||||
time testing, triaging, fixing and enhancing CircuitPython, its libraries
|
||||
and its documentation. Together we're all making something incredible.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue