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.
292 lines
5.6 KiB
292 lines
5.6 KiB
// 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
|
|
|