public
/
chameth.com
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

Start fleshing out a bit. 

Add fonts and a rough layout.
dev
Chris Smith 8 лет назад
Родитель
c81c471616
Сommit
315abad198
2 измененных файлов: 365 добавлений и 6 удалений
Разделённый вид Показать статистику Diff
  1. 18
    6
      index.html
  2. 347
    0
      res/css/style.css

+ 18
- 6
index.html Просмотреть файл 

@@ -1,9 +1,21 @@
1 1 
 <!DOCTYPE html>
2 2 
 <html>
3 
- <head>
4 
-  <title>Chris Smith on GitHub</title>
5 
- </head>
6 
- <body>
7 
-  &lt;!-- TODO --&gt;
8 
- </body>
3 
+  <head>
4 
+    <title>Chameth.com</title>
5 
+    <link rel="stylesheet" href="res/css/style.css">
6 
+  </head>
7 
+  <body>
8 
+    <div id="wrapper">
9 
+      <div id="main">
10 
+        &lt;!-- TODO --&gt;
11 
+      </div>
12 
+
13 
+      <section id="sidebar">
14 
+        <header>
15 
+          <h1>Chameth.com</h1>
16 
+          <p>Personal website of Chris Smith</p>
17 
+        </header>
18 
+      </section>
19 
+    </div>
20 
+  </body>
9 21 
 </html>

+ 347
- 0
res/css/style.css Просмотреть файл 

