Ported layout

brunch-config.js

@@ -22,7 +22,19 @@ exports.config = {
     stylesheets: {
       joinTo: "css/app.css",
       order: {
-        after: ["web/static/css/app.css"] // concat app.css last
+        before: [
+          "web/static/css/source-sans-pro.css",
+          "web/static/css/base.sass",
+          "web/static/css/header.sass",
+          "web/static/css/flash.sass",
+          "web/static/css/footer.sass",
+          "web/static/css/home.sass",
+          "web/static/css/asciicasts.sass",
+          "web/static/css/users.sass",
+          "web/static/css/preview.sass",
+          "web/static/css/player.sass",
+          "web/static/css/contributing.sass"
+        ]
       }
     },
     templates: {

package.json

@@ -14,6 +14,7 @@
     "brunch": "2.7.4",
     "clean-css-brunch": "~2.0.0",
     "css-brunch": "~2.0.0",
+    "sass-brunch": "^2.6.3",
     "javascript-brunch": "~2.0.0",
     "uglify-js-brunch": "~2.0.1"
   }

web/static/assets/images/logo-red.svg

@@ -0,0 +1,10 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 866.0254037844387 866.0254037844387">
+  <defs>
+    <mask id="small-triangle-mask">
+      <rect width="100%" height="100%" fill="white"/>
+      <polygon points="508.01270189221935 433.01270189221935, 208.0127018922194 259.8076211353316, 208.01270189221927 606.217782649107" fill="black"></polygon>
+    </mask>
+  </defs>
+  <polygon points="808.0127018922194 433.01270189221935, 58.01270189221947 -1.1368683772161603e-13, 58.01270189221913 866.0254037844386" mask="url(#small-triangle-mask)" fill="#d40000"></polygon>
+  <polyline points="481.2177826491071 333.0127018922194, 134.80762113533166 533.0127018922194" stroke="#d40000" stroke-width="90"></polyline>
+</svg>

web/static/css/app.css

@@ -1 +0,0 @@
-/* This file is for your main application css. */

web/static/css/asciicasts.sass

@@ -0,0 +1,121 @@
+.asciicasts-list-page
+  .sorting
+    margin-top: 20px
+
+    span
+      margin-right: 5px
+
+.asciicast-list
+  margin-top: 20px
+
+.asciicast-page
+  section.cinema
+    .container
+      overflow: hidden
+
+    .player
+      margin: 0 auto
+
+  section.info
+    padding-top: 15px
+    padding-bottom: 15px
+
+    .addthis_toolbox
+      display: inline-block
+
+    .author-avatar
+      display: block
+      float: left
+      width: 42px
+      height: 42px
+      margin-right: 10px
+
+    h2
+      margin: 0
+      font-size: 22px
+      position: relative
+
+      small
+        display: block
+        font-size: 14px
+        margin-top: 4px
+        position: absolute
+        width: 200px
+        color: #666
+
+        abbr
+          border-bottom: 0
+
+  section.meta
+    padding: 0
+    color: #666
+
+    .meta-list
+      list-style: none
+      padding: 0
+      margin: 10px 0
+
+      li
+        margin: 0 20px 0 0
+        display: inline-block
+
+        &:last-child
+          margin-right: 0
+
+    .actions-dropdown
+      display: inline-block
+      height: 40px
+
+      button
+        height: 100%
+        border-radius: 0
+        -moz-border-radius: 0
+        -webkit-border-radius: 0
+        border: 0
+
+    .actions-list
+      display: inline-block
+      float: right
+      margin-right: 10px
+
+  section.description
+    padding: 0
+    border-top: 0
+
+    .content
+      margin: 20px 0
+
+      h1
+        font-size: 22px
+
+      h2
+        font-size: 20px
+
+  .modal-dialog
+    max-width: 900px
+    width: initial
+
+    h2:first-child
+      margin-top: 0
+
+    input[type="text"]
+      width: 100%
+      border: 1px solid #ddd
+      font-family: Menlo, Monaco, Consolas, "Bitstream Vera Sans Mono", monospace
+      font-size: 12px
+      margin-bottom: 5px
+      padding: 6px
+
+    pre
+      word-wrap: normal
+      overflow: auto
+
+.special-label
+  font-size: 12px
+  background-color: rgb(255, 239, 198)
+  color: rgb(161, 136, 43)
+  margin-left: 6px
+  padding: 2px 5px
+  border-radius: 4px
+  vertical-align: middle
+  cursor: help

web/static/css/base.sass

@@ -0,0 +1,128 @@
+$background-color: #f7f7f7
+$link-color: #06989a
+
+body
+  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-size: 15px
+  background-color: $background-color
+  padding-top: 42px
+
+  &.modal-open
+    margin-right: 0
+
+    .navbar-fixed-top
+      margin-right: 0
+
+  .btn
+    font-size: 15px
+
+  .form-control, .btn, pre
+    border-radius: 3px
+
+  pre
+    background-color: #fff
+    border-color: #ddd
+
+  code, pre
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace
+
+.main
+  background-color: $background-color
+  min-height: 500px
+
+  > div:first-child
+    margin-top: 20px
+
+h1, h2, h3
+  font-family: "Source Sans Pro", sans-serif
+
+h1
+  font-size: 30px
+
+  span.glyphicon
+    top: 5px
+
+h2
+  font-size: 24px
+
+h3
+  font-size: 18px
+
+blockquote
+  p
+    font-size: inherit
+    font-weight: inherit
+    color: #666
+
+section.cinema
+  color: #fff
+  background-color: #222
+  padding: 25px 0
+  margin-top: -20px
+
+section.odd, section.even
+  padding: 20px 0
+
+section.odd
+  background-color: #fff
+  border-top: 1px solid #e0e0e0
+  border-bottom: 1px solid #e0e0e0
+
+a
+  color: $link-color
+
+  &:hover
+    color: $link-color
+
+.btn-primary
+  background-color: $link-color
+
+.form-control:focus
+  border-color: $link-color
+
+.pagination
+  > .active
+    > a, a:hover
+      background-color: $link-color
+      border-color: $link-color
+
+.nav-pills
+  > li
+    > a
+      border-radius: 3px
+      padding: 6px 15px
+
+    &.active
+      > a
+        background-color: $link-color
+
+        &:hover
+          background-color: $link-color
+
+.dropdown-menu
+  > li
+    > a:hover, > a:focus
+      background-color: $link-color
+
+.author-avatar
+  img
+    width: 100%
+    height: 100%
+
+.help-block
+  font-size: 12px
+
+kbd
+  font-size: 90%
+  background-color: #FFF
+  color: #333
+  padding: 3px
+  border-radius: 3px
+  border: 1px solid #CCC
+  margin: 0 1px
+
+label.radio
+  font-weight: normal
+
+pre code
+  white-space: pre

web/static/css/contributing.sass

@@ -0,0 +1,12 @@
+.bitcoin-logo
+  width: 32px
+  margin-right: 10px
+
+#paypal-form
+  .button
+    margin-right: 15px
+    vertical-align: middle
+
+  span
+    vertical-align: middle
+    margin-right: 10px

web/static/css/flash.sass

@@ -0,0 +1,20 @@
+section.flash
+  .container
+    padding-top: 10px
+    padding-bottom: 10px
+    font-weight: bold
+    text-align: center
+
+  &.notice
+    color: white
+    background-color: #06989a
+
+  &.alert
+    color: black
+    background-color: #c4a000
+
+  // bootstrap overrides
+  margin-bottom: 0
+  padding: 0
+  border: 0
+  border-radius: 0

web/static/css/footer.sass

@@ -0,0 +1,21 @@
+footer
+  background-color: #fff
+  padding: 20px 0
+  margin-top: 20px
+  border-top: 1px solid rgba(230,230,230,0.75)
+
+  .links
+    list-style: none
+    margin: 0
+    padding: 0
+
+    li
+      margin-right: 20px
+
+  .avatar
+    margin-left: 15px
+    height: 10px
+
+  .brightbox-logo
+    display: inline-block
+    margin-top: 5px

web/static/css/header.sass

@@ -0,0 +1,100 @@
+header.navbar
+  background-color: #000
+  color: #fff
+  border-radius: 0
+  border: 0
+  min-height: 42px
+  margin-bottom: 0
+  border-bottom: 1px solid #222222
+
+  .navbar-nav
+    > li
+      a
+        color: #fff
+        padding-top: 12px
+        padding-bottom: 8px
+
+      .record
+        font-weight: bold
+        color: #3465a4
+
+      &.active
+        a
+          background-color: #000
+          color: #fff
+          font-weight: bold
+
+      a:focus
+        color: #fff
+
+      a:hover
+        background-color: #333
+        color: #fff
+
+      &.active a:hover
+        background-color: #000
+        color: #fff
+
+    > .dropdown
+      > a
+        &:focus
+          color: #fff
+          background-color: #333
+
+        .caret
+          border-top-color: #aaaaaa
+          border-bottom-color: #aaaaaa
+
+      > a:hover, > a:focus
+        .caret
+          border-top-color: #aaaaaa
+          border-bottom-color: #aaaaaa
+
+      &.open
+        > a
+          color: inherit
+          background-color: #333
+
+      .dropdown-menu
+        background-color: #333
+
+        li
+          a:hover
+            background-color: #444
+
+  .navbar-collapse
+    border-color: #444 !important
+
+  .navbar-toggle
+    border: 0
+    padding: 10px
+    margin: 3px 5px 0 0
+    border-radius: 0
+
+    .icon-bar
+      background-color: #888
+
+    &:hover, &:focus
+      border-color: #aaa
+      background-color: #333
+
+      .icon-bar
+        background-color: #aaa
+
+  .navbar-brand
+    padding: 10px 5px 10px 15px
+
+    img
+      height: 20px
+
+  .session-info
+    img
+      height: 20px
+      margin-right: 10px
+
+    .caret
+      margin-left: 10px
+
+@media (max-width: 767px)
+  .navbar-default .navbar-nav .open .dropdown-menu > li > a
+    color: #fff

web/static/css/home.sass

@@ -0,0 +1,40 @@
+.home-page
+  .cinema
+    padding-top: 0px
+    padding-bottom: 0px
+    background-image: image-url("home-bg.jpg")
+    background-position: 50%
+
+    .row
+      > div
+        margin-top: 50px
+        margin-bottom: 50px
+
+      .player-wrapper
+        .asciinema-player
+          box-shadow: 0 0 16px 5px rgba(255, 255, 255, 0.3)
+
+      > div:first-child
+        h1
+          margin-top: 0
+          font-size: 40px
+
+        h2
+          line-height: 1.2
+
+        h1, h2
+          text-shadow: black 3px 3px 5px
+
+  .popover
+    color: #333
+    max-width: 1000px
+    width: 480px
+
+  .features
+    h1
+      margin: 0 0 20px 0
+      text-align: center
+
+  .about
+    h3
+      margin-top: 10px

web/static/css/player.sass

@@ -0,0 +1,2 @@
+//= require asciinema-player
+//= require powerline-symbols

web/static/css/preview.sass

@@ -0,0 +1,77 @@
+.preview
+  margin-bottom: 30px
+  overflow: hidden
+
+  .thumbnail-link
+    display: block
+    position: relative
+    text-decoration: none
+
+    .play-button
+      display: none
+      z-index: 1
+      font-size: 80px
+
+    &:hover
+      .play-button
+        display: block
+
+    &:active
+      .play-button
+        font-size: 90px
+
+  .thumbnail
+    padding: 0
+    background-color: #000
+    border: 0
+    border-radius: 3px
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+
+  .info
+    background-color: #fff
+    padding: 10px
+    border-bottom-left-radius: 3px
+    border-bottom-right-radius: 3px
+    border: 1px solid #eee
+    border-bottom: 1px solid #ddd
+    border-top-width: 0
+
+    .author-avatar
+      float: left
+      width: 20px
+      height: 20px
+
+    h2
+      margin: 0 0 6px 0
+      font-size: 20px
+
+      .duration
+        float: right
+        font-size: 14px
+
+    small
+      margin-left: 5px
+      font-size: 14px
+      color: #333
+
+      abbr
+        border-bottom: 0
+
+  .play-button
+    position: absolute
+    left: 0
+    top: 0
+    right: 0
+    bottom: 0
+    text-align: center
+    color: white
+
+    .arrow
+      width: 100%
+      height: 100%
+      display: table
+
+      span
+        vertical-align: middle
+        display: table-cell

web/static/css/source-sans-pro.css

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('/fonts/SourceSansPro-Light.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('/fonts/SourceSansPro-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('/fonts/SourceSansPro-Semibold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('/fonts/SourceSansPro-Bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('/fonts/SourceSansPro-Italic.ttf') format('truetype');
+}

web/static/css/users.sass

@@ -0,0 +1,36 @@
+.login-form
+  input.email
+    width: 250px
+    margin-right: 10px
+
+.username-form
+  input#user_username
+    width: 200px
+
+.profile-page
+  .cinema
+    .user-avatar
+      float: left
+      width: 64px
+      height: 64px
+
+      img
+        width: 100%
+        height: 100%
+
+    h1
+      display: inline-block
+      margin: 0 0 0 15px
+      font-size: 38px
+
+      small
+        display: block
+        font-size: 16px
+        margin-top: 6px
+
+    .actions
+      margin: 20px 0 0 0
+
+.edit-page
+  > .row:last-child
+    margin-top: 30px

web/templates/layout/app.html.eex

@@ -4,32 +4,25 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
+    <title><%= page_title @conn %></title>
-    <meta name="author" content="">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
-
-    <title>Hello Asciinema!</title>
     <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
+    <link rel="shortcut icon" href="<%= static_path(@conn, "/images/favicon.png") %>">
+    <!-- google analytics -->
+    <!-- content for head (twitter, open graph tags) -->
   </head>
 
   <body>
-    <div class="container">
+    <%= render "header.html", conn: @conn %>
-      <header class="header">
+    <%= render "flash.html", conn: @conn %>
-        <nav role="navigation">
-          <ul class="nav nav-pills pull-right">
-            <li><a href="http://www.phoenixframework.org/docs">Get Started</a></li>
-          </ul>
-        </nav>
-        <span class="logo"></span>
-      </header>
 
-      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
+    <div class="main">
-      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+      <%= render @view_module, @view_template, assigns %>
+    </div>
 
-      <main role="main">
+    <%= render "footer.html", conn: @conn %>
-        <%= render @view_module, @view_template, assigns %>
-      </main>
 
-    </div> <!-- /container -->
+    <%# <script src="<%= static_path(@conn, "/js/app.js") %1>"></script> %>
-    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
+    <!-- https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js -->
   </body>
 </html>

web/templates/layout/flash.html.eex

@@ -0,0 +1,4 @@
+<!--
+<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
+<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+-->

web/templates/layout/footer.html.eex

@@ -0,0 +1,39 @@
+<footer>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4 col-xs-4">
+        <ul class="links">
+          <li><a href="/about">About</a></li>
+          <li><a href="/contributing">Contributing</a></li>
+          <li><a href="/tos">Terms of Service</a></li>
+          <li><a href="/privacy">Privacy Policy</a></li>
+          <li><a href="/contact">Contact</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-4 col-xs-4 text-center">
+        <span>
+          Sponsored by
+          <br/>
+          <a class="brightbox-logo" href="http://brightbox.com/" rel="nofollow">
+            <img src="<%= static_path(@conn, "/images/brightbox.png") %>" />
+          </a>
+        </span>
+      </div>
+
+      <div class="col-md-4 col-xs-4">
+        <ul class="links pull-right">
+          <li>
+            <b>irc:</b> <a href="irc://freenode/asciinema">#asciinema</a> on Freenode
+          </li>
+          <li>
+            <b>twitter:</b> <a href="https://twitter.com/asciinema" title="Follow @asciinema on Twitter">@asciinema</a>
+          </li>
+          <li>
+            <b>e-mail:</b> support at this domain
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</footer>

web/templates/layout/header.html.eex

@@ -0,0 +1,27 @@
+<header class="navbar navbar-default navbar-fixed-top" role="navigation">
+  <div class="container">
+    <div class="navbar-header">
+      <button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+
+      <a class="navbar-brand" href="/">
+        <img src="<%= static_path(@conn, "/images/logo-red.svg") %>">
+      </a>
+    </div>
+
+    <div class="collapse navbar-collapse navbar-ex1-collapse">
+      <ul class="nav navbar-nav">
+        <li><a href="/browse/featured">Browse</a></li>
+        <li><a href="/docs">Docs</a></li>
+        <li><a href="http://blog.asciinema.org">Blog</a></li>
+      </ul>
+
+      <ul class="nav navbar-nav navbar-right session-info">
+        <li><a href="/login/new" id="log-in">Log in</a></li>
+      </ul>
+    </div>
+  </div>
+</header>

web/views/layout_view.ex

@@ -1,3 +1,10 @@
 defmodule Asciinema.LayoutView do
   use Asciinema.Web, :view
+
+  def page_title(conn) do
+    case conn.assigns[:page_title] do
+      nil -> "asciinema - Record and share your terminal sessions, the right way"
+      title -> title <> " - asciinema" # TODO return safe string here?
+    end
+  end
 end