themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Mobile support 📱

This commit is contained in:
John O'Nolan 2017-06-16 13:16:22 +01:00
parent 535ead65e7
commit 4b6905f175
6 changed files with 133 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -1,11 +1,12 @@
# Casper
The default theme for [Ghost](http://github.com/tryghost/ghost/).
The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper. If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
This is the latest development version of Casper. If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
 
![screenshot-desktop](https://user-images.githubusercontent.com/120485/27221326-1e31d326-5280-11e7-866d-82d550a7683b.jpg)
 
# First time using a Ghost theme?

148
assets/css/screen.css
View File

@ -140,7 +140,7 @@ body {
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10vw 0;
padding: 10vw 4vw;
min-height: 200px;
max-height: 450px;
text-align: center;
@ -166,6 +166,15 @@ body {
opacity: 0.8;
}
@media (max-width: 500px) {
.site-title {
font-size: 3rem;
}
.site-description {
font-size: 1.8rem;
}
}
/* 5. Site Navigation
/* ---------------------------------------------------------- */
@ -333,6 +342,20 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
fill: #fff;
}
@media (max-width: 700px) {
.site-header {
padding-left: 0;
padding-right: 0;
}
.site-nav-left {
padding-left: 4vw;
margin-right: 0;
}
.site-nav-right {
display: none;
}
}
/* 6. Post Feed
/* ---------------------------------------------------------- */
@ -347,7 +370,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}
.post-card {
order: unset;
flex: 1 1 300px;
display: flex;
flex-direction: column;
@ -440,40 +462,40 @@ The first (most recent) post in the list is styled to be bigger than the others
*/
@media (min-width: 795px) {
.home-template .post-feed .post-card:nth-child(6n+1) {
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) {
flex: 1 1 100%;
flex-direction: row;
}
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-image-link {
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link {
position: relative;
flex: 1 1 auto;
}
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-image {
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image {
position: absolute;
width: 100%;
height: 100%;
}
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-content {
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content {
flex: 0 1 357px;
}
.home-template .post-feed .post-card:nth-child(6n+1) h2 {
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) h2 {
font-size: 2.6rem;
}
.home-template .post-feed .post-card:nth-child(6n+1) p {
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) p {
font-size: 1.8rem;
line-height: 1.55em;
}
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-content-link {
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content-link {
padding: 30px 40px 0;
}
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-meta {
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-meta {
padding: 0 40px 30px;
}
}
@ -483,6 +505,17 @@ The first (most recent) post in the list is styled to be bigger than the others
}
/* Adjust some margins for smaller screens */
@media (max-width: 650px) {
.post-feed {
padding-top: 5vw;
}
.post-card {
margin: 0 20px 5vw;
}
}
/* 7. Single Post
/* ---------------------------------------------------------- */
@ -730,6 +763,10 @@ Super neat trick courtesy of @JoelDrapper
margin: 1.5em 0 3em;
}
.post-full-content hr {
margin: 4vw 0;
}
.post-full-content hr:after {
content: "";
position: absolute;
@ -757,29 +794,14 @@ Super neat trick courtesy of @JoelDrapper
.post-full-content h1 {
font-size: 5rem;
}
@media (max-width: 500px) {
.post-full-content h1 {
font-size: 2.2rem;
}
}
.post-full-content h2 {
font-size: 3.5rem;
}
@media (max-width: 500px) {
.post-full-content h2 {
font-size: 2.9rem;
}
}
.post-full-content h3 {
font-size: 2.5rem;
}
@media (max-width: 500px) {
.post-full-content h3 {
font-size: 2rem;
}
}
.post-full-content h4 {
font-size: 1.6rem;
@ -813,6 +835,37 @@ Super neat trick courtesy of @JoelDrapper
box-shadow: none !important;
}
/* Some grouped styles for smaller viewports */
@media (max-width: 500px) {
.post-full-meta {
font-size: 1.2rem;
line-height: 1.3em;
}
.post-full-title {
font-size: 2.9rem;
}
.post-full-image {
height: 350px;
margin-bottom: 4vw;
}
.post-full-content {
padding: 0;
}
.post-full-content:before,
.post-full-content:after {
display: none;
}
.post-full-content h1 {
font-size: 2.9rem;
}
.post-full-content h2 {
font-size: 2.9rem;
}
.post-full-content h3 {
font-size: 2rem;
}
}
/* 7.1. Subscribe Form
/* ---------------------------------------------------------- */
@ -905,6 +958,28 @@ Super neat trick courtesy of @JoelDrapper
background: color(var(--blue) lightness(-9%) saturation(-10%));
}
@media (max-width: 650px) {
.subscribe-form-title {
font-size: 2.4rem;
}
.subscribe-form p {
font-size: 1.6rem;
}
}
@media (max-width: 500px) {
.subscribe-form form {
flex-direction: column;
}
.subscribe-form .form-group {
width: 100%;
}
.subscribe-form button {
width: 100%;
margin: 10px 0 0 0;
}
}
/* 7.2. Post Footer
/* ---------------------------------------------------------- */
@ -1346,7 +1421,6 @@ Super neat trick courtesy of @JoelDrapper
line-height: 1.3em;
font-weight: 300;
letter-spacing: 0.5px;
white-space: pre;
opacity: 0.8;
}
@ -1375,6 +1449,18 @@ Super neat trick courtesy of @JoelDrapper
padding-left: 4px;
}
@media (max-width: 500px) {
.site-header-content .author-bio {
font-size: 1.8rem;
line-height: 1.15em;
letter-spacing: 0;
}
.author-location,
.author-stats {
display: none;
}
}
/* 9. Error Template
/* ---------------------------------------------------------- */
@ -1608,6 +1694,7 @@ Super neat trick courtesy of @JoelDrapper
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
color: rgba(255,255,255,0.7);
font-size: 1.3rem;
}
@ -1645,3 +1732,12 @@ Super neat trick courtesy of @JoelDrapper
.site-footer-nav a:first-of-type:before {
display: none;
}
@media (max-width: 650px) {
.site-footer-content {
flex-direction: column;
}
.site-footer-nav a:first-child {
margin-left: 0;
}
}

2
assets/public/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/public/screen.css.map
View File

File diff suppressed because one or more lines are too long

6
author.hbs
View File

@ -38,13 +38,17 @@
{{/author}}
{{!-- The main content area --}}
<main class="content" role="main">
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<div class="post-feed">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div>
</main>

2
partials/post-card.hbs
View File

@ -1,4 +1,4 @@
<article class="post-card {{post_class}}">
<article class="post-card {{post_class}}{{#unless feature_image}} no-image{{/unless}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{feature_image}})"></div>