themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added CSScomb and combed 💇🏻

This commit is contained in:
John O'Nolan 2017-08-02 12:41:14 +04:00
parent 5cafa756ef
commit 1767ca59b8
2 changed files with 288 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
assets/css/csscomb.json Normal file
View File

@ -0,0 +1,240 @@
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": 4,
"unitless-zero": true,
"sort-order": [ [
"content",
"visibility",
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"order",
"flex",
"flex-grow",
"flex-shrink",
"flex-basis",
"align-self",
"display",
"flex-flow",
"flex-direction",
"justify-content",
"align-items",
"align-content",
"flex-wrap",
"flex-order",
"flex-pack",
"flex-align",
"float",
"clear",
"box-sizing",
"width",
"height",
"min-width",
"min-height",
"max-width",
"max-height",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"border",
"border-spacing",
"border-collapse",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"border-top-image",
"border-right-image",
"border-bottom-image",
"border-left-image",
"border-corner-image",
"border-top-left-image",
"border-top-right-image",
"border-bottom-right-image",
"border-bottom-left-image",
"table-layout",
"caption-side",
"empty-cells",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"quotes",
"counter-increment",
"counter-reset",
"vertical-align",
"stroke",
"fill",
"stroke-width",
"stroke-opacity",
"color",
"font",
"font-family",
"font-size",
"line-height",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"text-rendering",
"font-feature-settings",
"letter-spacing",
"hyphens",
"text-align",
"text-align-last",
"text-decoration",
"text-emphasis",
"text-emphasis-position",
"text-emphasis-style",
"text-emphasis-color",
"text-indent",
"text-justify",
"text-outline",
"text-transform",
"text-wrap",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"white-space",
"word-spacing",
"word-wrap",
"word-break",
"tab-size",
"user-select",
"src",
"resize",
"cursor",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-size",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"background-clip",
"background-origin",
"background-repeat",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"box-decoration-break",
"box-shadow",
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"filter",
"transition",
"transition-delay",
"transition-timing-function",
"transition-duration",
"transition-property",
"transform",
"transform-origin",
"animation",
"animation-name",
"animation-duration",
"animation-play-state",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"pointer-events",
"unicode-bidi",
"direction",
"columns",
"column-span",
"column-width",
"column-count",
"column-fill",
"column-gap",
"column-rule",
"column-rule-width",
"column-rule-style",
"column-rule-color",
"break-before",
"break-inside",
"break-after",
"page-break-before",
"page-break-inside",
"page-break-after",
"orphans",
"widows",
"zoom",
"max-zoom",
"min-zoom",
"user-zoom",
"orientation",
"-webkit-overflow-scrolling",
"-ms-overflow-scrolling"
] ]
}

98
assets/css/screen.css
View File

