Skip to content
Browse files

Implement basic styles and JS functionality.

  • Loading branch information...
1 parent 16e35f2 commit 3cba7eb59fcf5b52f63f8f035d53fa9565033317 @jimmycuadra committed
Showing with 142 additions and 95 deletions.
  1. +42 −1 assets/css/penguin.sass
  2. +0 −91 assets/css/penguin/reset.css
  3. +70 −0 assets/css/penguin/reset.sass
  4. +27 −1 assets/js/penguin.coffee
  5. +3 −2 assets/template/layout.haml
View
43 assets/css/penguin.sass
@@ -1 +1,42 @@
-//= require "penguin/reset"
+@import penguin/reset
+
+$lineHeight: 36px
+
+body
+ background: steelblue
+ font-family: Arial, sans-serif
+ font-size: 28px
+ line-height: $lineHeight
+
+h1, h2, h3, h4, h5, h6
+ text-align: center
+
+h1
+ font-size: 48px
+ line-height: $lineHeight * 2
+
+h2
+ font-size: 36px
+ line-height: $lineHeight * 2
+
+h3
+ font-size: 30px
+ line-height: $lineHeight * 1.5
+
+h4
+ font-size: 24px
+
+h5
+ font-size: 20px
+
+h6
+ font-size: 16px
+
+.container
+ margin: 40px auto
+ width: 960px
+
+.slide
+ display: none
+ &.current
+ display: block
View
91 assets/css/penguin/reset.css
@@ -1,91 +0,0 @@
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-abbr, address, cite, code,
-del, dfn, em, img, ins, kbd, q, samp,
-small, strong, sub, sup, var,
-b, i,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, summary,
-time, mark, audio, video {
- background: transparent;
- border: 0;
- font-size: 100%;
- margin: 0;
- outline: 0;
- padding: 0;
- vertical-align: baseline;
-}
-
-body {
- line-height: 1;
-}
-
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-
-nav ul {
- list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-
-a {
- background: transparent;
- font-size: 100%;
- margin: 0;
- padding: 0;
- vertical-align: baseline;
-}
-
-ins {
- background-color: #ff9;
- color: #000;
- text-decoration: none;
-}
-
-mark {
- background-color: #ff9;
- color: #000;
- font-style: italic;
- font-weight: bold;
-}
-
-del {
- text-decoration: line-through;
-}
-
-abbr[title], dfn[title] {
- border-bottom: 1px dotted;
- cursor: help;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-hr {
- border: 0;
- border-top: 1px solid #cccccc;
- display: block;
- height: 1px;
- margin: 1em 0;
- padding: 0;
-}
-
-input, select {
- vertical-align: middle;
-}
View
70 assets/css/penguin/reset.sass
@@ -0,0 +1,70 @@
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
+ background: transparent
+ border: 0
+ font-size: 100%
+ margin: 0
+ outline: 0
+ padding: 0
+ vertical-align: baseline
+
+body
+ line-height: 1
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
+ display: block
+
+nav ul
+ list-style: none
+
+blockquote, q
+ quotes: none
+
+blockquote
+ &:before, &:after
+ content: ''
+ content: none
+
+q
+ &:before, &:after
+ content: ''
+ content: none
+
+a
+ background: transparent
+ font-size: 100%
+ margin: 0
+ padding: 0
+ vertical-align: baseline
+
+ins
+ background-color: #ff9
+ color: #000
+ text-decoration: none
+
+mark
+ background-color: #ff9
+ color: #000
+ font-style: italic
+ font-weight: bold
+
+del
+ text-decoration: line-through
+
+abbr[title], dfn[title]
+ border-bottom: 1px dotted
+ cursor: help
+
+table
+ border-collapse: collapse
+ border-spacing: 0
+
+hr
+ border: 0
+ border-top: 1px solid #cccccc
+ display: block
+ height: 1px
+ margin: 1em 0
+ padding: 0
+
+input, select
+ vertical-align: middle
View
28 assets/js/penguin.coffee
@@ -1 +1,27 @@
-window.Penguin = {}
+$ ->
+ window.Penguin =
+ init: ->
+ @deck.show(@deck.currentSlide)
+ $(document).on("keyup", @deck.changeSlide.bind(@deck))
+
+ deck:
+ slides: $(".slide")
+
+ currentSlide: 0
+
+ show: (index) ->
+ @slides.removeClass("current")
+ @slides.eq(index).addClass("current")
+
+ changeSlide: (event) ->
+ switch event.keyCode
+ when 37
+ return if @currentSlide is 0
+ @currentSlide -= 1
+ @show(@currentSlide)
+ when 39
+ return if @currentSlide is @slides.length - 1
+ @currentSlide += 1
+ @show(@currentSlide)
+
+ Penguin.init()
View
5 assets/template/layout.haml
@@ -1,4 +1,4 @@
-/ You shouldn't need to edit this file.
+-# You shouldn't need to edit this file.
!!! 5
%html{ lang: "en" }
%head
@@ -6,6 +6,7 @@
%title Penguin
%link{ rel: "stylesheet", href: "/assets/deck.css" }
%body
- = yield
+ .container
+ = yield
%script{ src: "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"}
%script{ src: "/assets/deck.js" }

0 comments on commit 3cba7eb

Please sign in to comment.
Something went wrong with that request. Please try again.