zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

Added syntax highlighting to dialog boxes, improved look of green box code samples

Browse source
This commit is contained in:
Victoria Wang 2016-04-18 11:47:23 -07:00
parent 07bffc7d25
commit 837efa7094
7 changed files with 42 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
sass/_project-sass/_project-Tutorial.scss
View file

@ -68,6 +68,24 @@
left: 250px;
top: 250px;
}
pre, code {
padding: 0;
margin: 0;
background: none;
color: #666;
border: none;
display: block;
font-size: 100%;
}
pre {
padding-top: .1em;
}
}
}
.welcome {
pre, code {
background: #16414c;
font-size: 100%;
}
}
}

8
views/tutorial/html/3.erb
View file

@ -3,11 +3,11 @@
Great work! Let's move on to writing your first tag.
<!-- Check out your site at <a href="">victoria.neocities.org</a>. -->
</div>
<div class="dialogue" style="left: 300px; top: 25px; width: 250px">
<div class="dialogue" style="left: 300px; top: 0px; width: 250px">
Let's make your name a heading by putting the <strong>h1 tag</strong> around it. This helps to visually separate content on your site.
</div>
<div class="dialogue" style="left: 330px; top: 120px; width: 250px">
Try using an h1 tag by changing the text to something like this:<strong><span id="answer"></span></strong>
<div class="dialogue" style="left: 330px; top: 100px; width: 250px">
Try using an h1 tag by changing the text to something like this: <pre><code class="html"><span id="answer"></span></code></pre>
and click save.
</div>
</div>
@ -20,7 +20,7 @@
</div>
<script>
$('#answer').text('<h1>'+sessionStorage.getItem('name')+'\'s Web Site</h1>')
$('#answer').text('<h1>'+sessionStorage.getItem('name')+'\'s Website</h1>')
function checkHomework() {
var html = editor.getValue()

2
views/tutorial/html/4.erb
View file

@ -4,7 +4,7 @@
</div>
<div class="dialogue" style="left: 290px; top: -10px; width:190px">
To make a paragraph, surround your text with the <strong>&lt;p&gt;</strong> tag. So it should look something like
<strong>&lt;p&gt;Welcome!&lt;/p&gt;</strong>
<pre><code class="html">&lt;p&gt;Welcome!&lt;/p&gt;</code></pre>
</div>
</div>

15
views/tutorial/html/5.erb
View file

@ -2,10 +2,10 @@
<div class="dialogue" style="left:20px">
You're writing HTML! You're doing it! Everything you need to know is just another tag!
</div>
<div class="dialogue" style="top: -20px; width: 320px">
<div class="dialogue" style="top: -30px; width: 320px">
<p>For example, a link to another site looks like this:</p>
<p><strong>&lt;a href="//neocities.org"&gt;Check out Neocities!&lt;/a&gt;</strong></p>
<p><pre><code class="html">&lt;a href="//neocities.org"&gt;Check out Neocities!&lt;/a&gt;</code></pre></p>
<p>Add a link to your favorite site to<br> the end of the paragraph, right<br> before the &lt;/p&gt; closing tag!</p>
</div>
@ -13,14 +13,11 @@
<div class="welcome">
<h4>Nesting</h4>
<p>
Tags always need to be nested properly, like Russian dolls. So this is okay:
<pre><code class="html"><%= erb '<p>Welcome! <a href="//neocities.org">Link!</a></p>', layout: false %></code></pre>
<p>Tags always need to be nested properly, like Russian dolls. So this is okay:</p>
<pre><code class="html"><%= erb '<p>Welcome! <a href="//neocities.org">Link!</a></p>', layout: false %></code></pre>
But this is not correct:
<pre><code class="html"><%= erb '<p>Welcome! <a href="//neocities.org">Link!</p></a>', layout: false %></code></pre>
</p>
<p>But this is not correct:</p>
<pre><code class="html"><%= erb '<p>Welcome! <a href="//neocities.org">Link!</p></a>', layout: false %></code></pre>
</div>
<script>

4
views/tutorial/html/6.erb
View file

@ -7,8 +7,8 @@
<div class="dialogue" style="top: 20px; left: 360px">
Your Neocities web directory already includes a portrait of me called <strong>cat.png</strong>.
</div>
<div class="dialogue" style="top: 140px; left: 410px">
Add it to your page like so: <strong>&lt;img src="/cat.png"&gt;</strong>
<div class="dialogue" style="top: 145px; left: 390px; width:200px">
Add it to your page like so: <pre><code class="html">&lt;img src="/cat.png"&gt;</code></pre>
</div>
<div class="dialogue" style="top: 230px; left: 420px">
That's it! No closing tag needed for images.

15
views/tutorial/html/7.erb
View file

@ -1,13 +1,12 @@
<div class="comic" style="height: 550px; background-image: url(/img/tutorial/ch1pg7.png); background-size: 515px;margin-top:7em">
<div class="dialogue" style="left: 0;top:-50px;">
<div class="dialogue" style="left: 0;top:-70px;">
Now maybe your website needs a list. Here's how an unordered list looks:
<div style="text-align: left; font-weight: bold">
&lt;ul&gt;<br>
&nbsp;&nbsp;&lt;li&gt;websites&lt;/li&gt;
&nbsp;&nbsp;&lt;li&gt;yarn&lt;/li&gt;
&nbsp;&nbsp;&lt;li&gt;catnip&lt;/li&gt;<br>
&lt;/ul&gt;
</div>
<pre style="text-align:left;"><code class="html">&lt;ul&gt;
&lt;li&gt;websites&lt;/li&gt;
&lt;li&gt;yarn&lt;/li&gt;
&lt;li&gt;catnip&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
</div>
<div class="dialogue" style="left: 300px; top: -10px;">
First, add a list to your page, but replace my favorite activities with your own!

6
views/tutorial/html/8.erb
View file

@ -1,9 +1,11 @@
<div class="comic" style="height: 530px; background-image: url(/img/tutorial/ch1pg8.png); background-size: 489px; margin-top:1em">
<div class="dialogue" style="top: 50px; left: 0; width: 380px">
<div class="dialogue" style="top: 25px; left: 0; width: 380px">
Now add a link to one of your list items. If nested properly, it should look similar to this:
<br>
<div class="txt-Left">
<strong>&lt;li&gt;<br>&nbsp;&nbsp;&lt;a href="http://yarn.com"&gt;Yarn&lt;/a&gt;<br>&lt;/li&gt;</strong>
<pre style="text-align:left;"><code class="html">&lt;li&gt;
&lt;a href="http://yarn.com"&gt;Yarn&lt;/a&gt;
&lt;/li&gt;</code></pre>
</div>
</div>
</div>