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

Next pass 2.0

Browse Source
This commit is contained in:
John O'Nolan
2017-06-08 09:19:22 +02:00
parent 938eaaf7a6
commit d55446f2ca
7 changed files with 184 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -151,6 +151,8 @@ b,
strong {
font-weight: bold;
}
i,
em,
dfn {
font-style: italic;
}
@ -180,6 +182,9 @@ img {
svg:not(:root) {
overflow: hidden;
}
mark {
background-color: #fdffb6;
}
code,
kbd,
pre,
@ -297,12 +302,14 @@ body {
}
hr {
position: relative;
display: block;
margin: 2em 0;
width: 100%;
margin: 2.5em 0 3.5em;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid var(--whitegrey);
border-top: 1px solid color(var(--lightgrey) l(+10%));
}
audio,
@ -334,7 +341,8 @@ blockquote {
ol,
ul {
padding-left: 2.5em;
padding-left: 1em;
padding-right: 1.5em;
}
ol ol,
@ -342,7 +350,6 @@ ul ul,
ul ol,
ol ul {
margin: 0.5em 0 1em;
padding-left: 2em;
}
ul {
@ -355,6 +362,7 @@ ol {
li {
margin: 0.5em 0;
padding-left: 0.5em;
line-height: 1.6em;
}
@ -436,7 +444,7 @@ h1 {
h2 {
margin: 1.5em 0 0.5em 0;
font-size: 1.8rem;
font-size: 2rem;
}
@media (max-width: 500px) {
h2 {

136
assets/css/screen.css
View File

@ -300,6 +300,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
order: unset;
display: flex;
flex-direction: column;
min-height: 300px;
margin: 0 20px 40px;
background: #fff center center;
background-size: cover;
@ -337,6 +338,17 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
text-decoration: none;
}
.post-card-tags {
display: block;
margin-bottom: 4px;
color: var(--midgrey);
text-transform: uppercase;
font-size: 1.2rem;
line-height: 1.15em;
letter-spacing: 0.5px;
font-weight: 500;
}
.post-card-title {
margin-top: 0;
}
@ -406,11 +418,11 @@ The first (most recent) post in the list is styled to be bigger than the others
}
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-content-link {
padding: 30px 30px 0;
padding: 30px 40px 0;
}
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-meta {
padding: 0 30px 30px;
padding: 0 40px 30px;
}
/* Special Styling for Subscribe box
@ -470,7 +482,7 @@ The first (most recent) post in the list is styled to be bigger than the others
}
.post-full-title {
color: var(--darkgrey);
color: color(var(--darkgrey) l(-5%));
}
.date-divider {
@ -556,7 +568,17 @@ The first (most recent) post in the list is styled to be bigger than the others
max-width: 920px;
}
.post-full-content p {
.post-full-content p,
.post-full-content ul,
.post-full-content ol,
.post-full-content dl,
.post-full-content pre,
.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4,
.post-full-content h5,
.post-full-content h6 {
min-width: 100%;
}
@ -575,6 +597,11 @@ The first (most recent) post in the list is styled to be bigger than the others
text-decoration: none;
}
.post-full-content strong,
.post-full-content em {
color: color(var(--darkgrey) l(-5%));
}
.post-full-content img {
width: 100vw;
max-width: 1040px;
@ -618,32 +645,126 @@ Super neat trick courtesy of @JoelDrapper
padding-top: 0;
}
.post-full-content code {
padding: 0 5px 2px;
font-size: 0.8em;
line-height: 1em;
font-weight: 400!important;
background: var(--whitegrey);
border-radius: 3px;
}
.post-full-content pre {
margin: 1.5em 0 3em;
padding: 20px;
border: color(var(--darkgrey) l(-10%)) 1px solid;
font-size: 1.4rem;
line-height: 1.5em;
color: var(--whitegrey);
background: color(var(--darkgrey) l(-3%));
border-radius: 5px;
overflow-x: auto;
max-width: 100%;
}
.post-full-content pre code {
padding: 0;
font-size: inherit;
line-height: inherit;
background: transparent;
}
.post-full-content .fluid-width-video-wrapper {
margin: 1.5em 0 3em;
}
.post-full-content hr:after {
display: block;
content: "";
position: absolute;
top: -15px;
left: 50%;
margin-left: -10px;
height: 30px;
width: 1px;
background: color(var(--lightgrey) l(+10%));
box-shadow: #fff 0 0 0 5px;
transform: rotate(45deg);
}
.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4,
.post-full-content h5,
.post-full-content h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: color(var(--darkgrey) l(-5%));
}
.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;
}
.post-full-content h5 {
font-size: 1.4rem;
}
.post-full-content h6 {
font-size: 1.4rem;
}
/* Subscribe Form
/* ---------------------------------------------------------- */
.subscribe-form {
margin: 1.5em 0;
padding: 6vw 0 6.5vw;
padding: 6.5vw 7vw 7vw;
border: color(var(--whitegrey) l(+2%)) 1px solid;
text-align: center;
background: color(var(--whitegrey) l(+4%));
border-radius: 5px;
border-radius: 7px;
}
.subscribe-form-title {
margin: 0 0 3px 0;
padding: 0;
font-size: 3.2rem;
font-size: 3.5rem;
line-height: 1;
font-weight: 700;
color: var(--darkgrey)
}
.subscribe-form p {
margin-bottom: 1em;
font-size: 2.2rem;
line-height: 1.55em;
letter-spacing: 0.2px;
@ -816,6 +937,7 @@ Super neat trick courtesy of @JoelDrapper
line-height: 1.2em;
font-weight: 200;
letter-spacing: 1px;
color: #fff;
}
.read-next-card-content {

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