diff options
author | Lenard Gaida <mail@lgaida.de> | 2019-04-09 20:04:58 +0300 |
---|---|---|
committer | Lenard Gaida <mail@lgaida.de> | 2019-04-09 20:04:58 +0300 |
commit | cd6e167069bf8e95e924fe5147242e7f86c2e301 (patch) | |
tree | 8c72b9708e03d472e089138b3b271ccd1605a3d5 | |
parent | 141c181812bb772bb282470e6c7be33a2d3472c9 (diff) |
Follow jekyll-theme release 1.0.35
Use what can be used of jekyll-theme release 1.0.35
-rw-r--r-- | layouts/_default/single.html | 6 | ||||
-rw-r--r-- | layouts/partials/_shared/js.html | 10 | ||||
-rw-r--r-- | layouts/partials/_shared/jumbotron.html | 4 | ||||
-rw-r--r-- | layouts/partials/single-partials/share.html | 4 | ||||
-rw-r--r-- | static/css/medium.css | 891 | ||||
-rw-r--r-- | static/js/mediumish.js | 66 |
6 files changed, 584 insertions, 397 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index b81656a..a768a78 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -20,11 +20,11 @@ {{if isset .Site.Params.author "name"}} {{if isset .Site.Params.author "thumbnail"}} {{if isset .Site.Params.author "description"}} - <div class="post-top-meta"> - <div> + <div class="row post-top-meta"> + <div class="col-xs-12 col-md-3 col-lg-2 text-center text-md-left mb-4 mb-md-0"> <img class="author-thumb" src="{{ .Site.Params.author.thumbnail | urlize | relURL}}" alt="{{ .Site.Params.author.name }}"> </div> - <div > + <div class="col-xs-12 col-md-9 col-lg-10 text-center text-md-left"> <a target="_blank" class="link-dark">{{ .Site.Params.author.name }}</a><br> <span class="author-description"> {{ .Site.Params.author.description }}<br> diff --git a/layouts/partials/_shared/js.html b/layouts/partials/_shared/js.html index 9c66c44..5bbd9b7 100644 --- a/layouts/partials/_shared/js.html +++ b/layouts/partials/_shared/js.html @@ -1,11 +1,11 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - + <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> -<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> - -<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> - +<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> + +<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> + <script src="{{"/js/mediumish.js" | urlize | relURL }}"></script> diff --git a/layouts/partials/_shared/jumbotron.html b/layouts/partials/_shared/jumbotron.html index 6ae3da3..0849d6d 100644 --- a/layouts/partials/_shared/jumbotron.html +++ b/layouts/partials/_shared/jumbotron.html @@ -9,8 +9,8 @@ </div> <div class="col-md-8 p-5 align-self-center text-center"> {{ range $name, $taxonomy := .Site.Taxonomies.tags }} - <a href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">{{ $name }}</a> + <a class="mt-1 mb-1" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">{{ $name }}</a> {{ end }} </div> </div> -</div>
\ No newline at end of file +</div> diff --git a/layouts/partials/single-partials/share.html b/layouts/partials/single-partials/share.html index 4af0877..07fa8d7 100644 --- a/layouts/partials/single-partials/share.html +++ b/layouts/partials/single-partials/share.html @@ -1,4 +1,4 @@ -<div class="share"> +<div class="share sticky-top sticky-top-offset"> <p>Share</p> <ul> <li class="ml-1 mr-1"> @@ -35,4 +35,4 @@ </li> </ul> {{ end }} -</div>
\ No newline at end of file +</div> diff --git a/static/css/medium.css b/static/css/medium.css index af83ee1..390ebb5 100644 --- a/static/css/medium.css +++ b/static/css/medium.css @@ -1,614 +1,797 @@ /* Template Name: Mediumish Copyright: Sal, WowThemes.net, https://www.wowthemes.net -Version: 1.0.22 License: https://www.wowthemes.net/freebies-license/ */ .mainheading { - padding:1rem 0rem; + padding: 1rem 0rem; } + a { - color:#00ab6b; - transition:all 0.2s; + color: #00ab6b; + transition: all 0.2s; } + a:hover { color: #038252; - text-decoration:none; + text-decoration: none; } + pre { -moz-box-sizing: border-box; box-sizing: border-box; - margin: 0 0 1.75em 0; border: #E3EDF3 1px solid; width: 100%; - padding: 10px; + padding: 7px; font-family: monospace, sans-serif; font-size: 14px; white-space: pre; overflow: auto; - background: #F7FAFB; - border-radius: 3px; + background: #fff; + border-radius: 0px; + line-height: 1.6; + color: #333; + margin-bottom: -rem; } + .mediumnavigation { - background:rgba(255,255,255,.97); - box-shadow:0 2px 2px -2px rgba(0,0,0,.15); + background: rgba(255, 255, 255, .97); + box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .15); transition: top 0.2s ease-in-out; } + .main-content { - min-height:300px; + min-height: 300px; } + .site-content { min-height: 60vh; padding-top: 1.5rem; margin-top: 57px; transition: all 0.4s; } + section { - margin-bottom:20px; + margin-bottom: 20px; } + section.recent-posts { - margin-bottom:0; + margin-bottom: 0; } + .section-title h2 { - border-bottom:1px solid rgba(0,0,0,.125); - margin-bottom:25px; - font-weight:700; - font-size:1.4rem; - margin-bottom:27px; + border-bottom: 1px solid rgba(0, 0, 0, .125); + margin-bottom: 25px; + font-weight: 700; + font-size: 1.4rem; + margin-bottom: 27px; } + .section-title span { - border-bottom:1px solid rgba(0,0,0,.44); - display:inline-block; - padding-bottom:20px; - margin-bottom:-1px; + border-bottom: 1px solid rgba(0, 0, 0, .44); + display: inline-block; + padding-bottom: 20px; + margin-bottom: -1px; } -.article-post ol, .article-post ul { - margin-bottom:1.5rem; + +.article-post ol, +.article-post ul { + margin-bottom: 1.5rem; } -.article-post ol ol, .article-post ul ul { + +.article-post ol ol, +.article-post ul ul { list-style: disc; - margin-bottom:0rem; + margin-bottom: 0rem; } + @media (min-width:576px) { .card-columns.listfeaturedtag { - -webkit-column-count:2; - -moz-column-count:2; - column-count:2; - } + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + } } + @media (min-width:992px) { .navbar-expand-lg .navbar-nav .nav-link { - padding-right:0.8rem; - padding-left:0.8rem; - } + padding-right: 0.8rem; + padding-left: 0.8rem; + } } + .listfeaturedtag { - border:1px solid rgba(0,0,0,.125); + border: 1px solid rgba(0, 0, 0, .125); border-radius: .25rem; - transition: all 0.3s cubic-bezier(.25,.8,.25,1); + transition: all 0.3s cubic-bezier(.25, .8, .25, 1); } + .listfeaturedtag .wrapthumbnail { - height:290px; - flex:0 0 auto; + height: 290px; + flex: 0 0 auto; height: 100%; } + .maxthumb { - max-height:300px; - overflow:hidden; + max-height: 300px; + overflow: hidden; } -.listfeaturedtag .card, .card-footer { + +.listfeaturedtag .card, +.card-footer { border: 0; } + .listfeaturedtag .thumbnail { - background-size:cover; - height:100%; - display:block; - background-position:38% 22% !important; - background-origin:border-box!important; + background-size: cover; + height: 100%; + display: block; + background-position: 38% 22% !important; + background-origin: border-box !important; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; } + .listfeaturedtag .card-block { - padding-left:0; + padding-left: 0; } -.listfeaturedtag h2.card-title,.listrecent h2.card-title { - font-size:1.3rem; - font-weight:700; + +.listfeaturedtag h2.card-title, +.listrecent h2.card-title { + font-size: 1.3rem; + font-weight: 700; line-height: 1.25; } -.listfeaturedtag h4.card-text,.listrecent h4.card-text { - color:rgba(0,0,0,.44); - font-size:0.95rem; - line-height:1.4; - font-weight:400; + +.listfeaturedtag h4.card-text, +.listrecent h4.card-text { + color: rgba(0, 0, 0, .44); + font-size: 0.95rem; + line-height: 1.6; + font-weight: 400; +} + +.featured-box-img-cover { + object-fit: cover; + width: 100%; + height: 100%; + max-height: 100%; +} + +@media (max-width:991px) { + .featured-box-img-cover { + height: auto; + width: 100%; + } } + .wrapfooter { - font-size:12px; + font-size: 12px; + display: flex; + align-items: center; + margin-bottom: 15px; } + .author-thumb { - width:40px; - height:40px; - float:left; - margin-right:13px; - border-radius:100%; + width: 40px; + height: 40px; + margin-right: 13px; + border-radius: 100%; } + .post-top-meta { - margin-bottom:2rem; + margin-bottom: 2rem; } + .post-top-meta .author-thumb { - width:72px; - height:72px; + width: 72px; + height: 72px; } + .post-top-meta.authorpage .author-thumb { - margin-top:40px; + margin-top: 40px; } + .post-top-meta span { - font-size:0.9rem; - color:rgba(0,0,0,.44); - display:inline-block; + font-size: 0.9rem; + color: rgba(0, 0, 0, .44); + display: inline-block; } + .post-top-meta .author-description { - margin-bottom:5px; - margin-top:5px; - font-size:0.95rem; + margin-bottom: 5px; + margin-top: 5px; + font-size: 0.95rem; } -.author-meta { - flex:1 1 auto; - white-space:nowrap!important; - text-overflow:ellipsis!important; - overflow:hidden!important; + +.toc ul { + list-style: decimal; + font-weight: 400; } -span.post-name,span.post-date,span.author-meta { - display:inline-block; + +.author-meta { + flex: 1 1 auto; + white-space: nowrap !important; + text-overflow: ellipsis !important; + overflow: hidden !important; +} + +span.post-name, +span.post-date, +span.author-meta { + display: inline-block; } -span.post-date,span.post-read { - color:rgba(0,0,0,.44); + +span.post-date, +span.post-read { + color: rgba(0, 0, 0, .44); } + span.post-read-more { - align-items:center; - display:inline-block; - float:right; - margin-top:8px; + align-items: center; + display: inline-block; + float: right; + margin-top: 8px; } + span.post-read-more a { - color:rgba(0,0,0,.44); + color: rgba(0, 0, 0, .44); } -span.post-name a,span.post-read-more a:hover { - color:rgba(0,0,0,.8); + +span.post-name a, +span.post-read-more a:hover { + color: rgba(0, 0, 0, .8); } + .dot:after { - content:"·"; - margin-left:3px; - margin-right:3px; + content: "·"; + margin-left: 3px; + margin-right: 3px; } + .mediumnavigation .form-control { - font-size:0.8rem; - border-radius:30px; - overflow:hidden; - border:1px solid rgba(0,0,0,0.04); + font-size: 0.8rem; + border-radius: 30px; + overflow: hidden; + border: 1px solid rgba(0, 0, 0, 0.04); + min-width: 180px; } + .mediumnavigation .form-inline { - margin-left:15px; + margin-left: 15px; } + .mediumnavigation .form-inline .btn { - margin-left:-50px; - border:0; - border-radius:30px; - cursor:pointer; + margin-left: -50px; + border: 0; + border-radius: 30px; + cursor: pointer; } -.mediumnavigation .form-inline .btn:hover,.mediumnavigation .form-inline .btn:active { - background:transparent; - color:green; + +.mediumnavigation .form-inline .btn:hover, +.mediumnavigation .form-inline .btn:active { + background: transparent; + color: green; } + .mediumnavigation .navbar-brand { - font-weight:500; + font-weight: 500; } + .mediumnavigation .dropdown-menu { - border:1px solid rgba(0,0,0,0.08); - margin:.5rem 0 0; + border: 1px solid rgba(0, 0, 0, 0.08); + margin: .5rem 0 0; } -.mediumnavigation .nav-item,.dropdown-menu { - font-size:0.9rem; + +.mediumnavigation .nav-item, +.dropdown-menu { + font-size: 0.9rem; } + .mediumnavigation .search-icon { - margin-left:-40px; - display:inline-block; - margin-top:3px; - cursor:pointer; + margin-left: -40px; + display: inline-block; + margin-top: 3px; + cursor: pointer; } + .mediumnavigation .navbar-brand img { - max-height:30px; - margin-right:5px; + max-height: 30px; + margin-right: 5px; } + .mainheading h1.sitetitle { - font-family:Righteous; + font-family: Righteous; } + .mainheading h1.posttitle { - font-weight:700; - margin-bottom:1rem; + font-weight: 700; + margin-bottom: 1rem; } + .footer { - border-top:1px solid rgba(0,0,0,.05)!important; - padding-top:15px; - padding-bottom:12px; - font-size:0.8rem; - color:rgba(0,0,0,.44); - margin-top:50px; - margin-bottom:62px; + border-top: 1px solid rgba(0, 0, 0, .05) !important; + padding-top: 15px; + padding-bottom: 12px; + font-size: 0.8rem; + color: rgba(0, 0, 0, .44); + margin-top: 50px; + margin-bottom: 62px; position: relative; background: #fff; } + .link-dark { - color:rgba(0,0,0,.8); + color: rgba(0, 0, 0, .8); } + .article-post { - font-family:Merriweather; - font-size:1.1rem; - line-height:1.84; - color:rgba(0,0,0,.8); + font-family: Merriweather; + font-size: 1.1rem; + line-height: 1.84; + color: rgba(0, 0, 0, .8); } + blockquote { - border-left:4px solid #00ab6b; - padding:0 20px; - font-style:italic; - color:rgba(0,0,0,.5); + border-left: 4px solid #00ab6b; + padding: 0 20px; + font-style: italic; + color: rgba(0, 0, 0, .5); } -.article-post p,.article-post blockquote { - margin:0 0 1.5rem 0; + +.article-post p, +.article-post blockquote { + margin: 0 0 1.5rem 0; } + .featured-image { - display:block; - margin-bottom:1.5rem; + display: block; + margin-bottom: 1.5rem; } + .share { - text-align:center; + text-align: center; } + .share p { - margin-bottom:10px; - font-size:0.95rem; + margin-bottom: 10px; + font-size: 0.95rem; } + .share ul li { - display:inline-block; - margin-bottom:9px; + display: inline-block; + margin-bottom: 9px; } + .share ul { - padding-left:0; - margin-left:0; + padding-left: 0; + margin-left: 0; } + .share ul li i.fa { - border:1px solid #ddd; - width:30px; - height:30px; - line-height:30px; - text-align:center; - border-radius:50%; -} + border: 1px solid #ddd; + width: 30px; + height: 30px; + line-height: 30px; + text-align: center; + border-radius: 50%; +} + .svgIcon { - vertical-align:middle; + vertical-align: middle; +} + +.sticky-top-offset { + top: 100px; } + @media (min-width:1024px) { - .share { - position:fixed; - display:block; - } .share ul li { - display:block; - } + display: block; + } } + @media (max-width:999px) { + .featured-box-img-cover { + height: 359px; + } + .alertbar { - position:relative !Important; - margin-bottom:20px; - margin-top:20px; - box-shadow:none !Important; + position: relative !Important; + margin-bottom: 20px; + margin-top: 20px; + box-shadow: none !Important; padding-right: 14px !Important; - } + } + #comments { margin-right: 15px; } + .jumbotron.fortags { - margin-bottom:0 !Important; - } + margin-bottom: 0 !Important; + } + + .alertbar form { + margin-top: 20px; + } + + .alertbar span, .alertbar form { - margin-top:20px; - } - .alertbar span, .alertbar form { display: block; } + .alertbar input[type="submit"] { - border-radius:3px !Important; + border-radius: 3px !Important; } + .alertbar input[type="email"] { - margin-right:0px !Important; - display:block; - border-right:1px solid #ddd !Important; - margin-bottom:10px; - } + margin-right: 0px !Important; + display: block; + border-right: 1px solid #ddd !Important; + margin-bottom: 10px; + } + .jumbotron { - margin-bottom:0; + margin-bottom: 0; border-radius: 0; - } - .listfeaturedtag .wrapthumbnail, .listfeaturedtag .col-md-7 { - width:100%; - max-width:100%; - -webkit-box-flex: 0; - -webkit-flex: 100%; - -ms-flex: 100%; - flex: 100%; - } - .listfeaturedtag .wrapthumbnail { - height:250px; - } + } + .listfeaturedtag .card { - height:auto; - } + height: auto; + } + .listfeaturedtag .wrapfooter { - position:relative; - margin-top:30px; - } + position: relative; + margin-top: 30px; + } + .listfeaturedtag .card-block { - padding:20px; - } + padding: 20px; + } + .footer { margin-top: 0px; margin-bottom: 0px; - } + } } + @media (max-width:1024px) { .post-top-meta .col-md-10 { - text-align:center; - } + text-align: center; + } } + @media (max-width:767px) { .post-top-meta.authorpage { - text-align:center; - } + text-align: center; + } } -.share,.share a { - color:rgba(0,0,0,.44); - fill:rgba(0,0,0,.44); + +.share, +.share a { + color: rgba(0, 0, 0, .44); + fill: rgba(0, 0, 0, .44); } + .graybg { - background-color:#fafafa; - padding:40px 0 46px; - position:relative; + background-color: #fafafa; + padding: 40px 0 46px; + position: relative; } + .listrelated .card { - box-shadow:0 1px 7px rgba(0,0,0,.05); - border:0; + box-shadow: 0 1px 7px rgba(0, 0, 0, .05); + border: 0; } + ul.tags { - list-style:none; - padding-left:0; - margin:0 0 3rem 0; + list-style: none; + padding-left: 0; + margin: 0 0 3rem 0; } + ul.tags li { - display:inline-block; - font-size:0.9rem; + display: inline-block; + font-size: 0.9rem; } + ul.tags li a { - background:rgba(0,0,0,.05); - color:rgba(0,0,0,.6); - border-radius:3px; - padding:5px 10px; + background: rgba(0, 0, 0, .05); + color: rgba(0, 0, 0, .6); + border-radius: 3px; + padding: 5px 10px; } + ul.tags li a:hover { - background:rgba(0,0,0,.07); - text-decoration:none; + background: rgba(0, 0, 0, .07); + text-decoration: none; } + .margtop3rem { margin-top: 3rem; } + .sep { - height:1px; - width:20px; - background:#999; - margin:0px auto; - margin-bottom:1.2rem; + height: 1px; + width: 20px; + background: #999; + margin: 0px auto; + margin-bottom: 1.2rem; } + .btn.follow { - border-color:#02B875; - color:#1C9963; - padding:3px 10px; - text-align:center; - border-radius:999em; - font-size:0.85rem; - display:inline-block; + border-color: #02B875; + color: #1C9963; + padding: 3px 10px; + text-align: center; + border-radius: 999em; + font-size: 0.85rem; + display: inline-block; } + .btn.subscribe { - background-color:#1C9963; - border-color:#1C9963; - color:rgba(255,255,255,1); - fill:rgba(255,255,255,1); - border-radius:30px; - font-size:0.85rem; - margin-left:10px; - font-weight:600; - text-transform:uppercase; + background-color: #1C9963; + border-color: #1C9963; + color: rgba(255, 255, 255, 1); + fill: rgba(255, 255, 255, 1); + border-radius: 30px; + font-size: 0.85rem; + margin-left: 10px; + font-weight: 600; + text-transform: uppercase; } + .post-top-meta .btn.follow { - margin-left:5px; - margin-top:-4px; + margin-left: 5px; + margin-top: -4px; } + .alertbar { - box-shadow:0 -3px 10px 0 rgba(0,0,0,.0785); - position:fixed; - bottom:0; - left:0; - background-color:#fff; - width:100%; - padding:14px 0; - z-index:1; + box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, .0785); + position: fixed; + bottom: 0; + left: 0; + background-color: #fff; + width: 100%; + padding: 14px 0; + z-index: 1; display: none; } + .alertbar form { - display: inline-block; + display: inline-block; } + .alertbar input[type="email"] { - font-size:0.85rem; - padding:3px 5px 3px 10px; - border-top-left-radius:3px; - border-bottom-left-radius:3px; - border:1px solid #ddd; - border-right:0; - margin-right:-10px; - height:34px; - letter-spacing:0.5px; - margin-left:5px; -} + font-size: 0.85rem; + padding: 3px 5px 3px 10px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + border: 1px solid #ddd; + border-right: 0; + margin-right: -10px; + height: 34px; + letter-spacing: 0.5px; + margin-left: 5px; +} + .alertbar input[type="submit"] { - background-color:#1C9963; - border:1px solid #1C9963; - color:rgba(255,255,255,1); - fill:rgba(255,255,255,1); - font-size:0.85rem; - border-radius:0; - padding:4px 10px; - border-top-right-radius:3px; - border-bottom-right-radius:3px; - font-weight:600; - height:34px; - letter-spacing:0.5px; + background-color: #1C9963; + border: 1px solid #1C9963; + color: rgba(255, 255, 255, 1); + fill: rgba(255, 255, 255, 1); + font-size: 0.85rem; + border-radius: 0; + padding: 4px 10px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + font-weight: 600; + height: 34px; + letter-spacing: 0.5px; cursor: pointer; } + .form-control::-webkit-input-placeholder { - color: rgba(0,0,0,.5); + color: rgba(0, 0, 0, .5); } + .form-control:-moz-placeholder { - color: rgba(0,0,0,.5); + color: rgba(0, 0, 0, .5); } + .form-control::-moz-placeholder { - color: rgba(0,0,0,.5); + color: rgba(0, 0, 0, .5); } + .form-control:-ms-input-placeholder { - color: rgba(0,0,0,.5); + color: rgba(0, 0, 0, .5); } + .form-control::-ms-input-placeholder { - color: rgba(0,0,0,.5); + color: rgba(0, 0, 0, .5); } + .authorpage h1 { - font-weight:700; - font-size:30px; + font-weight: 700; + font-size: 30px; } + .post-top-meta.authorpage .author-thumb { - float:none; + float: none; } + .authorpage .author-description { - font-size:1rem; - color:rgba(0,0,0,.6); + font-size: 1rem; + color: rgba(0, 0, 0, .6); } + .post-top-meta.authorpage .btn.follow { - padding:7px 20px; - margin-top:10px; - margin-left:0; - font-size:0.9rem; + padding: 7px 20px; + margin-top: 10px; + margin-left: 0; + font-size: 0.9rem; } + .graybg.authorpage { - border-top:1px solid #f0f0f0; + border-top: 1px solid #f0f0f0; } + .authorpostbox { - width:760px; - margin:0px auto; - margin-bottom:1.5rem; - max-width:100%; + width: 760px; + margin: 0px auto; + margin-bottom: 1.5rem; + max-width: 100%; } + .authorpostbox .img-thumb { - width:100%; + width: 100%; } + .sociallinks { - margin:1rem 0; + margin: 1rem 0; } + .sociallinks a { - background:#666; - color:#fff; - width:22px; - height:22px; - display:inline-block; - text-align:center; - line-height:22px; - border-radius:50%; - font-size:12px; + background: #666; + color: #fff; + width: 22px; + height: 22px; + display: inline-block; + text-align: center; + line-height: 22px; + border-radius: 50%; + font-size: 12px; } + #comments { margin-top: 3rem; margin-bottom: 1.5rem; } -.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { - font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -} -.article-post .h1, .article-post .h2, .article-post .h3, .article-post .h4, .article-post .h5, .article-post .h6, .article-post h1, .article-post h2, .article-post h3, .article-post h4, .article-post h5, .article-post h6 { + +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} + +.article-post .h1, +.article-post .h2, +.article-post .h3, +.article-post .h4, +.article-post .h5, +.article-post .h6, +.article-post h1, +.article-post h2, +.article-post h3, +.article-post h4, +.article-post h5, +.article-post h6 { font-weight: 700; margin-bottom: 1.5rem; } + .article-post img.shadow { -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.30); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.30); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.30); } + +.layout-page .article-post { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1rem; +} + +.layout-page .article-post p { + margin-bottom: 1rem; +} + img { - max-width:100%; + max-width: 100%; } + .bottompagination span.navigation { - display:block; - font-size:0.93rem; - padding:15px 0 0 0; - text-align:center; - margin-bottom:0rem; - color:#999; - border-top:1px solid #ddd; + display: block; + font-size: 0.93rem; + padding: 15px 0 0 0; + text-align: center; + margin-bottom: 0rem; + color: #999; + border-top: 1px solid #ddd; } + .pointerup { - margin-bottom:-17px; - margin-left:49%; - font-size:30px; + margin-bottom: -17px; + margin-left: 49%; + font-size: 30px; } + .pointerup i.fa { - color:#eaeaea; + color: #eaeaea; } + .bottompagination span.navigation i { - display:inline-block; + display: inline-block; } + span.navigation { display: inline-block; font-size: 0.93rem; font-weight: 700; - text-align:center; + text-align: center; } + .pagination { - display:block; + display: block; } + iframe { - max-width:100%; + max-width: 100%; } -.transpdark { - background: rgba(0,0,0,0.75); + +.transpdark { + background: rgba(0, 0, 0, 0.75); color: #fff; } + @media (min-width:768px) { .jumbotron.fortags { - margin-bottom:-50px; + margin-bottom: -50px; margin-top: 3rem; - padding:0; - height:350px; - border-radius:0; + padding: 0; + height: 350px; + border-radius: 0; background-image: url(../images/jumbotron.jpg); - background-size:cover; - } + background-size: cover; + } + .jumbotron.fortags .col-md-4 { - background:rgba(0,0,0,0.75); - color:#fff; - } + background: rgba(0, 0, 0, 0.75); + color: #fff; + } + .jumbotron.fortags .row { - margin:0; - } + margin: 0; + } } -.jumbotron.fortags { - margin-top: 3rem; - padding:0; - border-radius:0; - background-image: url(../images/jumbotron.jpg); - background-size:cover; + +.jumbotron.fortags { + margin-top: 3rem; + padding: 0; + border-radius: 0; + background-image: url(../images/jumbotron.jpg); + background-size: cover; } + .jumbotron.fortags a { padding: 5px 10px 7px; background: #222; @@ -617,38 +800,50 @@ iframe { font-weight: 500; text-transform: lowercase; font-size: 0.8rem; + display: inline-block; } + .layout-page .jumbotron.fortags { - display:none; + display: none; } + .mb-30px { - margin-bottom:30px; + margin-bottom: 30px; } + .flex-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } + @media (min-width: 768px) { .flex-md-unordered { -webkit-box-ordinal-group: 1; -webkit-order: 1; -ms-flex-order: 1; order: 1; - } + } + .flex-first { -webkit-box-ordinal-group: 0; -webkit-order: 1; -ms-flex-order: 1; order: 1; - } + } } + @media (max-width: 768px) { .share { - margin-top:30px; - } + margin-top: 30px; + } } + .card .img-fluid { - width:100%; + width: 100%; +} + +.sticky-top-80 { + top: 80px; } diff --git a/static/js/mediumish.js b/static/js/mediumish.js index 6c0ce7a..8449962 100644 --- a/static/js/mediumish.js +++ b/static/js/mediumish.js @@ -28,42 +28,35 @@ jQuery(document).ready(function($){ }); - // Smooth scroll to an anchor - $('a.smoothscroll[href*="#"]') - // Remove links that don't actually link to anything - .not('[href="#"]') - .not('[href="#0"]') - .click(function(event) { - // On-page links - if ( - location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') - && - location.hostname == this.hostname - ) { - // Figure out element to scroll to - var target = $(this.hash); - target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); - // Does a scroll target exist? - if (target.length) { - // Only prevent default if animation is actually gonna happen - event.preventDefault(); - $('html, body').animate({ - scrollTop: target.offset().top - }, 1000, function() { - // Callback after animation - // Must change focus! - var $target = $(target); - $target.focus(); - if ($target.is(":focus")) { // Checking if the target was focused - return false; - } else { - $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable - $target.focus(); // Set focus again - }; - }); - } - } - }); + // Smooth on external page + $(function() { + setTimeout(function() { + if (location.hash) { + /* we need to scroll to the top of the window first, because the browser will always jump to the anchor first before JavaScript is ready, thanks Stack Overflow: http://stackoverflow.com/a/3659116 */ + window.scrollTo(0, 0); + target = location.hash.split('#'); + smoothScrollTo($('#'+target[1])); + } + }, 1); + + // taken from: https://css-tricks.com/snippets/jquery/smooth-scrolling/ + $('a[href*=\\#]:not([href=\\#])').click(function() { + if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { + smoothScrollTo($(this.hash)); + return false; + } + }); + + function smoothScrollTo(target) { + target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); + + if (target.length) { + $('html,body').animate({ + scrollTop: target.offset().top + }, 1000); + } + } + }); // Hide Header on on scroll down @@ -85,7 +78,6 @@ jQuery(document).ready(function($){ function hasScrolled() { var st = $(this).scrollTop(); - var brandrow = $('.brandrow').css("height"); // Make sure they scroll more than delta if(Math.abs(lastScrollTop - st) <= delta) |