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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
|
// Typography
//
// Styles from this page can be found in `wyrm_core/_type.sass`.
// Let's start with some basic links.
//
// Markup:
// I wonder where <a href="#url" class="{$modifiers}">this link goes</a>!
//
// :hover - On hover.
// :visited - Visited links.
//
// Styleguide 4.0
a
color: $link-color
text-decoration: none
cursor: pointer
&:hover
color: $link-color-hover
&:visited
color: $link-color-visited
// Text
//
// Text handling and other base styles. Can be safely used on any element, not just paragraph tags.
//
// Markup:
// <p class="{$modifiers}">The best movie of all time is either Network or Rollerball.</p>
//
// .wy-text-small - Smaller, 80% text. Can also use the `<small>` tag for this.
// .wy-text-large - Larger, 120% text.
// .wy-text-left - To the left.
// .wy-text-right - To the right.
// .wy-text-center - To the center.
// .wy-text-center - To the center.
// .wy-text-strike - Strikethrough.
// .wy-text-neutral - Simply applies the normal text color.
// .wy-text-info - Info text.
// .wy-text-success - Success text.
// .wy-text-warning - Warning text.
// .wy-text-danger - Danger text.
//
// Styleguide 4.1
html
height: 100%
overflow-x: hidden
body
font-family: $base-font-family
font-weight: normal
color: $text_color
min-height: 100%
overflow-x: hidden
background: $background_color
.wy-text-left
text-align: left
.wy-text-center
text-align: center
.wy-text-right
text-align: right
.wy-text-large
font-size: 120%
.wy-text-normal
font-size: 100%
.wy-text-small, small
font-size: 80%
.wy-text-strike
text-decoration: line-through
.wy-text-warning
color: $orange !important
a.wy-text-warning:hover
color: lighten($orange, 10%) !important
.wy-text-info
color: $blue !important
a.wy-text-info:hover
color: lighten($blue, 10%) !important
.wy-text-success
color: $green !important
a.wy-text-success:hover
color: lighten($green, 10%) !important
.wy-text-danger
color: $red !important
a.wy-text-danger:hover
color: lighten($red, 10%) !important
.wy-text-neutral
color: $text-color !important
a.wy-text-neutral:hover
color: lighten($text-color, 10%) !important
// Headings and paragraphs.
//
// Headings and paragraphs have a `margin-bottom: $base-line-height` on them like most objects in wyrm.
//
// Markup:
// <h1>Heading 1</h1>
// <h2>Heading 2</h2>
// <h3>Heading 3</h3>
// <h4>Heading 4</h4>
// <h5>Heading 5</h5>
// <h6>Heading 6</h6>
// <p>Hey everybody, it's Tuuuuuuuesday! I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat. Seattle is actually Spanish for "taco." I try not to affiliate myself with Canadians. I've got a salty mustache. I've been a party to many, many stupid things in my life. This is by far the stupidest. This Quick Look is over! I'm an old man. I like turns.</p>
// <p>Jeff, I have a question. Why do we keep doing this? There's nothing I'd rather talk about right now than Peter Molyneux's balls! I WILL CONTINUE TO CALL PAX AUSTRALIA PAXA UNTIL IT FUCKING CATCHES ON. I feel like I'm gonna throw up, but in a good way. No one should ever put clothes on a shark. You are looking for far too much logical consistency.</p>
//
// Styleguide 4.2
h1,h2,h3,h4,h5,h6, legend
margin-top: 0
font-weight: 700
font-family: $custom-font-family
p
line-height: $base-line-height
margin: 0
font-size: $base-font-size
margin-bottom: $base-line-height
h1
font-size: 175%
h2
font-size: 150%
h3
font-size: 125%
h4
font-size: 115%
h5
font-size: 110%
h6
font-size: 100%
hr
display: block
height: 1px
border: 0
border-top: 1px solid $table-border-color
margin: $base-line-height 0
padding: 0
code
white-space: nowrap
max-width: 100%
background: $text-code-background-color
border: solid 1px $text-code-border-color
font-size: 75%
padding: 0 5px
font-family: $code-font-family
color: $text-code-color
overflow-x: auto
&.code-large
font-size: 90%
// Lists
//
// Lists in wyrm default to `list-style: none` mostly because I've found I use lists
// more often as nav or block elements than as text lists. To get traditional
// text lists you either add, or extend these classes through sass. For convenience
// default lists in the `<article>` tag also extend these values.
//
// Markup:
// <ul class="{$modifiers}">
// <li>Freespace 2</li>
// <li>The Elder Scrolls: Skyrim</li>
// <li>Grim Fandango</li>
// <li>
// Saints forever:
// <ul>
// <li>Saint's Row</li>
// <li>Saint's Row 2</li>
// <li>Saint's Row: The Third</li>
// <li>Saint's Row IV</li>
// </ul>
// <ol>
// <li>number 1</li>
// <li>number 2</li>
// </ol>
// </li>
// </ul>
//
// .wy-plain-list-disc - The usual disc list.
// .wy-plain-list-decimal - Decimal lists.
//
// Styleguide 4.3
%wy-plain-list-disc
list-style: disc
line-height: $base-line-height
margin-bottom: $base-line-height
li
list-style: disc
margin-left: $base-line-height
p:last-child
margin-bottom: 0
ul
margin-bottom: 0
li
list-style: circle
li
list-style: square
ol li
list-style: decimal
%wy-plain-list-decimal
list-style: decimal
line-height: $base-line-height
margin-bottom: $base-line-height
li
list-style: decimal
margin-left: $base-line-height
p:last-child
margin-bottom: 0
ul
margin-bottom: 0
li
list-style: disc
.wy-plain-list-disc, article ul
@extend %wy-plain-list-disc
.wy-plain-list-decimal, article ol
@extend %wy-plain-list-decimal
|
