Skip to content
This repository was archived by the owner on Oct 29, 2018. It is now read-only.

Commit dc34415

Browse files
author
Jan Henckens
committed
Singel post layout on mobile & tablet
1 parent 9bf1da4 commit dc34415

File tree

7 files changed

+138
-10
lines changed

7 files changed

+138
-10
lines changed

‎content-single.php

+3-6
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,9 @@
66

77
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
88
<header class="entry-header">
9-
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
10-
11-
<!-- <div class="entry-meta">
12-
<?php clear_content_posted_on(); ?>
13-
</div> -->
14-
<!-- .entry-meta -->
9+
<h1 class="entry-title">
10+
<?php the_title(); ?>
11+
</h1>
1512
</header><!-- .entry-header -->
1613

1714
<div class="entry-content">

‎inc/template-tags.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ function clear_content_posted_on() {
7979
);
8080

8181
$posted_on = sprintf(
82-
_x( '%s', 'post date', 'clear-content' ),
82+
_x( '%s', 'post date', 'clear-content' ),
8383
'<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
8484
);
8585

‎sass/layout/_content-sidebar.scss

+50
Original file line numberDiff line numberDiff line change
@@ -111,4 +111,54 @@ body {
111111
@include gs-span(d, 3, 12);
112112
clear: both;
113113
}
114+
}
115+
116+
body.single .hfeed .site-content .content-area main.site-main {
117+
& article {
118+
clear: both;
119+
@include gs-media(m, max) {
120+
@include gs-pad(m, padinfull);
121+
}
122+
@include gs-media(t, min) {
123+
};
124+
& header.entry-header {
125+
@include gs-media (t, min) {
126+
@include gs-span(t, all);
127+
@include gs-pad(t, padinfull);
128+
}
129+
@include gs-media (d, min) {
130+
131+
}
132+
}
133+
& .entry-content {
134+
@include gs-media (t, min) {
135+
@include gs-span(t, all);
136+
@include gs-pad(t, padinfull);
137+
}
138+
@include gs-media (d, min) {
139+
}
140+
clear: both;
141+
}
142+
& .entry-footer {
143+
@include gs-media (t, min) {
144+
@include gs-span(t, all);
145+
@include gs-pad(t, padinfull);
146+
147+
}
148+
@include gs-media (d, min) {
149+
}
150+
clear: both;
151+
}
152+
}
153+
& .comments-area {
154+
@include gs-media(m, max) {
155+
@include gs-span(m, all);
156+
@include gs-pad(m, padinfull);
157+
}
158+
@include gs-media (t, min) {
159+
@include gs-span(t, all);
160+
@include gs-pad(t, padinfull);
161+
}
162+
clear: both;
163+
}
114164
}

‎sass/site/primary/_posts-and-pages.scss

+2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@
2828
}
2929

3030
.entry-header, .entry-meta {
31+
@include gs-media(d, min) {
3132
border-top: 1px solid $color__border;
33+
};
3234
}
3335

