keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2025-07-01 17:37:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Second pass 2.0

Browse Source
This commit is contained in:
John O'Nolan
2017-05-31 19:09:50 +01:00
parent ad9cb81a06
commit bc9e5a0b2e
11 changed files with 186 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/components/global.css
View File

@ -373,7 +373,7 @@ dd {
}
blockquote {
margin: 1.6em 0;
margin: 1.5em 0;
padding: 0 1.6em 0 1.6em;
border-left: var(--whitegrey) 0.5em solid;;
}

109
assets/css/screen.css
View File

@ -48,11 +48,12 @@ body {
*/
/* Home page
/* Special Template Styles
/* ---------------------------------------------------------- */
@media (min-width: 900px) {
.home-template .post-feed {
.home-template .post-feed,
.tag-template .post-feed {
margin-top: -100px;
}
.home-template .site-nav {
@ -214,6 +215,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: flex;
align-items: center;
flex-shrink: 0;
height: 40px;
}
.social-links {
@ -294,6 +296,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.post-card {
flex: 1 1 300px;
order: unset;
display: flex;
flex-direction: column;
margin: 0 15px 30px;
@ -366,7 +369,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
font-weight: 500;
}
/* Special Styling for first item (below):
/* Special Styling for home page grid (below):
The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
@ -374,45 +377,60 @@ The first (most recent) post in the list is styled to be bigger than the others
@media (min-width: 795px) {
.post-feed .post-card:nth-child(6n+1) {
.home-template .post-feed .post-card:nth-child(6n+1) {
flex: 1 1 100%;
flex-direction: row;
}
.post-feed .post-card:nth-child(6n+1) .post-card-image-link {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-image-link {
flex: 1 1 auto;
}
.post-feed .post-card:nth-child(6n+1) .post-card-image {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-image {
width: 100%;
height: 100%;
}
.post-feed .post-card:nth-child(6n+1) .post-card-content {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-content {
flex: 0 1 357px;
}
.post-feed .post-card:nth-child(6n+1) h2 {
.home-template .post-feed .post-card:nth-child(6n+1) h2 {
font-size: 2.6rem;
}
.post-feed .post-card:nth-child(6n+1) p {
.home-template .post-feed .post-card:nth-child(6n+1) p {
font-size: 1.8rem;
line-height: 1.55em;
}
.post-feed .post-card:nth-child(6n+1) .post-card-content-link {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-content-link {
padding: 30px 30px 0;
}
.post-feed .post-card:nth-child(6n+1) .post-card-meta {
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-meta {
padding: 0 30px 30px;
}
/* Special Styling for Subscribe box
We've got a special subscribe box, this allows it to appear in the middle of the loop of posts without actually needing to interrupt the loop. Neat trickery courtesy of David Darnes.
.post-card:nth-of-type(2),
.post-card:nth-of-type(3) {
order: -1;
}
*/
}
/* Single Post
/* ---------------------------------------------------------- */
@ -427,7 +445,7 @@ The first (most recent) post in the list is styled to be bigger than the others
/* ^ Required to make .post-full-content:before/after z-index stacking work */
.post-full-header {
max-width: 1000px;
max-width: 1040px;
margin: 0 auto;
padding: 10vw 3vw 6vw;
text-align: center;
@ -476,12 +494,11 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-content {
position: relative;
max-width: 920px;
min-height: 230px;
padding: 70px 100px 0;
margin: 0 auto;
font-size: 2.2rem;
line-height: 1.55em;
line-height: 1.6em;
font-family: Georgia, serif;
background: #fff;
}
@ -514,27 +531,72 @@ The first (most recent) post in the list is styled to be bigger than the others
filter: blur(5px);
}
.post-full-content > p:first-of-type {
.kg-card-markdown {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}
.post-full-content p {
min-width: 100%;
}
.kg-card-markdown > p:first-child {
font-size: 2.7rem;
line-height: 1.55em;
}
.post-full-content a {
box-shadow: var(--blue) 0 -1px 0 inset;
}
.post-full-content a:hover {
text-decoration: none;
}
.post-full-content img {
width: 100vw;
max-width: 1040px;
}
/*
If an image url has #full on the end, give it special wide styles.
Super neat trick courtesy of @JoelDrapper
*/
.post-full-content img[src$="#full"] {
max-width: 100vw;
}
.post-full-content blockquote {
margin: 0 0 1.5em 0;
padding: 0;
border: 0;
text-align: center;
font-size: 3rem;
line-height: 1.5em;
line-height: 1.6em;
color: var(--blue);
}
.post-full-content blockquote:before {
content: open-quote;
}
.post-full-content blockquote p {
margin: 0;
}
@media (min-width: 1000px) {
.post-full-content blockquote {
margin-left: -150px;
margin-right: -150px;
width: 100vw;
max-width: 1060px;
}
}
.post-full-content .fluid-width-video-wrapper {
margin-bottom: 1.5em;
}
/* Post Footer
/* ---------------------------------------------------------- */
@ -674,6 +736,8 @@ The first (most recent) post in the list is styled to be bigger than the others
.read-next-card {
position: relative;
flex: 1 1 300px;
display: flex;
flex-direction: column;
margin: 0 15px 30px;
padding: 25px;
color: #fff;
@ -692,7 +756,9 @@ The first (most recent) post in the list is styled to be bigger than the others
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(135deg, rgba(62,176,239,0.90) 0%,rgba(46,138,172,0.80) 100%);
background: linear-gradient(135deg, rgba(0,40,60,0.60) 0%,rgba(0,20,40,0.50) 100%);
border-radius: 5px;
backdrop-filter: blur(2px);
}
.read-next-card-header {
@ -711,6 +777,8 @@ The first (most recent) post in the list is styled to be bigger than the others
}
.read-next-card-content {
flex-grow: 1;
display: flex;
position: relative;
z-index: 50;
font-size: 1.7rem;
@ -721,6 +789,9 @@ The first (most recent) post in the list is styled to be bigger than the others
}
.read-next-card-content ol {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin: 0;
padding: 0 0 0 2em;
}