Ported layout
Marcin Kulik
8 years ago
parent
5eeb278b90
commit
648d927ad7
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 768 B |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
@ -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>
|
||||
|
After Width: | Height: | Size: 731 B |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@ -1 +0,0 @@
|
||||
/* This file is for your main application css. */
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,2 @@
|
||||
//= require asciinema-player
|
||||
//= require powerline-symbols
|
||||
@ -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
|
||||
@ -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');
|
||||
}
|
||||
@ -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
|
||||
@ -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>
|
||||
-->
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue