action/style.css at master · ryanve/action · GitHub

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
/*!
Theme Name: action
Theme URI: http://actiontheme.com
Description: Extensible HTML5 parent theme.
Version: 2.0.0-15
Author: Ryan Van Etten
Author URI: http://ryanve.com
Tags: accessibility-ready, microformats, responsive-layout, custom-menu, custom-background, light, white
License: MIT
License URI: http://opensource.org/licenses/MIT
*/

/*!
 * Main styles for "action" theme (relies on ./base.css)
 * @link http://github.com/ryanve/action/issues/2
 * @link http://github.com/ryanve/action/issues/5
 */

/* =formatting
Be color-agnostic so that color can be modularly cascaded.
baymard.com/blog/formatting-links-for-usability
nngroup.com/articles/guidelines-for-visualizing-links/
--------------------------------------------------------------------- */
a:link { font-weight:bolder; }
nav a:link { font-weight:bold; }
a:link small { font-weight:lighter; }
strong a, small a, b a, i a, em a, cite a, code a, kbd a , s a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; }
a img { opacity:0.9; }
label { margin-right:.6em; }

/* =modifiers */
.dot-anchors a:link, .dash-anchors a:link, .solid-anchors a:link { text-decoration:none; border-bottom-width:1px; }
.dash-anchors a:link { border-bottom-style:dashed; }
.dot-anchors a:link  { border-bottom-style:dotted; }
.solid-anchors a:link, .dash-anchors a:hover, .dot-anchors a:hover { border-bottom-style:solid; }
.void-anchor-border a { border:0!important; }
.void-anchor-decor a { text-decoration:none; }

@media (color) {
  :not(.assist) a:not(:hover) { text-decoration:none; }
}

/* =size/proximity
en.wikipedia.org/wiki/News_style
bit.ly/maglossary
--------------------------------------------------------------------- */
body { font-size:1em; line-height:1.618; } /* golden ratio */
ul, ol { padding-left:2em; } /* vs. 40px default from bit.ly/css2sample */

article figure + figure { margin-top:1.5em; }
figcaption { padding-top:.5em; padding-bottom:.5em; }
figcaption:first-child { padding-top:0; padding-bottom:0; } /* revert if caption is on top */

h1, h2 { margin-top:.618em; margin-bottom:.618em; }
h3, h4, h5, h6 { margin-top:1.146em; margin-bottom:1em; }
h1, h2, h3 { line-height:1.236; font-size:1.236em; }
h1 { font-size:1.618em; }
h4 {font-size:1.146em; }
h5 { font-size:1em; }
h6 { font-size:.944em; }
@media (min-width:30em) {
  h1 { font-size:2em; }
  h2 { font-size:1.5em; }
}

@media (min-width:30em) and (min-height:20em) {
  .upsize .entry-content,    /* Upsize content when applied to any ancestor. */
  .upsize > .entry-summary,  /* Upsize excerpt only when applied to parent, e.g. post_class. */
  main .arrestive { font-size:1.1em; }
  .journalistic > .entry-content > p:first-child,
  .journalistic .entry-content .standfirst,
  .journalistic .entry-content .lede { font-size:1.236em; line-height:1.236; }
}

