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

Initial work on tutorial mockup in HTML

Browse source
This commit is contained in:
Victoria Wang 2015-09-08 16:12:35 -07:00
parent bbc6536971
commit 19d243e31e
4 changed files with 116 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/mockup.rb
View file

@ -29,4 +29,9 @@ get '/stats_mockup' do
require_login require_login
erb :'stats_mockup', locals: {site: current_site} erb :'stats_mockup', locals: {site: current_site}
end end
get '/tutorial_mockup_c1p2' do
require_login
erb :'tutorial_mockup_c1p2', locals: {site: current_site}
end
# :nocov: # :nocov:

61
sass/_project-sass/_project-Tutorial.scss Normal file
View file

@ -0,0 +1,61 @@
// ----------------------------------------------------------------
// Project Specific: Tutorial
// ----------------------------------------------------------------
.tutorial {
.interact {
textarea.editor {
height: 350px!important;
width: 100%;
background-color: #1D1F21;
color: white;
font: 16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}
h3 {
margin-top: 10px;
}
.preview {
height: 300px;
width: 100%;
background-color: gray;
}
.btn {
float: right;
}
}
.lesson {
h1, .subtitle {
color: #5e95a1;
}
.subtitle {
font-size: 14px;
margin-top: 0;
text-align: left;
}
.comic {
position: relative;
}
.dialogue {
width: 180px;
position: absolute;
text-align: center;
&:nth-child(1) {
left: 30px;
top: 30px;
}
&:nth-child(2) {
left: 250px;
top: 30px;
}
&:nth-child(3) {
left: 30px;
top: 250px;
}
&:nth-child(4) {
left: 250px;
top: 250px;
}
}
}
}

1
sass/neo.scss
View file

@ -29,6 +29,7 @@
// Specific Modules // Specific Modules
@import '_project-sass/project-Website-Gallery'; // Browse website specific styling @import '_project-sass/project-Website-Gallery'; // Browse website specific styling
@import '_project-sass/project-Tutorial'; // Tutorial specific styling
// FIXITFIXITFIXITFIXIT // FIXITFIXITFIXITFIXIT
// Only import tidyUp if you actually need to make some quick fix hacks that you don't // Only import tidyUp if you actually need to make some quick fix hacks that you don't

49
views/tutorial_mockup_c1p2.erb Normal file
View file

@ -0,0 +1,49 @@
<section class="section tutorial">
<div class="row">
<div class="col col-60 lesson">
<h1>Chapter 1</h1>
<h2 class="subtitle">Page 2/10</h2>
<div class="comic" style="height: 500px">
<div class="dialogue">
All you need to build your first site is a computer language called HTML.
</div>
<div class="dialogue">
And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save!
</div>
<div class="dialogue">
You'll see the results of your site here.
</div>
<div class="dialogue">
Make sure to check the green boxes below for important bonus info!
</div>
</div>
<div class="welcome">
<h4>Opening and Closing Tags</h4>
<p>HTML is just a bunch of tags. There's usually an opening tag and a closing tag, with content between them like this:</p>
<pre>tag Content visible on your site /tag</pre>
<p>Don't worry if this seems confusing - you'll get the hang of it after a few more examples! If you ever get stuck, click the <strong>Help</strong> link below.</p>
</div>
</div>
<div class="col col-40 interact">
<input class="btn btn-action" type="submit" value="Save">
<h3>HTML</h3>
<textarea class="editor">
<html>
<body>
Hello World!
</body>
</html>
</textarea>
<h3>Site Preview</h3>
<div class="preview">
</div>
</div>
</div>
</section>