Skip to content

Commit a4dee2a

Browse files
lbcailbcai
committed
Add comments, fix START HERE link for image, use child selector
1 parent 8f27e73 commit a4dee2a

File tree

2 files changed

+82
-67
lines changed

2 files changed

+82
-67
lines changed

‎doc/_static/css/custom.css

+64-46
Original file line numberDiff line numberDiff line change
@@ -4,61 +4,110 @@ body {
44
/* TOC - Main landing page */
55
/* Show two columns if screen is wide enough */
66
@media screen and (min-width: 700px) {
7+
/* For regular items */
78
.toctree-wrapper > ul {
89
columns: 2;
910
}
11+
/* For Social and Learning Resources sections */
1012
.toc-outside-links {
1113
columns: 2;
1214
}
1315
}
14-
.item-framing-box {
16+
17+
/* Wrap individual main page items for easier group manipulation
18+
of contents and images */
19+
.main-page-item-wrapper {
1520
align-items: flex-start;
1621
display: flex;
1722
margin: 10px;
1823
}
19-
.item-framing-box .single-col-box {
24+
.main-page-item-wrapper > .toctree-wrapper {
2025
width: 100%;
2126
}
22-
.item-framing-box .single-col-box ul {
23-
columns: 1;
27+
28+
/* single-col-box for items on main page with 2 bullet points, use if
29+
wanting to avoid having 2 columns with 1 item each inside */
30+
.main-page-item-wrapper > .single-col-box {
31+
width: 100%;
2432
}
25-
.item-framing-box-main {
26-
align-items: center;
27-
display: flex;
28-
margin: 10px;
33+
.main-page-item-wrapper > .single-col-box ul {
34+
columns: 1;
2935
}
30-
.item-framing-box .item-framing-sub-box {
36+
37+
/* For Social and Learning Resources to make
38+
title + list appear like other categories */
39+
.main-page-item-wrapper > .main-page-item-sub-wrapper {
3140
display: flex;
3241
flex-direction: column;
3342
margin: 0px;
3443
width: 100%;
3544
}
36-
.item-framing-box .item-framing-title {
45+
.main-page-item-wrapper > .main-page-item-title {
3746
width: 100%;
3847
}
39-
.item-framing-title p {
48+
.main-page-item-title > p {
4049
font-size: var(--font-size--small);
4150
margin-bottom: 0;
4251
text-align: initial;
4352
text-transform: uppercase;
4453
}
45-
.item-framing-sub-box .toc-outside-links {
54+
.main-page-item-sub-wrapper > .toc-outside-links {
4655
margin-left: 0px;
4756
width: 100%;
4857
}
58+
59+
/* Wrappers and formatting for sprinter, START HERE, github star button
60+
to align them neatly */
61+
.main-page-item-wrapper-header {
62+
align-items: center;
63+
display: flex;
64+
margin: 10px;
65+
}
66+
.main-page-box {
67+
width: 100%;
68+
display: flex;
69+
justify-content: space-between;
70+
align-items: center;
71+
}
72+
.main-page-box > .main-page-link {
73+
display: flex;
74+
width: 100%;
75+
}
76+
.main-page-box > .main-page-link a {
77+
display: flex;
78+
}
4979
.sprinter-box {
50-
width: 55px;
80+
margin-left: 10px;
5181
height: 55px;
5282
display: flex;
5383
}
5484
.start-here-box {
55-
width: 100%;
5685
align-items: center;
5786
display: flex;
87+
margin-left: -10px;
5888
}
59-
.toctree-wrapper {
89+
#the-python-arcade-library h2 {
90+
font-size: var(--font-size--small);
91+
font-weight: 400;
92+
margin-bottom: 0;
93+
margin-top: .5rem;
94+
text-align: initial;
95+
text-transform: uppercase;
6096
width: 100%;
97+
display: flex;
6198
}
99+
.main-page-box > .main-page-box-gh {
100+
display: flex;
101+
align-items: center;
102+
margin-right: 0px;
103+
}
104+
#github-stars {
105+
width: 141px;
106+
height: 30px;
107+
margin-bottom: -9px;
108+
}
109+
110+
/* Formatting for list items */
62111
.toctree-l1 {
63112
margin-left: 5px;
64113
}
@@ -81,25 +130,10 @@ body {
81130
.toctree-wrapper a:hover {
82131
text-decoration: underline;
83132
}
84-
#the-python-arcade-library h2 {
85-
font-size: var(--font-size--small);
86-
font-weight: 400;
87-
margin-bottom: 0;
88-
margin-top: .5rem;
89-
text-align: initial;
90-
text-transform: uppercase;
91-
width: 100%;
92-
display: flex;
93-
}
94133
#the-python-arcade-library ul {
95134
margin-top: 0;
96135
margin-bottom: 0;
97136
}
98-
#github-stars {
99-
width: 141px;
100-
height: 30px;
101-
margin-bottom: -9px;
102-
}
103137
.heading-icon {
104138
columns: 2;
105139
position: relative;
@@ -155,22 +189,6 @@ img.right-image {
155189
width: 78px;
156190
padding-right: 15px;
157191
}
158-
.main-page-box {
159-
width: 100%;
160-
display: flex;
161-
justify-content: space-between;
162-
align-items: center;
163-
}
164-
.main-page-box .main-page-link {
165-
display: flex;
166-
width: 100%;
167-
}
168-
169-
.main-page-box .main-page-box-gh {
170-
display: flex;
171-
align-items: center;
172-
margin-right: 0px;
173-
}
174192
.vimeo-video {
175193
border: 0;
176194
position:absolute;

‎doc/index.rst

+18-21
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,30 @@ The Python Arcade Library
2020
game without learning a complex framework.
2121
</p>
2222

23-
.. container:: item-framing-box-main
24-
25-
.. image:: images/woman_sprinter.svg
26-
:width: 48
27-
:alt: Start Here
28-
:class: heading-icon
29-
:target: get_started.html
23+
.. container:: main-page-item-wrapper-header
3024

3125
.. raw:: html
3226

3327
<div class="main-page-box">
3428
<div class="main-page-link">
3529
<h2 id="the-python-arcade-library">
3630
<a class="reference internal" href="get_started/get_started.html">
31+
<div class="heading-icon sprinter-box">
32+
<img alt="Start Here" src="_images/woman_sprinter.svg" width="48">
33+
</div>
3734
<div class="start-here-box">
3835
<span class="std std-ref">Start Here</span>
3936
</div>
37+
<a class="headerlink" href="#go-get-started-here" title="Permalink to this headline">¶</a>
4038
</a>
41-
<a class="headerlink" href="#go-get-started-here" title="Permalink to this headline">¶</a>
4239
</h2>
4340
</div>
4441
<div class="main-page-box-gh">
4542
<iframe id="github-stars" src="https://ghbtns.com/github-btn.html?user=pythonarcade&repo=arcade&type=star&count=true&size=large" frameborder="0" scrolling="0" title="GitHub"></iframe>
4643
</div>
4744
</div>
4845

49-
.. container:: item-framing-box
46+
.. container:: main-page-item-wrapper
5047

5148
.. image:: images/example_games.svg
5249
:alt: Get Started icon
@@ -61,7 +58,7 @@ The Python Arcade Library
6158
get_started/install/index
6259
get_started/how_to_get_help
6360

64-
.. container:: item-framing-box
61+
.. container:: main-page-item-wrapper
6562

6663
.. image:: images/example_code.svg
6764
:alt: Example Code
@@ -75,7 +72,7 @@ The Python Arcade Library
7572
example_code/game_jam_2020
7673
example_code/sample_games
7774

78-
.. container:: item-framing-box
75+
.. container:: main-page-item-wrapper
7976

8077
.. image:: images/learn.svg
8178
:alt: Tutorials
@@ -96,7 +93,7 @@ The Python Arcade Library
9693
tutorials/menu/index
9794
tutorials/framebuffer/index
9895

99-
.. container:: item-framing-box
96+
.. container:: main-page-item-wrapper
10097

10198
.. image:: images/example_games.svg
10299
:alt: Programming guide icon
@@ -121,7 +118,7 @@ The Python Arcade Library
121118
programming_guide/vsync
122119
programming_guide/pygame_comparison
123120

124-
.. container:: item-framing-box
121+
.. container:: main-page-item-wrapper
125122

126123
.. image:: images/API.svg
127124
:alt: API icon
@@ -135,7 +132,7 @@ The Python Arcade Library
135132
Reference<api_docs/arcade>
136133
api_docs/resources
137134

138-
.. container:: item-framing-box
135+
.. container:: main-page-item-wrapper
139136

140137
.. image:: images/source.svg
141138
:alt: Source icon
@@ -149,7 +146,7 @@ The Python Arcade Library
149146
programming_guide/release_notes
150147
License <https://github.com/pythonarcade/arcade/blob/development/license.rst>
151148

152-
.. container:: item-framing-box
149+
.. container:: main-page-item-wrapper
153150

154151
.. container:: single-col-box
155152

@@ -164,15 +161,15 @@ The Python Arcade Library
164161
contributing_guide/index
165162
contributing_guide/release_checklist
166163

167-
.. container:: item-framing-box
164+
.. container:: main-page-item-wrapper
168165

169166
.. image:: images/social.svg
170167
:alt: Social icon
171168
:class: heading-icon
172169

173-
.. container:: item-framing-sub-box
170+
.. container:: main-page-item-sub-wrapper
174171

175-
.. container:: item-framing-title
172+
.. container:: main-page-item-title
176173

177174
Social
178175

@@ -185,15 +182,15 @@ The Python Arcade Library
185182
* `Facebook @ArcadeLibrary <https://www.facebook.com/ArcadeLibrary/>`_
186183
* :ref:`diversity_statement`
187184

188-
.. container:: item-framing-box
185+
.. container:: main-page-item-wrapper
189186

190187
.. image:: images/performance.svg
191188
:alt: Performance icon
192189
:class: heading-icon
193190

194-
.. container:: item-framing-sub-box
191+
.. container:: main-page-item-sub-wrapper
195192

196-
.. container:: item-framing-title
193+
.. container:: main-page-item-title
197194

198195
Learning Resources
199196

0 commit comments

Comments
 (0)