Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
442 lines (343 sloc) 7.27 KB
@import symbolset/ss-standard
@mixin flexbox()
display: -webkit-box
display: -moz-box
display: -ms-box
display: -webkit-flex
display: -moz-flex
display: -ms-flex
display: flex
@mixin vertical-flexbox()
-webkit-box-orient: vertical
-moz-box-orient: vertical
-ms-box-orient: vertical
-webkit-flex-direction: column
-moz-flex-direction: column
-ms-flex-direction: column
flex-direction: column
@mixin flex($flex)
-webkit-box-flex: $flex
-moz-box-flex: $flex
-ms-box-flex: $flex
-webkit-flex: $flex
-moz-flex: $flex
-ms-flex: $flex
flex: $flex
@mixin mono()
font-family: "inconsolata", mono
@mixin serif()
font-family: "kepler-std", serif
// Constants
// ---------
$red : #f57e5d
$yellow : #f5d371
$aqua : #49b27d
$blue : #4b8b8d
$purple : #957a96
$sand : #fcfcfa
$dark-aqua: darken($aqua, 7%)
$dark-sand: #f7f6f2
$text: #35332e
$rule: #eee
$button-padding: .5rem
// Base
// ----
html
font-size: 16px
line-height: 1.45
color: $text
overflow-y: scroll
overflow-x: hidden
@media (min-width: 1200px)
font-size: 17px
@media (min-width: 1300px)
font-size: 18px
@media (min-width: 1600px)
font-size: 20px
@media (min-width: 1800px)
font-size: 22px
button
-webkit-appearance: none
-moz-appearance: none
background: transparent
border: none
font-size: 12px
color: $text
padding: $button-padding $button-padding*1.2 $button-padding*.9
cursor: pointer
opacity: .2
&:hover,
&:active,
&.pressed
opacity: 1
article
> :first-child
margin-top: 0
> *
margin-top: 1rem
margin-bottom: 1rem
h1
font-size: 1.5rem
margin-top: 4rem
margin-bottom: 2.5rem
position: relative
text-align: center
&::after
content: ''
width: 100px
left: 50%
margin-left: -50px
border-bottom: 1px solid $rule
top: 100%
position: absolute
margin-top: 1rem
h2
font-size: 1.25rem
margin-top: 2rem
h3,
h4,
h5,
h6,
font-size: 1rem
margin-top: 2rem
margin-bottom: -.5rem
p
text-align: justify
-webkit-hyphens: auto
-moz-hyphens: auto
-ms-hyphens: auto
-o-hyphens: auto
hyphens: auto
blockquote
margin-top: 1.5rem
margin-bottom: 1.5rem
font-style: italic
a
position: relative
color: $aqua
&:hover,
&:focus
color: $dark-aqua
&:active
top: 1px
ul,
ol
margin-left: 2em
font-size: .9em
> li
margin-top: .5em
margin-bottom: .5em
ul
list-style-type: disc
pre,
code
+mono
margin-top: 1.5rem
margin-bottom: 1.5rem
pre
font-size: .8em
code
font-size: .95em
hr
background: transparent
border: none
width: 100px
margin: 1.5em auto
border-bottom: 1px solid $rule
textarea
-webkit-appearance: none
-moz-appearance: none
display: block
border: none
background: transparent
resize: none
&:focus
outline: none
// Layout
// ------
*
margin: 0
padding: 0
body
+flexbox
// Fix weirdness with Firefox.
html
height: 100%
width: 100%
body
min-height: 100%
min-width: 100%
.write,
.read
position: relative
overflow: hidden
.write
+flex(0)
+flexbox
+vertical-flexbox
width: 33rem
.write-form
position: relative
+flex(1)
.read
+flex(1)
// Write & Read
// ------------
.write-textarea-wrap,
.document-article
padding: 3rem
max-width: 32rem
margin: 0 auto
.write-buttons,
.read-buttons
position: relative
overflow: hidden
z-index: 1
// Read
// ----
.read
+serif
border-left: 1px solid darken($sand, 6%)
box-shadow: 0 -1px 10px darken($sand, 6%)
.document-article
.read-only-button
float: left
// Write
// -----
.write
background: $sand
.write,
.document-textarea
+mono
font-size: 12px
line-height: 1.2
@media (min-width: 1200px)
font-size: 14px
.write-textarea-wrap
position: absolute
top: 0
left: 0
right: 0
bottom: 0
.document-textarea
position: relative
width: 100%
height: 100%
&::-webkit-scrollbar
width: 7px
&::-webkit-scrollbar-track
margin: 3rem
&::-webkit-scrollbar-thumb
border-radius: 14px
background: darken($dark-sand, 5%)
.document-menu
list-style: none
position: relative
background-color: $dark-sand
border-top: 1px darken($dark-sand, 5%) solid
border-bottom: 1px darken($dark-sand, 5%) solid
box-shadow: inset 2px 0 6px darken($dark-sand, 6%)
// Initial display state.
display: none
// For safety, give a reasonable max-height and just don't show a scrollbar
// since I don't want to deal with styling it right now.
max-height: 500px
overflow-y: auto
&::-webkit-scrollbar
width: 0
.document-menu-item
overflow: hidden
cursor: pointer
&:hover,
&:focus
background: rgba($text, .01)
outline: none
color: $aqua
&:active
color: $dark-aqua
.document-menu-item-wrap
position: relative
// Match textarea width.
max-width: 26rem
margin: 0 auto
// Clearfix.
overflow: hidden
.document-menu-item-title
// Match button padding.
padding: $button-padding 0 $button-padding*.9
// Make sure it overflows with an ellipsis
position: absolute
left: 0
right: 2em
top: 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.document-menu-item-delete-button
float: right
opacity: .15
.menu-button,
.add-button
float: left
.write-only-button
float: right
// Reduce the padding between the two buttons.
.add-button
padding-left: $button-padding / 1.5
.menu-button
padding-right: $button-padding / 1.5
// Write & Read Only
// -----------------
.write-only .read,
.read-only .write
+flex(0)
.write-only .read
width: 37rem
margin-right: -30rem
.read-only .write
margin-left: -26rem
.write-only .write,
.read-only .read
+flex(1)
// Attribution
// -----------
.attribution
+serif
padding: 1rem
text-align: center
color: rgba($text, .4)
.segmentio-link,
.firebase-link
vertical-align: middle
display: inline-block
text-indent: -9999px
background-size: cover
background-repeat: none
background-position: center center
margin-left: .3em
opacity: .4
&:hover
opacity: 1
.segmentio-link
background-image: url('images/segmentio.png')
width: 110px
height: 20px
.firebase-link
background-image: url('images/firebase.png')
width: 98px
height: 19px
// Code Highlighting
// -----------------
// Everything's purple or light gray.
pre
.comment
color: lighten($text, 45%)
.constant,
.storage,
.tag,
.keyword:not(.operator),
.selector,
.string:not(.value),
.regexp,
.function
color: $blue