-
Notifications
You must be signed in to change notification settings - Fork 4
/
style.css
93 lines (78 loc) · 4.93 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/* html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{font-size:100%;}Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */
html{background:#fbfbfb;font-family:'Helvetica Neue',Helvetica,sans-serif;transition: background .5s linear;}
#menu{color:#666;border-radius: 10px;font-size:11px;font-weight:900;height:15px; overflow:hidden;position:fixed;top:0;left:0;padding:5px;opacity: 0.6;}
#menu:hover,
#menu:focus {height:auto;opacity:1;}
#menu li {list-style:none;}
#logo {color:#999;cursor:default;font-size: 12px;letter-spacing:-1px;margin:0 0 10px 0;}
#style {margin:0;padding:0;}
#style span {display:inline-block;font-size: 12px;font-weight:200;line-height: 30px;width:3em;}
#style a {text-decoration: none;color: #000;border-radius: 50px;line-height: 24px;width: 24px;height: 24px;display: inline-block;text-align: center;border:1px solid rgba(0,0,0,.1);}
#style .size a {font-size: 12px;}
#style .color a {color:#000;}
#files {position:fixed;left:10px;bottom:10px;margin: 0;padding: 0;}
#files>li {border: 1px solid transparent;border-radius:50px;height:20px;background:#ccc;margin-right:10px;display:inline-block;font-size:0;width: 20px;vertical-align: top;opacity:.6;cursor:pointer;}
#files>li.selected {background:transparent;border: 1px solid #ccc;opacity:.7;cursor:default;}
#t{background:transparent;border:none;color:#222;display:block;font-family:Garamond,serif;font-size:120%;min-height:200px;line-height:1.6em;margin:0 auto;padding:5%;width:90%;max-width:40em;outline: none;transition: background .5s linear,color .5s linear;}
#m{background: none repeat scroll 0 0 #FEFEA3;border: 1px solid #FFE067;border-radius: 5px 5px 5px 5px;color: #333;font-size: 12px;font-weight: 700;left: 50%;margin-left: -300px;opacity: 0.95;padding: 5px;position: absolute;text-align: center;top: 5px;width: 600px;}
#controls {position: fixed;text-align: center;top: 5px;width: 50%;left: 25%;opacity:0;padding: 0 20px 40px;transition: opacity .3s linear;}
#controls:hover {opacity:1;transition: opacity .1s linear;}
#controls a {text-decoration: none;color: #000;background: rgba(255,255,255,.5);display: inline-block;font-weight:100;height: 24px;width: 24px;line-height: 24px;padding: 2px;border-radius: 50px;}
#help {display: inline-block;color: #000;font-size: 16px;position:fixed;padding:10px;text-decoration:none;top:0;right:0;opacity: 0.5;}
.details {font-size:11px;opacity:.4;position:fixed;bottom:5px;right:5px;}
#words {}
#box-help {background: #fff;cursor: pointer;border-radius: 20px;margin: 0 auto;opacity: 0.95;padding: 5%;width: 40%;position: absolute;left: 25%;top: 40px;box-shadow: 0 0 200px #666;}
#box-help .image {margin:0;text-align:center;}
#box-help h1 {color:#000;font-size:64px;font-weight: 900;margin: 0;text-align:center;}
#box-help p,
#box-help li {font-size: 16px;line-height: 1.5em;margin-bottom: 14px;}
#box-help li {list-style: disc;margin: 0 0 7px 2em;}
#box-help .footnote {opacity: .5;margin-bottom: -20px;text-align: right;font-size: 12px;}
@media screen and (max-width: 960px) {
#box-help {width: 70%;left: 10%;top: 5%;}
}
@media screen and (max-width: 640px) {
#box-help {width: 80%;left: 5%;top: 5%;}
#box-help h1 {font-size: 42px;}
}
/* Styling */
.typography .serif,
.serif #t {font-family:Garamond,serif}
.typography .sans,
.sans #t {font-family:'Helvetica Neue',Helvetica,sans-serif}
.typography .cursive,
.cursive #t {font-family:cursive}
.typography .mono,
.mono #t {font-family:monospace}
.size .small,
.small #t {font-size:14px;}
.size .medium,
.medium #t {font-size:16px;}
.size .large,
.large #t {font-size:20px;}
.size .xlarge,
.xlarge #t {font-size:28px;}
.color .cblack {background: #222}
.cblack #t {color:#222;}
.color .cblue {background: #30395C}
.cblue #t {color:#30395C;}
.color .cdark {background: #666}
.cdark #t {color:#666;}
.color .cwhite {background: #fff}
.cwhite #t {color:#fff;}
.background .bwhite,
html.bwhite {background: #fff;}
.background .bivory,
html.bivory {background: #FFF1D0;}
.background .bstone,
html.bstone {background: #F0F0F0;}
.background .bblack,
html.bblack {background: #222;}
.width .w1,
.w1 #t {max-width:20em;}
.width .w2,
.w2 #t {max-width:40em;}
.width .w3,
.w3 #t {max-width:60em;}
.width .w4,
.w4 #t {max-width:100em;}