@@ -0,0 +1,347 @@
1 
+@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900");
2 
+
3 
+/* Reset */
4 
+
5 
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
6 
+acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
7 
+sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
8 
+caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
9 
+figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,
10 
+video {
11 
+  margin: 0;
12 
+  padding: 0;
13 
+  border: 0;
14 
+  font-size: 100%;
15 
+  font: inherit;
16 
+  vertical-align: baseline;
17 
+}
18 
+
19 
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
20 
+  display: block;
21 
+}
22 
+
23 
+body {
24 
+  line-height: 1;
25 
+}
26 
+
27 
+ol, ul {
28 
+  list-style: none;
29 
+}
30 
+
31 
+blockquote, q {
32 
+  quotes: none;
33 
+}
34 
+
35 
+blockquote:before, blockquote:after, q:before, q:after {
36 
+  content: '';
37 
+  content: none;
38 
+}
39 
+
40 
+table {
41 
+  border-collapse: collapse;
42 
+  border-spacing: 0;
43 
+}
44 
+
45 
+body {
46 
+  -webkit-text-size-adjust: none;
47 
+}
48 
+
49 
+/* Box Model */
50 
+
51 
+*, *:before, *:after {
52 
+  -moz-box-sizing: border-box;
53 
+  -webkit-box-sizing: border-box;
54 
+  box-sizing: border-box;
55 
+}
56 
+
57 
+/* Basic */
58 
+
59 
+@-ms-viewport {
60 
+  width: device-width;
61 
+}
62 
+
63 
+body {
64 
+  -ms-overflow-style: scrollbar;
65 
+  background: #f4f4f4;
66 
+}
67 
+
68 
+@media screen and (max-width: 480px) {
69 
+
70 
+  html, body {
71 
+    min-width: 320px;
72 
+  }
73 
+
74 
+}
75 
+
76 
+/* Type */
77 
+
78 
+body, input, select, textarea {
79 
+  color: #646464;
80 
+  font-family: "Source Sans Pro", Helvetica, sans-serif;
81 
+  font-size: 12pt;
82 
+  font-weight: 400;
83 
+  line-height: 1.75;
84 
+}
85 
+
86 
+a {
87 
+  -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
88 
+  -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
89 
+  -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
90 
+  transition: color 0.2s ease, border-bottom-color 0.2s ease;
91 
+  border-bottom: dotted 1px rgba(160, 160, 160, 0.65);
92 
+  color: inherit;
93 
+  text-decoration: none;
94 
+}
95 
+
96 
+a:before {
97 
+  -moz-transition: color 0.2s ease;
98 
+  -webkit-transition: color 0.2s ease;
99 
+  -ms-transition: color 0.2s ease;
100 
+  transition: color 0.2s ease;
101 
+}
102 
+
103 
+a:hover {
104 
+  border-bottom-color: transparent;
105 
+  color: #2ebaae !important;
106 
+}
107 
+
108 
+a:hover:before {
109 
+  color: #2ebaae !important;
110 
+}
111 
+
112 
+strong, b {
113 
+  color: #3c3b3b;
114 
+  font-weight: 700;
115 
+}
116 
+
117 
+em, i {
118 
+  font-style: italic;
119 
+}
120 
+
121 
+p {
122 
+  margin: 0 0 2em 0;
123 
+}
124 
+
125 
+h1, h2, h3, h4, h5, h6 {
126 
+  color: #3c3b3b;
127 
+  font-family: "Raleway", Helvetica, sans-serif;
128 
+  font-weight: 800;
129 
+  letter-spacing: 0.25em;
130 
+  line-height: 1.65;
131 
+  margin: 0 0 1em 0;
132 
+  text-transform: uppercase;
133 
+}
134 
+
135 
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
136 
+  color: inherit;
137 
+  border-bottom: 0;
138 
+}
139 
+
140 
+h2 {
141 
+  font-size: 1.1em;
142 
+}
143 
+
144 
+h3 {
145 
+  font-size: 0.9em;
146 
+}
147 
+
148 
+h4 {
149 
+  font-size: 0.7em;
150 
+}
151 
+
152 
+h5 {
153 
+  font-size: 0.7em;
154 
+}
155 
+
156 
+h6 {
157 
+  font-size: 0.7em;
158 
+}
159 
+
160 
+sub {
161 
+  font-size: 0.8em;
162 
+  position: relative;
163 
+  top: 0.5em;
164 
+}
165 
+
166 
+sup {
167 
+  font-size: 0.8em;
168 
+  position: relative;
169 
+  top: -0.5em;
170 
+}
171 
+
172 
+blockquote {
173 
+  border-left: solid 4px rgba(160, 160, 160, 0.3);
174 
+  font-style: italic;
175 
+  margin: 0 0 2em 0;
176 
+  padding: 0.5em 0 0.5em 2em;
177 
+}
178 
+
179 
+code {
180 
+  background: rgba(160, 160, 160, 0.075);
181 
+  border: solid 1px rgba(160, 160, 160, 0.3);
182 
+  font-family: "Courier New", monospace;
183 
+  font-size: 0.9em;
184 
+  margin: 0 0.25em;
185 
+  padding: 0.25em 0.65em;
186 
+}
187 
+
188 
+pre {
189 
+  -webkit-overflow-scrolling: touch;
190 
+  font-family: "Courier New", monospace;
191 
+  font-size: 0.9em;
192 
+  margin: 0 0 2em 0;
193 
+}
194 
+
195 
+pre code {
196 
+  display: block;
197 
+  line-height: 1.75em;
198 
+  padding: 1em 1.5em;
199 
+  overflow-x: auto;
200 
+}
201 
+
202 
+hr {
203 
+  border: 0;
204 
+  border-bottom: solid 1px rgba(160, 160, 160, 0.3);
205 
+  margin: 2em 0;
206 
+}
207 
+
208 
+hr.major {
209 
+  margin: 3em 0;
210 
+}
211 
+
212 
+.align-left {
213 
+  text-align: left;
214 
+}
215 
+
216 
+.align-center {
217 
+  text-align: center;
218 
+}
219 
+
220 
+.align-right {
221 
+  text-align: right;
222 
+}
223 
+
224 
+header p {
225 
+  font-family: "Raleway", Helvetica, sans-serif;
226 
+  font-size: 0.7em;
227 
+  font-weight: 400;
228 
+  letter-spacing: 0.25em;
229 
+  line-height: 2.5;
230 
+  margin-top: -1em;
231 
+  text-transform: uppercase;
232 
+}
233 
+
234 
+
235 
+/* Wrapper */
236 
+
237 
+#wrapper {
238 
+  display: -moz-flex;
239 
+  display: -webkit-flex;
240 
+  display: -ms-flex;
241 
+  display: flex;
242 
+  -moz-flex-direction: row-reverse;
243 
+  -webkit-flex-direction: row-reverse;
244 
+  -ms-flex-direction: row-reverse;
245 
+  flex-direction: row-reverse;
246 
+  -moz-transition: opacity 0.5s ease;
247 
+  -webkit-transition: opacity 0.5s ease;
248 
+  -ms-transition: opacity 0.5s ease;
249 
+  transition: opacity 0.5s ease;
250 
+  margin: 0 auto;
251 
+  max-width: 100%;
252 
+  opacity: 1;
253 
+  padding: 4.5em;
254 
+  width: 90em;
255 
+}
256 
+
257 
+@media screen and (max-width: 1680px) {
258 
+
259 
+  #wrapper {
260 
+    padding: 3em;
261 
+  }
262 
+
263 
+}
264 
+
265 
+@media screen and (max-width: 1280px) {
266 
+
267 
+  #wrapper {
268 
+    display: block;
269 
+  }
270 
+
271 
+}
272 
+
273 
+@media screen and (max-width: 736px) {
274 
+
275 
+  #wrapper {
276 
+    padding: 1.5em;
277 
+  }
278 
+
279 
+}
280 
+
281 
+/* Main */
282 
+
283 
+#main {
284 
+  -moz-flex-grow: 1;
285 
+  -webkit-flex-grow: 1;
286 
+  -ms-flex-grow: 1;
287 
+  flex-grow: 1;
288 
+  -ms-flex: 1;
289 
+  width: 100%;
290 
+}
291 
+
292 
+/* Sidebar */
293 
+
294 
+#sidebar {
295 
+  margin-right: 3em;
296 
+  min-width: 22em;
297 
+  width: 22em;
298 
+}
299 
+
300 
+  #sidebar > * {
301 
+  border-top: solid 1px rgba(160, 160, 160, 0.3);
302 
+  margin: 3em 0 0 0;
303 
+  padding: 3em 0 0 0;
304 
+}
305 
+
306 
+#sidebar > :first-child {
307 
+  border-top: 0;
308 
+  margin-top: 0;
309 
+  padding-top: 0;
310 
+}
311 
+
312 
+@media screen and (max-width: 1280px) {
313 
+
314 
+  #sidebar {
315 
+    border-top: solid 1px rgba(160, 160, 160, 0.3);
316 
+    margin: 3em 0 0 0;
317 
+    min-width: 0;
318 
+    padding: 3em 0 0 0;
319 
+    width: 100%;
320 
+  }
321 
+
322 
+}
323 
+
324 
+#sidebar header h1 {
325 
+  font-size: 2em;
326 
+  font-weight: 900;
327 
+}
328 
+
329 
+#sidebar header p {
330 
+  font-size: 0.8em;
331 
+}
332 
+
333 
+@media screen and (max-width: 1280px) {
334 
+
335 
+  #sidebar header p {
336 
+    font-size: 0.7em;
337 
+  }
338 
+
339 
+}
340 
+
341 
+@media screen and (max-width: 736px) {
342 
+
343 
+  #sidebar header h1 {
344 
+    font-size: 1.25em;
345 
+  }
346 
+
347 
+}

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить