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;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-position: center center;
border-radius: 100%;
}
@ -59,9 +59,9 @@ body {
/* Centered content container blocks */
.inner {
margin: 0 auto;
max-width: 1040px;
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
/* Usage:
@ -140,9 +140,9 @@ body {
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10vw 4vw;
min-height: 200px;
max-height: 450px;
padding: 10vw 4vw;
text-align: center;
}
@ -185,8 +185,8 @@ body {
display: flex;
justify-content: space-between;
align-items: flex-start;
overflow-y: hidden;
height: 40px;
overflow-y: hidden;
font-size: 1.2rem;
}
@ -199,7 +199,6 @@ body {
padding-bottom: 80px;
letter-spacing: 0.4px;
white-space: nowrap;
-webkit-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 {
margin-bottom: 1px;
height: 2.1rem;
margin-bottom: 1px;
fill: #fff;
}
@media (max-width: 700px) {
.site-header {
padding-left: 0;
padding-right: 0;
padding-left: 0;
}
.site-nav-left {
padding-left: 4vw;
margin-right: 0;
padding-left: 4vw;
}
.site-nav-right {
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;
display: flex;
flex-direction: column;
min-height: 300px;
overflow: hidden;
margin: 0 20px 40px;
min-height: 300px;
background: #fff center center;
background-size: cover;
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 {
margin-right: 5px;
width: 25px;
height: 25px;
margin-right: 5px;
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 */
.post-full-header {
max-width: 1040px;
margin: 0 auto;
padding: 6vw 3vw 3vw;
max-width: 1040px;
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 {
margin: 0 -10vw -165px;
height: 800px;
margin: 0 -10vw -165px;
background: var(--lightgrey) center center;
background-size: cover;
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) {
.post-full-image {
margin: 0 -4vw -100px;
height: 600px;
margin: 0 -4vw -100px;
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 {
position: relative;
min-height: 230px;
margin: 0 auto;
padding: 70px 100px 0;
min-height: 230px;
font-family: Georgia, serif;
font-size: 2.2rem;
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 video {
display: block;
margin: 1.5em auto;
max-width: 1040px;
margin: 1.5em auto;
}
@media (max-width: 1040px) {
.post-full-content img,
@ -742,8 +741,8 @@ Super neat trick courtesy of @JoelDrapper
@media (min-width: 1000px) {
.post-full-content blockquote {
max-width: 1060px;
width: 100vw;
max-width: 1060px;
}
}
@ -761,10 +760,10 @@ Super neat trick courtesy of @JoelDrapper
}
.post-full-content pre {
max-width: 100%;
overflow-x: auto;
margin: 1.5em 0 3em;
padding: 20px;
max-width: 100%;
border: color(var(--darkgrey) l(-10%)) 1px solid;
color: var(--whitegrey);
font-size: 1.4rem;
@ -794,9 +793,9 @@ Super neat trick courtesy of @JoelDrapper
top: -15px;
left: 50%;
display: block;
margin-left: -10px;
width: 1px;
height: 30px;
margin-left: -10px;
background: color(var(--lightgrey) l(+10%));
box-shadow: #fff 0 0 0 5px;
transform: rotate(45deg);
@ -808,8 +807,8 @@ Super neat trick courtesy of @JoelDrapper
.post-full-content h4,
.post-full-content h5,
.post-full-content h6 {
padding-top: 75px;
margin-top: -75px;
padding-top: 75px;
color: color(var(--darkgrey) l(-5%));
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%;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
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-size: 1.6rem;
white-space: nowrap;
}
.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-size: 10px 100%, 10px 100%;
background-attachment: scroll, scroll;
background-repeat: no-repeat;
-webkit-overflow-scrolling: touch;
}
.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-repeat: no-repeat;
background-size: 20px 100%;
background-repeat: no-repeat;
}
.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-repeat: no-repeat;
background-position: 100% 0;
background-size: 20px 100%;
background-position: 100% 0;
background-repeat: no-repeat;
}
.post-full-content table th {
font-size: 1.2rem;
letter-spacing: 0.2px;
color: var(--darkgrey);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.2px;
text-align: left;
text-transform: uppercase;
background: color(var(--whitegrey) l(+4%));
@ -943,9 +942,9 @@ Super neat trick courtesy of @JoelDrapper
@media (max-width: 800px) {
.post-full-content table {
display: inline-block;
vertical-align: top;
max-width: 100%;
width: auto;
max-width: 100%;
vertical-align: top;
}
}
@ -984,8 +983,8 @@ Super neat trick courtesy of @JoelDrapper
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 420px;
margin: 0 auto;
}
.subscribe-form .form-group {
@ -994,8 +993,8 @@ Super neat trick courtesy of @JoelDrapper
.subscribe-email {
display: block;
padding: 10px;
width: 100%;
padding: 10px;
border: color(var(--lightgrey) l(+7%)) 1px solid;
color: var(--midgrey);
font-size: 1.8rem;
@ -1015,9 +1014,9 @@ Super neat trick courtesy of @JoelDrapper
.subscribe-form button {
display: inline-block;
height: 41px;
margin: 0 0 0 10px;
padding: 0 20px;
height: 41px;
outline: none;
color: #fff;
font-size: 1.5rem;
@ -1072,9 +1071,9 @@ Super neat trick courtesy of @JoelDrapper
display: flex;
justify-content: space-between;
align-items: center;
max-width: 840px;
margin: 0 auto;
padding: 3vw 0 6vw 0;
max-width: 840px;
}
.author-card {
@ -1083,9 +1082,9 @@ Super neat trick courtesy of @JoelDrapper
}
.author-card .author-profile-image {
margin-right: 15px;
width: 60px;
height: 60px;
margin-right: 15px;
}
.author-card-name {
@ -1137,8 +1136,8 @@ Super neat trick courtesy of @JoelDrapper
/* ---------------------------------------------------------- */
.post-full-comments {
margin: 0 auto;
max-width: 840px;
margin: 0 auto;
}
@ -1223,9 +1222,8 @@ Super neat trick courtesy of @JoelDrapper
.read-next-divider svg {
width: 40px;
fill: transparent;
stroke: #fff;
fill: transparent;
stroke-width: 0.5px;
stroke-opacity: 0.65;
}
@ -1243,8 +1241,8 @@ Super neat trick courtesy of @JoelDrapper
flex-direction: column;
margin: 0 auto;
padding: 0;
text-align: center;
list-style: none;
text-align: center;
}
.read-next-card-content li {
@ -1260,9 +1258,9 @@ Super neat trick courtesy of @JoelDrapper
display: block;
padding: 20px 0;
border-bottom: rgba(255,255,255,0.3) 1px solid;
vertical-align: top;
color: #fff;
font-weight: 500;
vertical-align: top;
transition: opacity 0.3s ease;
}
@ -1324,8 +1322,8 @@ Super neat trick courtesy of @JoelDrapper
display: flex;
align-items: center;
color: var(--darkgrey);
font-weight: 700;
line-height: 1.1em;
font-weight: 700;
}
.floating-header-logo a:hover {
@ -1333,8 +1331,8 @@ Super neat trick courtesy of @JoelDrapper
}
.floating-header-logo img {
margin: 0 10px 0 0;
max-height: 20px;
margin: 0 10px 0 0;
}
.floating-header-divider {
@ -1385,9 +1383,9 @@ Super neat trick courtesy of @JoelDrapper
}
.floating-header-share-label svg {
margin: 0 5px 0 10px;
width: 18px;
height: 18px;
margin: 0 5px 0 10px;
stroke: rgba(0,0,0,0.7);
transform: rotate(90deg);
}
@ -1492,16 +1490,16 @@ Super neat trick courtesy of @JoelDrapper
.site-header-content .author-profile-image {
flex-shrink: 0;
margin: 0 0 20px 0;
width: 100px;
height: 100px;
margin: 0 0 20px 0;
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
}
.site-header-content .author-bio {
flex-shrink: 0;
margin: 5px 0 10px 0;
max-width: 600px;
margin: 5px 0 10px 0;
font-size: 2rem;
line-height: 1.3em;
font-weight: 300;
@ -1652,8 +1650,8 @@ Super neat trick courtesy of @JoelDrapper
}
.subscribe-overlay-description {
margin: 0 auto 50px;
max-width: 650px;
margin: 0 auto 50px;
font-family: Georgia, serif;
font-size: 3rem;
line-height: 1.3em;
@ -1665,8 +1663,8 @@ Super neat trick courtesy of @JoelDrapper
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 500px;
margin: 0 auto;
}
.subscribe-overlay .form-group {
@ -1675,8 +1673,8 @@ Super neat trick courtesy of @JoelDrapper
.subscribe-overlay .subscribe-email {
display: block;
padding: 14px 20px;
width: 100%;
padding: 14px 20px;
border: none;
color: var(--midgrey);
font-size: 2rem;
@ -1697,9 +1695,9 @@ Super neat trick courtesy of @JoelDrapper
.subscribe-overlay button {
display: inline-block;
height: 52px;
margin: 0 0 0 15px;
padding: 0 25px;
height: 52px;
outline: none;
color: #fff;
font-size: 1.7rem;