Permalink
Browse files

Style cleanup and basic styling for archive pages. Closes #10.

  • Loading branch information...
dstrojny committed Feb 13, 2012
1 parent 78991ca commit 1a811810ddf6aadbb990df37cef63706a0989e0f
@@ -0,0 +1,10 @@
+/* patterns.scss
+ * Repeatable patterns
+ * ------------------------------------------------------------------ */
+
+.all-caps-title {
+ text-transform: uppercase;
+ font-weight: 400;
+ @include rem('font-size', 13px);
+ line-height: ($evbase/13);
+}
@@ -100,7 +100,7 @@ nav[role="navigation"] {
display: inline-block;
@include rem('margin-top', $vbase);
width: 100%;
- @include rem('font-size', 13px );
+ @include rem('font-size', 13px);
border: {
bottom: $divider;
top: $divider;
@@ -161,7 +161,7 @@ nav[role="navigation"] {
display: block;
@include rem('font-size', 12px);
line-height: ($evbase/13);
- @include rem('padding', 8px 12px );
+ @include rem('padding', 8px 12px);
width: 90px;
}
}
@@ -178,10 +178,6 @@ div#secondary aside {
@include rem('margin-bottom', $vbase2 );
h3 {
@include rem('margin-bottom', $vbase );
- text-transform: uppercase;
- font-weight: 300;
- @include rem('font-size', 13px);
- line-height: ($evbase/13);
}
p,
li {
@@ -0,0 +1,12 @@
+/* archive.css.scss
+ * Styling for the archive view
+ * ------------------------------------------------------------------ */
+
+#content.archive {
+ h1.archive-title {
+ @include rem('margin-bottom', $vbase2);
+ @include rem('padding-bottom', 22px);
+ border-bottom: $divider;
+ color: lighten($font-color, 20);
+ }
+}
@@ -3,5 +3,7 @@
// Use SASS to include CSS partials
@import "reset";
@import "preboot";
+@import "patterns";
@import "scaffolding";
-@import "view_index";
+@import "view_index";
+@import "view_archive";
@@ -206,7 +206,7 @@ function twentytwelve_widgets_init() {
'id' => 'sidebar-1',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
- 'before_title' => '<h3 class="widget-title">',
+ 'before_title' => '<h3 class="widget-title all-caps-title">',
@lancewillett

lancewillett Feb 13, 2012

Collaborator

This is an opinion: adding a class like this shouldn't be necessary. Just apply those styles to the .widget_title element directly.

The label "all-caps-title" is presentational, not semantic, so it doesn't add value to the HTML document since it's only for looks.

@dstrojny

dstrojny Feb 13, 2012

Owner

The goal here was create a re-usable class that could be used in different places (eg. the archive h1). It may also get used in other places. Abstracting it would mean a long list of selectors in the CSS file for each different instance of the styling. There are pros and cons though, using more selectors in the CSS file vs. adding extra classes to the markup might be preferred. Feel free to switch it if you feel strongly about it. The class can be found in _patterns.scss. Just swap .widget-title and a selector for the archive titles.

@lancewillett

lancewillett Feb 13, 2012

Collaborator

Yes, I understand why you did it—and it's actually pretty handy during development. Let's keep it as is since you're probably going to apply it to some other places, and once the styles are more stable we can go back and decide on whether to combine the selectors.

'after_title' => '</h3>',
) );
}
@@ -15,12 +15,11 @@
get_header(); ?>
<section id="primary">
- <div id="content" role="main">
+ <div id="content" class="archive" role="main">
@lancewillett

lancewillett Feb 13, 2012

Collaborator

@dstrojny Why do you need this class here? The body element already have "archive" on it, so you can select this with .archive #content in your CSS.

@dstrojny

dstrojny Feb 13, 2012

Owner

Good point, I'll make that switch!

<?php if ( have_posts() ) : ?>
- <header class="page-header">
- <h1 class="page-title"><?php
+ <h1 class="archive-title all-caps-title"><?php
if ( is_day() ) {
printf( __( 'Daily Archives: %s', 'twentytwelve' ), '<span>' . get_the_date() . '</span>' );
} elseif ( is_month() ) {
@@ -43,11 +42,9 @@
_e( 'Blog Archives', 'twentytwelve' );
}
?></h1>
- </header>
<?php
- twentytwelve_content_nav( 'nav-above' );
-
+
/* Start the Loop */
while ( have_posts() ) : the_post();

0 comments on commit 1a81181

Please sign in to comment.