diff --git a/assets/css/csscomb.json b/assets/css/csscomb.json new file mode 100644 index 0000000..318b661 --- /dev/null +++ b/assets/css/csscomb.json @@ -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" + ] ] +} diff --git a/assets/css/screen.css b/assets/css/screen.css index fe46be0..0fd3c42 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -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;