You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
293 lines
5.6 KiB
293 lines
5.6 KiB
9 years ago
|
// Import all partials
|
||
|
|
@require './_*.styl'
|
||
|
|
|
||
|
|
header.top
|
||
|
|
text-align center
|
||
|
|
h1
|
||
|
|
font-size 14.4rem
|
||
|
|
line-height 0.7 // this font has a wacky baseline
|
||
|
|
display flex
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
// This is a bunch of goofy CSS to make the logo look decent
|
||
|
|
.ofThe
|
||
|
|
display flex
|
||
|
|
font-size 3rem
|
||
|
|
color orange
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background url('images/anchor.svg') center no-repeat;
|
||
|
|
background-size cover
|
||
|
|
padding 0 1rem
|
||
|
|
.of
|
||
|
|
padding-right 2rem
|
||
|
|
position relative
|
||
|
|
right -0.5rem
|
||
|
|
h3
|
||
|
|
margin 0
|
||
|
|
font-size 2rem
|
||
|
|
color orange
|
||
|
|
position relative
|
||
|
|
display inline-block
|
||
|
|
span
|
||
|
|
background white
|
||
|
|
position relative
|
||
|
|
z-index 2
|
||
|
|
padding-left 1rem
|
||
|
|
padding-right 1rem
|
||
|
|
&:before, &:after
|
||
|
|
display block
|
||
|
|
z-index 1
|
||
|
|
background black
|
||
|
|
position absolute
|
||
|
|
width 130%
|
||
|
|
height 1px
|
||
|
|
content ''
|
||
|
|
top 5px
|
||
|
|
margin-left -15%
|
||
|
|
&:after
|
||
|
|
top auto
|
||
|
|
bottom 7px
|
||
|
|
|
||
|
|
|
||
|
|
.catch-of-the-day
|
||
|
|
display flex
|
||
|
|
height 90vh
|
||
|
|
max-width:1500px
|
||
|
|
margin 0 auto
|
||
|
|
margin-top 5vh
|
||
|
|
perspective: 1000;
|
||
|
|
transform-style preserve-3d
|
||
|
|
& > *
|
||
|
|
flex 1 4 auto
|
||
|
|
padding 2rem
|
||
|
|
border 1rem double lighten(black,10%)
|
||
|
|
position relative
|
||
|
|
background white
|
||
|
|
transition all 0.3s
|
||
|
|
box-shadow 0px 5px 5px rgba(0,0,0,0.1)
|
||
|
|
overflow scroll
|
||
|
|
&:first-child
|
||
|
|
flex-shrink 1 // take 4x the extra room
|
||
|
|
flex-basis 50%
|
||
|
|
transform translateX(50%) rotateY(6deg) translateX(-50%)
|
||
|
|
&:nth-child(2)
|
||
|
|
transform translateX(-50%) rotateY(-14deg) translateX(50%)
|
||
|
|
border-left 0
|
||
|
|
border-right 0
|
||
|
|
min-width 300px
|
||
|
|
&:last-child
|
||
|
|
flex-shrink 1 // take 4x the extra room
|
||
|
|
flex-basis 50%
|
||
|
|
transform translateX(-50%) rotateY(10deg) translateX(50%) scale(1.08) translateX(24px)
|
||
|
|
|
||
|
|
// Folding Transforms
|
||
|
|
// Take off folding when not checked
|
||
|
|
input#fold:not(:checked) ~ #main
|
||
|
|
.catch-of-the-day > *
|
||
|
|
transform none
|
||
|
|
|
||
|
|
label[for="fold"]
|
||
|
|
position absolute
|
||
|
|
top 1rem
|
||
|
|
left 1rem
|
||
|
|
text-transform uppercase
|
||
|
|
font-size 1.3rem
|
||
|
|
background black
|
||
|
|
color white
|
||
|
|
border 2px solid black
|
||
|
|
cursor pointer
|
||
|
|
padding 0.5rem 1rem
|
||
|
|
|
||
|
|
input#fold
|
||
|
|
display none
|
||
|
|
&:checked + label
|
||
|
|
background white
|
||
|
|
color black
|
||
|
|
|
||
|
|
ul
|
||
|
|
list-style none
|
||
|
|
margin 0
|
||
|
|
padding 0
|
||
|
|
|
||
|
|
ul.order
|
||
|
|
li
|
||
|
|
border-bottom 1px solid black
|
||
|
|
padding 2rem 0
|
||
|
|
display flex
|
||
|
|
font-size 1.4rem
|
||
|
|
justify-content space-between
|
||
|
|
align-items center
|
||
|
|
&:hover
|
||
|
|
// padding 1rem 0
|
||
|
|
button
|
||
|
|
display inline
|
||
|
|
button
|
||
|
|
border 0
|
||
|
|
display none
|
||
|
|
line-height 1
|
||
|
|
padding 0
|
||
|
|
&.total
|
||
|
|
font-weight 600
|
||
|
|
border-bottom 3px solid black
|
||
|
|
border-top 3px double black
|
||
|
|
&.unavailable
|
||
|
|
text-decoration line-through
|
||
|
|
background lighten(red, 80%)
|
||
|
|
.price
|
||
|
|
font-size 1.2rem
|
||
|
|
span.count
|
||
|
|
position relative
|
||
|
|
overflow hidden
|
||
|
|
float left // only works if it's floated?!
|
||
|
|
span
|
||
|
|
display inline-block
|
||
|
|
// transition all 0.5s
|
||
|
|
|
||
|
|
.order-title
|
||
|
|
text-align center
|
||
|
|
|
||
|
|
.fish-edit
|
||
|
|
margin-bottom 20px
|
||
|
|
border 2px solid black
|
||
|
|
overflow hidden
|
||
|
|
display flex
|
||
|
|
flex-wrap wrap
|
||
|
|
input, textarea, select
|
||
|
|
width 33.33%
|
||
|
|
padding 10px
|
||
|
|
line-height 1
|
||
|
|
font-size 1.2rem
|
||
|
|
border 0
|
||
|
|
border-bottom 1px solid black
|
||
|
|
border-right 1px solid black
|
||
|
|
appearance none
|
||
|
|
border-radius 0
|
||
|
|
background white
|
||
|
|
&:focus
|
||
|
|
outline 0
|
||
|
|
background lighten(orange, 85%)
|
||
|
|
textarea
|
||
|
|
width 100%
|
||
|
|
input:last-of-type
|
||
|
|
width 100%
|
||
|
|
button
|
||
|
|
width 100%
|
||
|
|
border 0
|
||
|
|
|
||
|
|
|
||
|
|
// Menu Styles
|
||
|
|
.list-of-fish
|
||
|
|
border-top 2px solid black
|
||
|
|
border-bottom 1px solid black
|
||
|
|
padding-top 5px
|
||
|
|
margin-top 2rem
|
||
|
|
transform translateZ(0);
|
||
|
|
|
||
|
|
.menu-fish
|
||
|
|
border-bottom 2px solid black
|
||
|
|
border-top 1px solid black
|
||
|
|
padding-bottom 2rem
|
||
|
|
padding-top 2rem
|
||
|
|
margin-bottom 5px
|
||
|
|
clear both
|
||
|
|
overflow hidden
|
||
|
|
p
|
||
|
|
margin 0
|
||
|
|
font-size 1.8rem
|
||
|
|
.fish-name
|
||
|
|
margin 0
|
||
|
|
display flex
|
||
|
|
justify-content space-between
|
||
|
|
align-items center
|
||
|
|
.price
|
||
|
|
font-size 1.4rem
|
||
|
|
// color orange
|
||
|
|
justify-content flex-end
|
||
|
|
// font-family 'Open Sans Condensed'
|
||
|
|
img
|
||
|
|
float left
|
||
|
|
width 150px
|
||
|
|
margin-right 1rem
|
||
|
|
|
||
|
|
button, input[type=submit]
|
||
|
|
text-transform uppercase
|
||
|
|
background none
|
||
|
|
border 1px solid black
|
||
|
|
font-weight 600
|
||
|
|
font-size 1.5rem
|
||
|
|
font-family 'Open Sans'
|
||
|
|
transition all 0.2s
|
||
|
|
position relative
|
||
|
|
z-index 2
|
||
|
|
&[disabled]
|
||
|
|
color red
|
||
|
|
background white
|
||
|
|
border-color red
|
||
|
|
transform rotate(-10deg) scale(2) translateX(50%) translateY(-50%)
|
||
|
|
&:hover
|
||
|
|
color red
|
||
|
|
cursor not-allowed
|
||
|
|
&:after
|
||
|
|
display none
|
||
|
|
&:after
|
||
|
|
content ''
|
||
|
|
z-index -1
|
||
|
|
display block
|
||
|
|
background black
|
||
|
|
position absolute
|
||
|
|
width 100%
|
||
|
|
height 0%
|
||
|
|
left 0
|
||
|
|
top 0
|
||
|
|
transition all 0.2s
|
||
|
|
&:hover, &:focus
|
||
|
|
color white
|
||
|
|
outline 0
|
||
|
|
&:after
|
||
|
|
height 100%
|
||
|
|
// variants
|
||
|
|
&.warning
|
||
|
|
&:after
|
||
|
|
background red
|
||
|
|
&.success
|
||
|
|
&:after
|
||
|
|
background green
|
||
|
|
|
||
|
|
&.github, &.facebook, &.twitter
|
||
|
|
border 0
|
||
|
|
display block
|
||
|
|
margin-bottom 2rem
|
||
|
|
width 100%
|
||
|
|
color white
|
||
|
|
padding 2rem
|
||
|
|
|
||
|
|
&.github
|
||
|
|
background #82D465
|
||
|
|
&:after
|
||
|
|
background darken(#82D465, 20%)
|
||
|
|
|
||
|
|
&.facebook
|
||
|
|
background #3864A3
|
||
|
|
&:after
|
||
|
|
background darken(#3864A3, 20%)
|
||
|
|
|
||
|
|
&.twitter
|
||
|
|
background #5EA9DD
|
||
|
|
&:after
|
||
|
|
background darken(#5EA9DD, 20%)
|
||
|
|
|
||
|
|
|
||
|
|
// Store Selector
|
||
|
|
.store-selector
|
||
|
|
background white
|
||
|
|
max-width 500px
|
||
|
|
margin 50px auto
|
||
|
|
padding 2rem
|
||
|
|
border 2px solid black
|
||
|
|
input
|
||
|
|
width 100%
|
||
|
|
&[type="text"]
|
||
|
|
text-align center
|
||
|
|
font-size 3rem
|