@ -36,8 +36,8 @@ body {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-position: center center;
background-size: cover; background-size: cover;
background-position: center center;
border-radius: 100%; border-radius: 100%;
} }
@ -59,9 +59,9 @@ body {
/* Centered content container blocks */ /* Centered content container blocks */
.inner { .inner {
margin: 0 auto;
max-width: 1040px;
width: 100%; width: 100%;
max-width: 1040px;
margin: 0 auto;
} }
/* Usage: /* Usage:
@ -140,9 +140,9 @@ body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10vw 4vw;
min-height: 200px; min-height: 200px;
max-height: 450px; max-height: 450px;
padding: 10vw 4vw;
text-align: center; text-align: center;
} }
@ -185,8 +185,8 @@ body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
overflow-y: hidden;
height: 40px; height: 40px;
overflow-y: hidden;
font-size: 1.2rem; font-size: 1.2rem;
} }
@ -199,7 +199,6 @@ body {
padding-bottom: 80px; padding-bottom: 80px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
white-space: nowrap; white-space: nowrap;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-ms-overflow-scrolling: touch; -ms-overflow-scrolling: touch;
} }
@ -337,19 +336,19 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
} }
.rss-button svg { .rss-button svg {
margin-bottom: 1px;
height: 2.1rem; height: 2.1rem;
margin-bottom: 1px;
fill: #fff; fill: #fff;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.site-header { .site-header {
padding-left: 0;
padding-right: 0; padding-right: 0;
padding-left: 0;
} }
.site-nav-left { .site-nav-left {
padding-left: 4vw;
margin-right: 0; margin-right: 0;
padding-left: 4vw;
} }
.site-nav-right { .site-nav-right {
display: none; display: none;
@ -373,9 +372,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex: 1 1 300px; flex: 1 1 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 300px;
overflow: hidden; overflow: hidden;
margin: 0 20px 40px; margin: 0 20px 40px;
min-height: 300px;
background: #fff center center; background: #fff center center;
background-size: cover; background-size: cover;
border-radius: 5px; border-radius: 5px;
@ -442,9 +441,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
} }
.author-profile-image { .author-profile-image {
margin-right: 5px;
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-right: 5px;
border-radius: 100%; border-radius: 100%;
} }
@ -533,9 +532,9 @@ 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 */ /* ^ Required to make .post-full-content:before/after z-index stacking work */
.post-full-header { .post-full-header {
max-width: 1040px;
margin: 0 auto; margin: 0 auto;
padding: 6vw 3vw 3vw; padding: 6vw 3vw 3vw;
max-width: 1040px;
text-align: center; text-align: center;
} }
@ -564,8 +563,8 @@ The first (most recent) post in the list is styled to be bigger than the others
} }
.post-full-image { .post-full-image {
margin: 0 -10vw -165px;
height: 800px; height: 800px;
margin: 0 -10vw -165px;
background: var(--lightgrey) center center; background: var(--lightgrey) center center;
background-size: cover; background-size: cover;
border-radius: 5px; border-radius: 5px;
@ -573,8 +572,8 @@ The first (most recent) post in the list is styled to be bigger than the others
@media (max-width: 1170px) { @media (max-width: 1170px) {
.post-full-image { .post-full-image {
margin: 0 -4vw -100px;
height: 600px; height: 600px;
margin: 0 -4vw -100px;
border-radius: 0; border-radius: 0;
} }
} }
@ -587,9 +586,9 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-content { .post-full-content {
position: relative; position: relative;
min-height: 230px;
margin: 0 auto; margin: 0 auto;
padding: 70px 100px 0; padding: 70px 100px 0;
min-height: 230px;
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 2.2rem; font-size: 2.2rem;
line-height: 1.6em; line-height: 1.6em;
@ -699,8 +698,8 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-content img, .post-full-content img,
.post-full-content video { .post-full-content video {
display: block; display: block;
margin: 1.5em auto;
max-width: 1040px; max-width: 1040px;
margin: 1.5em auto;
} }
@media (max-width: 1040px) { @media (max-width: 1040px) {
.post-full-content img, .post-full-content img,
@ -742,8 +741,8 @@ Super neat trick courtesy of @JoelDrapper
@media (min-width: 1000px) { @media (min-width: 1000px) {
.post-full-content blockquote { .post-full-content blockquote {
max-width: 1060px;
width: 100vw; width: 100vw;
max-width: 1060px;
} }
} }
@ -761,10 +760,10 @@ Super neat trick courtesy of @JoelDrapper
} }
.post-full-content pre { .post-full-content pre {
max-width: 100%;
overflow-x: auto; overflow-x: auto;
margin: 1.5em 0 3em; margin: 1.5em 0 3em;
padding: 20px; padding: 20px;
max-width: 100%;
border: color(var(--darkgrey) l(-10%)) 1px solid; border: color(var(--darkgrey) l(-10%)) 1px solid;
color: var(--whitegrey); color: var(--whitegrey);
font-size: 1.4rem; font-size: 1.4rem;
@ -794,9 +793,9 @@ Super neat trick courtesy of @JoelDrapper
top: -15px; top: -15px;
left: 50%; left: 50%;
display: block; display: block;
margin-left: -10px;
width: 1px; width: 1px;
height: 30px; height: 30px;
margin-left: -10px;
background: color(var(--lightgrey) l(+10%)); background: color(var(--lightgrey) l(+10%));
box-shadow: #fff 0 0 0 5px; box-shadow: #fff 0 0 0 5px;
transform: rotate(45deg); transform: rotate(45deg);
@ -808,8 +807,8 @@ Super neat trick courtesy of @JoelDrapper
.post-full-content h4, .post-full-content h4,
.post-full-content h5, .post-full-content h5,
.post-full-content h6 { .post-full-content h6 {
padding-top: 75px;
margin-top: -75px; margin-top: -75px;
padding-top: 75px;
color: color(var(--darkgrey) l(-5%)); color: color(var(--darkgrey) l(-5%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
} }
@ -895,40 +894,40 @@ Super neat trick courtesy of @JoelDrapper
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
overflow-x: auto; overflow-x: auto;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
margin: 0.5em 0 2.5em; margin: 0.5em 0 2.5em;
border-spacing: 0;
border-collapse: collapse;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.6rem; font-size: 1.6rem;
white-space: nowrap;
} }
.post-full-content table { .post-full-content table {
-webkit-overflow-scrolling: touch;
background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center; background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
background-size: 10px 100%, 10px 100%; background-size: 10px 100%, 10px 100%;
background-attachment: scroll, scroll; background-attachment: scroll, scroll;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-overflow-scrolling: touch;
} }
.post-full-content table td:first-child { .post-full-content table td:first-child {
background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%); background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
background-repeat: no-repeat;
background-size: 20px 100%; background-size: 20px 100%;
background-repeat: no-repeat;
} }
.post-full-content table td:last-child { .post-full-content table td:last-child {
background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%); background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 20px 100%; background-size: 20px 100%;
background-position: 100% 0;
background-repeat: no-repeat;
} }
.post-full-content table th { .post-full-content table th {
font-size: 1.2rem;
letter-spacing: 0.2px;
color: var(--darkgrey); color: var(--darkgrey);
font-size: 1.2rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.2px;
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;
background: color(var(--whitegrey) l(+4%)); background: color(var(--whitegrey) l(+4%));
@ -943,9 +942,9 @@ Super neat trick courtesy of @JoelDrapper
@media (max-width: 800px) { @media (max-width: 800px) {
.post-full-content table { .post-full-content table {
display: inline-block; display: inline-block;
vertical-align: top;
max-width: 100%;
width: auto; width: auto;
max-width: 100%;
vertical-align: top;
} }
} }
@ -984,8 +983,8 @@ Super neat trick courtesy of @JoelDrapper
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0 auto;
max-width: 420px; max-width: 420px;
margin: 0 auto;
} }
.subscribe-form .form-group { .subscribe-form .form-group {
@ -994,8 +993,8 @@ Super neat trick courtesy of @JoelDrapper
.subscribe-email { .subscribe-email {
display: block; display: block;
padding: 10px;
width: 100%; width: 100%;
padding: 10px;
border: color(var(--lightgrey) l(+7%)) 1px solid; border: color(var(--lightgrey) l(+7%)) 1px solid;
color: var(--midgrey); color: var(--midgrey);
font-size: 1.8rem; font-size: 1.8rem;
@ -1015,9 +1014,9 @@ Super neat trick courtesy of @JoelDrapper
.subscribe-form button { .subscribe-form button {
display: inline-block; display: inline-block;
height: 41px;
margin: 0 0 0 10px; margin: 0 0 0 10px;
padding: 0 20px; padding: 0 20px;
height: 41px;
outline: none; outline: none;
color: #fff; color: #fff;
font-size: 1.5rem; font-size: 1.5rem;
@ -1072,9 +1071,9 @@ Super neat trick courtesy of @JoelDrapper
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 840px;
margin: 0 auto; margin: 0 auto;
padding: 3vw 0 6vw 0; padding: 3vw 0 6vw 0;
max-width: 840px;
} }
.author-card { .author-card {
@ -1083,9 +1082,9 @@ Super neat trick courtesy of @JoelDrapper
} }
.author-card .author-profile-image { .author-card .author-profile-image {
margin-right: 15px;
width: 60px; width: 60px;
height: 60px; height: 60px;
margin-right: 15px;
} }
.author-card-name { .author-card-name {
@ -1137,8 +1136,8 @@ Super neat trick courtesy of @JoelDrapper
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.post-full-comments { .post-full-comments {
margin: 0 auto;
max-width: 840px; max-width: 840px;
margin: 0 auto;
} }
@ -1223,9 +1222,8 @@ Super neat trick courtesy of @JoelDrapper
.read-next-divider svg { .read-next-divider svg {
width: 40px; width: 40px;
fill: transparent;
stroke: #fff; stroke: #fff;
fill: transparent;
stroke-width: 0.5px; stroke-width: 0.5px;
stroke-opacity: 0.65; stroke-opacity: 0.65;
} }
@ -1243,8 +1241,8 @@ Super neat trick courtesy of @JoelDrapper
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
text-align: center;
list-style: none; list-style: none;
text-align: center;
} }
.read-next-card-content li { .read-next-card-content li {
@ -1260,9 +1258,9 @@ Super neat trick courtesy of @JoelDrapper
display: block; display: block;
padding: 20px 0; padding: 20px 0;
border-bottom: rgba(255,255,255,0.3) 1px solid; border-bottom: rgba(255,255,255,0.3) 1px solid;
vertical-align: top;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
vertical-align: top;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
@ -1324,8 +1322,8 @@ Super neat trick courtesy of @JoelDrapper
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--darkgrey); color: var(--darkgrey);
font-weight: 700;
line-height: 1.1em; line-height: 1.1em;
font-weight: 700;
} }
.floating-header-logo a:hover { .floating-header-logo a:hover {
@ -1333,8 +1331,8 @@ Super neat trick courtesy of @JoelDrapper
} }
.floating-header-logo img { .floating-header-logo img {
margin: 0 10px 0 0;
max-height: 20px; max-height: 20px;
margin: 0 10px 0 0;
} }
.floating-header-divider { .floating-header-divider {
@ -1385,9 +1383,9 @@ Super neat trick courtesy of @JoelDrapper
} }
.floating-header-share-label svg { .floating-header-share-label svg {
margin: 0 5px 0 10px;
width: 18px; width: 18px;
height: 18px; height: 18px;
margin: 0 5px 0 10px;
stroke: rgba(0,0,0,0.7); stroke: rgba(0,0,0,0.7);
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -1492,16 +1490,16 @@ Super neat trick courtesy of @JoelDrapper
.site-header-content .author-profile-image { .site-header-content .author-profile-image {
flex-shrink: 0; flex-shrink: 0;
margin: 0 0 20px 0;
width: 100px; width: 100px;
height: 100px; height: 100px;
margin: 0 0 20px 0;
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px; box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
} }
.site-header-content .author-bio { .site-header-content .author-bio {
flex-shrink: 0; flex-shrink: 0;
margin: 5px 0 10px 0;
max-width: 600px; max-width: 600px;
margin: 5px 0 10px 0;
font-size: 2rem; font-size: 2rem;
line-height: 1.3em; line-height: 1.3em;
font-weight: 300; font-weight: 300;
@ -1652,8 +1650,8 @@ Super neat trick courtesy of @JoelDrapper
} }
.subscribe-overlay-description { .subscribe-overlay-description {
margin: 0 auto 50px;
max-width: 650px; max-width: 650px;
margin: 0 auto 50px;
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 3rem; font-size: 3rem;
line-height: 1.3em; line-height: 1.3em;
@ -1665,8 +1663,8 @@ Super neat trick courtesy of @JoelDrapper
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0 auto;
max-width: 500px; max-width: 500px;
margin: 0 auto;
} }
.subscribe-overlay .form-group { .subscribe-overlay .form-group {
@ -1675,8 +1673,8 @@ Super neat trick courtesy of @JoelDrapper
.subscribe-overlay .subscribe-email { .subscribe-overlay .subscribe-email {
display: block; display: block;
padding: 14px 20px;
width: 100%; width: 100%;
padding: 14px 20px;
border: none; border: none;
color: var(--midgrey); color: var(--midgrey);
font-size: 2rem; font-size: 2rem;
@ -1697,9 +1695,9 @@ Super neat trick courtesy of @JoelDrapper
.subscribe-overlay button { .subscribe-overlay button {
display: inline-block; display: inline-block;
height: 52px;
margin: 0 0 0 15px; margin: 0 0 0 15px;
padding: 0 25px; padding: 0 25px;
height: 52px;
outline: none; outline: none;
color: #fff; color: #fff;
font-size: 1.7rem; font-size: 1.7rem;