Skip to content

Commit 3159470

Browse files
author
Philip Guo
committed
revamped
1 parent 9f32258 commit 3159470

3 files changed

Lines changed: 41 additions & 70 deletions

File tree

‎v3/css/index.css‎

Lines changed: 22 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ body {
77
font-family: Georgia, Palatino, Times, serif;
88

99
font-size: 12pt;
10+
1011
max-width: 900px;
1112
margin-left: auto;
1213
margin-right: auto;
@@ -15,20 +16,10 @@ body {
1516

1617
h1 {
1718
font-weight: normal;
18-
line-height: 1em; /* enforce single spacing so that Georgia works */
19-
2019
margin-top: 0px;
2120
margin-bottom: 8px;
2221
}
2322

24-
h2 {
25-
font-size: 16pt;
26-
font-weight: normal;
27-
28-
margin-top: 2px;
29-
margin-bottom: 0px;
30-
}
31-
3223
.smallH1 {
3324
font-size: 14pt;
3425
}
@@ -37,16 +28,13 @@ h2 {
3728
.titlePane {
3829
margin-left: auto;
3930
margin-right: auto;
40-
margin-bottom: 20px;
31+
margin-bottom: 0px;
4132
text-align: center;
4233
}
4334

4435
.titlePane h1 {
45-
font-size: 24pt;
46-
}
47-
48-
.titlePane h2 {
49-
margin-top: 8px;
36+
font-size: 22pt;
37+
margin-bottom: 5px;
5038
}
5139

5240
div.mainBodyPane {
@@ -56,25 +44,28 @@ div.mainBodyPane {
5644

5745
div.activityPane {
5846
/* TOP RIGHT BOTTOM LEFT */
59-
padding: 15px 25px 5px 20px;
47+
padding: 15px 0px /* make right padding ZERO and just right-pad 'p' */ 5px 20px;
6048
text-align: left;
6149
border: 3px solid #005583;
6250
}
6351

52+
div.activityPane p {
53+
padding-right: 30px;
54+
}
55+
6456
div.activityPane h1 {
6557
font-size: 22pt;
6658
margin-bottom: 20pt;
6759
}
6860

6961

70-
7162
ul {
7263
padding-left: 18px;
7364
}
7465

7566
li {
76-
margin-bottom: 6px;
77-
font-size: 11pt;
67+
margin-bottom: 8px;
68+
font-size: 10pt;
7869
}
7970

8071
a,
@@ -88,18 +79,18 @@ div#learnPane {
8879
}
8980

9081
div#learnPane p {
91-
padding-right: 80px;
82+
padding-right: 100px;
9283
}
9384

9485
div#learnPane h3 {
95-
font-size: 16pt;
86+
font-size: 17pt;
9687
font-weight: normal;
97-
margin-top: 3px;
98-
margin-bottom: 8px;
88+
margin-top: 5px;
89+
margin-bottom: 10px;
9990
}
10091

10192
tt {
102-
font-size: 85%;
93+
/*font-size: 85%;*/
10394
}
10495

10596
div#embedPane {
@@ -116,20 +107,20 @@ div#detailsPane {
116107
border: 0px; /* NO BORDER! */
117108
}
118109

119-
table#embedShareTable {
110+
table.layoutTbl {
120111
border: 0px;
121-
width: 100%;
112+
max-width: 900px;
122113
}
123114

124-
table#embedShareTable td {
115+
table.layoutTbl td {
125116
vertical-align: top;
126117
}
127118

128-
table#embedShareTable td#embedPaneTd {
119+
table.layoutTbl td#embedPaneTd {
129120
width: 60%;
130121
}
131122

132-
table#embedShareTable td#sharePaneTd {
123+
table.layoutTbl td#sharePaneTd {
133124
width: 40%;
134125
}
135126

@@ -139,16 +130,11 @@ table#embedShareTable td#sharePaneTd {
139130
font-size: 9pt;
140131
border-top: 1px solid #bbbbbb;
141132
padding-top: 0px;
142-
margin-top: 15px;
133+
margin-top: 10px;
143134

144-
max-width: 100%;
145135
/* center align */
146136
margin-left: auto;
147137
margin-right: auto;
148138

