Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 sipp11
|
5e25745eaa | 9 years ago |
10 changed files with 4 additions and 402 deletions
@ -1,9 +0,0 @@
|
||||
// CSS Normalize |
||||
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button], input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} |
||||
|
||||
// clearfix |
||||
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } |
||||
|
||||
// Sane border box |
||||
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
||||
@ -1,25 +0,0 @@
|
||||
html |
||||
font-size 62.5% |
||||
|
||||
body |
||||
background #D4D4D4 |
||||
-webkit-font-smoothing antialiased |
||||
-moz-osx-font-smoothing grayscale |
||||
font-family 'Open Sans', sans-serif |
||||
font-size 2rem |
||||
|
||||
h1 |
||||
text-align center |
||||
font-weight normal |
||||
margin 0 |
||||
|
||||
h2,h3,h4,h5,h6 |
||||
font-weight normal |
||||
|
||||
h2 |
||||
text-align center |
||||
margin-top 0 |
||||
margin-bottom 2rem |
||||
|
||||
h3 |
||||
font-size 3rem |
||||
@ -1,292 +0,0 @@
|
||||
// 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 |
||||
Loading…
Reference in new issue