refactor: ToC styles
This commit includes a few adjustments to the layout of a post in order to accommodate an optional ToC. The layout adjustments have been done in such a way in order to mitigate as much visual differences between a post with a ToC and and post without ToC as possible.
This commit is contained in:
Jake Wiesler
parent
8e0ba00192
commit
970d27c330
|
|
@ -1,11 +1,25 @@
|
|||
@import '../main';
|
||||
@import '../partials/github-syntax-highlighting';
|
||||
@import '../partials/colors';
|
||||
@import "../main";
|
||||
@import "../partials/github-syntax-highlighting";
|
||||
@import "../partials/colors";
|
||||
|
||||
$tocBreakpoint: 1024px;
|
||||
|
||||
/* Aligns ToC content */
|
||||
.flex-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.post__container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.post {
|
||||
width: 100%;
|
||||
max-width: 34rem;
|
||||
margin: 0 auto;
|
||||
|
||||
h2, h3 {
|
||||
h2,
|
||||
h3 {
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
|
||||
|
|
@ -40,40 +54,9 @@
|
|||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width:800px) {
|
||||
font-weight: 400;
|
||||
max-width: 34rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 50rem;
|
||||
margin: 0 auto 0 auto;
|
||||
|
||||
@media screen and (max-width:800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.post__content {
|
||||
max-width: 40rem;
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.post__title {
|
||||
#post__title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -83,67 +66,32 @@
|
|||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.cp_embed_wrapper {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.codepen__caption {
|
||||
display: block;
|
||||
width: 75%;
|
||||
margin: 0.5rem auto 0;
|
||||
color: $grey;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.note {
|
||||
width: 90%;
|
||||
margin: 1rem auto 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
color: $grey;
|
||||
|
||||
code {
|
||||
font-size: 12px;
|
||||
color: $darkGrey;
|
||||
background-color: transparent;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '`';
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $darkGrey;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.post__footer {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
#TableOfContents {
|
||||
position: sticky;
|
||||
align-self: start;
|
||||
margin-left: 4rem;
|
||||
white-space: nowrap;
|
||||
top: 4rem;
|
||||
top: 3rem;
|
||||
max-width: 350px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #9b9b9b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
a.active {
|
||||
font-weight: 500;
|
||||
color: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
@media screen and (max-width:1000px) {
|
||||
@media screen and (max-width: $tocBreakpoint) {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
|
|
@ -189,20 +137,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
p.warning {
|
||||
background: #FFF9DF;
|
||||
padding: 1rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
color: #747160;
|
||||
border-left: 2px solid #747160;
|
||||
|
||||
a {
|
||||
color: #747160;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -261,7 +195,6 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/* overrides */
|
||||
.post__content {
|
||||
ul {
|
||||
|
|
@ -271,7 +204,7 @@ footer {
|
|||
margin-bottom: 0.5rem;
|
||||
|
||||
&::before {
|
||||
content: '-';
|
||||
content: "-";
|
||||
color: $darkGrey;
|
||||
position: absolute;
|
||||
margin-left: -15px;
|
||||
|
|
|
|||
|
|
@ -5,37 +5,35 @@
|
|||
{{ define "main" }}
|
||||
{{ $dateFormat := .Site.Params.dateFormat | default "Jan 2 2006" }}
|
||||
|
||||
<div class="post__container">
|
||||
<div class="post">
|
||||
<header class="post__header">
|
||||
<h1 id="post__title">{{.Title}}</h1>
|
||||
<time datetime="{{ .Date }}" class="post__date"
|
||||
>{{ .Date.Format $dateFormat }}</time>
|
||||
</header>
|
||||
<article class="post__content">
|
||||
{{ partial "anchored-headings.html" .Content }}
|
||||
{{ if or .Params.math .Site.Params.math }}
|
||||
{{ partial "math.html" . }}
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ partial "tags.html" .}} {{ partial "post-pagination.html" .}}
|
||||
<div class="flex-wrapper">
|
||||
<div class="post__container">
|
||||
<div class="post">
|
||||
<header class="post__header">
|
||||
<h1 id="post__title">{{.Title}}</h1>
|
||||
<time datetime="{{ .Date }}" class="post__date"
|
||||
>{{ .Date.Format $dateFormat }}</time>
|
||||
</header>
|
||||
<article class="post__content">
|
||||
{{ partial "anchored-headings.html" .Content }}
|
||||
{{ if or .Params.math .Site.Params.math }}
|
||||
{{ partial "math.html" . }}
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ partial "tags.html" .}} {{ partial "post-pagination.html" .}}
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
<footer class="post__footer">
|
||||
{{ partial "social-icons.html" .}}
|
||||
<p>{{ replace .Site.Copyright "{year}" now.Year }}</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
{{ if or .Params.toc .Site.Params.toc }}
|
||||
{{ .TableOfContents }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ define "footer" }}
|
||||
<footer>
|
||||
{{ partial "social-icons.html" .}}
|
||||
<p>{{ replace .Site.Copyright "{year}" now.Year }}</p>
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
||||
{{ define "scripts" }}
|
||||
{{ if or .Params.toc .Site.Params.toc }}
|
||||
<script src="/js/table-of-contents.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue