Skip to content

Commit

Permalink
Merge pull request #99 from INN/50-headline-top-area-styles
Browse files Browse the repository at this point in the history
Create article template, style header
benlk authored Nov 11, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 7d4d519 + 3e5ee22 commit 5af59da
Showing 6 changed files with 366 additions and 59 deletions.
2 changes: 1 addition & 1 deletion wp-content/themes/citylimits/css/child-style.css

Large diffs are not rendered by default.

62 changes: 4 additions & 58 deletions wp-content/themes/citylimits/less/footer.less
Original file line number Diff line number Diff line change
@@ -83,63 +83,9 @@
.row-fluid {
display: flex;
align-items: center;
#footer-social {
li {
float: right;
i {
&.icon-facebook {
&::before {
content: url("../img/facebook.svg");
}
&:hover {
&::before {
content: url("../img/facebook-hover.svg");
}
}
}
&.icon-twitter {
&::before {
content: url("../img/twitter.svg");
}
&:hover {
&::before {
content: url("../img/twitter-hover.svg");
}
}
}
&.icon-linkedin {
&::before {
content: url("../img/linkedin.svg");
}
&:hover {
&::before {
content: url("../img/linkedin-hover.svg");
}
}
}
&.icon-instagram {
&::before {
content: url("../img/instagram.svg");
}
&:hover {
&::before {
content: url("../img/instagram-hover.svg");
}
}
}
&.icon-youtube {
&::before {
content: url("../img/youtube.svg");
}
&:hover {
&::before {
content: url("../img/youtube-hover.svg");
}
}
}
}
}
}
}
#footer-social li {
float: right;
}
@media (max-width: 769px) {
.row-fluid {
@@ -161,4 +107,4 @@
}
}
}
}
}
164 changes: 164 additions & 0 deletions wp-content/themes/citylimits/less/single-two-column.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
.single.classic {
header + .span8 {
margin-left: 0;
}
header {
hgroup {
grid-area: hgroup;
border-bottom: 1px solid @grey1;
margin-bottom: @measure;
}
.byline {
grid-area: byline;
margin-bottom: 0;
}
.date {
grid-area: date;
}
.byline, .date {
font-size: 14px;
}
.by {
display: none;
}
.author {
font-weight: normal;
}
.edit-link {
display: none;
}
.largo-follow {
grid-area: social;
}
.label {
display: block;
text-transform: uppercase;
font-weight: bold;
clear: both;
}
}
.largo-follow {
margin-bottom: 0;

// override Largo colors
.facebook,
.twitter,
.email,
.print,
.more-social-links {
background-color: transparent;
}
a {
color: @red;
&:hover {
color: @black;
}
}
.hidden-phone {
display: none;
}
span {
margin: 0;
}
// make this fold to the right, not left
.popover {
left: unset;
right: 0;
z-index: 1;
&::after,
&::before {
left: unset;
right: 24px;
}
}
}


@media ( max-width: 699px ) {
h1.entry-title {
font-size: calc( 20px + 3vw );
}
#main header {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"hgroup hgroup"
"byline date"
"social social"
;

hgroup {
padding: 5% 0;
}
.byline {
border-right: 1px solid @grey1;
padding-right: @measure;
}
.date {
padding-left: @measure;
}
.byline, .date {
text-align: center;
}
.largo-follow {
margin-top: @measure;
text-align: center;
border-top: 1px solid @grey1;
padding-top: @measure;
padding-bottom: @measure;
}
}
}
@media ( min-width: 700px ) {
h1.entry-title {
font-size: calc( 20px + 3vw );
}
#main {
margin: 0;
}
#main header {
display: grid;
grid-template-columns: 200px 200px 1fr auto;
grid-template-areas:
"hgroup hgroup hgroup hgroup"
"byline date . social"
;
margin-bottom: @measure;

hgroup {
text-align: center;
padding: 5% 2.5%;
}
.subtitle {
// this does not provide styles for .subtitle
// because while Largo supports outputting a subtitle,
// Largo requires enabling the subtitle input metabox in a child theme
text-align: center;
}
.byline {
border-right: 1px solid @grey1;
padding-right: @measure;
}
.date {
border-right: 1px solid @grey1;
padding-right: @measure;
padding-left: @measure;
}
}
}
.hero {
background: transparent;
padding-bottom: @measure;
border-bottom: 1px solid @grey1;
margin-bottom: @measure;
.wp-caption-text {
padding: 0;
margin: 0;
}
}
@media ( min-width: 1230px ) {
h1.entry-title {
font-size: 55px;
}
}
}
56 changes: 56 additions & 0 deletions wp-content/themes/citylimits/less/social.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
#main .largo-follow.post-social,
#boilerplate #footer-social {
i {
&.icon-facebook {
&::before {
content: url("../img/facebook.svg");
}
&:hover {
&::before {
content: url("../img/facebook-hover.svg");
}
}
}
&.icon-twitter {
&::before {
content: url("../img/twitter.svg");
}
&:hover {
&::before {
content: url("../img/twitter-hover.svg");
}
}
}
&.icon-linkedin {
&::before {
content: url("../img/linkedin.svg");
}
&:hover {
&::before {
content: url("../img/linkedin-hover.svg");
}
}
}
&.icon-instagram {
&::before {
content: url("../img/instagram.svg");
}
&:hover {
&::before {
content: url("../img/instagram-hover.svg");
}
}
}
&.icon-youtube {
&::before {
content: url("../img/youtube.svg");
}
&:hover {
&::before {
content: url("../img/youtube-hover.svg");
}
}
}
}
}

