diff options
| -rw-r--r-- | assets/styles.css | 40 | ||||
| -rw-r--r-- | assets/stylesheets/buttons.hcss | 49 | ||||
| -rw-r--r-- | assets/stylesheets/main.hcss | 1 | ||||
| -rw-r--r-- | assets/stylesheets/typography.css | 4 | ||||
| -rw-r--r-- | index.html | 4 |
5 files changed, 97 insertions, 1 deletions
diff --git a/assets/styles.css b/assets/styles.css index 60f4de8..1fc5ee2 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -27,6 +27,46 @@ h2 { } a:link { color: #b71863; } a:hover { color: #880442; } +a.button { + padding: 13px 15px; + /* border: 1px solid #127354; */ + /* border: 1px solid #18a578; */ + border: 1px solid #790d52; + border-radius: 10px; + box-shadow: 0 3px 13px -3px #2b041c; + background-color: #22e0a3; +/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f11c9c+0,c91a7d+76 */ +background: #f11c9c; /* Old browsers */ +background: -moz-linear-gradient(top, #f11c9c 0%, #c91a7d 76%); /* FF3.6-15 */ +background: -webkit-linear-gradient(top, #f11c9c 0%,#c91a7d 76%); /* Chrome10-25,Safari5.1-6 */ +background: linear-gradient(to bottom, #f11c9c 0%,#c91a7d 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f11c9c', endColorstr='#c91a7d',GradientType=0 ); /* IE6-9 */ + font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif; + text-decoration: none; + color: #ffd7d7; + text-shadow: 0px -1px 2px #161c1f; +} +a.button:hover { + border-color: #9e0e6a; +/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff1ea5+0,dd1c83+100 */ +background: #ff1ea5; /* Old browsers */ +background: -moz-linear-gradient(top, #ff1ea5 0%, #dd1c83 100%); /* FF3.6-15 */ +background: -webkit-linear-gradient(top, #ff1ea5 0%,#dd1c83 100%); /* Chrome10-25,Safari5.1-6 */ +background: linear-gradient(to bottom, #ff1ea5 0%,#dd1c83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1ea5', endColorstr='#dd1c83',GradientType=0 ); /* IE6-9 */ + color: #ffe1e1; +} +a.button:active { + border-color: #4c0833; + box-shadow: 0 3px 13px -2px #2b041c; +/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dd1a89+0,bc186d+100 */ +background: #dd1a89; /* Old browsers */ +background: -moz-linear-gradient(top, #dd1a89 0%, #bc186d 100%); /* FF3.6-15 */ +background: -webkit-linear-gradient(top, #dd1a89 0%,#bc186d 100%); /* Chrome10-25,Safari5.1-6 */ +background: linear-gradient(to bottom, #dd1a89 0%,#bc186d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd1a89', endColorstr='#bc186d',GradientType=0 ); /* IE6-9 */ + color: #f1c2c2; +} body { background-color: #e3ce88; color: #222; diff --git a/assets/stylesheets/buttons.hcss b/assets/stylesheets/buttons.hcss new file mode 100644 index 0000000..19a5423 --- /dev/null +++ b/assets/stylesheets/buttons.hcss @@ -0,0 +1,49 @@ +a.button { + padding: 13px 15px; + + /* border: 1px solid #127354; */ + /* border: 1px solid #18a578; */ + border: 1px solid #790d52; + border-radius: 10px; + box-shadow: 0 3px 13px -3px #2b041c; + + background-color: #22e0a3; +/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f11c9c+0,c91a7d+76 */ +background: #f11c9c; /* Old browsers */ +background: -moz-linear-gradient(top, #f11c9c 0%, #c91a7d 76%); /* FF3.6-15 */ +background: -webkit-linear-gradient(top, #f11c9c 0%,#c91a7d 76%); /* Chrome10-25,Safari5.1-6 */ +background: linear-gradient(to bottom, #f11c9c 0%,#c91a7d 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f11c9c', endColorstr='#c91a7d',GradientType=0 ); /* IE6-9 */ + + font-family: LUCIDA_GRANDE; + text-decoration: none; + color: #ffd7d7; + text-shadow: 0px -1px 2px #161c1f; +} + +a.button:hover { + border-color: #9e0e6a; + +/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff1ea5+0,dd1c83+100 */ +background: #ff1ea5; /* Old browsers */ +background: -moz-linear-gradient(top, #ff1ea5 0%, #dd1c83 100%); /* FF3.6-15 */ +background: -webkit-linear-gradient(top, #ff1ea5 0%,#dd1c83 100%); /* Chrome10-25,Safari5.1-6 */ +background: linear-gradient(to bottom, #ff1ea5 0%,#dd1c83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1ea5', endColorstr='#dd1c83',GradientType=0 ); /* IE6-9 */ + + color: #ffe1e1; +} + +a.button:active { + border-color: #4c0833; + box-shadow: 0 3px 13px -2px #2b041c; + +/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dd1a89+0,bc186d+100 */ +background: #dd1a89; /* Old browsers */ +background: -moz-linear-gradient(top, #dd1a89 0%, #bc186d 100%); /* FF3.6-15 */ +background: -webkit-linear-gradient(top, #dd1a89 0%,#bc186d 100%); /* Chrome10-25,Safari5.1-6 */ +background: linear-gradient(to bottom, #dd1a89 0%,#bc186d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd1a89', endColorstr='#bc186d',GradientType=0 ); /* IE6-9 */ + + color: #f1c2c2; +} diff --git a/assets/stylesheets/main.hcss b/assets/stylesheets/main.hcss index 46ecf46..547e161 100644 --- a/assets/stylesheets/main.hcss +++ b/assets/stylesheets/main.hcss @@ -2,4 +2,5 @@ include(reset.css) include(color.hcss) include(typography.css) include(links.hcss) +include(buttons.hcss) include(layout.hcss) diff --git a/assets/stylesheets/typography.css b/assets/stylesheets/typography.css index aca8884..7560fa8 100644 --- a/assets/stylesheets/typography.css +++ b/assets/stylesheets/typography.css @@ -1,5 +1,7 @@ +set(LUCIDA_GRANDE, `"Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif') + h1, h2, h3, h4, h5, h6 { - font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif; + font-family: LUCIDA_GRANDE; } h2 { @@ -47,6 +47,10 @@ <span class="color-murky-pond">$</span> brew install teddywing/DomeKey/dome-key </div> + <p> + <a href="#" class="button">Buy ($15)</a> + </p> + <h2>Examples</h2> <p>Video controls:</p> |