149139
font-family: verdana, arial, helvetica, sans-serif;
150140
}
151-
152-
153-
/* necessary for CodeMirror error line highlighting to work! */
154-
.CodeMirror .errorLine { background: #ffff3f !important; }

‎v3/index.html‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131

3232
<head>
3333

34-
<title>Online Python Tutor: Learn programming visually</title>
34+
<title>Online Python Tutor: Learn Python programming in your web browser</title>
3535

3636

3737
<!-- requirements for pytutor.js -->
@@ -46,28 +46,22 @@
4646
<link rel="stylesheet" href="css/pytutor.css"/>
4747

4848
<script type="text/javascript" src="js/jquery.corner.js"></script>
49-
5049
<script type="text/javascript" src="js/index.js"></script>
51-
5250
<link rel="stylesheet" href="css/index.css"/>
5351

5452
</head>
5553

5654
<body>
5755

5856
<div class="titlePane">
59-
60-
<h1>Online Python Tutor</h1>
61-
<h2>Learn programming visually</h2>
62-
57+
<h1>Online Python Tutor</h1>
6358
</div>
6459

65-
6660
<div class="mainBodyPane">
6761

68-
<table id='embedShareTable'>
62+
<table class='layoutTbl'>
6963
<tr>
70-
<td colspan="2">
64+
<td>
7165

7266
<div class="activityPane" id="learnPane">
7367

@@ -76,22 +70,24 @@ <h1>Learn <span class="smallH1">to program in Python by writing code and visuali
7670
<p>Online Python Tutor allows teachers and students to write <a
7771
href="http://www.python.org/">Python</a> programs directly in the web
7872
browser, execute those programs, and then step forwards and backwards
79-
through execution to view the run-time state of data structures. For
80-
example, here is a recursive function that sums linked list
81-
elements:</p>
73+
through execution to view the run-time state of data structures.</p>
74+
75+
<p>For example, here is a recursive function that finds the sum of
76+
linked list elements. Click the &ldquo;Forward&rdquo; button to start
77+
stepping through execution.</p>
8278

8379
<div id="demoViz"></div>
8480

8581
<p>Over 100,000 people so far have used Online Python Tutor to
8682
understand and debug their programs, often as a supplement to textbooks,
8783
lecture notes, and online tutorials.</p>
8884

89-
<p>In addition, instructors in over a dozen universities including MIT,
90-
UC Berkeley, UC Davis, Sonoma State University, the University of
91-
Washington, the University of Waterloo, the University of Toronto,
92-
Luther College, and Swarthmore College have adopted it for teaching
93-
introductory computer science courses. <span style="color: #e93f34;">We
94-
are seeking partnerships with educators at all grade levels; email
85+
<p>Instructors in over a dozen universities such as MIT, UC Berkeley, UC
86+
Davis, Sonoma State University, the University of Washington, the
87+
University of Waterloo, the University of Toronto, Luther College, and
88+
Swarthmore College have adopted it for teaching introductory computer
89+
science courses. <span style="color: #e93f34;">We are seeking
90+
partnerships with educators at all grade levels; email
9591
<tt>[email protected]</tt> if you are interested.</span></p>
9692

9793
</p>
@@ -100,11 +96,11 @@ <h3><a href="tutor.html">Start using Online Python Tutor now</a></h3>
10096

10197
</div>
10298

103-
104-
10599
</td>
106100
</tr>
101+
</table>
107102

103+
<table class='layoutTbl'>
108104
<tr>
109105
<td id="embedPaneTd">
110106

@@ -137,7 +133,6 @@ <h1>Embed <span class="smallH1">visualizations in digital textbooks</span></h1>
137133

138134
</div>
139135

140-
141136
</td>
142137
<td id="sharePaneTd">
143138

@@ -165,7 +160,6 @@ <h1>Share <span class="smallH1">visualizations online</span></h1>
165160

166161
<div class="activityPane" id="detailsPane">
167162

168-
169163
<p>
170164
More Details:
171165
<ul>
@@ -191,8 +185,6 @@ <h1>Share <span class="smallH1">visualizations online</span></h1>
191185
</ul>
192186
</p>
193187

194-
195-
196188
</div>
197189

198190
</td>
@@ -218,7 +210,5 @@ <h1>Share <span class="smallH1">visualizations online</span></h1>
218210
</div>
219211

220212

221-
222213
</body>
223214
</html>
224-

0 commit comments

Comments
 (0)