/* =color
Aim for contrast ratios between 4 and 16.
leaverou.github.io/contrast-ratio/
lea.verou.me/2012/10/easy-color-contrast-ratios/
bit.ly/wcag2contrast
ux.stackexchange.com/a/35847
Colors like #17c #d30 #d09 have consistent contrast on white or black.
--------------------------------------------------------------------- */
::-moz-selection { background:#f5f533; color:#080808; }
     ::selection { background:#f5f533; color:#080808; }

html { color:#1c1c1c; background:#fafafa; }
.skin-dark { background:#111; color:#efefef; }

.reduce-color a:not(:hover) { border-color:#efefef; }
.reduce-color.skin-dark a:not(:hover) { border-color:#333; }

/* border-color applies to border-style/-width and otherwise has no effect */
a:link, a:visited { color:#15c; }
a:hover { border-color:#15c; }
a:hover:focus { border-color:#05a; }

.skin-dark a:link, .skin-dark a:visited { color:#9c9d9e; }
.skin-dark a:hover { border-color:#efefef; }
.skin-dark a:focus:hover { border-color:#efefef; }
.void-color a:link, .void-color a:visited { color:#1c1c1c; }
.void-color a:hover { border-color:#1c1c1c; }
.void-color.skin-dark a:hover { border-color:#efefef; }

/* =editor
bit.ly/wp-theme-review#WordPress-Generated_CSS_Classes
--------------------------------------------------------------------- */
.wp-caption {}
.wp-caption + .wp-caption { margin-top:1.5em; }
.wp-caption-text { padding-top:.5em; padding-bottom:.5em; }
.wp-caption-text { margin:0; }

.gallery-size-thumbnail .gallery-caption { display:none; }
dl.gallery-item { float:left; max-width:30%; margin:.5em 3% .5em 0; padding:0; }
dd.gallery-caption { margin-left:0; }

.alignnone, .alignleft, .alignright, .aligncenter, article .gallery { display:block; margin:1.1em 0; }
.aligncenter { margin-left:auto; margin-right:auto; }
.alignleft { float:left; margin-right:4%; }
.alignright { float:right; margin-left:4%; }

/* =entries
--------------------------------------------------------------------- */
.sticky {}
.hentry { clear:left; }
.hentry + .hentry { margin-top:2em; }

.entry-title { margin-bottom:.2em; }
.entry-title:first-child { margin-top:0; }
.byline { margin:.5em 0; }
.entry-summary { clear:none; }
.entry-summary p:first-child { margin-top:0; }
.hide-unused .unused, .hide-excerpts .entry-summary, .entry-summary ~ .entry-meta { display:none; }

.meta-label { font-size:inherit; font-weight:600; }
.entry-footer, .entry-meta, .comments, article.comment, #disqus_thread, #respond { clear:both; }
.xoxo { clear:both; list-style-type:none; padding-left:0; margin-bottom:2em; }
.xoxo li { clear:both; display:block; margin-top:1em; margin-bottom:1em; }
.comment-content {}
.bypostauthor {}
.thumbnail-anchor, .avatar-anchor {
  display:block; float:left; clear:both;
  margin-bottom:1em; margin-right:4%;
}
.image-anchor:empty { display:none; float:none; }

/* =layout
--------------------------------------------------------------------- */
body { margin:0 auto; width:96%; }

.site-header { margin:0 auto; }
.site-branding { margin-bottom:1.5em; }
.site-title { margin:.146em 0; }
.site-footer { clear:both; margin:1em auto; padding:1em; }
.header-widget-area { clear:left; }

.widget-area, .widget-area > ul { list-style-type:none; padding-left:0; }
.widgettitle { margin:.4em 0; }
li.widget { display:block; margin:2em 0; }
li.widget:first-child { margin-top:inherit; }
li.widget:last-child { margin-bottom:inherit; }

main { display:block; clear:left; float:left; width:100%; max-width:100%; margin:1em auto; padding:0; }
main:after { display:table; content:" "; clear:both; }

.loop { padding:0; }
.loop-header:not(:empty) { margin-bottom:2em; }
.loop-header h1 { margin-top:inherit; }
.loop-nav { clear:both; margin-top:2em; margin-bottom:1em; font-weight:bold; }
.loop-nav a { display:inline-block; padding:.5em 0; margin:0 1em 1em 0; }
.singular .loop-nav a { display:block; clear:both; margin-bottom:2px; }
.plural .loop-nav [rel~="prev"]:before { content:"< "; }
.plural .loop-nav [rel~="next"]:after { content:" >"; }

/* =layout=modifiers */
@media (min-width:53em) {
  .l-lheader main { float:left; clear:right; max-width:40em; }
  .l-lheader .site-header h1 { margin-top:0; }
  .l-lheader .site-header { float:left; margin:0 1em 0 -1%; padding:1em; }
  .l-lheader.full-width main, .l-lheader.attachment main { max-width:50em; }

  .l-rsidebar body { max-width:50em; }
  .l-rsidebar.l-lheader main { float:left; clear:right; }
  .l-rsidebar .loop { width:100%; max-width:31em; float:left; }
  .l-rsidebar .major-widget-area,
  .l-rsidebar .minor-widget-area { width:32%; max-width:18.75em; margin:0; float:right; clear:right; }

  .l-lsidebar body { max-width:50em; }
  .l-lsidebar.l-lheader main { float:right; clear:left; }
  .l-lsidebar .loop { width:100%; max-width:30em; float:right; }
  .l-lsidebar .major-widget-area,
  .l-lsidebar .minor-widget-area { width:32%; max-width:18.75em; margin:0; float:left; clear:left; }
}

@media (min-width:62.5em) {
  .l-lheader main { max-width:45em; }
  .l-rsidebar body, .l-lsidebar body { max-width:60em; }
  .l-rsidebar .loop, .l-lsidebar .loop { max-width:40em; }
}

@media (min-width:68em) {
  .l-lheader main { max-width:50em; }
  .l-lheader.full-width main { max-width:60em; }
  .l-rsidebar body, .l-lsidebar body { max-width:64em; }
  .l-rsidebar .loop, .l-lsidebar .loop { max-width:43.75em; }
}

/* clearfix */
.l-lsidebar .loop:after,
.l-lsidebar .minor-widget-area:after { display:table; content:" "; clear:both; }

/* overrides */
.full-width .loop, .full-width .major-widget-area, .full-width .minor-widget-area {
  width:100%; max-width:100%; clear:both;
  padding-left:0; padding-right:0; margin-bottom:1em;
}