~bacardi55/MinIndie

bbd9e3478f40d1f77c914fb48ed48a1ebb37cb3a — bacardi55 a month ago 8b2620c main 
Add print css rules
patch browse .tar.gz 
5 files changed, 228 insertions(+), 49 deletions(-)

M layouts/_default/single.html
M layouts/partials/article-old-content.html
M layouts/partials/article-prevnext.html
M layouts/partials/article-related.html
M static/css/style.css

M layouts/_default/single.html => layouts/_default/single.html +1 -1
@@ 48,7 48,7 @@
            {{- partial "article-precontent.html" . -}}

            {{- if .Params.toc -}}
                <div class="toc">
                <div class="toc noprint">
                    <h2>Table of Content</h2>
                    <aside>
                        {{ .TableOfContents }}


M layouts/partials/article-old-content.html => layouts/partials/article-old-content.html +5 -2
@@ 1,3 1,6 @@
<div class="alert">
    <strong>/!\ Warning: This article is older than {{ . }} days, make sure the content is still relevant!</strong>
<div class="alert noprint">
  <strong
    >/!\ Warning: This article is older than {{ . }} days, make sure the content
    is still relevant!</strong
  >
</div>


M layouts/partials/article-prevnext.html => layouts/partials/article-prevnext.html +11 -7
@@ 1,13 1,17 @@
<div class="article-nextprev">
<div class="article-nextprev noprint">
  <div class="next-post">
      {{ if .NextInSection }}
          <a class="link-reverse" href="{{ .NextInSection.Permalink }}?ref=footer">« {{ .NextInSection.Title | truncate 30 "..." }}</a>
      {{ end }}
    {{ if .NextInSection }}
    <a class="link-reverse" href="{{ .NextInSection.Permalink }}?ref=footer"
      >« {{ .NextInSection.Title | truncate 30 "..." }}</a
    >
    {{ end }}
  </div>

  <div class="previous-post">
      {{ if .PrevInSection }}
          <a class="link-reverse" href="{{ .PrevInSection.Permalink }}?ref=footer">{{ .PrevInSection.Title | truncate 30 "..."}} »</a>
      {{ end }}
    {{ if .PrevInSection }}
    <a class="link-reverse" href="{{ .PrevInSection.Permalink }}?ref=footer"
      >{{ .PrevInSection.Title | truncate 30 "..."}} »</a
    >
    {{ end }}
  </div>
</div>


M layouts/partials/article-related.html => layouts/partials/article-related.html +9 -8
@@ 1,9 1,10 @@
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
    <h2>Releated Posts</h2>
    <ul>
        {{ range . }}
            <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
        {{ end }}
    </ul>
{{ $related := .Site.RegularPages.Related . | first 5 }} {{ with $related }}
<div class="noprint">
  <h2>Releated Posts</h2>
  <ul>
    {{ range . }}
    <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
    {{ end }}
  </ul>
</div>
{{ end }}


