Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

485 lines (367 sloc) 7.497 kB
@import 'nib'
$gold = #e2bb7c
$helv = 'Helvetica Neue', Helvetica, Arial, sans-serif
$advBold = 'adv', $helv
$abril = 'Abril Fatface', 'Hoefler Text', Constantia, Palatino, Georgia, serif
$serif = Georgia, Times, 'Times New Roman', serif
@font-face
font-family: 'adv'
src: url('./fonts/adventor-bold.eot')
src: url('./fonts/adventor-bold.eot?#iefix') format('embedded-opentype'),
url('./fonts/adventor-bold.woff') format('woff'),
url('./fonts/adventor-bold.ttf') format('truetype'),
url('./fonts/adventor-bold.svg#texgyreadventorbold') format('svg')
font-weight: bold
font-style: normal
*
margin: 0
padding: 0
box-sizing: border-box
::-moz-selection
background: #444
color: #fff
text-shadow: none
::selection
background: #444
color: #fff
text-shadow: none
a
color: #333
li
list-style: none
html
font-size: 10px
min-width: 300px
body
border-top: 4px solid #333
background-color: #fff
color: #454545
margin: 0 auto
font-family: $helv
text-rendering: optimizeLegibility
font-smoothing: antialiased
text-align: center
.logo
font-family: $advBold
display: inline-block
font-size: 11rem
background-color: #222
color: #eee
padding: 0rem 2rem
margin-top: 2rem
letter-spacing: -.5rem
line-height: 2
width: 50%
min-width: 530px
white-space: no-wrap
transition: background-color .2s, color .2s
em
font-style: normal
sup
font-family: $helv
font-size: 6rem
font-weight: 100
letter-spacing: -.9rem
&:hover
.oridomi-content
background-color: #ff4e49
background-color: #ff4e4e
background-color: #eee
color: #ddd
header
overflow: hidden
h2
margin: 2.2rem 0
font-size: 3.4rem
letter-spacing: -.1rem
font-weight: 200
h5
font-size: 1.8rem
line-height: 1
margin-bottom: 3rem
font-weight: 400
a
text-decoration: none
color: #aaa
font-weight: bold
border-bottom: 1px solid #eee
padding-bottom: .2rem
transition: color .3s
&:hover
color: #777
.button
margin-bottom: 1rem
#menu
position: fixed
text-align: left
line-height: 1.8
position: fixed;
font-size: 1.4rem
top: 2rem
padding: 1rem
font-weight: bold
li
display: block
ul
font-size: .9em
text-indent: 1rem
a
text-decoration: none
color: #bbb
transition: color .2s
&:hover
color: #777
.button
background-color: #444
display: inline-block
color: #fff
font-size: 1.6rem
font-weight: bold
padding: 0.8rem
cursor: pointer
border-radius: 4px
transition: background-color .2s, color .2s
text-decoration: none
position: relative
top: 0.2rem
&:hover
background-color: #ddd
color: #666
&:active
top: 0.3rem
.warning
width: 480px
font-size: 16px
padding: 40px
margin: 40px auto
border: 1px dashed #ff5a7e
line-height: 1.5
#unsupported
display: none
section
margin: 2rem 0
padding: 2rem
overflow: hidden
h1
font-size: 4rem
line-height: 2
font-family: $advBold
p, pre
max-width: 65rem
margin: 2rem auto
text-align: left
p
font-family: $serif
font-size: 2.2rem
line-height: 1.5
a
text-decoration: none
font-weight: bold
border-bottom: 1px dotted #ddd
&:hover
color: #bbb
code
background-color: #f8f8f8
border: 1px solid #ddd
border-radius: 2px
padding: .3rem
font-size: 1.6rem
pre
background-color: #f8f8f8
color: #555
padding: 1rem
border-radius: 3px
font-size: 1.6rem
padding: 0 2rem
overflow: scroll
code
padding: 0
line-height: 1.4
#demos
margin-top: 0
li
display: block
user-select: none
margin: 2rem
margin-bottom: 4rem
> h2, > h3
color: #aaa
font-size: 3.4rem
font-weight: 200
> h2
padding: 2rem
a
text-decoration: none
color: inherit
border-bottom: 1px dotted #ddd
transition: color .3s
&:hover
color: #333
> h3
font-style: italic
max-width: 48rem
font-size: 2rem
margin: 0 auto
.demo
display: block
max-width: 80rem
width: 100%
min-width: 320px
position: relative
margin: 0 auto
margin-bottom: 2rem
.note
font-family: $helv
font-style: italic
font-size: 1.6rem
color: #999
text-align: center
max-width: 40rem
.label
background-color: #f8f8f8
color: #999
font-family: monospace
display: inline-block
padding: 1rem
font-size: 1.3rem
border-radius: 3px
width: 20rem
position: relative
.demo1
font-family: $advBold
height: 30rem
color: #fff
background-image: url('./images/road.jpg')
background-size: cover
font-size: 9rem
text-transform: uppercase
font-weight: bold
letter-spacing: -.3rem
line-height: 1
text-align: center
padding-top: 4rem
p
text-transform: none
font-size: 4rem
background-color: #333
display: inline-block
padding: .8rem
font-family: $advBold
font-weight: 100
letter-spacing: 0
pointer-events: none
.demo2
font-family: $abril
color: #333
background-color: #eee
font-size: 6rem
line-height: .9
padding: 6rem 0
font-weight: normal
max-width: 50rem
transition: color .2s
h3
font-weight: normal
&:hover
.oridomi-content
color: $gold
.demo3
text-transform: uppercase
background-color: #444
border: 1.5rem solid $gold
color: $gold
font-size: 6rem
padding: 2rem
h3
font-weight: 100
.demo4
background-image: url('./images/horse.gif')
background-size: cover
height: 28rem
font-size: 5rem
font-family: Futura
text-transform: uppercase
font-weight: bold
color: #fff
letter-spacing: -.2rem
line-height: 5
.demo5
background-image: url('./images/suit.jpg')
background-size: cover
height: 40rem
.demo6
background-color: #00bbdf
max-width: 57rem
transition: background-color .2s
pre
font-size: 1.2rem
background: none
color: #fff
font-weight: bold
overflow: hidden
font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace
&:hover
.oridomi-content
background-color: #aa2861
.demo7
background-size: cover
background-image: url('./images/lbj.jpg')
width: 221%
height: 40rem
#features
ul
font-size: 1.8rem
color: #999
max-width: 65rem
margin: 0 auto
li
width: 40%
display: inline-block
line-height: 2
white-space: no-wrap
font-style: italic
&:nth-child(odd)
text-align: right
margin-right: 4rem
&:nth-child(even)
text-align: left
margin-left: 4rem
#usage
h2
font-size: 3rem
margin-top: 5rem
font-family: $advBold
//color: #555
#initialization
margin-top: 2rem !important
footer
padding: 3rem
font-size: 1.5rem
color: #bbb
a
color: #bbb
text-decoration: none
border-bottom: 1px solid #bbb
@media only screen and (max-width: 900px), only screen and (max-device-width: 480px)
html
font-size: 9px
.logo
width: 100%
font-size: 9rem
.demo
width: 90%
#features li
font-size: 1.7rem
width: 100%
text-align: center !important
margin: 0 auto !important
@media only screen and (max-width: 780px)
#menu
display: none
@media only screen and (max-device-width: 480px)
.oridomi-content
transition: none !important
@media only screen and (min-width: 970px)
#demos li
width: 35%
display: inline-block
Jump to Line
Something went wrong with that request. Please try again.