Skip to content

Commit 63d15dc

Browse files
WasabiFanWasabiFan
committed
Replace margin above headings with colored backgrounds on getting started page
1 parent 6a00e72 commit 63d15dc

3 files changed

Lines changed: 74 additions & 19 deletions

File tree

‎_layouts/docs.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
layout: page
33
---
44

5+
{% if page.no-wrapper %}
6+
<div class="container">
7+
{% endif %}
8+
59
<hr />
610
<div class="nav-dropdown-arrow">
711
<div>
@@ -16,4 +20,8 @@
1620
</div>
1721
<hr />
1822

23+
{% if page.no-wrapper %}
24+
</div>
25+
{% endif %}
26+
1927
{{ content }}

‎docs/getting-started.md‎

Lines changed: 58 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22
title: Getting Started with ev3dev
33
categories: docs getting-started
44
excerpt: "So you're ready to try out ev3dev. Great! Here are step-by-step instructions to help you get ev3dev up and running on your EV3 or Raspberry Pi."
5-
extra-body-classes: "spaced-headings"
5+
no-wrapper: true
66
---
77

8+
<div class="colored-section">
9+
<div class="container" markdown="1">
10+
811
* Table of Contents
912
{:toc}
1013

@@ -39,6 +42,12 @@ in the December release, so if something seems broken or the documentation seems
3942
please [open an issue on GitHub](/support){: .alert-link}.
4043
{: .alert .alert-warning}
4144

45+
</div>
46+
</div>
47+
48+
<div class="dark-bg colored-section">
49+
<div class="container" markdown="1">
50+
4251
## Step 1: Download the latest ev3dev image file
4352

4453
<br/>
@@ -56,6 +65,12 @@ To get started, you will need to download the release corresponding to the platf
5665
you are using. If you are looking for older releases or other file types, you can
5766
check out the [GitHub releases page][releases].
5867

68+
</div>
69+
</div>
70+
71+
<div class="colored-section">
72+
<div class="container" markdown="1">
73+
5974
## Step 2: Copy the image on to the SD card
6075

6176
<div class="alert alert-danger">
@@ -103,12 +118,19 @@ You can also check out [this page for RaspberryPi](http://elinux.org/RPi_Easy_SD
103118
Much of the information there is applicable to ev3dev.
104119
</div>
105120

106-
<div class="panel panel-warning">
107-
<div class="panel-heading">
121+
</div>
122+
</div>
123+
124+
<div class="dark-bg colored-section">
125+
<div class="container" markdown="1">
126+
127+
## Step 3 (Raspberry Pi only): Update options in `config.txt`
128+
129+
<div class="alert alert-warning" markdown="1">
108130
{% include icon.html type="warning" %}
109-
<strong>Raspberry Pi Only!</strong>
131+
This is for Raspberry Pi only! Users of other platforms can skip this step.
110132
</div>
111-
<div class="panel-body" markdown="1">
133+
112134
You must make some changes to `config.txt` to enable support for BrickPi or
113135
PiStorms before you put your SD card in your Raspberry Pi.
114136

@@ -117,13 +139,16 @@ after flashing it in order for it to be detected. In your file browser, open
117139
up `EV3DEV_BOOT`. This contains a file named `config.txt`. Open `config.txt`
118140
in your favorite text editor and follow the instructions in the file to enable
119141
either BrickPi or PiStorms.
142+
120143
</div>
121144
</div>
122145

146+
<div class="colored-section">
147+
<div class="container" markdown="1">
123148

124-
<div class="row top-heading-margin">
125-
<div class="col-md-8 suppress-spaced-headings" markdown="1">
126-
## Step 3: Boot ev3dev
149+
<div class="row">
150+
<div class="col-md-8" markdown="1">
151+
## Step 4: Boot ev3dev
127152

128153
Put the SD Card in your EV3 and power it on. At first, you will see the
129154
MINDSTORMS boot splash and the red LEDs will be on. This is immediately
@@ -153,7 +178,6 @@ data may be lost. Keep in mind, that it may take a much longer time from 8V to
153178
</div>
154179
</div>
155180

156-
157181
<div class="panel panel-info">
158182
<div class="panel-heading">
159183
{% include icon.html type="info" %}
@@ -167,7 +191,13 @@ Troubleshooting tips if your EV3 won't boot
167191
</div>
168192
</div>
169193

170-
## Step 4: Setup a network connection
194+
</div>
195+
</div>
196+
197+
<div class="dark-bg colored-section">
198+
<div class="container" markdown="1">
199+
200+
## Step 5: Setup a network connection
171201

172202
There are lots of choices here. Your choice depends on what type of connection
173203
you want to use and on the OS of your host computer, so pick the one that applies:
@@ -193,7 +223,13 @@ to connect for the first time. You can setup additional connections using the
193223
`connmanctl` command.
194224
{: class="alert alert-info"}
195225

196-
## Step 5: Do something awesome
226+
</div>
227+
</div>
228+
229+
<div class="colored-section">
230+
<div class="container" markdown="1">
231+
232+
## Step 6: Do something awesome
197233

198234
This will be where we tell you how to use the EV3's main functions, and how
199235
to write programs. We are still learning, so everything here should be
@@ -222,9 +258,15 @@ If the language you want isn't listed, you still can use it, but you'll have to
222258
do more of the heavy lifting yourself using the guides above. Once you get the
223259
hang of it, you can even write your own interface library and have it listed here!
224260

225-
<div class="row top-heading-margin">
226-
<div class="col-md-8 suppress-spaced-headings" markdown="1">
227-
## Step 6: Calling it a day
261+
</div>
262+
</div>
263+
264+
<div class="dark-bg colored-section">
265+
<div class="container" markdown="1">
266+
267+
<div class="row">
268+
<div class="col-md-8" markdown="1">
269+
## Step 7: Calling it a day
228270

229271
When you are ready to wish your EV3 goodnight, turn if off by pressing the
230272
*back* button from the main menu in brickman or pressing and holding the *back*
@@ -237,6 +279,8 @@ button from any screen in brickman. This will open a dialog where you can select
237279
</div>
238280
</div>
239281

282+
</div>
283+
</div>
240284
[microSD]: https://en.wikipedia.org/wiki/Secure_Digital#SD
241285
[microSDHC]: https://en.wikipedia.org/wiki/Secure_Digital#SDHC
242286
[microSDXC]: https://en.wikipedia.org/wiki/Secure_Digital#SDXC

‎stylesheets/page-content.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,14 @@
2626
margin: 5px 0 5px !important;
2727
}
2828

29-
.spaced-headings *:not(.suppress-spaced-headings) > h2,
30-
.top-heading-margin {
31-
margin-top: 100px;
32-
}
33-
3429
.download-button-small {
3530
margin: 0 6px;
31+
}
32+
33+
.dark-bg {
34+
background-color: #1a1a1a;
35+
}
36+
37+
.colored-section {
38+
padding-bottom: 10.5px;
3639
}

0 commit comments

Comments
 (0)