Browse Source

why am i working on this all night

pull/13/head
Jack Lukic 11 years ago
parent
commit
756236dfc3
3 changed files with 32 additions and 19 deletions
  1. 39
      node/src/documents/index.html
  2. 10
      node/src/files/stylesheets/semantic.css
  3. 2
      node/src/layouts/default.html.eco

39
node/src/documents/index.html

@ -6,47 +6,48 @@ type : 'Semantic'
---
<div class="masthead segment">
<div class="container">
<h1 class="ui header">Semantic UI</h1>
<h2 class="ui header">UI is the DNA of the web.</h2>
<p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
<a class="ui red huge labeled icon button" href="download.html" class="ui button"><i class="icon upload"></i> Download</a>
<a class="ui black huge labeled icon button" href="#" class="ui button"><i class="icon terminal"></i> Try it out</a>
<div class="ui responsive center aligned grid">
<div class="column">
<h1 class="ui header">Semantic UI</h1>
<h2 class="ui header">UI is the DNA of the web.</h2>
<p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
<a class="ui red huge labeled icon button" href="download.html" class="ui button"><i class="icon upload"></i> Download</a>
<a class="ui black huge labeled sidebar icon button"><i class="icon list layout"></i> View UI</a>
</div>
</div>
</div>
<div class="solid">
<div class="ui three column stackable responsive grid">
<div class="ui two column divided stackable responsive grid">
<div class="column">
<h1 class="ui red header">
<i class="inverted red circular community icon"></i>
<h1 class="ui purple header">
<i class="inverted purple circular community icon"></i>
Code Like You Think
</h1>
<p>Semantic creates a re-usable vocabulary for user interface. Semantic lets designing pages be as easy as describing them.</p>
<p><b>Designing pages be as easy as describing them.</b>
<br>Semantic creates a re-usable vocabulary for user interface. Semantic lets </p>
</div>
<div class="column">
<h1 class="ui teal header">
<i class="inverted teal circular terminal icon"></i>
Expert Tools
</h1>
<p><b>Not happy with off the shelf plugins?</b> Semantic modules are written to be easy to read and extensible. Every plugin provides out of the box debug tools so you can monitor performance without breakpoints.</p>
<p><b>Not happy with off the shelf plugins?</b><br>Semantic modules are written to be easy to read and extensible. Every plugin provides out of the box debug tools so you can monitor performance without breakpoints.</p>
</div>
</div>
</div>
<div class="stripe">
<div class="two column stackable responsive divided ui grid">
<div class="two column stackable responsive ui grid">
<div class="column">
<div class="large red ui block header">
<div class="large inverted purple center aligned ui block header">
<i class="book icon"></i> HTML
<div class="sub header">Sometimes it is easier to just see the code</div>
</div>
<p>This code example shows the code powering the code example.</p>
<div class="code" data-type="html">
<div class="two column stackable divided ui grid">
<div class="two column stackable responsive ui grid">
<div class="column">
<div class="large red ui block header">
<div class="large inverted purple center aligned ui block header">
<i class="book icon"></i> HTML
<div class="sub header">Sometimes it is easier to just see the code</div>
</div>
@ -56,7 +57,7 @@ type : 'Semantic'
</div>
</div>
<div class="column">
<div class="large teal ui block header">
<div class="large inverted teal center aligned ui block header">
<i class="terminal icon"></i> Javascript
<div class="sub header">Not everything is static</div>
</div>
@ -69,7 +70,7 @@ type : 'Semantic'
</div>
</div>
<div class="column">
<div class="large teal ui block header">
<div class="large inverted teal center aligned ui block header">
<i class="terminal icon"></i> Javascript
<div class="sub header">Not everything is static</div>
</div>

10
node/src/files/stylesheets/semantic.css

@ -314,6 +314,10 @@ a:hover {
border-bottom: none;
}
#example .masthead .labeled.button {
position: relative;
left: 0px;
top: 0px;
width: auto !important;
margin-right: 1em;
}
#example .masthead h1 {
@ -949,6 +953,12 @@ a:hover {
display: none;
}
#example.index .grid .column {
padding-left: 3%;
padding-right: 3%;
}
@media only screen and (max-width : 1725px) {
#example .container {
width: auto;

2
node/src/layouts/default.html.eco

@ -179,10 +179,12 @@
</div>
</div>
</div>
<% if @document.title isnt 'Introduction': %>
<div class="ui black huge sidebar right attached button">
<i class="icon list layout"></i>
<span class="text">Menu</span>
</div>
<% end %>
<%- @content %>
</body>
Loading…
Cancel
Save