├── .gitignore
├── CNAME
├── README.md
├── css
├── lib
│ ├── components
│ │ ├── entry.styl
│ │ ├── header.styl
│ │ └── mixins.styl
│ ├── entries
│ │ ├── battery.styl
│ │ ├── bloody-mary.styl
│ │ ├── brazil.styl
│ │ ├── breakfast.styl
│ │ ├── camera.styl
│ │ ├── cpt-america.styl
│ │ ├── crayon.styl
│ │ ├── hobbit-door.styl
│ │ ├── key.styl
│ │ ├── macarons.styl
│ │ ├── mario-mushroom.styl
│ │ ├── mario-tube.styl
│ │ ├── marker.styl
│ │ ├── marshmallow.styl
│ │ ├── mickey-hat.styl
│ │ ├── moleskine.styl
│ │ ├── soccer.styl
│ │ ├── sushi.styl
│ │ └── tardis.styl
│ └── main.styl
├── main.css
└── reset.css
├── favicon.ico
├── index.html
└── templates
├── includes
└── ga.html
├── index.jade
└── layout.jade
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .git
--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | div.justjavac.com
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 基于单个 Div 的 CSS3 绘图
2 | ============
3 |
4 | ### Whuut
5 |
6 | This is a fun, little project to see how much can be accomplished with CSS. Every drawing consists of a single HTML element (in this case, the beloved div).
7 |
8 | ### But, but!
9 |
10 | Yes, this isn't super practical.
11 |
12 | Yes, SVG is an easier and better medium for illustrations.
13 |
14 | Yes, browser support is not broad.
15 |
16 | Yes, it is super fun to do this anyway. ;)
17 |
18 | ### Project Details
19 |
20 | This project uses a combination of Jade for templating and Stylus for CSS preprocessing.
21 |
22 | ### Sharing
23 |
24 | Copy paste as much as you'd like, edit it, experiment. If you reuse a significant portion of CSS or full drawings, credit would be appreciated, but definitely not necessary! Thanks!
25 |
--------------------------------------------------------------------------------
/css/lib/components/entry.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Entry styles
4 |
5 | -----------------------------*/
6 |
7 | .entry
8 | text-align: center
9 | min-height: 400px
10 | position: relative
11 |
12 | div
13 | position: absolute
14 | left: 50%
15 | top: 50%
16 |
17 | &:before, &:after
18 | display: block
19 | content: ''
20 | position: absolute
21 |
22 | @media (max-width: 400px)
23 |
24 | -webkit-transform: scale(.8)
25 | transform: scale(.8)
26 |
27 | .cf
28 | &:before,
29 | &:after
30 | content: " "
31 | display: table
32 |
33 | &:after
34 | clear: both
35 |
36 | @media all and (min-width: 960px )
37 |
38 | .entry
39 | float: left
40 | width: 50%
41 |
42 | &.wide
43 | width: 100%
44 |
--------------------------------------------------------------------------------
/css/lib/components/header.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Header and global styles
4 |
5 | -----------------------------*/
6 |
7 | header
8 | padding: 10px 80px 7px 15px
9 | position: relative
10 | background: #333;
11 | color: white
12 | font-family: Georgia, Times, serif
13 | font-size: 15px
14 | font-style: italic
15 |
16 | h1, p
17 | display: inline-block
18 |
19 | h1
20 | margin-bottom: 5px
21 |
22 | p
23 | color: #bed4dc
24 |
25 | a
26 | color: #67b1cd
27 | text-decoration: none
28 | border-bottom: 1px dotted
29 |
30 | .share-link
31 | padding: 15px 10px 7px
32 | position: absolute
33 | right: 15px
34 | top: -8px
35 | background: #55acee
36 | border-radius: 5px
37 | color: white
38 | text-decoration: none
39 | font-style: normal
40 | font-size: 12px
41 | font-family: Helvetica, Arial, sans-serif
42 | &:hover
43 | background: #469cd1
44 |
45 | @media (max-width: 500px)
46 |
47 | padding: 15px 80px 15px 15px
--------------------------------------------------------------------------------
/css/lib/components/mixins.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Mixins
4 |
5 | -----------------------------*/
6 |
7 | white(alpha)
8 | rgba(255,255,255,alpha)
9 |
10 | black(alpha)
11 | rgba(0,0,0,alpha)
--------------------------------------------------------------------------------
/css/lib/entries/battery.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | iPhone battery
4 |
5 | -----------------------------*/
6 |
7 | #battery
8 | background: black
9 |
10 | div
11 | width: 250px
12 | height: 120px
13 | margin-left: -(@width/2 + 5px)
14 | margin-top: -(@height/2)
15 |
16 | border-radius: 10px/30px
17 |
18 | border-left: 2px solid white(.2)
19 | border-right: 2px solid white(.2)
20 |
21 | background-image: linear-gradient(to right,
22 | transparent 5%,
23 | #316d08 5%,
24 | #316d08 7%,
25 | #60b939 8%,
26 | #60b939 10%,
27 | #51aa31 11%,
28 | #51aa31 60%,
29 | #64ce11 61%,
30 | #64ce11 63%,
31 | #255405 63%,
32 | black 68%,
33 | black 95%,
34 | transparent 95%),
35 | linear-gradient(to bottom,
36 | white(.5) 0%,
37 | white(.4) 4%,
38 | white(.2) 7%,
39 | white(.2) 14%,
40 | white(.8) 14%,
41 | white(.2) 40%,
42 | white(0) 41%,
43 | white(0) 80%,
44 | white(.2) 80%,
45 | white(.4) 86%,
46 | white(.6) 90%,
47 | white(.1) 92%,
48 | white(.1) 95%,
49 | white(.5) 98%)
50 |
51 | &:before
52 | width: 12px
53 | height: 55px
54 |
55 | right: -(@width + 2px)
56 | top: 32px
57 |
58 | border-top-right-radius: 6px 10px
59 | border-bottom-right-radius: 6px 10px
60 |
61 | background-image: linear-gradient(to bottom,
62 | white(.5) 0%,
63 | white(0) 14%,
64 | white(.8) 14%,
65 | white(.3) 40%,
66 | white(0) 41%,
67 | white(0) 80%,
68 | white(.2) 80%,
69 | white(.4) 86%,
70 | white(.6) 90%,
71 | white(.1) 92%,
72 | white(.1) 95%,
73 | white(.5) 98%)
74 |
75 | &:after
76 | width: 220px
77 | height: 120px
78 |
79 | left: 10px
80 |
81 | border-radius: 5px/30px
82 |
83 | border-left: 4px solid black
84 | border-right: 4px solid black
85 |
86 | background-image: linear-gradient(to bottom,
87 | white(.3) 4%,
88 | white(.2) 5%,
89 | transparent 5%,
90 | transparent 14%,
91 | white(.3) 14%,
92 | white(.12) 40%,
93 | black(.05) 42%,
94 | black(.05) 48%,
95 | transparent 60%,
96 | transparent 80%,
97 | white(.3) 87%,
98 | white(.3) 92%,
99 | transparent 92%,
100 | transparent 97%,
101 | white(.4) 97%),
102 | linear-gradient(to left,
103 | white(.2) 0%,
104 | white(.2) 2%,
105 | black 2%,
106 | black 6%,
107 | transparent 6%),
108 | linear-gradient(to bottom,
109 | white(0) 0%,
110 | white(0) 35%,
111 | white(.3) 90%,
112 | white(0) 90%)
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/css/lib/entries/bloody-mary.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Bloody Mary
4 |
5 | -----------------------------*/
6 |
7 | #bloody-mary
8 | background: powderblue
9 |
10 | //- bottom of glass
11 | div
12 | width: 180px
13 | height: 100px
14 | margin-left: -(@width/2)
15 | margin-top: 10px
16 |
17 | z-index: 2
18 |
19 | background: linear-gradient(to right,
20 | #eee 0%,
21 | #db493e 3%,
22 | #b8423a 5%,
23 | #53646e 7%,
24 | #b8423a 9%,
25 | #53646e 11%,
26 | #53646e 14%,
27 | #bfc9ca 33%,
28 | #eee 41%,
29 | #eee 75%,
30 | #95a4a3 85%,
31 | #556168 90%,
32 | #7c8285 98%,
33 | white 100% )
34 |
35 | border-bottom-left-radius: 80px 10px
36 | border-bottom-right-radius: 80px 10px
37 | border-bottom: 2px solid #ddd
38 |
39 | box-shadow: 0 3px 4px -3px black(.4),
40 | 0 8px 7px -3px black(.2)
41 |
42 | //- celery
43 | &:before
44 | width: 40px
45 | height: 95px
46 | margin-left: 40px
47 |
48 | top: -140px
49 | left: 50%
50 | z-index: 1
51 |
52 | background: #d7e17f
53 |
54 | background: linear-gradient(to right,
55 | #cdeca8 10%,
56 | #a2d269 18%,
57 | #a2d269 25%,
58 | #bde192 45%,
59 | #bde192 55%,
60 | #95c260 75%,
61 | #95c260 82%,
62 | #bde192 90%)
63 |
64 | border-top-left-radius: 20px 3px
65 | border-top-right-radius: 20px 3px
66 | border-top: 5px solid #95c260
67 |
68 | //- ice cube
69 | box-shadow: -65px 111px 0 14px #eee
70 |
71 | -webkit-transform: rotate(15deg)
72 | transform: rotate(15deg)
73 |
74 | //- main part of glass
75 | &:after
76 | width: 177px
77 | height: 170px
78 | margin-left: -90px
79 |
80 | top: -105px
81 | left: 50%
82 | z-index: 3
83 |
84 | background:
85 | linear-gradient(to right,
86 | black(.1) 0%,
87 | white(0) 15%,
88 | white(0) 45%,
89 | white(.3) 55%,
90 | white(.3) 65%,
91 | white(0) 80%,
92 | black(.2) 100%),
93 | linear-gradient(to bottom,
94 | transparent 30%,
95 | #e04435 30%,
96 | #ab2e22 100%)
97 |
98 | border: 1px solid #ddd
99 | border-right-width: 2px
100 | border-bottom-width: 5px
101 | border-top-width: 2px
102 | border-top-color: #eee
103 | border-bottom-left-radius: 150px 15px
104 | border-bottom-right-radius: 150px 15px
105 | border-top-left-radius: 120px 15px
106 | border-top-right-radius: 120px 15px
--------------------------------------------------------------------------------
/css/lib/entries/brazil.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Brazil Flag
4 |
5 | -----------------------------*/
6 |
7 | #brazil
8 | background: khaki
9 |
10 | div
11 | width: 300px
12 | height: 200px
13 | margin-left: -(@width/2)
14 | margin-top: -(@height/2)
15 |
16 | background: #fee63c
17 |
18 | background-image: linear-gradient(30deg, #019f6f 30%, transparent 30%),
19 | linear-gradient(-30deg, #019f6f 30%, transparent 30%),
20 | linear-gradient(210deg, #019f6f 30%, transparent 30%),
21 | linear-gradient(-210deg, #019f6f 30%, transparent 30%)
22 |
23 | box-shadow:7px 7px 0 black(.1)
24 |
25 | &:before
26 | width: 90px
27 | height: 90px
28 | margin-left: -(@width/2)
29 | margin-top: -(@height/2)
30 |
31 | left: 50%
32 | top: 50%
33 |
34 | background: #2765ae
35 |
36 | background-image: radial-gradient(circle at 0 175px,
37 | transparent 71%,
38 | white 72%,
39 | white 78%,
40 | transparent 79%)
41 |
42 | border-radius: 50%
43 |
44 | &:after
45 | width: 4px
46 | height: 4px
47 |
48 | top: 80px
49 | left: 160px
50 |
51 | background: white
52 |
53 | border-radius: 50%
54 |
55 | box-shadow: -45px 15px 0 0 white,
56 | -40px 30px 0 0 white,
57 | -27px 43px 0 0 white,
58 | -10px 36px 0 0 white,
59 | 13px 38px 0 0 white,
60 | -47px 32px 0 -1px white,
61 | -35px 25px 0 -1px white,
62 | -25px 20px 0 -1px white,
63 | -33px 34px 0 -1px white,
64 | -35px 40px 0 -1px white,
65 | -5px 22px 0 -1px white,
66 | -15px 26px 0 -1px white,
67 | -17px 32px 0 -1px white,
68 | -10px 29px 0 -1px white,
69 | -12px 53px 0 -1px white,
70 | 0px 42px 0 -1px white,
71 | 5px 48px 0 -1px white,
72 | 6px 43px 0 -1px white,
73 | 8px 40px 0 -1px white,
74 | 12px 45px 0 -1px white,
75 | 17px 35px 0 -1px white,
76 | 23px 37px 0 -1px white
--------------------------------------------------------------------------------
/css/lib/entries/breakfast.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Breakfast
4 |
5 | -----------------------------*/
6 |
7 | #breakfast
8 | background: darkcyan
9 |
10 | div
11 | width: 210px
12 | height: 210px
13 | margin-left: -(@width/2)
14 | margin-top: -(@height/2)
15 |
16 | border-radius: 50%
17 |
18 | background: #f7f7f7
19 |
20 | box-shadow: inset 0 2px 8px black(.1),
21 | 0 0 0 20px white,
22 | 0 6px 0 20px #eee,
23 | 0 12px 4px 20px black(.2)
24 |
25 | &:before
26 | width: 140px
27 | height: 140px
28 |
29 | left: 70px
30 | top: 0px
31 |
32 | border-radius: 50%
33 |
34 | background: #d6ab75
35 |
36 | box-shadow: 0 6px 0 #f1cb9a,
37 | 0 8px 2px black(.2),
38 |
39 | -132px 40px 0 -61px #f6c83e,
40 | -128px 40px 0 -54px #edb815,
41 | -128px 42px 2px -54px black(.2),
42 | -115px 30px 0 -30px white,
43 |
44 | -62px 90px 0 -61px #f6c83e,
45 | -65px 90px 0 -54px #edb815,
46 | -65px 92px 2px -54px black(.2),
47 | -80px 90px 0 -32px white,
48 |
49 | -115px 33px 2px -30px black(.1),
50 | -80px 93px 2px -32px black(.1),
51 |
52 | -8px 110px 0 -45px #8c7842,
53 | -8px 113px 2px -45px black(.2),
54 | 25px 103px 0 -45px #806c35,
55 | 25px 106px 2px -45px black(.2),
56 |
57 | -93px -40px 0 -45px #e4a5b6,
58 | -93px -39px 0 -42px #c97d91,
59 | -93px -37px 2px -42px black(.2)
60 |
61 | &:after
62 | width: 30px
63 | height: 30px
64 |
65 | left: 120px
66 | top: 50px
67 |
68 | border-radius: 2px
69 |
70 | background: #fbf6bc
71 |
72 | box-shadow: 1px 1px 0 2px #dfd888,
73 | 2px 2px 3px 2px black(.2)
74 |
75 | -webkit-transform: rotate(30deg)
76 | transform: rotate(30deg)
77 |
--------------------------------------------------------------------------------
/css/lib/entries/camera.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Old School Camera
4 |
5 | -----------------------------*/
6 |
7 | #camera
8 | background: orange
9 |
10 | //- camera body
11 | div
12 | width: 300px
13 | height: 130px
14 | margin-left: -(@width/2)
15 | margin-top: -(@height/2)
16 |
17 | z-index: 1
18 |
19 | background: linear-gradient(to right, #111 0%,#444 15%,#444 85%,#111 100%)
20 |
21 | border-top: 15px solid #ccc
22 | border-bottom: 12px solid #ccc
23 | border-image: linear-gradient(to right, #444, #ccc, #ccc, #ccc, #ccc, #444) 1% stretch
24 |
25 | box-shadow: 0 3px 4px -2px black(.6),
26 | 0 10px 7px -2px black(.4)
27 |
28 | //- rectangular pieces
29 | &:before
30 | width: 33px
31 | height: 18px
32 | margin-left: 30px
33 |
34 | top: -30px
35 | left: 50%
36 | z-index: 2
37 |
38 | background: #333
39 |
40 | box-shadow: 0 0 0 2px #eee,
41 | -1px -1px 1px 3px #333,
42 | -95px 6px 0 0 #ccc,
43 | 30px 3px 0 12px #ccc,
44 | -18px 37px 0 46px #ccc,
45 |
46 | -96px -6px 0 -6px #555,
47 | -96px -9px 0 -6px #ddd,
48 |
49 | -155px -10px 1px 3px #888,
50 | -165px -10px 1px 3px #999,
51 | -170px -10px 1px 3px #666,
52 | -162px -8px 0 5px #555,
53 |
54 | 85px -4px 1px -3px #ccc,
55 | 79px -4px 1px -3px #888,
56 | 82px 1px 0 -4px #555
57 |
58 | //- circular pieces
59 | &:after
60 | width: 100px
61 | height: 100px
62 | margin-left: -20px
63 |
64 | top: 15px
65 | left: 50%
66 | z-index: 3
67 |
68 | background: linear-gradient(45deg, #ccc 40%, #ddd 100%)
69 | border-radius: 50%
70 |
71 | box-shadow: 0 3px 2px #999,
72 | 1px -2px 0 white,
73 | -1px -3px 2px #555,
74 | 0 0 0 15px #c2c2c2,
75 | 0 -2px 0 15px white,
76 | -2px -5px 1px 17px #666,
77 | 0 10px 10px 15px black(.3),
78 |
79 | -90px -51px 1px -43px #aaa,
80 | -90px -50px 1px -40px #888,
81 | -90px -51px 0 -34px #ccc,
82 | -90px -50px 0 -30px #aaa,
83 | -90px -48px 1px -28px black(.2),
84 |
85 | -124px -73px 1px -48px #eee,
86 | -125px -72px 0 -46px #666,
87 | -85px -73px 1px -48px #eee,
88 | -86px -72px 0 -46px #666,
89 | 42px -82px 1px -48px #eee,
90 | 41px -81px 0 -46px #777,
91 | 67px -73px 1px -48px #eee,
92 | 66px -72px 0 -46px #666,
93 |
94 |
95 | -46px -86px 1px -45px #444,
96 | -44px -87px 0 -38px #333,
97 | -44px -86px 0 -37px #ccc,
98 | -44px -85px 0 -34px #999,
99 |
100 | 14px -89px 1px -48px #eee,
101 | 12px -84px 1px -48px #999,
102 | 23px -85px 0 -47px #444,
103 | 23px -87px 0 -46px #888
--------------------------------------------------------------------------------
/css/lib/entries/cpt-america.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Captain America
4 |
5 | -----------------------------*/
6 |
7 | #cpt-america
8 | background: #899d4e
9 |
10 | div
11 | width: 250px
12 | height: 250px
13 | margin-left: -(@width/2)
14 | margin-top: -140px
15 |
16 | z-index: 1
17 |
18 | background: linear-gradient(45deg,
19 | white(0) 35%,
20 | white(.4) 50%,
21 | white(0) 65%),
22 | linear-gradient(-45deg,
23 | white(0) 35%,
24 | white(.4) 50%,
25 | white(0) 65%),
26 | linear-gradient(to right,
27 | black(0) 35%,
28 | black(.2) 50%,
29 | black(0) 65%),
30 | linear-gradient(to bottom,
31 | black(0) 35%,
32 | black(.2) 50%,
33 | black(0) 65%),
34 | radial-gradient(ellipse at center,
35 | #0033b0 20%,
36 | #ce0021 20%,
37 | #ce0021 35%,
38 | #bbb 35%,
39 | #bbb 55%,
40 | #ce0021 55%)
41 |
42 | border-radius: 50%
43 |
44 | box-shadow: 0 3px 0 #a20917
45 |
46 |
47 | &:before
48 | width: 70px
49 | height: 70px
50 | margin-left: -(@width/2)
51 | margin-top: -35px
52 |
53 | top: 50%
54 | left: 50%
55 | z-index: 2
56 |
57 | background: rgba(0,80,170,.5)
58 | border-radius: 50%
59 |
60 | content: '★'
61 | font-size: 70px
62 | color: #ddd
63 | line-height: 65px
64 |
65 | text-shadow: -1px 1px 0 #3e92ff,
66 | 1px -1px 0 #1e436d
67 |
68 |
69 | &:after
70 | width: 200px
71 | height: 30px
72 | margin-left: -(@width/2)
73 |
74 | top: 215px
75 | left: 50%
76 |
77 | border-radius: 50%
78 |
79 | box-shadow: 0 50px 20px black(.15)
80 |
81 |
--------------------------------------------------------------------------------
/css/lib/entries/crayon.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Crayon
4 |
5 | -----------------------------*/
6 |
7 | #crayon
8 | background: #f3c114
9 |
10 | div
11 | width: 250px
12 | height: 40px
13 | margin-left: -(@width/2 - 15px)
14 | margin-top: -(@height/2)
15 |
16 | z-index: 1
17 |
18 | background: #237449
19 |
20 | background-image: radial-gradient(ellipse at top,
21 | black(.6) 50px,
22 | transparent 54px),
23 | linear-gradient(to right,
24 | transparent 25px,
25 | black(.6) 25px,
26 | black(.6) 30px,
27 | transparent 30px,
28 | transparent 35px,
29 | black(.6) 35px,
30 | black(.6) 40px,
31 | transparent 40px,
32 | transparent 210px,
33 | black(.6) 210px,
34 | black(.6) 215px,
35 | transparent 215px,
36 | transparent 220px,
37 | black(.6) 220px,
38 | black(.6) 225px,
39 | transparent 225px),
40 | linear-gradient(to right,
41 | transparent 12px,
42 | rgba(41,237,133,.6) 12px,
43 | rgba(41,237,133,.6) 235px,
44 | transparent 235px),
45 | linear-gradient(to bottom,
46 | transparent 62%,
47 | black(.3) 100%)
48 |
49 | border-radius: 2px
50 |
51 | box-shadow: 2px 2px 3px black(.3)
52 |
53 | &:before
54 | height: 10px
55 |
56 | left: -48px
57 | top: 2px
58 |
59 | border-right: 48px solid #237449
60 | border-bottom: 13px solid transparent
61 | border-top: 13px solid transparent
62 |
63 | &:after
64 | width: 251px
65 | height: 23px
66 |
67 | content: 'green'
68 | font-family: Arial, sans-serif
69 | font-size: 12px
70 | font-weight: bold
71 | color: black(.3)
72 | text-align: right
73 | padding-right: 47px
74 | padding-top: 17px
75 |
76 | left: -48px
77 |
78 | background-image: linear-gradient(to right,
79 | transparent 46px,
80 | black(.3) 48px,
81 | transparent 48px),
82 | linear-gradient(to bottom,
83 | white(0) 12px,
84 | white(.2) 17px,
85 | white(.2) 19px,
86 | white(0) 24px)
--------------------------------------------------------------------------------
/css/lib/entries/hobbit-door.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Hobbit door
4 |
5 | -----------------------------*/
6 |
7 | $brick = #c48b6c
8 |
9 | #hobbit-door
10 | background: tan
11 |
12 | div
13 | width: 250px
14 | height: 250px
15 | margin-left: -(@width/2)
16 | margin-top: -140px
17 |
18 | z-index: 1
19 |
20 | background-color: darken($brick, 40%)
21 |
22 | background-image: linear-gradient(to right,
23 | transparent 45%,
24 | darken($brick, 10%) 45%,
25 | darken($brick, 10%) 55%,
26 | transparent 55%),
27 | linear-gradient(76deg,
28 | transparent 45%,
29 | darken($brick, 20%) 45%,
30 | darken($brick, 20%) 55%,
31 | transparent 55%),
32 | linear-gradient(-76deg,
33 | transparent 45%,
34 | darken($brick, 15%) 45%,
35 | darken($brick, 15%) 55%,
36 | transparent 55%),
37 | linear-gradient(60deg,
38 | transparent 45%,
39 | darken($brick, 10%) 45%,
40 | darken($brick, 10%) 55%,
41 | transparent 55%),
42 | linear-gradient(-60deg,
43 | transparent 45%,
44 | $brick 45%,
45 | $brick 55%,
46 | transparent 55%),
47 | linear-gradient(42deg,
48 | transparent 45%,
49 | lighten($brick, 10%) 45%,
50 | lighten($brick, 10%) 55%,
51 | transparent 55%),
52 | linear-gradient(-42deg,
53 | transparent 45%,
54 | darken($brick, 10%) 45%,
55 | darken($brick, 10%) 55%,
56 | transparent 55%),
57 | linear-gradient(-24deg,
58 | transparent 45%,
59 | lighten($brick, 10%) 45%,
60 | lighten($brick, 10%) 55%,
61 | transparent 55%),
62 | linear-gradient(25deg,
63 | transparent 45%,
64 | darken($brick, 30%) 45%,
65 | darken($brick, 30%) 55%,
66 | transparent 55%),
67 | linear-gradient(-9deg,
68 | transparent 45%,
69 | $brick 45%,
70 | $brick 55%,
71 | transparent 55%),
72 | linear-gradient(7deg,
73 | transparent 44%,
74 | darken($brick, 10%) 44%,
75 | darken($brick, 10%) 55%,
76 | transparent 55%)
77 |
78 | border-radius: 50%
79 |
80 | box-shadow: 0 5px darken($brick, 30%)
81 |
82 | &:before
83 | width: 190px
84 | height: 190px
85 | margin-left: -(@width/2)
86 | margin-top: -(@height/2)
87 |
88 | top: 50%
89 | left: 50%
90 |
91 | background: #468e60
92 |
93 | background-image: repeating-linear-gradient(to right,
94 | transparent,
95 | transparent 22px,
96 | #26603b 22px,
97 | #26603b 24px,
98 | #73b38a 24px,
99 | #73b38a 25px)
100 |
101 |
102 | border-radius: 50%
103 |
104 | box-shadow: inset 0 5px 0 darken($brick, 50%),
105 | inset 0 12px 5px black(.3),
106 | inset 0 -4px 3px black(.2)
107 |
108 | &:after
109 | width: 25px
110 | height: 25px
111 | margin-left: -(@width/2)
112 | margin-top: -(@height/2)
113 |
114 | top: 50%
115 | left: 50%
116 |
117 | background: #ffeb8f
118 |
119 | border-radius: 50%
120 |
121 | box-shadow: inset 0 -6px 5px rgba(111,74,24,.5),
122 | 0 5px 3px black(.4)
123 |
124 |
125 |
--------------------------------------------------------------------------------
/css/lib/entries/key.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Skeleton Key
4 |
5 | -----------------------------*/
6 |
7 | #key
8 | background: #f7f7f7
9 |
10 | div
11 | width: 80px
12 | height: 100px
13 | margin-left: -180px
14 | margin-top: -70px
15 |
16 | border: 15px solid #fdf1cd
17 | border-radius: 50%
18 |
19 | box-shadow: -3px -3px 0 3px #fefffa,
20 | -4px -4px 1px 3px #c68628,
21 | -6px -5px 0 4px #feedac,
22 | 3px 2px 0 3px #fdf1cd,
23 | 7px 5px 3px 3px #2e1f07,
24 | 10px 7px 0 3px #c68628,
25 | inset 4px 3px 3px #2e1f07,
26 | inset 7px 5px 0 #c68628,
27 | inset 9px 7px 2px black(.4),
28 | inset 12px 10px 3px black(.2),
29 | inset -2px -2px 0 #fefffa,
30 | 12px 8px 3px 3px black(.4),
31 | 15px 12px 3px 3px black(.2)
32 |
33 | @media (max-width: 500px)
34 | -webkit-transform: scale(.7)
35 | transform: scale(.7)
36 | margin-left: -140px
37 |
38 |
39 | &:before
40 | width: 250px
41 | height: 30px
42 |
43 | left: 85px
44 | top: 35px
45 |
46 | background-image: linear-gradient(to bottom,
47 | #f8d675 3%,
48 | #f8d675 7%,
49 | #2e1f07 11%,
50 | #2e1f07 16%,
51 | #fefffa 23%,
52 | #fefffa 50%,
53 | #2e1f07 57%,
54 | #2e1f07 70%,
55 | #feedac 84%,
56 | #feedac 97%,
57 | #c68628 99%)
58 |
59 | border-top-right-radius: 8px
60 | border-bottom-right-radius: 8px
61 | border-top-left-radius: 15px
62 | border-bottom-left-radius: 15px
63 |
64 | border-left: 1px solid #fefffa
65 | border-right: 1px solid #f8d675
66 |
67 | box-shadow: -1px 0 0 #c68628,
68 | 1px 0 0 #2e1f07,
69 | 2px 0 0 #c68628,
70 | 5px 4px 2px -1px black(.4),
71 | 11px 9px 4px black(.2)
72 |
73 | &:after
74 | width: 40px
75 | height: 40px
76 |
77 | top: 30px
78 | left: 112px
79 |
80 | background-image: linear-gradient(to bottom,
81 | #f8d675 3%,
82 | #f8d675 7%,
83 | #2e1f07 11%,
84 | #2e1f07 16%,
85 | #fefffa 23%,
86 | #fefffa 45%,
87 | #2e1f07 52%,
88 | #2e1f07 65%,
89 | #feedac 80%,
90 | #feedac 97%,
91 | #c68628 99%)
92 |
93 | box-shadow: -1px 0 1px #fefffa,
94 | 1px 0 0 #f8d675,
95 | 2px 0 0 #c68628,
96 | 3px 3px 2px black(.2),
97 | 170px 37px 0 4px #f8e6b3,
98 | 169px 37px 0 4px #fefffa,
99 | 170px 34px 0 4px #2e1f07,
100 | 171px 39px 2px 4px #2e1f07,
101 | 172px 40px 0 5px #d69941,
102 | 174px 43px 3px 4px black(.4),
103 | 178px 45px 4px 4px black(.2)
--------------------------------------------------------------------------------
/css/lib/entries/macarons.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | French macarons
4 |
5 | -----------------------------*/
6 |
7 | #macarons
8 | background: #eee
9 |
10 | div
11 | width: 110px
12 | height: 180px
13 | margin-left: -(@width/2)
14 | margin-top: -(@height/2)
15 |
16 | background-image: linear-gradient(to top, transparent 21px,
17 | #7b5354 21px,
18 | #7b5354 26px,
19 | transparent 26px,
20 | transparent 66px,
21 | #ffd889 66px,
22 | #ffd889 71px,
23 | transparent 71px,
24 | transparent 110px,
25 | #548355 110px,
26 | #548355 115px,
27 | transparent 115px,
28 | transparent 155px,
29 | #965537 155px,
30 | #965537 160px,
31 | transparent 160px)
32 |
33 | //- bottom halves
34 | &:before
35 | width: 110px
36 | height: 20px
37 |
38 | bottom: 0
39 |
40 | border-radius: 6px
41 | border-bottom-left-radius: 80px 20px
42 | border-bottom-right-radius: 80px 20px
43 |
44 | background: #fa8780
45 |
46 | box-shadow: 0 -45px 0 #ffba10,
47 | 0 -89px 0 #a8daa9,
48 | 0 -134px 0 #d1a574
49 |
50 | //- top halves
51 | &:after
52 | width: 110px
53 | height: 20px
54 |
55 | bottom: 25px
56 |
57 | border-radius: 6px
58 | border-top-left-radius: 80px 20px
59 | border-top-right-radius: 80px 20px
60 |
61 | background: #fa8780
62 |
63 | box-shadow: 0 -44px 0 #ffba10,
64 | 0 -89px 0 #a8daa9,
65 | 0 -134px 0 #d1a574
--------------------------------------------------------------------------------
/css/lib/entries/mario-mushroom.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Super Mario Mushroom
4 |
5 | -----------------------------*/
6 |
7 | #mario-mushroom
8 | background: #74ceff
9 |
10 | div
11 | width: 170px
12 | height: 140px
13 | margin-left: -(@width/2)
14 | margin-top: -90px
15 |
16 | background-image: radial-gradient(circle at 50% 120%,
17 | black(.7) 23%,
18 | black(0) 48%),
19 | linear-gradient(30deg,
20 | black(.4) 10%,
21 | black(0) 20%),
22 | radial-gradient(circle at 50% 33%,
23 | #f8f6f7 32%,
24 | white(0) 32%),
25 | radial-gradient(circle at -13% 55%,
26 | #f8f6f7 20%,
27 | white(0) 20%),
28 | radial-gradient(circle at 113% 55%,
29 | #f8f6f7 20%,
30 | white(0) 20%),
31 | linear-gradient(to bottom,
32 | #ef0015 20%,
33 | #b2000c 100%)
34 |
35 | border-radius: 140px 140px 80px 80px
36 |
37 | &:before
38 | width: 100px
39 | height: 66px
40 |
41 | left: 35px
42 | bottom: -30px
43 |
44 | background: #f1d38b
45 |
46 | border-top-right-radius: 180px 100px
47 | border-top-left-radius: 180px 100px
48 | border-bottom-right-radius: 140px 100px
49 | border-bottom-left-radius: 140px 100px
50 |
51 | border-top: 1px solid #53170f
52 |
53 | box-shadow: inset 0 15px 10px black(.25),
54 | inset -12px -5px 10px black(.2),
55 | inset 5px -2px 10px black(.2)
56 |
57 | &:after
58 | width: 8px
59 | height: 25px
60 |
61 | top: 120px
62 | left: 58px
63 |
64 | background: black(0)
65 |
66 | box-shadow: 8px 0 #312114,
67 | 38px 0 #312114
68 |
69 | border-radius: 40%
--------------------------------------------------------------------------------
/css/lib/entries/mario-tube.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Super Mario Tube
4 |
5 | -----------------------------*/
6 |
7 | #mario-tube
8 | background: #8cb4ff
9 |
10 | div
11 | width: 170px
12 | height: 250px
13 | margin-left: -(@width/2)
14 | margin-top: -50px
15 |
16 | background-image: linear-gradient(to bottom,
17 | black(.5) 4%,
18 | black(0) 10%),
19 | linear-gradient(-150deg,
20 | black(.4) 10%,
21 | black(0) 20%),
22 | linear-gradient(to right,
23 | #2a7d2f 0%,
24 | #78fc73 25%,
25 | #78fc73 35%,
26 | #113e15 95%)
27 |
28 | border-left: 1px solid #236d22
29 |
30 | &:before
31 | width: 210px
32 | height: 60px
33 | margin-left: -20px
34 |
35 | top: -@height
36 |
37 | background-image: linear-gradient(to bottom,
38 | white(0) 1px,
39 | white(.3) 2px,
40 | white(.3) 3px,
41 | white(0) 4px),
42 | linear-gradient(to top,
43 | black(.4) 3px,
44 | white(.2) 5px,
45 | white(0) 6px),
46 | linear-gradient(to right,
47 | #2a7d2f 0%,
48 | #78fc73 25%,
49 | #78fc73 35%,
50 | #113e15 95%)
51 |
52 | border-radius: 5px
53 |
54 | &:after
55 | width: 40px
56 | height: 2px
57 |
58 | background: linear-gradient(to right,
59 | white(0) 5%,
60 | white(.7) 20%,
61 | white(.7) 80%,
62 | white(0) 95%)
63 |
64 | top: -58px
65 | left: 30px
66 |
67 | @media (max-width: 400px)
68 |
69 | margin-top: -25px
--------------------------------------------------------------------------------
/css/lib/entries/marker.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Map marker
4 |
5 | -----------------------------*/
6 |
7 | #marker
8 | background: gainsboro
9 |
10 | div
11 | width: 80px
12 | height: @width
13 | margin-left: -80px
14 | margin-top: -110px
15 |
16 | background: red
17 |
18 | background-image: radial-gradient(circle at 25px 23px,
19 | white 7%,
20 | white(0) 40%)
21 |
22 | box-shadow: inset -5px -5px 10px red,
23 | inset -18px -23px 15px black(.2)
24 |
25 | border-radius: 50%
26 |
27 | &:before
28 | width: 130px
29 | height: 150px
30 |
31 | top: 80px
32 | left: 34px
33 |
34 |
35 | background-image: linear-gradient(to right,
36 | #eee 3px,
37 | #777 12px,
38 | transparent 12px),
39 | linear-gradient(-20deg,
40 | rgba(178,175,175,0) 37px,
41 | #b2afaf 44px,
42 | #b2afaf 45px,
43 | rgba(178,175,175,0) 52px)
44 |
45 | &:after
46 | width: 60px
47 | height: 45px
48 |
49 | top: 152px
50 | left: 147px
51 |
52 | background-image: linear-gradient(20deg, #b2afaf 30%,
53 | rgba(178,175,175,0) 90%)
54 |
55 | border-radius: 50%
56 |
57 | box-shadow: -1px 2px 3px #b2afaf
58 |
59 | -webkit-transform: rotate(20deg)
60 | transform: rotate(20deg)
--------------------------------------------------------------------------------
/css/lib/entries/marshmallow.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Marshmallow
4 |
5 | -----------------------------*/
6 |
7 | #marshmallow
8 | background: mediumaquamarine
9 |
10 | div
11 | width: 100px
12 | height: 120px
13 | margin-left: -(@width/2)
14 | margin-top: -(@height/2 + 10)
15 |
16 | background: white
17 |
18 | background-image: radial-gradient(circle at 50% -70px,
19 | transparent 50%,
20 | #f5f5f5 50%)
21 |
22 | border-top-left-radius: 100px 40px
23 | border-top-right-radius: 100px 40px
24 | border-bottom-left-radius: 100px 40px
25 | border-bottom-right-radius: 100px 40px
26 |
27 | border: 4px solid gray
28 |
29 | &:before
30 | width: 8px
31 | height: 80px
32 | margin-left: -(@width/2)
33 |
34 | left: 50%
35 | top: 125px
36 |
37 | background: lightgrey
38 |
39 | box-shadow: 0 0 0 3px gray,
40 | 0 -193px 0 lightgrey,
41 | 0 -193px 0 3px gray
42 |
43 | &:after
44 | width: 10px
45 | height: 10px
46 |
47 | left: 20px
48 | top: 50px
49 |
50 | background: gray
51 |
52 | border-radius: 50%
53 |
54 | box-shadow: 50px 0 0 gray,
55 | 25px 3px 0 16px #f5f5f5,
56 | 25px 13px 0 11px gray
57 |
58 |
--------------------------------------------------------------------------------
/css/lib/entries/mickey-hat.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Mickey Hat
4 |
5 | -----------------------------*/
6 |
7 | #mickey-hat
8 | background: lightpink
9 |
10 | div
11 | width: 200px
12 | height: 200px
13 | margin-left: -(@width/2)
14 | margin-top: -70px
15 |
16 | border-radius: 0 70% 0 100%
17 | border-bottom: 7px solid #333
18 | border-left: 7px solid #333
19 |
20 | background: #222
21 | background-image: radial-gradient(circle at 170px 220px,
22 | white(0) 70%,
23 | white(.15) 90%),
24 | radial-gradient(circle at 50px 80px,
25 | transparent 60%,
26 | #000 90%)
27 |
28 | box-shadow: -7px 7px 6px -2px rgba(0,0,0,.3)
29 |
30 | -webkit-transform: rotate(-45deg)
31 | transform: rotate(-45deg)
32 |
33 | @media (max-width: 500px)
34 |
35 | -webkit-transform: scale(.7) rotate(-45deg)
36 | transform: scale(.7) rotate(-45deg)
37 |
38 | &:before
39 | width: 110px
40 | height: 110px
41 |
42 | top: -102px
43 | left: 29px
44 |
45 | background: #333
46 | background-image: radial-gradient(circle at 80px 0px,
47 | transparent 60%,
48 | white(.2) 90%)
49 |
50 | border-radius: 50%
51 |
52 | box-shadow: -4px 4px 0 4px #222
53 |
54 | &:after
55 | width: 110px
56 | height: 110px
57 |
58 | top: 56px
59 | left: 192px
60 |
61 | background: #333
62 | background-image: radial-gradient(circle at 80px 0px,
63 | transparent 60%,
64 | white(.2) 90%)
65 |
66 | border-radius: 50%
67 |
68 | box-shadow: -4px 4px 0 4px #222,
69 | -144px -45px 0 -44px #222,
70 | -115px -15px 0 -44px #222,
71 | -142px -22px 0 -53px #222,
72 | -138px -18px 0 -53px #222,
73 | -143px -17px 0 -54px white,
74 | -144px -16px 0 -51px #222,
75 | -142px -23px 0 -50px white,
76 | -137px -18px 0 -50px white,
77 | -151px -9px 0 -54px #e95b4f,
78 | -150px -10px 0 -52px #222,
79 | -142px -18px 0 -40px #d3b579,
80 | -141px -19px 0 -36px #222,
81 | -141px -19px 0 -28px white,
82 | -141px -18px 0 -11px #e95b4f
--------------------------------------------------------------------------------
/css/lib/entries/moleskine.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Moleskine notebook
4 |
5 | -----------------------------*/
6 |
7 | #moleskine
8 | background: #84c3c9
9 |
10 | div
11 | width: 170px
12 | height: 250px
13 | margin-left: -(@width/2)
14 | margin-top: -133px
15 |
16 | background-image: linear-gradient(to bottom,
17 | #444 0,
18 | #222 100%)
19 |
20 | border-radius: 3px 10px 10px 3px
21 |
22 | box-shadow: 0 5px 0 white,
23 | 0 7px 0 #222,
24 | 3px 10px 2px black(.3)
25 |
26 | &:before
27 | width: 170px
28 | height: 257px
29 |
30 | background-image: linear-gradient(to right,
31 | transparent 130px,
32 | #333 130px,
33 | #333 140px,
34 | transparent 140px),
35 | linear-gradient(to bottom,
36 | transparent 33%,
37 | #ff8613 33%,
38 | #ff8613 68%,
39 | transparent 68%),
40 | linear-gradient(to right,
41 | #444 3px,
42 | white(.1) 4px,
43 | white(0) 8px)
44 |
45 | &:after
46 | width: 60px
47 | height: 40px
48 |
49 | left: 13px
50 | top: 105px
51 |
52 | background: white
53 |
54 | background-image: linear-gradient(to right,
55 | transparent 29px,
56 | #777 29px,
57 | #777 31px,
58 | transparent 31px)
59 |
60 | border: 2px solid #777
61 |
62 | box-shadow: -20px 125px 0 -21px #777
--------------------------------------------------------------------------------
/css/lib/entries/soccer.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Soccer
4 |
5 | -----------------------------*/
6 |
7 | #soccer
8 | background: paleturquoise
9 |
10 | div
11 | width: 300px
12 | height: 70px
13 | margin-left: -(@width/2)
14 |
15 | border-top: 3px solid white
16 | border-bottom: 3px solid white
17 |
18 | &:before
19 | width: 150px
20 | height: 100px
21 | margin-left: -(@width/2 + 5px)
22 |
23 | left: 50%
24 | top: -95px
25 |
26 | background: repeating-linear-gradient(45deg,
27 | transparent,
28 | transparent 10px,
29 | white 10px,
30 | white 11px),
31 | repeating-linear-gradient(-45deg,
32 | transparent,
33 | transparent 10px,
34 | white 10px,
35 | white 11px)
36 |
37 | border-top-right-radius: 5px
38 | border-top-left-radius: 5px
39 |
40 | border: 6px solid white
41 | border-bottom: none
42 |
43 | &:after
44 | width: 20px
45 | height: 20px
46 |
47 | left: 170px
48 | top: 20px
49 |
50 | border: 3px solid white
51 | border-radius: 50%
--------------------------------------------------------------------------------
/css/lib/entries/sushi.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Sushi
4 |
5 | -----------------------------*/
6 |
7 | #sushi
8 | background: skyblue
9 |
10 | div
11 | width: 250px
12 | height: 100px
13 | margin-left: -(@width/2)
14 | margin-top: -(@height/2 - 13)
15 |
16 | background: white
17 |
18 | border-top-left-radius: 80px 50px
19 | border-top-right-radius: 80px 50px
20 | border-bottom-left-radius: 40px 50px
21 | border-bottom-right-radius: 40px 50px
22 |
23 | background-image: linear-gradient(to bottom,
24 | black(.08) 0%,
25 | black(.08) 32%,
26 | transparent 32%),
27 | linear-gradient(85deg,
28 | transparent 39%,
29 | black(.05) 39%,
30 | black(.05) 45%,
31 | transparent 45%)
32 |
33 | box-shadow: 0 25px 0 -20px black(.1)
34 |
35 | &:before
36 | width:260px
37 | height: 25px
38 | margin-left: -(@width/2)
39 |
40 | left: 50%
41 |
42 | border-top-left-radius: 90px 30px
43 | border-top-right-radius: 80px 20px
44 |
45 | background: #f19861
46 |
47 | background-image: linear-gradient(to bottom, transparent 70%,
48 | black(.05) 70%),
49 | linear-gradient(to right, transparent 41%,
50 | black(.1) 41%,
51 | black(.1) 50%,
52 | transparent 50%),
53 | repeating-linear-gradient(45deg,
54 | #f19861,
55 | #f19861 20px,
56 | #ffcdaf 20px,
57 | #ffcdaf 25px)
58 |
59 | &:after
60 | width: 40px
61 | height: 103px
62 | margin-left: -(@width/2)
63 |
64 | left: 50%
65 | top: -2px
66 |
67 | background: #465b45
68 |
69 | background-image: linear-gradient(to right, transparent 60%,
70 | black(.1) 60%)
--------------------------------------------------------------------------------
/css/lib/entries/tardis.styl:
--------------------------------------------------------------------------------
1 | /*-----------------------------
2 |
3 | Tardis
4 |
5 | -----------------------------*/
6 |
7 | $tardis = #295185
8 |
9 | #tardis
10 | background: darkslategray
11 |
12 | div
13 | width: 170px
14 | height: 250px
15 | margin-left: -(@width/2)
16 | margin-top: -110px
17 |
18 | background: darken($tardis, 5%)
19 | background-image: linear-gradient(to right,
20 | $tardis 15px,
21 | darken($tardis, 20%) 15px,
22 | darken($tardis, 20%) 17px,
23 | darken($tardis, 8%) 17px,
24 | darken($tardis, 8%) 20px,
25 | darken($tardis, 20%) 20px,
26 | darken($tardis, 20%) 22px,
27 | darken($tardis, 5%) 22px,
28 | darken($tardis, 5%) 32px,
29 | transparent 32px,
30 | transparent 83px,
31 | darken($tardis, 30%) 83px,
32 | darken($tardis, 30%) 85px,
33 | darken($tardis, 20%) 85px,
34 | darken($tardis, 20%) 87px,
35 | darken($tardis, 30%) 87px,
36 | darken($tardis, 30%) 89px,
37 | transparent 90px),
38 | linear-gradient(to left,
39 | $tardis 15px,
40 | darken($tardis, 20%) 15px,
41 | darken($tardis, 20%) 17px,
42 | darken($tardis, 8%) 17px,
43 | darken($tardis, 8%) 20px,
44 | darken($tardis, 20%) 20px,
45 | darken($tardis, 20%) 22px,
46 | darken($tardis, 5%) 22px,
47 | darken($tardis, 5%) 32px,
48 | transparent 32px,
49 | transparent 75px,
50 | darken($tardis, 5%) 75px,
51 | darken($tardis, 5%) 95px,
52 | transparent 95px),
53 | linear-gradient(to bottom,
54 | transparent 85px,
55 | darken($tardis, 12%) 85px,
56 | darken($tardis, 12%) 130px,
57 | transparent 130px,
58 | transparent 140px,
59 | darken($tardis, 12%) 140px,
60 | darken($tardis, 12%) 185px,
61 | transparent 185px,
62 | transparent 195px,
63 | darken($tardis, 12%) 195px,
64 | darken($tardis, 12%) 240px,
65 | transparent 240px),
66 | linear-gradient(to bottom,
67 | transparent 52px,
68 | darken($tardis, 5%) 52px,
69 | darken($tardis, 5%) 54px,
70 | transparent 54px),
71 | linear-gradient(to right,
72 | transparent 44px,
73 | darken($tardis, 5%) 44px,
74 | darken($tardis, 5%) 46px,
75 | transparent 46px,
76 | transparent 60px,
77 | darken($tardis, 5%) 60px,
78 | darken($tardis, 5%) 62px,
79 | transparent 62px,
80 | transparent 108px,
81 | darken($tardis, 5%) 108px,
82 | darken($tardis, 5%) 110px,
83 | transparent 110px,
84 | transparent 124px,
85 | darken($tardis, 5%) 124px,
86 | darken($tardis, 5%) 126px,
87 | transparent 126px),
88 | linear-gradient(to bottom,
89 | transparent 30px,
90 | white(.4) 30px,
91 | white(.9) 75px,
92 | transparent 75px)
93 |
94 | border-bottom: 8px solid lighten($tardis, 3%)
95 |
96 | box-shadow: 0 12px 0 darken($tardis, 20%),
97 | 0 18px 8px -3px black(.3)
98 |
99 | &:before
100 | width: 150px
101 | height: 18px
102 | margin-left: -(@width/2)
103 | margin-top: -8px
104 |
105 | left: 50%
106 |
107 | content: 'POLICE BOX'
108 | font-family: Verdana, Helvetica, sans-serif
109 | font-size: 10px
110 | letter-spacing: 5px
111 | line-height: 18px
112 | color: white(.8)
113 |
114 | background: #333
115 |
116 | box-shadow: 0 0 0 4px $tardis,
117 | 0 4px 4px 4px black(.3),
118 | 0 -15px 0 darken($tardis, 5%),
119 | 0 -27px 0 -6px $tardis,
120 | 0 -32px 0 -6px $tardis
121 |
122 | &:after
123 | width: 15px
124 | height: 20px
125 | margin-left: -(@width/2)
126 |
127 | left: 50%
128 | top: -62px
129 |
130 | background: white(.7)
131 | background-image: linear-gradient(to right,
132 | transparent 5px,
133 | lighten($tardis, 10%) 5px,
134 | lighten($tardis, 10%) 6px,
135 | transparent 6px),
136 | linear-gradient(to bottom,
137 | transparent 5px,
138 | lighten($tardis, 10%) 5px,
139 | lighten($tardis, 10%) 6px,
140 | transparent 6px,
141 | transparent 13px,
142 | lighten($tardis, 10%) 13px,
143 | lighten($tardis, 10%) 14px,
144 | transparent 14px)
145 |
146 |
147 | border-bottom: 3px solid lighten($tardis, 10%)
148 | border-top: 5px solid lighten($tardis, 10%)
149 |
150 | box-shadow: 0 -2px 10px -1px white(.5),
151 | -39px 155px 0 white(.6),
152 | -24px 155px 0 white(.6)
--------------------------------------------------------------------------------
/css/lib/main.styl:
--------------------------------------------------------------------------------
1 | @import 'components/mixins'
2 | @import 'components/header'
3 | @import 'components/entry'
4 |
5 | @import 'entries/camera'
6 | @import 'entries/bloody-mary'
7 | @import 'entries/cpt-america'
8 | @import 'entries/breakfast'
9 | @import 'entries/battery'
10 | @import 'entries/marshmallow'
11 | @import 'entries/sushi'
12 | @import 'entries/brazil'
13 | @import 'entries/soccer'
14 | @import 'entries/key'
15 | @import 'entries/mickey-hat'
16 | @import 'entries/hobbit-door'
17 | @import 'entries/tardis'
18 | @import 'entries/marker'
19 | @import 'entries/crayon'
20 | @import 'entries/moleskine'
21 | @import 'entries/macarons'
22 | @import 'entries/mario-tube'
23 | @import 'entries/mario-mushroom'
--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
1 | header {
2 | padding: 10px 80px 7px 15px;
3 | position: relative;
4 | background: #333;
5 | color: white;
6 | font-family: Georgia, Times, serif;
7 | font-size: 15px;
8 | }
9 | header h1,
10 | header p {
11 | display: inline-block;
12 | }
13 | header h1 {
14 | margin-bottom: 5px;
15 | }
16 | header p {
17 | color: #bed4dc;
18 | }
19 | header p a {
20 | color: #67b1cd;
21 | text-decoration: none;
22 | border-bottom: 1px dotted;
23 | }
24 | header .share-link {
25 | padding: 15px 10px 7px;
26 | position: absolute;
27 | right: 15px;
28 | top: -8px;
29 | background: #55acee;
30 | border-radius: 5px;
31 | color: white;
32 | text-decoration: none;
33 | font-style: normal;
34 | font-size: 12px;
35 | font-family: Helvetica, Arial, sans-serif;
36 | }
37 | header .share-link:hover {
38 | background: #469cd1;
39 | }
40 | @media (max-width: 500px) {
41 | header {
42 | padding: 15px 80px 15px 15px;
43 | }
44 | }
45 | .entry {
46 | text-align: center;
47 | min-height: 400px;
48 | position: relative;
49 | }
50 | .entry div {
51 | position: absolute;
52 | left: 50%;
53 | top: 50%;
54 | }
55 | .entry div:before,
56 | .entry div:after {
57 | display: block;
58 | content: '';
59 | position: absolute;
60 | }
61 | @media (max-width: 400px) {
62 | .entry div {
63 | -webkit-transform: scale(0.8);
64 | transform: scale(0.8);
65 | }
66 | }
67 | .cf:before,
68 | .cf:after {
69 | content: " ";
70 | display: table;
71 | }
72 | .cf:after {
73 | clear: both;
74 | }
75 | @media all and (min-width: 960px) {
76 | .entry {
77 | float: left;
78 | width: 50%;
79 | }
80 | .entry.wide {
81 | width: 100%;
82 | }
83 | }
84 | #camera {
85 | background: #ffa500;
86 | }
87 | #camera div {
88 | width: 300px;
89 | height: 130px;
90 | margin-left: -150px;
91 | margin-top: -65px;
92 | z-index: 1;
93 | background: linear-gradient(to right, #111 0%, #444 15%, #444 85%, #111 100%);
94 | border-top: 15px solid #ccc;
95 | border-bottom: 12px solid #ccc;
96 | border-image: linear-gradient(to right, #444, #ccc, #ccc, #ccc, #ccc, #444) 1% stretch;
97 | box-shadow: 0 3px 4px -2px rgba(0,0,0,0.6), 0 10px 7px -2px rgba(0,0,0,0.4);
98 | }
99 | #camera div:before {
100 | width: 33px;
101 | height: 18px;
102 | margin-left: 30px;
103 | top: -30px;
104 | left: 50%;
105 | z-index: 2;
106 | background: #333;
107 | box-shadow: 0 0 0 2px #eee, -1px -1px 1px 3px #333, -95px 6px 0 0 #ccc, 30px 3px 0 12px #ccc, -18px 37px 0 46px #ccc, -96px -6px 0 -6px #555, -96px -9px 0 -6px #ddd, -155px -10px 1px 3px #888, -165px -10px 1px 3px #999, -170px -10px 1px 3px #666, -162px -8px 0 5px #555, 85px -4px 1px -3px #ccc, 79px -4px 1px -3px #888, 82px 1px 0 -4px #555;
108 | }
109 | #camera div:after {
110 | width: 100px;
111 | height: 100px;
112 | margin-left: -20px;
113 | top: 15px;
114 | left: 50%;
115 | z-index: 3;
116 | background: linear-gradient(45deg, #ccc 40%, #ddd 100%);
117 | border-radius: 50%;
118 | box-shadow: 0 3px 2px #999, 1px -2px 0 white, -1px -3px 2px #555, 0 0 0 15px #c2c2c2, 0 -2px 0 15px white, -2px -5px 1px 17px #666, 0 10px 10px 15px rgba(0,0,0,0.3), -90px -51px 1px -43px #aaa, -90px -50px 1px -40px #888, -90px -51px 0 -34px #ccc, -90px -50px 0 -30px #aaa, -90px -48px 1px -28px rgba(0,0,0,0.2), -124px -73px 1px -48px #eee, -125px -72px 0 -46px #666, -85px -73px 1px -48px #eee, -86px -72px 0 -46px #666, 42px -82px 1px -48px #eee, 41px -81px 0 -46px #777, 67px -73px 1px -48px #eee, 66px -72px 0 -46px #666, -46px -86px 1px -45px #444, -44px -87px 0 -38px #333, -44px -86px 0 -37px #ccc, -44px -85px 0 -34px #999, 14px -89px 1px -48px #eee, 12px -84px 1px -48px #999, 23px -85px 0 -47px #444, 23px -87px 0 -46px #888;
119 | }
120 | #bloody-mary {
121 | background: #b0e0e6;
122 | }
123 | #bloody-mary div {
124 | width: 180px;
125 | height: 100px;
126 | margin-left: -90px;
127 | margin-top: 10px;
128 | z-index: 2;
129 | background: linear-gradient(to right, #eee 0%, #db493e 3%, #b8423a 5%, #53646e 7%, #b8423a 9%, #53646e 11%, #53646e 14%, #bfc9ca 33%, #eee 41%, #eee 75%, #95a4a3 85%, #556168 90%, #7c8285 98%, white 100%);
130 | border-bottom-left-radius: 80px 10px;
131 | border-bottom-right-radius: 80px 10px;
132 | border-bottom: 2px solid #ddd;
133 | box-shadow: 0 3px 4px -3px rgba(0,0,0,0.4), 0 8px 7px -3px rgba(0,0,0,0.2);
134 | }
135 | #bloody-mary div:before {
136 | width: 40px;
137 | height: 95px;
138 | margin-left: 40px;
139 | top: -140px;
140 | left: 50%;
141 | z-index: 1;
142 | background: #d7e17f;
143 | background: linear-gradient(to right, #cdeca8 10%, #a2d269 18%, #a2d269 25%, #bde192 45%, #bde192 55%, #95c260 75%, #95c260 82%, #bde192 90%);
144 | border-top-left-radius: 20px 3px;
145 | border-top-right-radius: 20px 3px;
146 | border-top: 5px solid #95c260;
147 | box-shadow: -65px 111px 0 14px #eee;
148 | -webkit-transform: rotate(15deg);
149 | transform: rotate(15deg);
150 | }
151 | #bloody-mary div:after {
152 | width: 177px;
153 | height: 170px;
154 | margin-left: -90px;
155 | top: -105px;
156 | left: 50%;
157 | z-index: 3;
158 | background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0.3) 65%, rgba(255,255,255,0) 80%, rgba(0,0,0,0.2) 100%), linear-gradient(to bottom, transparent 30%, #e04435 30%, #ab2e22 100%);
159 | border: 1px solid #ddd;
160 | border-right-width: 2px;
161 | border-bottom-width: 5px;
162 | border-top-width: 2px;
163 | border-top-color: #eee;
164 | border-bottom-left-radius: 150px 15px;
165 | border-bottom-right-radius: 150px 15px;
166 | border-top-left-radius: 120px 15px;
167 | border-top-right-radius: 120px 15px;
168 | }
169 | #cpt-america {
170 | background: #899d4e;
171 | }
172 | #cpt-america div {
173 | width: 250px;
174 | height: 250px;
175 | margin-left: -125px;
176 | margin-top: -140px;
177 | z-index: 1;
178 | background: linear-gradient(45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%), linear-gradient(-45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%), linear-gradient(to right, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%), linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%), radial-gradient(ellipse at center, #0033b0 20%, #ce0021 20%, #ce0021 35%, #bbb 35%, #bbb 55%, #ce0021 55%);
179 | border-radius: 50%;
180 | box-shadow: 0 3px 0 #a20917;
181 | }
182 | #cpt-america div:before {
183 | width: 70px;
184 | height: 70px;
185 | margin-left: -35px;
186 | margin-top: -35px;
187 | top: 50%;
188 | left: 50%;
189 | z-index: 2;
190 | background: rgba(0,80,170,0.5);
191 | border-radius: 50%;
192 | content: '★';
193 | font-size: 70px;
194 | color: #ddd;
195 | line-height: 65px;
196 | text-shadow: -1px 1px 0 #3e92ff, 1px -1px 0 #1e436d;
197 | }
198 | #cpt-america div:after {
199 | width: 200px;
200 | height: 30px;
201 | margin-left: -100px;
202 | top: 215px;
203 | left: 50%;
204 | border-radius: 50%;
205 | box-shadow: 0 50px 20px rgba(0,0,0,0.15);
206 | }
207 | #breakfast {
208 | background: #008b8b;
209 | }
210 | #breakfast div {
211 | width: 210px;
212 | height: 210px;
213 | margin-left: -105px;
214 | margin-top: -105px;
215 | border-radius: 50%;
216 | background: #f7f7f7;
217 | box-shadow: inset 0 2px 8px rgba(0,0,0,0.1), 0 0 0 20px white, 0 6px 0 20px #eee, 0 12px 4px 20px rgba(0,0,0,0.2);
218 | }
219 | #breakfast div:before {
220 | width: 140px;
221 | height: 140px;
222 | left: 70px;
223 | top: 0px;
224 | border-radius: 50%;
225 | background: #d6ab75;
226 | box-shadow: 0 6px 0 #f1cb9a, 0 8px 2px rgba(0,0,0,0.2), -132px 40px 0 -61px #f6c83e, -128px 40px 0 -54px #edb815, -128px 42px 2px -54px rgba(0,0,0,0.2), -115px 30px 0 -30px white, -62px 90px 0 -61px #f6c83e, -65px 90px 0 -54px #edb815, -65px 92px 2px -54px rgba(0,0,0,0.2), -80px 90px 0 -32px white, -115px 33px 2px -30px rgba(0,0,0,0.1), -80px 93px 2px -32px rgba(0,0,0,0.1), -8px 110px 0 -45px #8c7842, -8px 113px 2px -45px rgba(0,0,0,0.2), 25px 103px 0 -45px #806c35, 25px 106px 2px -45px rgba(0,0,0,0.2), -93px -40px 0 -45px #e4a5b6, -93px -39px 0 -42px #c97d91, -93px -37px 2px -42px rgba(0,0,0,0.2);
227 | }
228 | #breakfast div:after {
229 | width: 30px;
230 | height: 30px;
231 | left: 120px;
232 | top: 50px;
233 | border-radius: 2px;
234 | background: #fbf6bc;
235 | box-shadow: 1px 1px 0 2px #dfd888, 2px 2px 3px 2px rgba(0,0,0,0.2);
236 | -webkit-transform: rotate(30deg);
237 | transform: rotate(30deg);
238 | }
239 | #battery {
240 | background: black;
241 | }
242 | #battery div {
243 | width: 250px;
244 | height: 120px;
245 | margin-left: -130px;
246 | margin-top: -60px;
247 | border-radius: 10px/30px;
248 | border-left: 2px solid rgba(255,255,255,0.2);
249 | border-right: 2px solid rgba(255,255,255,0.2);
250 | background-image: linear-gradient(to right, transparent 5%, #316d08 5%, #316d08 7%, #60b939 8%, #60b939 10%, #51aa31 11%, #51aa31 60%, #64ce11 61%, #64ce11 63%, #255405 63%, black 68%, black 95%, transparent 95%), linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0.2) 7%, rgba(255,255,255,0.2) 14%, rgba(255,255,255,0.8) 14%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.4) 86%, rgba(255,255,255,0.6) 90%, rgba(255,255,255,0.1) 92%, rgba(255,255,255,0.1) 95%, rgba(255,255,255,0.5) 98%);
251 | }
252 | #battery div:before {
253 | width: 12px;
254 | height: 55px;
255 | right: -14px;
256 | top: 32px;
257 | border-top-right-radius: 6px 10px;
258 | border-bottom-right-radius: 6px 10px;
259 | background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,0.8) 14%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.4) 86%, rgba(255,255,255,0.6) 90%, rgba(255,255,255,0.1) 92%, rgba(255,255,255,0.1) 95%, rgba(255,255,255,0.5) 98%);
260 | }
261 | #battery div:after {
262 | width: 220px;
263 | height: 120px;
264 | left: 10px;
265 | border-radius: 5px/30px;
266 | border-left: 4px solid black;
267 | border-right: 4px solid black;
268 | background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 4%, rgba(255,255,255,0.2) 5%, transparent 5%, transparent 14%, rgba(255,255,255,0.3) 14%, rgba(255,255,255,0.12) 40%, rgba(0,0,0,0.05) 42%, rgba(0,0,0,0.05) 48%, transparent 60%, transparent 80%, rgba(255,255,255,0.3) 87%, rgba(255,255,255,0.3) 92%, transparent 92%, transparent 97%, rgba(255,255,255,0.4) 97%), linear-gradient(to left, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 2%, black 2%, black 6%, transparent 6%), linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0.3) 90%, rgba(255,255,255,0) 90%);
269 | }
270 | #marshmallow {
271 | background: #66cdaa;
272 | }
273 | #marshmallow div {
274 | width: 100px;
275 | height: 120px;
276 | margin-left: -50px;
277 | margin-top: -70px;
278 | background: white;
279 | background-image: radial-gradient(circle at 50% -70px, transparent 50%, #f5f5f5 50%);
280 | border-top-left-radius: 100px 40px;
281 | border-top-right-radius: 100px 40px;
282 | border-bottom-left-radius: 100px 40px;
283 | border-bottom-right-radius: 100px 40px;
284 | border: 4px solid #808080;
285 | }
286 | #marshmallow div:before {
287 | width: 8px;
288 | height: 80px;
289 | margin-left: -4px;
290 | left: 50%;
291 | top: 125px;
292 | background: #d3d3d3;
293 | box-shadow: 0 0 0 3px #808080, 0 -193px 0 #d3d3d3, 0 -193px 0 3px #808080;
294 | }
295 | #marshmallow div:after {
296 | width: 10px;
297 | height: 10px;
298 | left: 20px;
299 | top: 50px;
300 | background: #808080;
301 | border-radius: 50%;
302 | box-shadow: 50px 0 0 #808080, 25px 3px 0 16px #f5f5f5, 25px 13px 0 11px #808080;
303 | }
304 | #sushi {
305 | background: #87ceeb;
306 | }
307 | #sushi div {
308 | width: 250px;
309 | height: 100px;
310 | margin-left: -125px;
311 | margin-top: -37px;
312 | background: white;
313 | border-top-left-radius: 80px 50px;
314 | border-top-right-radius: 80px 50px;
315 | border-bottom-left-radius: 40px 50px;
316 | border-bottom-right-radius: 40px 50px;
317 | background-image: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.08) 32%, transparent 32%), linear-gradient(85deg, transparent 39%, rgba(0,0,0,0.05) 39%, rgba(0,0,0,0.05) 45%, transparent 45%);
318 | box-shadow: 0 25px 0 -20px rgba(0,0,0,0.1);
319 | }
320 | #sushi div:before {
321 | width: 260px;
322 | height: 25px;
323 | margin-left: -130px;
324 | left: 50%;
325 | border-top-left-radius: 90px 30px;
326 | border-top-right-radius: 80px 20px;
327 | background: #f19861;
328 | background-image: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.05) 70%), linear-gradient(to right, transparent 41%, rgba(0,0,0,0.1) 41%, rgba(0,0,0,0.1) 50%, transparent 50%), repeating-linear-gradient(45deg, #f19861, #f19861 20px, #ffcdaf 20px, #ffcdaf 25px);
329 | }
330 | #sushi div:after {
331 | width: 40px;
332 | height: 103px;
333 | margin-left: -20px;
334 | left: 50%;
335 | top: -2px;
336 | background: #465b45;
337 | background-image: linear-gradient(to right, transparent 60%, rgba(0,0,0,0.1) 60%);
338 | }
339 | #brazil {
340 | background: #f0e68c;
341 | }
342 | #brazil div {
343 | width: 300px;
344 | height: 200px;
345 | margin-left: -150px;
346 | margin-top: -100px;
347 | background: #fee63c;
348 | background-image: linear-gradient(30deg, #019f6f 30%, transparent 30%), linear-gradient(-30deg, #019f6f 30%, transparent 30%), linear-gradient(210deg, #019f6f 30%, transparent 30%), linear-gradient(-210deg, #019f6f 30%, transparent 30%);
349 | box-shadow: 7px 7px 0 rgba(0,0,0,0.1);
350 | }
351 | #brazil div:before {
352 | width: 90px;
353 | height: 90px;
354 | margin-left: -45px;
355 | margin-top: -45px;
356 | left: 50%;
357 | top: 50%;
358 | background: #2765ae;
359 | background-image: radial-gradient(circle at 0 175px, transparent 71%, white 72%, white 78%, transparent 79%);
360 | border-radius: 50%;
361 | }
362 | #brazil div:after {
363 | width: 4px;
364 | height: 4px;
365 | top: 80px;
366 | left: 160px;
367 | background: white;
368 | border-radius: 50%;
369 | box-shadow: -45px 15px 0 0 white, -40px 30px 0 0 white, -27px 43px 0 0 white, -10px 36px 0 0 white, 13px 38px 0 0 white, -47px 32px 0 -1px white, -35px 25px 0 -1px white, -25px 20px 0 -1px white, -33px 34px 0 -1px white, -35px 40px 0 -1px white, -5px 22px 0 -1px white, -15px 26px 0 -1px white, -17px 32px 0 -1px white, -10px 29px 0 -1px white, -12px 53px 0 -1px white, 0px 42px 0 -1px white, 5px 48px 0 -1px white, 6px 43px 0 -1px white, 8px 40px 0 -1px white, 12px 45px 0 -1px white, 17px 35px 0 -1px white, 23px 37px 0 -1px white;
370 | }
371 | #soccer {
372 | background: #afeeee;
373 | }
374 | #soccer div {
375 | width: 300px;
376 | height: 70px;
377 | margin-left: -150px;
378 | border-top: 3px solid white;
379 | border-bottom: 3px solid white;
380 | }
381 | #soccer div:before {
382 | width: 150px;
383 | height: 100px;
384 | margin-left: -80px;
385 | left: 50%;
386 | top: -95px;
387 | background: repeating-linear-gradient(45deg, transparent, transparent 10px, white 10px, white 11px), repeating-linear-gradient(-45deg, transparent, transparent 10px, white 10px, white 11px);
388 | border-top-right-radius: 5px;
389 | border-top-left-radius: 5px;
390 | border: 6px solid white;
391 | border-bottom: none;
392 | }
393 | #soccer div:after {
394 | width: 20px;
395 | height: 20px;
396 | left: 170px;
397 | top: 20px;
398 | border: 3px solid white;
399 | border-radius: 50%;
400 | }
401 | #key {
402 | background: #f7f7f7;
403 | }
404 | #key div {
405 | width: 80px;
406 | height: 100px;
407 | margin-left: -180px;
408 | margin-top: -70px;
409 | border: 15px solid #fdf1cd;
410 | border-radius: 50%;
411 | box-shadow: -3px -3px 0 3px #fefffa, -4px -4px 1px 3px #c68628, -6px -5px 0 4px #feedac, 3px 2px 0 3px #fdf1cd, 7px 5px 3px 3px #2e1f07, 10px 7px 0 3px #c68628, inset 4px 3px 3px #2e1f07, inset 7px 5px 0 #c68628, inset 9px 7px 2px rgba(0,0,0,0.4), inset 12px 10px 3px rgba(0,0,0,0.2), inset -2px -2px 0 #fefffa, 12px 8px 3px 3px rgba(0,0,0,0.4), 15px 12px 3px 3px rgba(0,0,0,0.2);
412 | }
413 | @media (max-width: 500px) {
414 | #key div {
415 | -webkit-transform: scale(0.7);
416 | transform: scale(0.7);
417 | margin-left: -140px;
418 | }
419 | }
420 | #key div:before {
421 | width: 250px;
422 | height: 30px;
423 | left: 85px;
424 | top: 35px;
425 | background-image: linear-gradient(to bottom, #f8d675 3%, #f8d675 7%, #2e1f07 11%, #2e1f07 16%, #fefffa 23%, #fefffa 50%, #2e1f07 57%, #2e1f07 70%, #feedac 84%, #feedac 97%, #c68628 99%);
426 | border-top-right-radius: 8px;
427 | border-bottom-right-radius: 8px;
428 | border-top-left-radius: 15px;
429 | border-bottom-left-radius: 15px;
430 | border-left: 1px solid #fefffa;
431 | border-right: 1px solid #f8d675;
432 | box-shadow: -1px 0 0 #c68628, 1px 0 0 #2e1f07, 2px 0 0 #c68628, 5px 4px 2px -1px rgba(0,0,0,0.4), 11px 9px 4px rgba(0,0,0,0.2);
433 | }
434 | #key div:after {
435 | width: 40px;
436 | height: 40px;
437 | top: 30px;
438 | left: 112px;
439 | background-image: linear-gradient(to bottom, #f8d675 3%, #f8d675 7%, #2e1f07 11%, #2e1f07 16%, #fefffa 23%, #fefffa 45%, #2e1f07 52%, #2e1f07 65%, #feedac 80%, #feedac 97%, #c68628 99%);
440 | box-shadow: -1px 0 1px #fefffa, 1px 0 0 #f8d675, 2px 0 0 #c68628, 3px 3px 2px rgba(0,0,0,0.2), 170px 37px 0 4px #f8e6b3, 169px 37px 0 4px #fefffa, 170px 34px 0 4px #2e1f07, 171px 39px 2px 4px #2e1f07, 172px 40px 0 5px #d69941, 174px 43px 3px 4px rgba(0,0,0,0.4), 178px 45px 4px 4px rgba(0,0,0,0.2);
441 | }
442 | #mickey-hat {
443 | background: #ffb6c1;
444 | }
445 | #mickey-hat div {
446 | width: 200px;
447 | height: 200px;
448 | margin-left: -100px;
449 | margin-top: -70px;
450 | border-radius: 0 70% 0 100%;
451 | border-bottom: 7px solid #333;
452 | border-left: 7px solid #333;
453 | background: #222;
454 | background-image: radial-gradient(circle at 170px 220px, rgba(255,255,255,0) 70%, rgba(255,255,255,0.15) 90%), radial-gradient(circle at 50px 80px, transparent 60%, #000 90%);
455 | box-shadow: -7px 7px 6px -2px rgba(0,0,0,0.3);
456 | -webkit-transform: rotate(-45deg);
457 | transform: rotate(-45deg);
458 | }
459 | @media (max-width: 500px) {
460 | #mickey-hat div {
461 | -webkit-transform: scale(0.7) rotate(-45deg);
462 | transform: scale(0.7) rotate(-45deg);
463 | }
464 | }
465 | #mickey-hat div:before {
466 | width: 110px;
467 | height: 110px;
468 | top: -102px;
469 | left: 29px;
470 | background: #333;
471 | background-image: radial-gradient(circle at 80px 0px, transparent 60%, rgba(255,255,255,0.2) 90%);
472 | border-radius: 50%;
473 | box-shadow: -4px 4px 0 4px #222;
474 | }
475 | #mickey-hat div:after {
476 | width: 110px;
477 | height: 110px;
478 | top: 56px;
479 | left: 192px;
480 | background: #333;
481 | background-image: radial-gradient(circle at 80px 0px, transparent 60%, rgba(255,255,255,0.2) 90%);
482 | border-radius: 50%;
483 | box-shadow: -4px 4px 0 4px #222, -144px -45px 0 -44px #222, -115px -15px 0 -44px #222, -142px -22px 0 -53px #222, -138px -18px 0 -53px #222, -143px -17px 0 -54px white, -144px -16px 0 -51px #222, -142px -23px 0 -50px white, -137px -18px 0 -50px white, -151px -9px 0 -54px #e95b4f, -150px -10px 0 -52px #222, -142px -18px 0 -40px #d3b579, -141px -19px 0 -36px #222, -141px -19px 0 -28px white, -141px -18px 0 -11px #e95b4f;
484 | }
485 | #hobbit-door {
486 | background: #d2b48c;
487 | }
488 | #hobbit-door div {
489 | width: 250px;
490 | height: 250px;
491 | margin-left: -125px;
492 | margin-top: -140px;
493 | z-index: 1;
494 | background-color: #825034;
495 | background-image: linear-gradient(to right, transparent 45%, #bb7a56 45%, #bb7a56 55%, transparent 55%), linear-gradient(76deg, transparent 45%, #ae6a46 45%, #ae6a46 55%, transparent 55%), linear-gradient(-76deg, transparent 45%, #b7714b 45%, #b7714b 55%, transparent 55%), linear-gradient(60deg, transparent 45%, #bb7a56 45%, #bb7a56 55%, transparent 55%), linear-gradient(-60deg, transparent 45%, #c48b6c 45%, #c48b6c 55%, transparent 55%), linear-gradient(42deg, transparent 45%, #ca977b 45%, #ca977b 55%, transparent 55%), linear-gradient(-42deg, transparent 45%, #bb7a56 45%, #bb7a56 55%, transparent 55%), linear-gradient(-24deg, transparent 45%, #ca977b 45%, #ca977b 55%, transparent 55%), linear-gradient(25deg, transparent 45%, #985d3d 45%, #985d3d 55%, transparent 55%), linear-gradient(-9deg, transparent 45%, #c48b6c 45%, #c48b6c 55%, transparent 55%), linear-gradient(7deg, transparent 44%, #bb7a56 44%, #bb7a56 55%, transparent 55%);
496 | border-radius: 50%;
497 | box-shadow: 0 5px #985d3d;
498 | }
499 | #hobbit-door div:before {
500 | width: 190px;
501 | height: 190px;
502 | margin-left: -95px;
503 | margin-top: -95px;
504 | top: 50%;
505 | left: 50%;
506 | background: #468e60;
507 | background-image: repeating-linear-gradient(to right, transparent, transparent 22px, #26603b 22px, #26603b 24px, #73b38a 24px, #73b38a 25px);
508 | border-radius: 50%;
509 | box-shadow: inset 0 5px 0 #6c422c, inset 0 12px 5px rgba(0,0,0,0.3), inset 0 -4px 3px rgba(0,0,0,0.2);
510 | }
511 | #hobbit-door div:after {
512 | width: 25px;
513 | height: 25px;
514 | margin-left: -12.5px;
515 | margin-top: -12.5px;
516 | top: 50%;
517 | left: 50%;
518 | background: #ffeb8f;
519 | border-radius: 50%;
520 | box-shadow: inset 0 -6px 5px rgba(111,74,24,0.5), 0 5px 3px rgba(0,0,0,0.4);
521 | }
522 | #tardis {
523 | background: #2f4f4f;
524 | }
525 | #tardis div {
526 | width: 170px;
527 | height: 250px;
528 | margin-left: -85px;
529 | margin-top: -110px;
530 | background: #274d7e;
531 | background-image: linear-gradient(to right, #295185 15px, #21416a 15px, #21416a 17px, #264b7a 17px, #264b7a 20px, #21416a 20px, #21416a 22px, #274d7e 22px, #274d7e 32px, transparent 32px, transparent 83px, #1d395d 83px, #1d395d 85px, #21416a 85px, #21416a 87px, #1d395d 87px, #1d395d 89px, transparent 90px), linear-gradient(to left, #295185 15px, #21416a 15px, #21416a 17px, #264b7a 17px, #264b7a 20px, #21416a 20px, #21416a 22px, #274d7e 22px, #274d7e 32px, transparent 32px, transparent 75px, #274d7e 75px, #274d7e 95px, transparent 95px), linear-gradient(to bottom, transparent 85px, #244775 85px, #244775 130px, transparent 130px, transparent 140px, #244775 140px, #244775 185px, transparent 185px, transparent 195px, #244775 195px, #244775 240px, transparent 240px), linear-gradient(to bottom, transparent 52px, #274d7e 52px, #274d7e 54px, transparent 54px), linear-gradient(to right, transparent 44px, #274d7e 44px, #274d7e 46px, transparent 46px, transparent 60px, #274d7e 60px, #274d7e 62px, transparent 62px, transparent 108px, #274d7e 108px, #274d7e 110px, transparent 110px, transparent 124px, #274d7e 124px, #274d7e 126px, transparent 126px), linear-gradient(to bottom, transparent 30px, rgba(255,255,255,0.4) 30px, rgba(255,255,255,0.9) 75px, transparent 75px);
532 | border-bottom: 8px solid #2b568d;
533 | box-shadow: 0 12px 0 #21416a, 0 18px 8px -3px rgba(0,0,0,0.3);
534 | }
535 | #tardis div:before {
536 | width: 150px;
537 | height: 18px;
538 | margin-left: -75px;
539 | margin-top: -8px;
540 | left: 50%;
541 | content: 'POLICE BOX';
542 | font-family: Verdana, Helvetica, sans-serif;
543 | font-size: 10px;
544 | letter-spacing: 5px;
545 | line-height: 18px;
546 | color: rgba(255,255,255,0.8);
547 | background: #333;
548 | box-shadow: 0 0 0 4px #295185, 0 4px 4px 4px rgba(0,0,0,0.3), 0 -15px 0 #274d7e, 0 -27px 0 -6px #295185, 0 -32px 0 -6px #295185;
549 | }
550 | #tardis div:after {
551 | width: 15px;
552 | height: 20px;
553 | margin-left: -7.5px;
554 | left: 50%;
555 | top: -62px;
556 | background: rgba(255,255,255,0.7);
557 | background-image: linear-gradient(to right, transparent 5px, #31619f 5px, #31619f 6px, transparent 6px), linear-gradient(to bottom, transparent 5px, #31619f 5px, #31619f 6px, transparent 6px, transparent 13px, #31619f 13px, #31619f 14px, transparent 14px);
558 | border-bottom: 3px solid #31619f;
559 | border-top: 5px solid #31619f;
560 | box-shadow: 0 -2px 10px -1px rgba(255,255,255,0.5), -39px 155px 0 rgba(255,255,255,0.6), -24px 155px 0 rgba(255,255,255,0.6);
561 | }
562 | #marker {
563 | background: #dcdcdc;
564 | }
565 | #marker div {
566 | width: 80px;
567 | height: 80px;
568 | margin-left: -80px;
569 | margin-top: -110px;
570 | background: #f00;
571 | background-image: radial-gradient(circle at 25px 23px, white 7%, rgba(255,255,255,0) 40%);
572 | box-shadow: inset -5px -5px 10px #f00, inset -18px -23px 15px rgba(0,0,0,0.2);
573 | border-radius: 50%;
574 | }
575 | #marker div:before {
576 | width: 130px;
577 | height: 150px;
578 | top: 80px;
579 | left: 34px;
580 | background-image: linear-gradient(to right, #eee 3px, #777 12px, transparent 12px), linear-gradient(-20deg, rgba(178,175,175,0) 37px, #b2afaf 44px, #b2afaf 45px, rgba(178,175,175,0) 52px);
581 | }
582 | #marker div:after {
583 | width: 60px;
584 | height: 45px;
585 | top: 152px;
586 | left: 147px;
587 | background-image: linear-gradient(20deg, #b2afaf 30%, rgba(178,175,175,0) 90%);
588 | border-radius: 50%;
589 | box-shadow: -1px 2px 3px #b2afaf;
590 | -webkit-transform: rotate(20deg);
591 | transform: rotate(20deg);
592 | }
593 | #crayon {
594 | background: #f3c114;
595 | }
596 | #crayon div {
597 | width: 250px;
598 | height: 40px;
599 | margin-left: -110px;
600 | margin-top: -20px;
601 | z-index: 1;
602 | background: #237449;
603 | background-image: radial-gradient(ellipse at top, rgba(0,0,0,0.6) 50px, transparent 54px), linear-gradient(to right, transparent 25px, rgba(0,0,0,0.6) 25px, rgba(0,0,0,0.6) 30px, transparent 30px, transparent 35px, rgba(0,0,0,0.6) 35px, rgba(0,0,0,0.6) 40px, transparent 40px, transparent 210px, rgba(0,0,0,0.6) 210px, rgba(0,0,0,0.6) 215px, transparent 215px, transparent 220px, rgba(0,0,0,0.6) 220px, rgba(0,0,0,0.6) 225px, transparent 225px), linear-gradient(to right, transparent 12px, rgba(41,237,133,0.6) 12px, rgba(41,237,133,0.6) 235px, transparent 235px), linear-gradient(to bottom, transparent 62%, rgba(0,0,0,0.3) 100%);
604 | border-radius: 2px;
605 | box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
606 | }
607 | #crayon div:before {
608 | height: 10px;
609 | left: -48px;
610 | top: 2px;
611 | border-right: 48px solid #237449;
612 | border-bottom: 13px solid transparent;
613 | border-top: 13px solid transparent;
614 | }
615 | #crayon div:after {
616 | width: 251px;
617 | height: 23px;
618 | content: 'green';
619 | font-family: Arial, sans-serif;
620 | font-size: 12px;
621 | font-weight: bold;
622 | color: rgba(0,0,0,0.3);
623 | text-align: right;
624 | padding-right: 47px;
625 | padding-top: 17px;
626 | left: -48px;
627 | background-image: linear-gradient(to right, transparent 46px, rgba(0,0,0,0.3) 48px, transparent 48px), linear-gradient(to bottom, rgba(255,255,255,0) 12px, rgba(255,255,255,0.2) 17px, rgba(255,255,255,0.2) 19px, rgba(255,255,255,0) 24px);
628 | }
629 | #moleskine {
630 | background: #84c3c9;
631 | }
632 | #moleskine div {
633 | width: 170px;
634 | height: 250px;
635 | margin-left: -85px;
636 | margin-top: -133px;
637 | background-image: linear-gradient(to bottom, #444 0, #222 100%);
638 | border-radius: 3px 10px 10px 3px;
639 | box-shadow: 0 5px 0 white, 0 7px 0 #222, 3px 10px 2px rgba(0,0,0,0.3);
640 | }
641 | #moleskine div:before {
642 | width: 170px;
643 | height: 257px;
644 | background-image: linear-gradient(to right, transparent 130px, #333 130px, #333 140px, transparent 140px), linear-gradient(to bottom, transparent 33%, #ff8613 33%, #ff8613 68%, transparent 68%), linear-gradient(to right, #444 3px, rgba(255,255,255,0.1) 4px, rgba(255,255,255,0) 8px);
645 | }
646 | #moleskine div:after {
647 | width: 60px;
648 | height: 40px;
649 | left: 13px;
650 | top: 105px;
651 | background: white;
652 | background-image: linear-gradient(to right, transparent 29px, #777 29px, #777 31px, transparent 31px);
653 | border: 2px solid #777;
654 | box-shadow: -20px 125px 0 -21px #777;
655 | }
656 | #macarons {
657 | background: #eee;
658 | }
659 | #macarons div {
660 | width: 110px;
661 | height: 180px;
662 | margin-left: -55px;
663 | margin-top: -90px;
664 | background-image: linear-gradient(to top, transparent 21px, #7b5354 21px, #7b5354 26px, transparent 26px, transparent 66px, #ffd889 66px, #ffd889 71px, transparent 71px, transparent 110px, #548355 110px, #548355 115px, transparent 115px, transparent 155px, #965537 155px, #965537 160px, transparent 160px);
665 | }
666 | #macarons div:before {
667 | width: 110px;
668 | height: 20px;
669 | bottom: 0;
670 | border-radius: 6px;
671 | border-bottom-left-radius: 80px 20px;
672 | border-bottom-right-radius: 80px 20px;
673 | background: #fa8780;
674 | box-shadow: 0 -45px 0 #ffba10, 0 -89px 0 #a8daa9, 0 -134px 0 #d1a574;
675 | }
676 | #macarons div:after {
677 | width: 110px;
678 | height: 20px;
679 | bottom: 25px;
680 | border-radius: 6px;
681 | border-top-left-radius: 80px 20px;
682 | border-top-right-radius: 80px 20px;
683 | background: #fa8780;
684 | box-shadow: 0 -44px 0 #ffba10, 0 -89px 0 #a8daa9, 0 -134px 0 #d1a574;
685 | }
686 | #mario-tube {
687 | background: #8cb4ff;
688 | }
689 | #mario-tube div {
690 | width: 170px;
691 | height: 250px;
692 | margin-left: -85px;
693 | margin-top: -50px;
694 | background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 4%, rgba(0,0,0,0) 10%), linear-gradient(-150deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
695 | border-left: 1px solid #236d22;
696 | }
697 | #mario-tube div:before {
698 | width: 210px;
699 | height: 60px;
700 | margin-left: -20px;
701 | top: -60px;
702 | background-image: linear-gradient(to bottom, rgba(255,255,255,0) 1px, rgba(255,255,255,0.3) 2px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0) 4px), linear-gradient(to top, rgba(0,0,0,0.4) 3px, rgba(255,255,255,0.2) 5px, rgba(255,255,255,0) 6px), linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
703 | border-radius: 5px;
704 | }
705 | #mario-tube div:after {
706 | width: 40px;
707 | height: 2px;
708 | background: linear-gradient(to right, rgba(255,255,255,0) 5%, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0.7) 80%, rgba(255,255,255,0) 95%);
709 | top: -58px;
710 | left: 30px;
711 | }
712 | @media (max-width: 400px) {
713 | #mario-tube div {
714 | margin-top: -25px;
715 | }
716 | }
717 | #mario-mushroom {
718 | background: #74ceff;
719 | }
720 | #mario-mushroom div {
721 | width: 170px;
722 | height: 140px;
723 | margin-left: -85px;
724 | margin-top: -90px;
725 | background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%), linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%), radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
726 | border-radius: 140px 140px 80px 80px;
727 | }
728 | #mario-mushroom div:before {
729 | width: 100px;
730 | height: 66px;
731 | left: 35px;
732 | bottom: -30px;
733 | background: #f1d38b;
734 | border-top-right-radius: 180px 100px;
735 | border-top-left-radius: 180px 100px;
736 | border-bottom-right-radius: 140px 100px;
737 | border-bottom-left-radius: 140px 100px;
738 | border-top: 1px solid #53170f;
739 | box-shadow: inset 0 15px 10px rgba(0,0,0,0.25), inset -12px -5px 10px rgba(0,0,0,0.2), inset 5px -2px 10px rgba(0,0,0,0.2);
740 | }
741 | #mario-mushroom div:after {
742 | width: 8px;
743 | height: 25px;
744 | top: 120px;
745 | left: 58px;
746 | background: rgba(0,0,0,0);
747 | box-shadow: 8px 0 #312114, 38px 0 #312114;
748 | border-radius: 40%;
749 | }
750 |
--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justjavac/a-single-div/c1a0fd096c7c2e04dd0984d184bea03a52d9cd3d/favicon.ico
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 基于单个 Div 的 CSS 绘图
8 |
9 |
10 |
11 |
12 |
13 |
17 |
18 |
21 |
22 |
25 |
26 |
29 |
30 |
33 |
34 |
37 |
38 |
41 |
42 |
45 |
46 |
49 |
50 |
53 |
54 |
57 |
58 |
61 |
62 |
65 |
66 |
69 |
70 |
73 |
74 |
77 |
78 |
81 |
82 |
85 |
86 |
89 |
90 |
93 |
94 |
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/templates/includes/ga.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/templates/index.jade:
--------------------------------------------------------------------------------
1 | block vars
2 | - var title = "A Single Div"
3 | - var description = "A CSS drawing experiment to see what's possible with a single div."
4 |
5 | extends layout
6 |
7 | block content
8 |
9 | // 14 August 2014
10 | .entry#mario-mushroom
11 | div
12 |
13 | // 14 August 2014
14 | .entry#mario-tube
15 | div
16 |
17 | // 5 August 2014
18 | .entry#macarons
19 | div
20 |
21 | // 14 July 2014
22 | .entry#moleskine
23 | div
24 |
25 | //- // 1 July 2014
26 | //- .entry.wide#mint
27 | //- div
28 |
29 | // 26 June 2014
30 | .entry#crayon
31 | div
32 |
33 | // 25 June 2014
34 | .entry#marker
35 | div
36 |
37 | // 21 June 2014
38 | .entry#tardis
39 | div
40 |
41 | // 20 June 2014
42 | .entry#hobbit-door
43 | div
44 |
45 | // 16 June 2014
46 | .entry.wide#mickey-hat
47 | div
48 |
49 | // 12 June 2014
50 | .entry.wide#key
51 | div
52 |
53 | // 11 June 2014
54 | .entry#soccer
55 | div
56 |
57 | // 11 June 2014
58 | .entry#brazil
59 | div
60 |
61 | // 10 June 2014
62 | .entry#sushi
63 | div
64 |
65 | // 9 June 2014
66 | .entry#marshmallow
67 | div
68 |
69 | // 7 June 2014
70 | .entry.wide#battery
71 | div
72 |
73 | // 30 May 2014
74 | .entry#breakfast
75 | div
76 |
77 | // 24 May 2014
78 | .entry#cpt-america
79 | div
80 |
81 | // 23 May 2014
82 | .entry#bloody-mary
83 | div
84 |
85 | // 22 May 2014
86 | .entry#camera
87 | div
--------------------------------------------------------------------------------
/templates/layout.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html(lang="en")
3 |
4 | //- Variable block for page-specific info
5 | block vars
6 | head
7 | meta(charset="utf-8")
8 | meta(http-equiv="X-UA-Compatible", content="IE=edge")
9 | meta(name="viewport", content="width=device-width, initial-scale=1")
10 |
11 | title #{title}
12 | meta(name='description', content='#{description}')
13 | link(rel="stylesheet", href="css/reset.css")
14 | link(rel="stylesheet", href="css/main.css")
15 |
16 | body.cf
17 |
18 | header
19 | h1 A Single Div :
20 | p a CSS drawing project by
21 | a(href="https://twitter.com/lynnandtonic") Lynn Fisher
22 | a.share-link(href="http://ctt.ec/5Dgbr") Tweet
23 |
24 | block content
25 |
26 | include includes/ga.html
--------------------------------------------------------------------------------