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

View file

@ -1,11 +1,12 @@
# Casper # 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) ![screenshot-desktop](https://user-images.githubusercontent.com/120485/27221326-1e31d326-5280-11e7-866d-82d550a7683b.jpg)
 
# First time using a Ghost theme? # First time using a Ghost theme?

View file

@ -140,7 +140,7 @@ body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10vw 0; padding: 10vw 4vw;
min-height: 200px; min-height: 200px;
max-height: 450px; max-height: 450px;
text-align: center; text-align: center;
@ -166,6 +166,15 @@ body {
opacity: 0.8; opacity: 0.8;
} }
@media (max-width: 500px) {
.site-title {
font-size: 3rem;
}
.site-description {
font-size: 1.8rem;
}
}
/* 5. Site Navigation /* 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; 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 /* 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 { .post-card {
order: unset;
flex: 1 1 300px; flex: 1 1 300px;
display: flex; display: flex;
flex-direction: column; 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) { @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: 1 1 100%;
flex-direction: row; 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; position: relative;
flex: 1 1 auto; 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; position: absolute;
width: 100%; width: 100%;
height: 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; 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; 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; font-size: 1.8rem;
line-height: 1.55em; 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; 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; 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 /* 7. Single Post
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -730,6 +763,10 @@ Super neat trick courtesy of @JoelDrapper
margin: 1.5em 0 3em; margin: 1.5em 0 3em;
} }
.post-full-content hr {
margin: 4vw 0;
}
.post-full-content hr:after { .post-full-content hr:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -757,29 +794,14 @@ Super neat trick courtesy of @JoelDrapper
.post-full-content h1 { .post-full-content h1 {
font-size: 5rem; font-size: 5rem;
} }
@media (max-width: 500px) {
.post-full-content h1 {
font-size: 2.2rem;
}
}
.post-full-content h2 { .post-full-content h2 {
font-size: 3.5rem; font-size: 3.5rem;
} }
@media (max-width: 500px) {
.post-full-content h2 {
font-size: 2.9rem;
}
}
.post-full-content h3 { .post-full-content h3 {
font-size: 2.5rem; font-size: 2.5rem;
} }
@media (max-width: 500px) {
.post-full-content h3 {
font-size: 2rem;
}
}
.post-full-content h4 { .post-full-content h4 {
font-size: 1.6rem; font-size: 1.6rem;
@ -813,6 +835,37 @@ Super neat trick courtesy of @JoelDrapper
box-shadow: none !important; 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 /* 7.1. Subscribe Form
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -905,6 +958,28 @@ Super neat trick courtesy of @JoelDrapper
background: color(var(--blue) lightness(-9%) saturation(-10%)); 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 /* 7.2. Post Footer
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -1346,7 +1421,6 @@ Super neat trick courtesy of @JoelDrapper
line-height: 1.3em; line-height: 1.3em;
font-weight: 300; font-weight: 300;
letter-spacing: 0.5px; letter-spacing: 0.5px;
white-space: pre;
opacity: 0.8; opacity: 0.8;
} }
@ -1375,6 +1449,18 @@ Super neat trick courtesy of @JoelDrapper
padding-left: 4px; 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 /* 9. Error Template
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -1608,6 +1694,7 @@ Super neat trick courtesy of @JoelDrapper
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap;
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
font-size: 1.3rem; font-size: 1.3rem;
} }
@ -1645,3 +1732,12 @@ Super neat trick courtesy of @JoelDrapper
.site-footer-nav a:first-of-type:before { .site-footer-nav a:first-of-type:before {
display: none; display: none;
} }
@media (max-width: 650px) {
.site-footer-content {
flex-direction: column;
}
.site-footer-nav a:first-child {
margin-left: 0;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

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

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}} {{#if feature_image}}
<a class="post-card-image-link" href="{{url}}"> <a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{feature_image}})"></div> <div class="post-card-image" style="background-image: url({{feature_image}})"></div>