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
|
# 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?
|
||||||
|
|
||||||
|
|
|
@ -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
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue