Merge pull request #2 from fofr/components

Create first components
fofr · Dec 15, 2014 · 877ca11 · 877ca11
2 parents 3e2dec4 + fd3a9bc
commit 877ca11
Show file tree

Hide file tree

Showing 16 changed files with 321 additions and 46 deletions.
diff --git a/Gemfile b/Gemfile
@@ -6,6 +6,7 @@ gem 'jekyll-assets', '0.12.1'
 gem 'sass-rails', '>= 3.2'
 gem 'bootstrap-sass', '3.3.1'
 gem 'uglifier', '2.6.0'
+gem 'autoprefixer-rails', '4.0.2.1'
 
 group :rails_assets do
   gem 'rails-assets-jquery', '2.1.1'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -18,6 +18,8 @@ GEM
       thread_safe (~> 0.1)
       tzinfo (~> 1.1)
     addressable (2.3.6)
+    autoprefixer-rails (4.0.2.1)
+      execjs
     blankslate (2.1.2.4)
     bootstrap-sass (3.3.1.0)
       sass (~> 3.2)
@@ -140,6 +142,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  autoprefixer-rails (= 4.0.2.1)
   bootstrap-sass (= 3.3.1)
   jekyll (= 2.5.2)
   jekyll-assets (= 0.12.1)

diff --git a/_assets/stylesheets/_base.scss b/_assets/stylesheets/_base.scss
@@ -5,16 +5,19 @@ body,
 }
 
 body {
-  background: #333;
-  color: #aaa;
-  text-shadow: rgba(0,0,0,1) 0 2px 2px;
-  margin: 0;
   font-family: $font-family-helvetica;
   font-size: 18px;
 }
 
-.splash-title {
-  font-family: $font-family-scifi;
-  font-size: 48px;
-  color: #ccc;
+.table {
+  border: 5px solid #ddd;
+}
+
+.table thead tr {
+  background: #eee;
+  font-weight: bold;
+
+  th {
+    @include add-top-padding('', 2);
+  }
 }
diff --git a/_assets/stylesheets/_cta.scss b/_assets/stylesheets/_cta.scss
@@ -0,0 +1,34 @@
+.cta {
+  display: inline-block;
+  border-radius: 50%;
+  background: #000;
+  border: 15px double #fff;
+  transition: transform 100ms;
+
+  &.cta-light {
+    background: #fff;
+    border-color: #000;
+  }
+
+  &:hover {
+    border-width: 10px;
+    transform: scale(1.4);
+  }
+
+  &:active {
+    transform: scale(0.8);
+  }
+}
+
+@mixin cta-size($size: 50px) {
+  width: $size;
+  height: $size;
+}
+
+.cta-default {
+  @include cta-size(50px);
+}
+
+.cta-big {
+  @include cta-size(100px);
+}
diff --git a/_assets/stylesheets/_custom_bootstrap.scss b/_assets/stylesheets/_custom_bootstrap.scss
@@ -0,0 +1,12 @@
+h1, h2, h3 {
+  margin-top: $default-vertical-margin * 2;
+  margin-bottom: $default-vertical-margin;
+}
+
+.page-header {
+  border-width: 5px;
+
+  .page-title {
+    margin-bottom: 0;
+  }
+}
diff --git a/_assets/stylesheets/_helpers.scss b/_assets/stylesheets/_helpers.scss
@@ -44,6 +44,14 @@ a.inherit:visited {
   height: 100%;
 }
 
+.scifi-title, .domus {
+  font-family: $font-family-scifi-title;
+}
+
+.scifi-body, .automate {
+  font-family: $font-family-scifi-body;
+}
+
 /* Margin helpers
    ========================================================================== */
 
@@ -60,6 +68,10 @@ a.inherit:visited {
   @include add-top-margin('!important');
 }
 
+.double-top-margin {
+  @include add-top-margin('!important', 2);
+}
+
 .remove-top-margin {
   margin-top: 0 !important;
 }

diff --git a/_assets/stylesheets/_mixins.scss b/_assets/stylesheets/_mixins.scss
@@ -1,40 +1,32 @@
-@mixin border-box {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
 @mixin vertical-middle {
   position: relative;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
 
 /* ==========================================================================
    Margin mixins
    ========================================================================== */
 
-@mixin add-vertical-margins($important: "") {
-  @include add-top-margin($important);
-  @include add-bottom-margin($important);
+@mixin add-vertical-margins($important: "", $int: 1) {
+  @include add-top-margin($important, $int);
+  @include add-bottom-margin($important, $int);
 }
 
-@mixin add-top-margin($important: "") {
-  margin-top: $default-vertical-margin #{$important};
+@mixin add-top-margin($important: "", $int: 1) {
+  margin-top: ($default-vertical-margin * $int) #{$important};
 }
 
-@mixin add-bottom-margin($important: "") {
-  margin-bottom: $default-vertical-margin #{$important};
+@mixin add-bottom-margin($important: "", $int: 1) {
+  margin-bottom: ($default-vertical-margin * $int) #{$important};
 }
 
-@mixin add-right-margin($important: "") {
-  margin-right: $default-horizontal-margin #{$important};
+@mixin add-right-margin($important: "", $int: 1) {
+  margin-right: ($default-horizontal-margin * $int) #{$important};
 }
 
-@mixin add-left-margin($important: "") {
-  margin-left: $default-horizontal-margin #{$important};
+@mixin add-left-margin($important: "", $int: 1) {
+  margin-left: ($default-horizontal-margin * $int) #{$important};
 }
 
 @mixin add-label-margin {
@@ -45,15 +37,15 @@
    Padding mixins
    ========================================================================== */
 
-@mixin add-vertical-padding($important: "") {
-  @include add-top-padding($important);
-  @include add-bottom-padding($important);
+@mixin add-vertical-padding($important: "", $int: 1) {
+  @include add-top-padding($important, $int);
+  @include add-bottom-padding($important, $int);
 }
 
-@mixin add-top-padding($important: "") {
-  padding-top: $default-vertical-padding #{$important};
+@mixin add-top-padding($important: "", $int: 1) {
+  padding-top: ($default-vertical-padding * $int) #{$important};
 }
 
-@mixin add-bottom-padding($important: "") {
-  padding-bottom: $default-vertical-padding #{$important};
+@mixin add-bottom-padding($important: "", $int: 1) {
+  padding-bottom: ($default-vertical-padding * $int) #{$important};
 }
diff --git a/_assets/stylesheets/_splash.scss b/_assets/stylesheets/_splash.scss
@@ -0,0 +1,18 @@
+.layout-splash {
+  background: #111;
+  color: #eee;
+  font-family: $font-family-scifi-body;
+
+  .splash-content {
+    max-width: 500px;
+    margin: 0 auto;
+    @extend .clearfix;
+  }
+
+  .splash-title {
+    font-family: $font-family-scifi-title;
+    font-size: 48px;
+    text-shadow: rgba(0,0,0,1) 0 2px 2px;
+    letter-spacing: 0.25em;
+  }
+}
diff --git a/_assets/stylesheets/_theme.scss b/_assets/stylesheets/_theme.scss
@@ -3,7 +3,8 @@
    ========================================================================== */
 
 $font-family-helvetica: "Helvetica Neue", Arial, sans-serif;
-$font-family-scifi: "jaf-domus-titling-web", $font-family-helvetica;
+$font-family-scifi-title: "jaf-domus-titling-web", $font-family-helvetica;
+$font-family-scifi-body: "automate", $font-family-helvetica;
 
 /* ==========================================================================
    Alignment

diff --git a/_assets/stylesheets/_throbber.scss b/_assets/stylesheets/_throbber.scss
@@ -0,0 +1,79 @@
+.throbber {
+  display: inline-block;
+  border-radius: 50%;
+  background: rgba(0,0,0,0.1);
+  border-style: double;
+  animation: throb 2s alternate infinite;
+  transition: transform 100ms;
+
+  &.throbber-light {
+    background: rgba(255,255,255,0.3);
+    animation-name: throb-light;
+  }
+
+  &:hover {
+    background: rgba(0,0,0,0.3);
+    border-style: solid;
+    animation: end-throb 1s;
+    animation-fill-mode: forwards;
+    transform: scale(1.4);
+  }
+
+  &:hover.throbber-light {
+    background: rgba(255,255,255,0.5);
+    animation-name: end-throb-light;
+  }
+}
+
+@mixin throbber-size($size: 30px) {
+  width: $size;
+  height: $size;
+}
+
+.throbber-default {
+  @include throbber-size(30px);
+}
+
+.throbber-big {
+  @include throbber-size(50px);
+}
+
+@mixin throb-frames($color: 0) {
+  from, 75% {
+    border-width: 15px;
+    border-color: rgba($color,$color,$color,0);
+  }
+
+  to {
+    border-width: 7px;
+    border-color: rgba($color,$color,$color,.2);
+  }
+}
+
+@keyframes throb {
+  @include throb-frames(0);
+}
+
+@keyframes throb-light {
+  @include throb-frames(255);
+}
+
+@mixin end-throb-frames($color: 0) {
+  from {
+    border-width: 3px;
+    border-color: rgba($color,$color,$color,.5);
+  }
+
+  to, 25% {
+    border-width: 10px;
+    border-color: rgba($color,$color,$color,0);
+  }
+}
+
+@keyframes end-throb {
+  @include end-throb-frames(0);
+}
+
+@keyframes end-throb-light {
+  @include end-throb-frames(255);
+}
diff --git a/_assets/stylesheets/app.scss b/_assets/stylesheets/app.scss
@@ -4,5 +4,9 @@
 @import '_theme';
 @import '_mixins';
 @import '_helpers';
+@import '_custom_bootstrap';
 
 @import '_base';
+@import '_cta';
+@import '_throbber';
+@import '_splash';
diff --git a/_config.yml b/_config.yml
@@ -2,7 +2,7 @@
 title: Design Science Fiction
 description: Telling stories through interaction design
 baseurl: "" # the subpath of your site, e.g. /blog/
-url: "http://designscifi.com"
+url: "http://www.designscifi.com"
 include: [.htaccess]
 exclude: [Gemfile, Gemfile.lock, README.md]
 

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,5 +1,7 @@
-<header class="site-header">
-  <div class="wrapper">
-    <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
+<nav class="navbar navbar-inverse" role="navigation">
+  <div class="container">
+    <a class="navbar-brand" href="{{ site.baseurl }}/">
+      {{ site.title }}
+    </a>
   </div>
-</header>
+</nav>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,7 +3,7 @@
   {% include head.html %}
   <body>
     {% include header.html %}
-    <div class="wrapper">
+    <div class="container">
       {{ content }}
     </div>
     {% include footer.html %}

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -1,11 +1,13 @@
 ---
 layout: default
 ---
-<div class="post">
-  <header class="post-header">
-    <h1 class="post-title">{{ page.title }}</h1>
+<div class="page">
+  <header class="page-header">
+    <h1 class="page-title">
+      {{ page.title }}
+    </h1>
   </header>
-  <article class="post-content">
+  <article class="page-content">
     {{ content }}
   </article>
 </div>