3436
.entry-meta {

‎sass/site/secondary/_widgets.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.widget, .post-navigation {
2+
clear: both;
23
margin: 0 0 1.5em;
34
border-top: 1px solid darken($color__border, 10%);
45
/* Make sure select elements fit in widgets */

‎single.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
get_header(); ?>
99

10-
<div id="primary" class="m1 t1-t6 d2-d8 content-area">
10+
<div id="primary" class="content-area">
1111
<main id="main" class="site-main" role="main">
1212

1313
<?php while ( have_posts() ) : the_post(); ?>

‎style.css

+80-2
Original file line numberDiff line numberDiff line change
@@ -2939,6 +2939,82 @@ body .site-footer {
29392939
width: 82.772020742%;
29402940
clear: both; }
29412941

2942+
body.single .hfeed .site-content .content-area main.site-main article {
2943+
clear: both; }
2944+
@media only screen and (max-width: 767px) {
2945+
body.single .hfeed .site-content .content-area main.site-main article {
2946+
-moz-box-sizing: border-box;
2947+
-webkit-box-sizing: border-box;
2948+
box-sizing: border-box;
2949+
padding-left: 3.125%;
2950+
padding-right: 3.125%; } }
2951+
@media only screen and (min-width: 768px) {
2952+
body.single .hfeed .site-content .content-area main.site-main article header.entry-header {
2953+
clear: both;
2954+
display: block;
2955+
float: left;
2956+
margin-left: 0;
2957+
width: 100%;
2958+
-moz-box-sizing: border-box;
2959+
-webkit-box-sizing: border-box;
2960+
box-sizing: border-box;
2961+
padding-left: 2.60416667%;
2962+
padding-right: 2.60416667%; } }
2963+
body.single .hfeed .site-content .content-area main.site-main article .entry-content {
2964+
clear: both; }
2965+
@media only screen and (min-width: 768px) {
2966+
body.single .hfeed .site-content .content-area main.site-main article .entry-content {
2967+
clear: both;
2968+
display: block;
2969+
float: left;
2970+
margin-left: 0;
2971+
width: 100%;
2972+
-moz-box-sizing: border-box;
2973+
-webkit-box-sizing: border-box;
2974+
box-sizing: border-box;
2975+
padding-left: 2.60416667%;
2976+
padding-right: 2.60416667%; } }
2977+
body.single .hfeed .site-content .content-area main.site-main article .entry-footer {
2978+
clear: both; }
2979+
@media only screen and (min-width: 768px) {
2980+
body.single .hfeed .site-content .content-area main.site-main article .entry-footer {
2981+
clear: both;
2982+
display: block;
2983+
float: left;
2984+
margin-left: 0;
2985+
width: 100%;
2986+
-moz-box-sizing: border-box;
2987+
-webkit-box-sizing: border-box;
2988+
box-sizing: border-box;
2989+
padding-left: 2.60416667%;
2990+
padding-right: 2.60416667%; } }
2991+
body.single .hfeed .site-content .content-area main.site-main .comments-area {
2992+
clear: both; }
2993+
@media only screen and (max-width: 767px) {
2994+
body.single .hfeed .site-content .content-area main.site-main .comments-area {
2995+
clear: both;
2996+
display: block;
2997+
float: left;
2998+
margin-left: 0;
2999+
width: 100%;
3000+
-moz-box-sizing: border-box;
3001+
-webkit-box-sizing: border-box;
3002+
box-sizing: border-box;
3003+
padding-left: 3.125%;
3004+
padding-right: 3.125%; } }
3005+
@media only screen and (min-width: 768px) {
3006+
body.single .hfeed .site-content .content-area main.site-main .comments-area {
3007+
clear: both;
3008+
display: block;
3009+
float: left;
3010+
margin-left: 0;
3011+
width: 100%;
3012+
-moz-box-sizing: border-box;
3013+
-webkit-box-sizing: border-box;
3014+
box-sizing: border-box;
3015+
padding-left: 2.60416667%;
3016+
padding-right: 2.60416667%; } }
3017+
29423018
/*--------------------------------------------------------------
29433019
1.0 Reset
29443020
--------------------------------------------------------------*/
@@ -3438,6 +3514,7 @@ a {
34383514
9.0 Widgets
34393515
--------------------------------------------------------------*/
34403516
.widget, .post-navigation {
3517+
clear: both;
34413518
margin: 0 0 1.5em;
34423519
border-top: 1px solid #d4d4d4;
34433520
/* Make sure select elements fit in widgets */ }
@@ -3493,8 +3570,9 @@ a {
34933570
clear: both;
34943571
margin: 0 0 1.5em; }
34953572

3496-
.entry-header, .entry-meta {
3497-
border-top: 1px solid #eee; }
3573+
@media only screen and (min-width: 990px) {
3574+
.entry-header, .entry-meta {
3575+
border-top: 1px solid #eee; } }
34983576

34993577
.entry-meta a {
35003578
text-decoration: none;

0 commit comments

Comments
 (0)