├── readme.md ├── index.html └── css └── styles.css /readme.md: -------------------------------------------------------------------------------- 1 | Tea theme 2 | === 3 | 4 | A refreshing blend of simplicity and sophistication, ready for your finest ideas. Tea is a theme for GitHub pages—or any page, really. If you'd like to use this on GitHub, just fork this project and replace my content with your own lovely thoughts and ideas. 5 | 6 | You can use Tea for other web things, too. Modify it in any way that suits your purpose! This work is licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/). 7 | 8 | Check out the live demo [here](http://house.github.io/tea/). 9 | 10 | ![Tea theme preview](https://f.cloud.github.com/assets/306877/1144237/986cff10-1d7f-11e3-96db-281e5599052f.png) 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tea Theme by Allison House 8 | 9 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 |

Tea Theme

20 |

A refreshing blend of simplicity and sophistication, ready for your finest ideas.

21 |
22 |
23 |
24 |
25 | 26 |
27 | 32 |
33 | 34 |
35 |

Almost, but not quite, entirely unlike tea

36 |

August is turning into September, and the San Francisco weather couldn't be more beautiful. Every day is warm and sunny; hardly a cloud in the sky! 37 |

When the weekend arrives, I fling open every window in my third-story apartment and let the breeze filter in. It's sublime. Most of my days start with a hot cup of tea—I lean against the window frame, look out over the city, and sip.

38 |

It's an act that's enormously satisfying in its simplicity. I hope this theme is, too.

39 |

Tea is a theme for GitHub Pages—or any page, really—by Allison House. 40 | 41 |

42 | 43 |

How to use this theme

44 |

If you'd like to use this for GitHub Pages, you'll just fork this project and replace my content with your own lovely thoughts and ideas. 45 |

You should feel free to use Tea for anything else, too. Here's the ZIP. Modify it in any way that suits your purpose.

46 | 47 |
48 | 49 |

Style examples

50 |

Blockquote

51 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

52 |
53 |

The capacity for good and evil, like the Force itself, is in all living creatures. And belonging to the Jedi Order, or the Sith, or any other group, won't change what you are at your core.

54 |

— Jolee Bindo, Star Wars: Knights of the Old Republic

55 |
56 |

Morbi a mi vel tortor feugiat tempor in et arcu. Etiam vitae aliquet neque, quis vestibulum urna.

57 |

Table

58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
WhiskeyTangoFoxtrot
Apple1a
Blueberry2b
Banana3c
68 |

Lists

69 | 70 |
    71 |
  1. Item 1
    2. 72 |
  2. Item 2
    3. 73 |
  3. Item 3
    4. 74 |
75 | 80 | 81 |

Code

82 | 
pre, code {
 83 |   display: block;
 84 |   line-height: 1.833em;
 85 |   }
86 | 87 | 88 |

Headings

89 |

Here's a headline

90 |

This is the <h4>. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

91 |
If you need it, here's another
92 |

This is the <h5>. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

93 |
And here's the last one
94 |

This is the <h6>. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

95 |
96 | 97 |
98 | 99 | 109 |
110 | 111 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,400,700); 2 | 3 | /*-------------------------------- 4 | Typography 5 | --------------------------------*/ 6 | 7 | body { font:20px/1.5em Alegreya, 'Times New Roman', serif; margin: 0; } 8 | a { text-decoration: none; color: #222; border-bottom: 1px solid #ddd; transition: 0.15s ease-in-out; } 9 | a:hover { border-bottom: 1px solid #aaa; } 10 | em { font-style: italic; } 11 | strong { font-weight: bold; } 12 | h1 { font-size: 2em; line-height: 1.33em;} 13 | h2 { font-size: 1.55em; line-height: 1.25em; } 14 | h3 { font-size: 1.15em; } 15 | h4 { font-size: 1em; font-style: italic; } 16 | h5 { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.15em; } 17 | h6 { font-size: 0.67em; text-transform: uppercase; letter-spacing: 0.15em; } 18 | h1, h2, h3, 19 | h4, h5, h6 { margin-bottom: 1em; color: #222; font-weight: bold; } 20 | p, ul, pre, 21 | table, dl { color: #888; margin-top: 0; margin-bottom: 1em; } 22 | code, pre { font-size: 16px; color: #444;} 23 | blockquote { border-left: 1px solid #eeeeee; padding: 0 1.5em; margin: 0;} 24 | blockquote, 25 | blockquote > * { color: #222; } 26 | table { width: 100%; } 27 | th, td { padding: 1em; text-align: center;} 28 | th { border-bottom: 1px solid #ddd; 29 | text-transform: uppercase; 30 | letter-spacing: 0.2em; 31 | font-size:0.67em; 32 | text-align: center; 33 | color: #222; 34 | } 35 | td { color: #888; } 36 | hr { border: 0; 37 | height: 1px; 38 | display: block; 39 | margin: 4em auto; 40 | width: 80px; 41 | background: #999; 42 | } 43 | 44 | 45 | /*-------------------------------- 46 | Layout 47 | --------------------------------*/ 48 | 49 | #wrapper { 50 | width: 100%; 51 | margin: 0 auto; 52 | } 53 | 54 | header { 55 | /* Background pattern from Lea Verou, modified for browser support: http://ahou.se/18gkwgg) */ 56 | background-color: #eee; 57 | background-image: 58 | radial-gradient(circle at 100% 150%, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, transparent 40%, transparent), 59 | radial-gradient(circle at 0 150%, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, transparent 40%, transparent), 60 | radial-gradient(circle at 50% 100%, white 10%, #f5f5f5 11%, #f5f5f5 23%, white 24%, white 30%, #f5f5f5 31%, #f5f5f5 43%, white 44%, white 50%, #f5f5f5 51%, #f5f5f5 63%, white 64%, white 71%, transparent 71%, transparent), 61 | radial-gradient(circle at 100% 50%, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, transparent 50%, transparent), 62 | radial-gradient(circle at 0 50%, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, transparent 50%, transparent); 63 | background-image: 64 | -webkit-gradient(radial, 100% 150%, 0, 100% 150%, 286, color-stop(24%, #f5f5f5), color-stop(25%, white), color-stop(28%, white), color-stop(29%, #f5f5f5), color-stop(36%, #f5f5f5), color-stop(36%, white), color-stop(40%, white), color-stop(40%, transparent), color-stop(100%, transparent)), 65 | -webkit-gradient(radial, 0% 150%, 0, 0% 150%, 286, color-stop(24%, #f5f5f5), color-stop(25%, white), color-stop(28%, white), color-stop(29%, #f5f5f5), color-stop(36%, #f5f5f5), color-stop(36%, white), color-stop(40%, white), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), 66 | -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 162, color-stop(10%, white), color-stop(11%, #f5f5f5), color-stop(23%, #f5f5f5), color-stop(24%, white), color-stop(30%, white), color-stop(31%, #f5f5f5), color-stop(43%, #f5f5f5), color-stop(44%, white), color-stop(50%, white), color-stop(51%, #f5f5f5), color-stop(63%, #f5f5f5), color-stop(64%, white), color-stop(71%, white), color-stop(71%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), 67 | -webkit-gradient(radial, 100% 50%, 0, 100% 50%, 234, color-stop(5%, white), color-stop(6%, #f5f5f5), color-stop(15%, #f5f5f5), color-stop(16%, white), color-stop(20%, white), color-stop(21%, #f5f5f5), color-stop(30%, #f5f5f5), color-stop(31%, white), color-stop(35%, white), color-stop(36%, #f5f5f5), color-stop(45%, #f5f5f5), color-stop(46%, white), color-stop(49%, white), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), 68 | -webkit-gradient(radial, 0% 50%, 0, 0% 50%, 234, color-stop(5%, white), color-stop(6%, #f5f5f5), color-stop(15%, #f5f5f5), color-stop(16%, white), color-stop(20%, white), color-stop(21%, #f5f5f5), color-stop(30%, #f5f5f5), color-stop(31%, white), color-stop(35%, white), color-stop(36%, #f5f5f5), color-stop(45%, #f5f5f5), color-stop(46%, white), color-stop(49%, white), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))); 69 | background-image: 70 | -webkit-radial-gradient(100% 150%, circle, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, transparent 40%, transparent 100%), 71 | -webkit-radial-gradient(0% 150%, farthest-corner circle, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%), 72 | -webkit-radial-gradient(50% 100%, farthest-corner circle, white 10%, #f5f5f5 11%, #f5f5f5 23%, white 24%, white 30%, #f5f5f5 31%, #f5f5f5 43%, white 44%, white 50%, #f5f5f5 51%, #f5f5f5 63%, white 64%, white 71%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0) 100%), 73 | -webkit-radial-gradient(100% 50%, farthest-corner circle, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), 74 | -webkit-radial-gradient(0% 50%, farthest-corner circle, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); 75 | background-image: 76 | -moz-radial-gradient(100% 150%, circle, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, transparent 40%, transparent 100%), 77 | -moz-radial-gradient(0% 150%, farthest-corner circle, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%), 78 | -moz-radial-gradient(50% 100%, farthest-corner circle, white 10%, #f5f5f5 11%, #f5f5f5 23%, white 24%, white 30%, #f5f5f5 31%, #f5f5f5 43%, white 44%, white 50%, #f5f5f5 51%, #f5f5f5 63%, white 64%, white 71%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0) 100%), 79 | -moz-radial-gradient(100% 50%, farthest-corner circle, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), 80 | -moz-radial-gradient(0% 50%, farthest-corner circle, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); 81 | background-image: 82 | -ms-radial-gradient(100% 150%, circle, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, transparent 40%, transparent 100%), 83 | -ms-radial-gradient(0% 150%, farthest-corner circle, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%), 84 | -ms-radial-gradient(50% 100%, farthest-corner circle, white 10%, #f5f5f5 11%, #f5f5f5 23%, white 24%, white 30%, #f5f5f5 31%, #f5f5f5 43%, white 44%, white 50%, #f5f5f5 51%, #f5f5f5 63%, white 64%, white 71%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0) 100%), 85 | -ms-radial-gradient(100% 50%, farthest-corner circle, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), 86 | -ms-radial-gradient(0% 50%, farthest-corner circle, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); 87 | background-image: 88 | -o-radial-gradient(100% 150%, circle, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, transparent 40%, transparent 100%), 89 | -o-radial-gradient(0% 150%, farthest-corner circle, #f5f5f5 24%, white 25%, white 28%, #f5f5f5 29%, #f5f5f5 36%, white 36%, white 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%), 90 | -o-radial-gradient(50% 100%, farthest-corner circle, white 10%, #f5f5f5 11%, #f5f5f5 23%, white 24%, white 30%, #f5f5f5 31%, #f5f5f5 43%, white 44%, white 50%, #f5f5f5 51%, #f5f5f5 63%, white 64%, white 71%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0) 100%), 91 | -o-radial-gradient(100% 50%, farthest-corner circle, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), 92 | -o-radial-gradient(0% 50%, farthest-corner circle, white 5%, #f5f5f5 6%, #f5f5f5 15%, white 16%, white 20%, #f5f5f5 21%, #f5f5f5 30%, white 31%, white 35%, #f5f5f5 36%, #f5f5f5 45%, white 46%, white 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); 93 | background-size: 100px 50px; 94 | margin: 0 auto; 95 | text-align: center; 96 | padding: 4.5em 0; 97 | width: 100%; 98 | top: 0; 99 | transition: 0.15s ease-in-out; 100 | } 101 | 102 | header hgroup { 103 | background: #fff; 104 | color: #222; 105 | padding:4px; 106 | border: 2px solid #aaa; 107 | max-width: 700px; 108 | display: block; 109 | line-height: 1.35em; 110 | margin: 0 auto; 111 | } 112 | 113 | header div { 114 | border: 2px solid #ccc; 115 | padding: 2em 3em; 116 | } 117 | 118 | header h1 { 119 | font-size: 2.5em; 120 | line-height: 1.15em; 121 | text-transform: uppercase; 122 | letter-spacing: 0.1em; 123 | margin-bottom: 0.5em; 124 | margin-top: 0.5em; 125 | } 126 | 127 | header h2 { 128 | margin-top: 0; 129 | text-transform: none; 130 | font-weight: 400; 131 | letter-spacing: 0; 132 | color: #888; 133 | margin-bottom: 1.75em; 134 | line-height: 1.33em; 135 | } 136 | 137 | header hr { 138 | border: 0; 139 | height: 1px; 140 | display: block; 141 | margin: 0 auto; 142 | width: 80px; 143 | background: #999; 144 | } 145 | 146 | .downloads ul, #content, footer { 147 | max-width: 700px; 148 | padding: 0 60px; 149 | margin: 0 auto; 150 | } 151 | 152 | .downloads { 153 | width: 100%; 154 | background: #f5f5f5; 155 | padding: 1.5em 0; 156 | } 157 | 158 | .downloads ul li { 159 | display: inline-block; 160 | width: 29.5%; 161 | margin-right: 5%; 162 | text-align: center; 163 | } 164 | 165 | .downloads ul li:last-child { 166 | margin-right: 0; 167 | } 168 | 169 | .downloads a { 170 | text-transform: uppercase; 171 | letter-spacing: 0.15em; 172 | color: #222; 173 | font-size: 0.67em; 174 | text-align: center; 175 | font-weight: bold; 176 | padding-bottom: 0.5em; 177 | } 178 | 179 | #content h1:first-child { 180 | margin-top: 0; 181 | } 182 | 183 | #content { 184 | padding-top: 4.5em; 185 | } 186 | 187 | footer { 188 | margin-bottom: 4em; 189 | font-style: italic; 190 | text-align: center; 191 | } 192 | 193 | @media screen and (max-width: 880px) { 194 | header { padding: 2em 0; } 195 | .downloads { padding: 1em 0; } 196 | } 197 | 198 | @media screen and (max-width: 770px) { 199 | body { font-size: 18px; border-top: 2px solid #eeeeee; } 200 | hr { margin: 4em auto; } 201 | header hgroup { margin: 0 4em; } 202 | header h1 { font-size: 1.75em; } 203 | header h2 { font-size: 1.5em; } 204 | #content, footer { padding: 0 3em; } 205 | #content { padding-top: 4em; } 206 | .downloads ul { padding: 0 1em; } 207 | } 208 | 209 | @media screen and (max-width: 600px) { 210 | .downloads { padding: 0; } 211 | .downloads ul { padding: 0; } 212 | .downloads ul li { margin: 0 auto; width: 100%; padding: 0; } 213 | .downloads ul li a { padding-top: 1em; display: block; width: 100%; } 214 | .downloads ul li a:hover { background: #eee; border-bottom: 1px solid #ddd; } 215 | } 216 | 217 | @media screen and (max-width: 480px) { 218 | header { padding: 1em 0; } 219 | header hgroup { margin: 0 1em; } 220 | header div { padding: 1.5em 2em; } 221 | header h2 { font-size: 1.25em; } 222 | hr { margin: 3em auto; } 223 | #content, footer { padding: 0 1.5em;} 224 | #content { padding-top: 2em; } 225 | } 226 | 227 | 228 | --------------------------------------------------------------------------------