Mobile support 📱
This commit is contained in:
parent
535ead65e7
commit
4b6905f175
6 changed files with 133 additions and 32 deletions
|
@ -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?
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue