Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 596 lines (472 sloc) 10.822 kB
828c3de @jayj Add the theme files
authored
1 /*!
2 * Theme Name: Cycnus
34978e6 @jayj Version 1.0.1
authored
3 * Theme URI: http://jayj.dk/themes/cycnus
ae91480 @jayj Update description
authored
4 * Description: A light child theme for the <a href="http://wordpress.org/themes/socially-awkward">Socially Awkward</a> media theme. Besides the light colours, it adds support for a custom background.
5b6a4d1 @jayj New version: 1.1.1
authored
5 * Version: 1.1.1
828c3de @jayj Add the theme files
authored
6 * Author: Jesper Johansen
7 * Author URI: http://jayj.dk
8 * Template: socially-awkward
b0a0ecc @jayj Theme description and tags
authored
9 * Tags: light, white, blue, one-column, featured-images, microformats, post-formats, sticky-post, threaded-comments, custom-background, custom-menu
828c3de @jayj Add the theme files
authored
10 * License: GNU General Public License v2.0
11 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
12 */
13
b46f362 @jayj SASS: Color variables
authored
14 @import 'sass/variables';
828c3de @jayj Add the theme files
authored
15
74e2dc7 @jayj Include a button mixin
authored
16 @mixin button( $hover: #000 ) {
17 background: $gray-darker;
18 color: #fff;
19
20 &:hover {
21 background: $hover;
22 color: $gray-light;
23 }
24 }
25
828c3de @jayj Add the theme files
authored
26 /**
27 * Libre Baskerville font
28 * --------------------------------------------------------------------------- */
29
30 h1, h2, h3, h4, h5, h6,
dba8ca4 @jayj Update styles to reflect changes in Socially Awkward 1.0
authored
31 .comment-author,
828c3de @jayj Add the theme files
authored
32 .format-chat cite,
33 dt {
34 font: {
927b707 @jayj Change heading font from Libre Baskerville to Lora
authored
35 family: 'Lora', 'Libre Baskerville', 'Baskerville', serif;
828c3de @jayj Add the theme files
authored
36 weight: 700;
37 style: normal;
38 }
39 }
40
41 /**
42 * Defaults
43 * --------------------------------------------------------------------------- */
44
dba8ca4 @jayj Update styles to reflect changes in Socially Awkward 1.0
authored
45 /* === Body === */
828c3de @jayj Add the theme files
authored
46
47 body {
dba8ca4 @jayj Update styles to reflect changes in Socially Awkward 1.0
authored
48 padding-top: 0;
e2d1dcb @jayj Code cleanup
authored
49 border-top-color: rgba( #000, 0.3 );
50 border-bottom-color: rgba( #000, 0.4 );
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
51 background: $background-color;
828c3de @jayj Add the theme files
authored
52 }
53
c825806 @jayj Use a body class to detect a non-white background color. If a non-whi…
authored
54 // Add back the default Socially Awkward border colors
55 .custom-background-empty,
56 .custom-background-white {
57 border-top-color: $red;
58 border-bottom-color: $blue;
59 }
60
e2d1dcb @jayj Code cleanup
authored
61 /* === Reset opacities to 100% === */
828c3de @jayj Add the theme files
authored
62
63 #respond input[type="text"],
64 #respond input[type="email"],
65 #respond input[type="url"],
66 #respond input[type="submit"],
67 #respond input[type="submit"]:focus,
68 #respond input[type="submit"]:hover,
69 #respond textarea,
70 #main a:hover, a:hover,
71 .comment-content pre, pre,
dba8ca4 @jayj Update styles to reflect changes in Socially Awkward 1.0
authored
72 .comment-content th,
73 .comment-content td,
828c3de @jayj Add the theme files
authored
74 th, td,
75 .wp-caption-text {
76 opacity: 1;
77 }
78
79 /* === Links === */
80
81 #main a {
82 color: $link-color;
b46f362 @jayj SASS: Color variables
authored
83 transition-duration: $transition-duration;
828c3de @jayj Add the theme files
authored
84 }
85
86 #main a:hover,
87 a:hover {
88 color: $link-color-hover;
b46f362 @jayj SASS: Color variables
authored
89 transition-duration: $transition-duration;
828c3de @jayj Add the theme files
authored
90 }
91
92 /* === Code and Preformatted text === */
93
94 code {
95 background: none;
b46f362 @jayj SASS: Color variables
authored
96 color: $code-color;
828c3de @jayj Add the theme files
authored
97 font-size: 1.2rem; // or 1 or 1.25
98 }
99
100 pre,
101 .comment-content pre {
102 border: none;
103 border-radius: 5px;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
104 background: $pre-bg-color;
b46f362 @jayj SASS: Color variables
authored
105 color: $pre-text-color;
828c3de @jayj Add the theme files
authored
106 }
107
108 /* === Tables === */
109
110 table {
111 border-spacing: 0;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
112 border-collapse: collapse;
828c3de @jayj Add the theme files
authored
113 }
114
115 caption {
116 color: $text-color-secondary;
117 }
118
7d1c3df @jayj Style tables in comments
authored
119 th,
120 .comment-content th {
b46f362 @jayj SASS: Color variables
authored
121 border: 1px solid $table-border-color;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
122 background: lighten( $table-color, 10% );
828c3de @jayj Add the theme files
authored
123
124 thead & {
b46f362 @jayj SASS: Color variables
authored
125 border: 1px solid darken( $table-border-color, 3% );
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
126 background: lighten( $table-color, 4% );
828c3de @jayj Add the theme files
authored
127 }
128 }
129
7d1c3df @jayj Style tables in comments
authored
130 td,
131 .comment-content td {
b46f362 @jayj SASS: Color variables
authored
132 border: 1px solid $table-border-color;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
133 background: none;
828c3de @jayj Add the theme files
authored
134 }
135
136 tfoot th,
137 tfoot td {
138 background: lighten( $table-color, 11% );
139 box-shadow: inset 0 1px 1px 0 $table-color;
140 color: darken( $table-color, 45% );
141 font-size: 1.1rem;
142 }
143
4ab6d9f @jayj Add styling for audio and video playlists
authored
144 /* === WordPress Playlist === */
145
146 .wp-playlist-tracks {
147 border: 1px solid $gray-light;
148 border-top-width: 0;
149 }
150
151 .wp-playlist-light {
152
153 .wp-playlist-item {
154 border-bottom: 1px solid $gray-light;
155
156 &:hover {
157 background: $content-highlight;
158 color: $link-color-hover;
159 }
160 }
161
162 .wp-playlist-item a:hover,
163 .wp-playlist-playing {
164 color: $link-color-hover;
165 }
166
167 }
168
169 .wp-playlist-dark {
170
171 .wp-playlist-item {
172 &, #main & a {
173 color: $gray-light;
174 }
175 }
176
177 .wp-playlist-item:hover {
178 background: rgba(#000, 0.3);
179 }
180
181 .wp-playlist-playing {
182 &, #main & a {
183 color: #fff;
184 }
185 }
186 }
187
828c3de @jayj Add the theme files
authored
188 /**
189 * Images
190 * --------------------------------------------------------------------------- */
191
192 img {
193 background: $image-border-color;
194 }
195
196 /* === Captions === */
197
198 .wp-caption {
199 padding: 10px;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
200 background: $image-border-color;
828c3de @jayj Add the theme files
authored
201
202 img {
203 padding: 0;
204 }
205 }
206
207 .wp-caption-text {
208 position: static;
209 -moz-box-sizing: border-box;
210 box-sizing: border-box;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
211 max-width: 100%;
212 background: none;
213 color: $image-caption-text;
214 font-size: 1rem;
828c3de @jayj Add the theme files
authored
215 }
216
217 /**
218 * Layout
219 * --------------------------------------------------------------------------- */
220
221 #container {
222 margin: 0 auto;
223 padding-top: 40px;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
224 max-width: 960px;
225 background: $content-bg-color;
828c3de @jayj Add the theme files
authored
226 }
227
228 /**
229 * Header
230 * --------------------------------------------------------------------------- */
231
232 #site-description {
233 margin-top: 0.75rem;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
234 color: $icon-color-secondary;
828c3de @jayj Add the theme files
authored
235 }
236
237 /**
238 * Main
239 * --------------------------------------------------------------------------- */
240
f82d23a @jayj Rename .hentry to .entry to reflect changes in Socially Awkward 1.0
authored
241 .entry,
828c3de @jayj Add the theme files
authored
242 .attachment-meta,
243 #comments-template {
b46f362 @jayj SASS: Color variables
authored
244 border-top: $main-border-top;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
245 background: $content-bg-color;
b46f362 @jayj SASS: Color variables
authored
246 color: $text-color;
828c3de @jayj Add the theme files
authored
247
248 border-bottom: 0;
249 margin-bottom: 0;
250
251 &:last-of-type {
b46f362 @jayj SASS: Color variables
authored
252 border-bottom: $main-border-bottom;
253 margin-bottom: $main-gutter-width;
828c3de @jayj Add the theme files
authored
254 }
255 }
256
f82d23a @jayj Rename .hentry to .entry to reflect changes in Socially Awkward 1.0
authored
257 .singular .entry + #comments-template,
258 .singular-attachment .entry + .attachment-meta {
828c3de @jayj Add the theme files
authored
259 border-top: 0;
b46f362 @jayj SASS: Color variables
authored
260 margin-top: ( -$main-gutter-width );
828c3de @jayj Add the theme files
authored
261 }
262
263 .loop-meta {
264 background: $content-highlight;
b46f362 @jayj SASS: Color variables
authored
265 color: $text-color;
828c3de @jayj Add the theme files
authored
266 }
267
268 /**
269 * Content
270 * --------------------------------------------------------------------------- */
271
272 /* ====== Posts ====== */
273
f82d23a @jayj Rename .hentry to .entry to reflect changes in Socially Awkward 1.0
authored
274 .entry {
d6a681e @jayj Adjust margin for image posts
authored
275 > .wp-caption,
276 > img,
277 > a img {
278 margin-top: -10px;
279 }
280 }
281
828c3de @jayj Add the theme files
authored
282 .sticky {
283 background: $content-highlight;
284
285 &::before {
286 color: darken( $content-highlight, 10% );
287 opacity: 1;
288 }
289 }
290
291 /* Make the caption full width */
f82d23a @jayj Rename .hentry to .entry to reflect changes in Socially Awkward 1.0
authored
292 .entry > .wp-caption {
828c3de @jayj Add the theme files
authored
293 max-width: 100% !important;
294
295 .wp-caption-text {
296 text-align: center;
297 }
298 }
299
300 /* === Post Meta === */
301
302 .entry-byline,
303 .entry-meta {
304 color: $text-color-secondary;
305 }
306
307 /* === Status updates === */
308
309 .format-status .avatar {
310 box-shadow: 0 0 0 10px $image-border-color;
311 }
312
313 /* === Chats === */
314
315 .format-chat .chat-speaker-2 .chat-author,
c734d21 @jayj Remove chat-related code
authored
316 .format-chat .chat-speaker-12 .chat-author {
317 color: #e74c3c;
318 }
828c3de @jayj Add the theme files
authored
319
320 .format-chat .chat-speaker-3 .chat-author,
c734d21 @jayj Remove chat-related code
authored
321 .format-chat .chat-speaker-13 .chat-author {
322 color: #f1c40f;
323 }
4e40081 @jayj Portfolio adjustments
authored
324
325 /* === Portfolio === */
326
327 .portfolio_item {
328 > .wp-caption,
329 > img,
330 > a img {
331 margin-top: -10px;
332 }
333
334 .archive-portfolio_item &:first-of-type {
335 border-top: 0;
336 padding-top: 0;
337 }
338 }
828c3de @jayj Add the theme files
authored
339
340 /* === Post-related icons === */
341
b46f362 @jayj SASS: Color variables
authored
342 .entry-byline,
f82d23a @jayj Rename .hentry to .entry to reflect changes in Socially Awkward 1.0
authored
343 .entry-footer {
344 .entry-permalink,
345 .category,
346 .post_tag,
347 .portfolio,
348 .entry-author a {
b46f362 @jayj SASS: Color variables
authored
349 &::before {
350 color: $icon-color-secondary;
351 }
352 }
353 }
354
355 .portfolio-item-link,
dba8ca4 @jayj Update styles to reflect changes in Socially Awkward 1.0
authored
356 a.comments-link,
357 .comment-meta .comment-permalink,
b46f362 @jayj SASS: Color variables
authored
358 .post-edit-link,
359 .comment-edit-link,
dba8ca4 @jayj Update styles to reflect changes in Socially Awkward 1.0
authored
360 .entry-published,
361 .comment-published,
362 .post-format-link,
363 .image-sizes {
b46f362 @jayj SASS: Color variables
authored
364 &::before {
365 color: $icon-color-secondary;
366 }
828c3de @jayj Add the theme files
authored
367 }
368
369 /* ====== Formats Menu ====== */
370
c9ae770 @jayj Only apply the new formats template styling when the template has con…
authored
371 // Only applies when the template has page content
dba8ca4 @jayj Update styles to reflect changes in Socially Awkward 1.0
authored
372 .page-template-formats .entry {
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
373 padding-top: $main-gutter-width;
b46f362 @jayj SASS: Color variables
authored
374 border-top: $main-border-top;
375 border-bottom: $main-border-bottom;
52ad209 @jayj Use the same CSS property ordering as Socially Awkward
authored
376 background: $content-highlight;
828c3de @jayj Add the theme files
authored
377
55d0a2c @jayj Formats template: Show the post format name all the time, not just in…
authored
378 li a {
379 margin-bottom: ( $main-gutter-width * 1.5 );
380
381 &::before {
382 transition-duration: ( $transition-duration + 20ms );
383 }
828c3de @jayj Add the theme files
authored
384
55d0a2c @jayj Formats template: Show the post format name all the time, not just in…
authored
385 // Show the post format name all the time
386 &::after {
387 content: attr(title);
388 position: absolute;
389 bottom: -37px;
390 left: 0;
391 z-index: 999;
392 width: 120px;
393 color: darken( $text-color-secondary, 10% );
394 white-space: nowrap;
395 font: {
396 family: 'Open Sans', sans-serif;
397 weight: 400;
398 style: normal;
399 }
400 }
401
402 &:hover::after {
403 color: lighten( $text-color-secondary, 10% );
404 }
828c3de @jayj Add the theme files
authored
405 }
406 }
407
408 #menu-formats li a:hover::before {
409 opacity: 0.7;
b46f362 @jayj SASS: Color variables
authored
410 transition-duration: ( $transition-duration + 120ms );
828c3de @jayj Add the theme files
authored
411 }
412
dc52ae9 @jayj Bugfix: prevent two-line image attachment meta
authored
413 /* ====== Attachment Meta ====== */
414
415 /* Bugfix: Prevent two line image meta (mostly long camera names). */
416 .image-info {
417 .data {
418 overflow: hidden;
419 max-width: 60%;
420 text-overflow: ellipsis;
421 white-space: nowrap;
422 }
423
424 .prep {
425 max-width: 40%;
426 }
427 }
428
828c3de @jayj Add the theme files
authored
429 /* ====== Audio/Video shortcode toggle ====== */
430
431 .media-shortcode-extend .audio-info,
432 .media-shortcode-extend .video-info {
b46f362 @jayj SASS: Color variables
authored
433 background: $gray-darker;
434 color: $gray-light;
828c3de @jayj Add the theme files
authored
435
436 #main & a {
437 color: lighten( $link-color, 10% );
438
439 &:hover {
440 color: lighten( $link-color-hover, 6% );
441 }
442 }
443 }
444
445 #main .media-info-toggle {
74e2dc7 @jayj Include a button mixin
authored
446 @include button( $hover: $gray-darker );
828c3de @jayj Add the theme files
authored
447 }
448
449 /* ====== Pagination ====== */
450
451 #main .page-links a,
452 #main .loop-nav a,
453 #main .comments-nav a,
b46f362 @jayj SASS: Color variables
authored
454 #comments-template .comment-reply-link,
455 #menu-portfolio li a {
74e2dc7 @jayj Include a button mixin
authored
456 @include button();
828c3de @jayj Add the theme files
authored
457 }
458
459 .page-links a {
460 border-radius: 50%;
461 }
462
463 .comments-nav .page-numbers {
464 margin: 0 10px;
465 }
72ba555 @jayj Add support for the Loop Pagination extension
authored
466
828c3de @jayj Add the theme files
authored
467 /**
468 * Comments Template
469 * --------------------------------------------------------------------------- */
470
471 /* === Comment text/content === */
472
473 .comment-content {
b46f362 @jayj SASS: Color variables
authored
474 background: $comment-bg;
828c3de @jayj Add the theme files
authored
475 }
476
2f25aba @jayj Style pings
authored
477 /* === Pings === */
478
479 li.ping {
480 background: $comment-bg;
481 opacity: 0.5;
482 }
483
828c3de @jayj Add the theme files
authored
484 /* === Avatars === */
485
486 .comment-list .avatar {
487 box-shadow: 0 0 0 10px $image-border-color;
488 }
489
490 /* === Post author comment === */
491
492 .comment-list .bypostauthor {
493 .comment-content {
b46f362 @jayj SASS: Color variables
authored
494 background: $comment-bg-author;
828c3de @jayj Add the theme files
authored
495 }
496
497 .avatar {
b46f362 @jayj SASS: Color variables
authored
498 box-shadow: 0 0 0 10px $comment-avatar-author;
828c3de @jayj Add the theme files
authored
499 }
500 }
501
502 /* === Meta === */
503
504 .comment-meta {
505 color: $text-color-secondary;
506 }
507
508 /* ====== RESPOND (COMMENT FORM) ====== */
509
b46f362 @jayj SASS: Color variables
authored
510 #respond {
511 input[type="text"],
512 input[type="email"],
513 input[type="url"],
514 textarea {
515 background-color: $input-bg;
516 color: $input-text-color;
517 }
828c3de @jayj Add the theme files
authored
518 }
519
520 #respond input[type="submit"] {
b46f362 @jayj SASS: Color variables
authored
521 transition-duration: $transition-duration;
828c3de @jayj Add the theme files
authored
522
b46f362 @jayj SASS: Color variables
authored
523 &:focus,
524 &:hover {
525 background: $input-submit-hover;
526 color: $input-submit-txt-hover;
527 transition-duration: $transition-duration;
528 }
828c3de @jayj Add the theme files
authored
529 }
530
531 /* === Comment-related icons === */
532
b46f362 @jayj SASS: Color variables
authored
533 #respond {
534 .log-in-out,
535 label[for="author"],
536 label[for="email"],
537 label[for="url"],
538 label[for="comment"] {
539 &::before {
540 color: $icon-color-secondary;
541 }
542 }
828c3de @jayj Add the theme files
authored
543 }
544
545 /**
546 * Footer
547 * --------------------------------------------------------------------------- */
548
549 #footer {
c825806 @jayj Use a body class to detect a non-white background color. If a non-whi…
authored
550 margin-top: 0;
551
9f8c01f @jayj Better footer margins
authored
552 .footer-content {
553 font-size: 1rem;
554 margin-bottom: 2em;
555 }
828c3de @jayj Add the theme files
authored
556
557 .credit {
9f8c01f @jayj Better footer margins
authored
558 font-size: inherit;
828c3de @jayj Add the theme files
authored
559 }
560 }
561
562 /**
563 * Media Queries
564 * --------------------------------------------------------------------------- */
565
566 /* === MIN-WIDTH 800PX === */
567
568 @media only screen and (min-width: 800px) {
569
570 /* ====== Primary Menu ====== */
571
572 #menu-primary {
573 .menu-item a {
574 color: $text-color-secondary;
575 }
576
577 .sub-menu .menu-item a {
74e2dc7 @jayj Include a button mixin
authored
578 @include button();
828c3de @jayj Add the theme files
authored
579 opacity: 1;
580 }
581 }
582
583 }
584
585 /* === 800px breakpoint === */
586
587 @media only screen and (max-width: 800px) {
588
589 #menu-primary .menu-item a {
590 text-transform: none;
591 font-size: 1rem;
592 line-height: 1.8;
593 }
594
595 }
Something went wrong with that request. Please try again.