M static/css/style.css => static/css/style.css +202 -31
@@ 1,33 1,204 @@
html {overflow-y: scroll}
:root { --bgcolor: #f8f8f2; --fontcolor: #282a36; --linkcolor: #00e; --visitedcolor: #00e; --precolor: #fff; --prebgcolor: #000; --alertbgcolor: white; --hrcolor: #00e; --blockquotecolor: white; --pcodecolor: #000; --sitetitlecolor: #00e}
@media (prefers-color-scheme: dark) { :root { --bgcolor: #282a36; --fontcolor: #f8f8f2; --linkcolor: #FF79C6; --visitedcolor: #FF79C6; --precolor: #f8f8f2; --prebgcolor: #383838; --alertbgcolor: #44475a; --hrcolor: #f8f8f2; --blockquotecolor: #44475a; --pcodecolor: #6272a4; --sitetitlecolor: #f1fa8c; }}
body{max-width:800px;margin:40px auto;padding:0 10px;font:14px/1.5 monospace;color:var(--fontcolor); background: var(--bgcolor)}
a:link{color: var(--linkcolor); text-decoration:none;}a:visited{color: var(--visitedcolor)}a:active{color: var(--visitedcolor)}a:hover{text-decoration:underline;}
h1,h2,h3{line-height:1.2;color:#bd93f9;}h2{padding-top:15px}h3{padding-top:10px}
p{margin-top:1.5rem;}
p > code, li > code{color: var(--precolor); background: var(--pcodecolor); padding:2px}
code{color: var(--precolor); background: var(--prebgcolor); padding:2px}
pre{color: var(--precolor); background: var(--prebgcolor); padding:24px; overflow-x: auto}
article{padding:24px 0}
.center {display: block;margin-left: auto;margin-right: auto;width: 100%;}
figcaption {color: #888; font: 12px/1.5 monospace; text-align: center;}
figure {margin: auto}
img {display: block; max-width: 100%; height: auto; margin: auto}
.avatar {width:100px;height:100px;border-radius:50%;}
.alert{color: var(--fontcolor); background: var(--alertbgcolor); padding:24px; overflow-x: auto}
.article-nextprev{display:flex; flex-flow: row wrap-reverse; justify-content: space-between;}
hr{margin:35px 33% 15px; border-color: var(--hrcolor); border-width:3px;}
hr.small{margin:35px 44% 25px; border:1px dashed var(--hrcolor);}
blockquote{background: var(--blockquotecolor); margin: auto; padding: 5px 25px;}
ol,ul{padding-left: 1rem;}ul > li{list-style-type: disclosure-closed;}
.toc{border: 1px solid var(--hrcolor); margin:0.5rem; padding:0rem 2rem;}
h1.site-title{color: var(--sitetitlecolor); text-align:center;}
.bio-card .bio{display:flex;}
.bio-card .bio > img{margin-right:2rem;align-self:flex-start;}
.bio-card .bio > p{align-self:center;text-align:left;}
.bio-card .bio-name {margin-top:0;}
html {
  overflow-y: scroll;
}
:root {
  --bgcolor: #f8f8f2;
  --fontcolor: #282a36;
  --linkcolor: #00e;
  --visitedcolor: #00e;
  --precolor: #fff;
  --prebgcolor: #000;
  --alertbgcolor: white;
  --hrcolor: #00e;
  --blockquotecolor: white;
  --pcodecolor: #000;
  --sitetitlecolor: #00e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bgcolor: #282a36;
    --fontcolor: #f8f8f2;
    --linkcolor: #ff79c6;
    --visitedcolor: #ff79c6;
    --precolor: #f8f8f2;
    --prebgcolor: #383838;
    --alertbgcolor: #44475a;
    --hrcolor: #f8f8f2;
    --blockquotecolor: #44475a;
    --pcodecolor: #6272a4;
    --sitetitlecolor: #f1fa8c;
  }
}
body {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 10px;
  font: 14px/1.5 monospace;
  color: var(--fontcolor);
  background: var(--bgcolor);
}
a:link {
  color: var(--linkcolor);
  text-decoration: none;
}
a:visited {
  color: var(--visitedcolor);
}
a:active {
  color: var(--visitedcolor);
}
a:hover {
  text-decoration: underline;
}
h1,
h2,
h3 {
  line-height: 1.2;
  color: #bd93f9;
}
h2 {
  padding-top: 15px;
}
h3 {
  padding-top: 10px;
}
p {
  margin-top: 1.5rem;
}
p > code,
li > code {
  color: var(--precolor);
  background: var(--pcodecolor);
  padding: 2px;
}
code {
  color: var(--precolor);
  background: var(--prebgcolor);
  padding: 2px;
}
pre {
  color: var(--precolor);
  background: var(--prebgcolor);
  padding: 24px;
  overflow-x: auto;
}
article {
  padding: 24px 0;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
figcaption {
  color: #888;
  font: 12px/1.5 monospace;
  text-align: center;
}
figure {
  margin: auto;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.alert {
  color: var(--fontcolor);
  background: var(--alertbgcolor);
  padding: 24px;
  overflow-x: auto;
}
.article-nextprev {
  display: flex;
  flex-flow: row wrap-reverse;
  justify-content: space-between;
}
hr {
  margin: 35px 33% 15px;
  border-color: var(--hrcolor);
  border-width: 3px;
}
hr.small {
  margin: 35px 44% 25px;
  border: 1px dashed var(--hrcolor);
}
blockquote {
  background: var(--blockquotecolor);
  margin: auto;
  padding: 5px 25px;
}
ol,
ul {
  padding-left: 1rem;
}
ul > li {
  list-style-type: disclosure-closed;
}
.toc {
  border: 1px solid var(--hrcolor);
  margin: 0.5rem;
  padding: 0rem 2rem;
}
h1.site-title {
  color: var(--sitetitlecolor);
  text-align: center;
}
.bio-card .bio {
  display: flex;
}
.bio-card .bio > img {
  margin-right: 2rem;
  align-self: flex-start;
}
.bio-card .bio > p {
  align-self: center;
  text-align: left;
}
.bio-card .bio-name {
  margin-top: 0;
}
@media all and (max-width: 800px) {
  .bio-card .bio {justify-content: space-around;flex-direction: column;}
  .bio-card .bio > img {align-self:center;margin:auto;}
  .bio-card .bio > p {align-self:center;text-align:center;}
  .bio-card .bio {
    justify-content: space-around;
    flex-direction: column;
  }
  .bio-card .bio > img {
    align-self: center;
    margin: auto;
  }
  .bio-card .bio > p {
    align-self: center;
    text-align: center;
  }
}
@media print {
  a,
  a:visited {
    color: #000;
    text-decoration: none;
  }
  a::after{
    content: " (" attr(href) ") ";
  }
  blockquote,
  code {
    background: #fff;
    margin: 0;
    padding: 0 1.5em;
    border: none;
  }
  nav,
  footer,
  hr,
  .noprint {
    display: none !important;
  }
}