From 2c9b7a84a68f91ac0bc0a00f8085bce1be93f5b6 Mon Sep 17 00:00:00 2001 From: James Griffin Date: Sun, 12 Jul 2020 14:24:15 -0300 Subject: [PATCH] Add Unsupervised CSS from Custom Template and CSS --- plugin.json | 8 + static/unsupervised.css | 673 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 681 insertions(+) create mode 100644 plugin.json create mode 100644 static/unsupervised.css diff --git a/plugin.json b/plugin.json new file mode 100644 index 0000000..fafac6a --- /dev/null +++ b/plugin.json @@ -0,0 +1,8 @@ +{ + "version": "1.0", + "title": "CSS for Unsupervised Design", + "description": "CSS formatting for Fonts, Dark mode, and Reply formatting for Unsupervised Design", + "includes": [ + "/unsupervised.css" + ] +} \ No newline at end of file diff --git a/static/unsupervised.css b/static/unsupervised.css new file mode 100644 index 0000000..ef55426 --- /dev/null +++ b/static/unsupervised.css @@ -0,0 +1,673 @@ +/* ========================================================================== + General styles + ========================================================================== */ + +/* Font sizes used + +Base font size: 1rem = 18px + +0.702rem 13px +0.79rem 14px +0.889rem 16px +1.125rem 20px +1.266rem 23px +1.424rem 26px +1.602rem 29px +1.802rem 32px +2.887rem 52px + +http://modularscale.com/ +8:9 major second +*/ + +html { + height: 100%; + max-height: 100%; + font-size: 112.5%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + -webkit-font-feature-settings: 'kern' 1; + -moz-font-feature-settings: 'kern' 1; + -ms-font-feature-settings: 'kern' 1; + -o-font-feature-settings: 'kern' 1; + font-feature-settings: 'kern' 1; + height: 100%; + max-height: 100%; + width: 80%; + max-width: 650px; + margin: 0 auto; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +font-weight: 300; + font-size: 1rem; + line-height: 1.7; + color: #3A4145; +} + +h1, h2, h3, h4, h5, h6 { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +font-weight: 500; +margin-bottom: 0; +} + +h1 { +font-size: 1.802rem; +} + +h2 { +font-size: 1.602rem; +} + +h3 { +font-size: 1.424rem; +} + +h4 { +font-size: 1.266rem; +} + +h5 { +font-size: 1.125rem; +} + +h6 { +font-size: 1rem; +} + +p { +margin-top: 0; +} + +code, tt, pre { + font-family: monospace, sans-serif; + white-space: pre-wrap; + font-size: 0.79rem; + border: none; + background: none; +} + +pre { +padding: 0 2em; +line-height: 1.3em; +} + +code, tt { +font-weight: 500; +} + +pre code { +font-weight: 300; +} + +blockquote { +margin: 0 2em; +color: #9EABB3; +} + +blockquote p { + margin: 0.8em 0; + font-style: italic; +} + +blockquote cite { +font-style: normal; +font-size: 0.889rem; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: #9EABB3 1px solid; +} + +/* Links */ +.post a { + color: #FC7E0F; + text-decoration: none; +} + +.post a:hover { + text-decoration: underline; +} + +.post a:visited { + color: #9EABB3; + text-decoration: none; +} + +a.read-more, a.read-more:hover, a.read-more:visited { + color: #FC7E0F; /* #DA1F15, #F17F33 */ + text-decoration: none; +} + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { +color: #3A4145; +text-decoration: none; +} + +.post-title a { +color: #3A4145 !important; +text-decoration: none !important; +} + +/* Tables and dictionaries (straight up ripped out of the Casper stylesheet with minor modifications) */ + +table { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.7em 0; + width: 100%; + max-width: 100%; + background-color: transparent; +} + +th, td { + padding: 8px; + line-height: 20px; + text-align: left; + vertical-align: top; + border-top: #EFEFEF 1px solid; +} + +td h3, td h4, td h5, td h6 { +margin: 0 0 0.5rem 0; +} + +table caption + thead tr:first-child th, +table caption + thead tr:first-child td, +table colgroup + thead tr:first-child th, +table colgroup + thead tr:first-child td, +table thead:first-child tr:first-child th, +table thead:first-child tr:first-child td { + border-top: 0; +} + +table tbody + tbody { border-top: #EFEFEF 2px solid; } + +table table table { background-color: #FFF; } + +th { +color: #000; + background-color: #F6F6F6; +} + +dl dt { + float: left; + width: 180px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 700; + margin-bottom: 1em; +} + +dl dd { + margin-left: 200px; + margin-bottom: 1em +} + +/* ========================================================================== +Blog header +========================================================================== */ + +.main-header { + position: relative; + width: 100%; + padding: 2rem 0; + margin-bottom: 1rem; + text-align: center; + vertical-align: middle; + overflow: hidden; + display: table; +} + +.main-header-content { +height: auto; +} + +.blog-title { + margin: 0; + padding: 0; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +font-weight: 300; + font-size: 2.887rem; + vertical-align: middle; + line-height: 1; +} + +.blog-title a { +font-color: inherit; +} + +.blog-description { +padding-top: 10px; + margin: 0; + font-size: 0.889rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + text-transform: uppercase; + letter-spacing: 0; + color: #9EABB3; + font-weight: 300; +} + +/* ========================================================================== +Navigation +========================================================================== */ + +.nav { +margin-top: 1rem; +} + +.nav { +text-transform: uppercase; +font-size: .889rem; +} + +.nav a { +margin: 0 0.5rem; +color: #9EABB3; +text-decoration: none; +} + +.nav a:hover { +color: #FC7E0F; +} + +a.nav-current { +color: #FC7E0F; +} + +a.nav-home, a.nav-blog { +color: #9EABB3; +} + +/* ========================================================================== +Site footer +========================================================================== */ + +.site-footer { + position: relative; + display: table; + width: 100%; + margin-top: 3rem; + padding-bottom: 1rem; + text-align: center; + overflow: hidden; + font-size: .79rem; +} + +.site-footer a { +color: #FC7E0F; +text-decoration: none; +} + +.site-footer a:hover { +color: #9EABB3; +} + + +/* RSS - enable to replace the simple RSS icon with a round button */ + +/* +.site-footer .rss { +margin: 1rem auto; +width: 1.7rem; +height: 1.6rem; +} + +.site-footer .rss a { +display: block; +height: 100%; +width: 100%; +margin-left: -.2rem; +padding: .35rem .1rem 0.05rem .2rem; +vertical-align: middle; +border: 1px #FC7E0F solid; +border-radius: 1.2rem; +} + +.site-footer .rss a:hover { +color: #ffffff; +background: #FC7E0F; +} +*/ + +/* ========================================================================== +Posts +========================================================================== */ + +.post { + position: relative; + margin: 2rem auto; + padding-bottom: 4rem; + word-break: break-word; + hyphens: auto; +} + +.post-header { +margin-bottom: 0.5rem; +} + +.post-title { +margin-bottom: 0; +line-height: 1; +} + +.post-meta { +text-transform: uppercase; +font-size: .79rem; +} + +.post-footer { +margin-top: 2rem; +} + +.post-footer .tags a { +color: #9EABB3; +text-decoration: none; +} + +.post-footer .tags a:hover { +color: #FC7E0F; +} + +.post-footer h4 { +margin: 2rem 0 0; +} + +.post-footer .share { + margin: 0 auto; +} + +.post-footer .share a { + font-size: 1.8rem; + display: inline-block; + margin: 1rem 1.6rem 1.6rem 0; + color: #BBC7CC; + text-decoration: none; +} + +.post-footer .share a:hover { + color: #50585D; +} + +.post img { +display: block; +max-width: 100%; /* Keep image contained in width of post */ +height: auto; +margin: 0 auto 0.5rem; +} + +.footnotes-sep { +display: none; +} + +/* Koenig image styles */ + +.kg-image-card { +margin-bottom: 0.5rem; +} + +.kg-image-card img { +margin-bottom: 0; +} + +.post .kg-image-wide { +max-width: 1050px; +margin: 0 -200px; +} + +@media (max-width: 1100px) { +.post .kg-image-wide { + max-width: 140%; + margin: 0 -20%; +} +} + +@media (max-width: 950px) { +.post .kg-image-wide { + max-width: 120%; /* Start calculating as percentage of viewport? */ + margin: 0 -10%; +} +} + +.post .kg-image-full { +max-width: 100vw; +position: relative; +left: 50%; +right: 50%; +margin-left: -50vw; +margin-right: -50vw; +} + +.kg-image-card figcaption { +font-size: 0.79rem; +text-align: center; +} + + +/* YouTube embed wrapper to scale to full-width */ + +.yt-wrapper { +position: relative; +width: 100%; +margin: 0; +} + +.yt-wrapper:before{ +content: ""; +display: block; +padding-top: 56.25%; /* 16:9 aspect ratio */ +} + +.yt-wrapper iframe { +position: absolute; +top: 0; +left: 0; +width: 100%; +height: 100%; +} + +/* ========================================================================== +Tags +========================================================================== */ + +.tag-title { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 1.802rem; +font-weight: bold; +margin-top: 0; +} + +.tag-image { +max-width: 100% +} + +.tag-description { +color: #9EABB3; +} + +/* ========================================================================== + Pagination + ========================================================================== */ + +/* The main wrapper for pagination links */ +.pagination { + position: relative; + margin: 2rem auto; + font-size: .79rem; + color: #9EABB3; + text-align: center; +} + +.pagination a { + color: #9EABB3; +} + +/* Push the previous/next links out to the left/right */ +.older-posts, +.newer-posts { + position: absolute; + display: inline-block; + text-decoration: none; +} + +.older-posts { + right: 0; +} + +.page-number { + display: inline-block; + padding: 2px 0; + min-width: 100px; +} + +.newer-posts { + left: 0; +} + +.older-posts:hover, +.newer-posts:hover { + color: #FC7E0F; +} + +.extra-pagination { + display: none; +} + +.extra-pagination .pagination { + width: auto; +} + +/* On page2+ show extra pagination controls at the top of post list */ +.paged .extra-pagination { + display: block; +} + +/* ========================================================================== + 12. Media Queries - Smaller than 500px + ========================================================================== */ + +@media only screen and (max-width: 500px) { + +html { + font-size: 100%; +} + + .blog-title { + font-size: 2.281rem; +} + +.blog-description { + font-size: 0.889rem; +} +} + +video { +max-width: 100%; +} + +/* Previously Custom CSS For Dark Mode and Reply formatting */ + +body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +.nav a { + margin: 0 0.3rem; +} + +@media (prefers-color-scheme: dark) { + body { + color: white; + background: #3A4145; + } + nav.main-nav { + background: black; + } + a, nav.main-nav a, #footer a, #post-nav a, p a, ul a, ol a, h1, h2, h3 { + color: #d5dade; + } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: white; + } + .post-title a { + color: #d5dade !important; + } + .post-title a:visited { + color: #9EABB3 !important; + } + + .microblog_conversation { + margin-top: 50px; + padding-top: 20px; + border-top: 1px solid white; + } + + .microblog_post { + padding-top: 20px; + padding-bottom: 20px; + } + + .microblog_post a { + color: #d5dade; + } + + .microblog_avatar { + border-radius: 10px; + vertical-align: top; + } + + .microblog_time { + font-size: 13px; + padding-top: 10px; + color: white; + } + + .microblog_time a { + color: white; + text-decoration: none; + } +} + +.post { + padding-bottom: 0; +} + +.microblog_conversation { + padding-top: 20px; + border-top: 1px solid lightgray; +} + +.microblog_post { + padding-top: 20px; + padding-bottom: 20px; +} + +.microblog_text p { + margin-bottom: 0; +} + +.microblog_post a { + color: #FC7E0F; +} + +.microblog_avatar { + border-radius: 10px; + vertical-align: top; +} + +.microblog_time { + font-size: 13px; + padding-top: 10px; + color: #9EABB3; +} + +.microblog_time a { + color: #9EABB3; + text-decoration: none; +} \ No newline at end of file