6 changes: 6 additions & 0 deletions wp-content/themes/citylimits/less/style.less
Original file line number Diff line number Diff line change
@@ -13,7 +13,13 @@ Version: 1.0
@import "typography.less";
@import "ads.less";
@import "top-tag.less";
@import "social.less";

// templates
@import "series-landing-special-projects.less";
@import "single-two-column.less";

// widgets
@import "widget-citylimits-special-projects.less";
@import "widget-citylimits-podcast.less";
@import "widget-citylimits-special-projects-featured-content.less";
135 changes: 135 additions & 0 deletions wp-content/themes/citylimits/single-two-column.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<?php
/**
* Single Post Template: Two Column (Classic Layout)
* Template Name: Two Column (Classic Layout)
* Description: Shows the post and sidebar if specified.
*
* This template merges in portions of largo's partials/content-single-classic.php
* and partials/content-page.php because the desired layout puts things in places on the page
* that are not accomplishable without doing so:
* - putting the header above the span4/span8 split
*/

global $shown_ids;

add_filter('body_class', function($classes) {
if ( is_page() ) {
$classes[] = 'hnews';
$classes[] = 'item';
}

$classes[] = 'classic row-fluid span12';
return $classes;
});

get_header();
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope itemtype="https://schema.org/Article">
<?php if ( is_page() ) { do_action('largo_before_page_header'); } ?>
<header>

<hgroup>
<h1 class="entry-title" itemprop="headline"><?php the_title(); ?></h1>
<?php
if ( $subtitle = get_post_meta( $post->ID, 'subtitle', true ) ) {
echo '<h2 class="subtitle">' . $subtitle . '</h2>';
}
?>
</hgroup>

<?php
if ( ! is_page() ) {
?>
<h5 class="byline">
<span class="label"><?php
/* @todo make this count authors */
esc_html_e( 'Author', 'citylimits' );
?></span>
<?php largo_byline( true, true, get_the_ID() ); ?>
</h5>
<?php

echo sprintf(
'<span class="date"><span class="label">%1$s</span><time class="entry-date updated dtstamp pubdate" datetime="%2$s">%3$s</time></span>',
esc_html( 'Date', 'citylimits' ),
esc_attr( get_the_date( 'c', get_the_ID() ) ),
largo_time( false, get_the_ID() )
);

if ( !of_get_option( 'single_social_icons' ) == false ) {
largo_post_social_links();
}
}
?>


<?php largo_post_metadata( $post->ID ); ?>

</header><!-- / entry header -->

<?php if ( is_single() ) { do_action('largo_after_post_header'); } ?>
<?php if ( is_page() ) { do_action('largo_after_page_header'); } ?>

<div id="content" class="span8" role="main">
<?php
while ( have_posts() ) : the_post();

$shown_ids[] = get_the_ID();

$partial = ( is_page() ) ? 'page' : 'single-classic';


if ( $partial == 'single-classic' ) {
do_action( 'largo_after_post_header' );

largo_hero( null,'' );

do_action( 'largo_after_hero' );

?>
<div class="entry-content clearfix" itemprop="articleBody">
<?php largo_entry_content( $post ); ?>
</div><!-- .entry-content -->

<?php do_action( 'largo_after_post_content' ); ?>

<footer class="post-meta bottom-meta">
</footer><!-- /.post-meta -->
<?php

do_action( 'largo_after_post_footer' );

do_action( 'largo_before_post_bottom_widget_area' );

do_action( 'largo_post_bottom_widget_area' );

do_action( 'largo_after_post_bottom_widget_area' );

do_action( 'largo_before_comments' );

comments_template( '', true );

do_action( 'largo_after_comments' );
} else {
?>
<section class="entry-content">
<?php
do_action('largo_before_page_content');
the_content();
do_action('largo_after_page_content');
?>
</section><!-- .entry-content -->
<?php
}

endwhile;
?>
</div>

<?php do_action('largo_after_content'); ?>

<?php get_sidebar(); ?>
</article><!-- #post-<?php the_ID(); ?> -->

<?php get_footer();

0 comments on commit 5af59da

Please sign in to comment.