mirror of
https://github.com/tiennm99/hugoDocs.git
synced 2026-10-13 18:15:45 +00:00
Fix odd behavior of content footer with flexbox
This commit is contained in:
Ryan Watters committed
1 parent
be081676e6
commit
9c6096db76
8 files changed
+103
-112
No files matched your search
@@ -71,7 +71,7 @@ In the case of Hugo, each list will render the content based on metadata provide
|
||||
Here are a variety of different ways you can order the content items in
|
||||
your list templates:
|
||||
|
||||
### Default Ordering: `Weight > Date`
|
||||
### Default Ordering: Weight > Date
|
||||
|
||||
{{% code file="layouts/_default/list.html" %}}
|
||||
```html
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;border-radius:0px !important;outline:none}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0px;padding:0px;outline:none;border:none;font-size:18px;font-family:"muli","Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;color:#222;line-height:1.6;font-weight:300;overflow-x:hidden}body{font-size:93%;overflow-x:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media only screen and (min-width: 760px){body{font-size:97%}}@media only screen and (min-width: 960px){body{font-size:100%}}strong{font-weight:600;color:#222}p{margin-top:0px;margin-bottom:1.5em;line-height:1.6}@font-face{font-family:'fontello';src:url("/fonts/fontello/fontello.eot");src:url("/fonts/fontello/fontello.woff2") format("woff2"),url("/fonts/fontello/fontello.woff") format("woff"),url("/fonts/fontello/fontello.ttf") format("truetype"),url("/fonts/fontello/fontello.svg?78165468#fontello") format("svg");font-weight:normal;font-style:normal}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-alert:before{content:'\e810'}.icon-angle-double-right:before{content:'\f101'}.icon-attach:before{content:'\e820'}.icon-attention:before{content:'\e80f'}.icon-bash:before{content:'\e804'}.icon-bell:before{content:'\e80d'}.icon-cancel:before{content:'\e81e'}.icon-caution:before{content:'\e80f'}.icon-chrome:before{content:'\e841'}.icon-clipboard:before{content:'\e817'}.icon-code:before{content:'\f121'}.icon-cog-alt:before{content:'\e814'}.icon-css3:before{content:'\f13c'}.icon-docs:before{content:'\f15c'}.icon-download:before{content:'\e815'}.icon-facebook-official:before{content:'\f230'}.icon-firefox:before{content:'\e840'}.icon-flag:before{content:'\e813'}.icon-forum:before{content:'\f03d';margin-right:.3em}.icon-github:before{content:'\f09b'}.icon-gitter:before{content:'\e819'}.icon-go:before{content:'\e801'}.icon-golang:before{content:'\e801'}.icon-heart:before{content:'\e81d'}.icon-help:before{content:'\e81b'}.icon-home:before{content:'\e812'}.icon-html.input:before{content:'\e81f'}.icon-html5:before{content:'\e800'}.icon-html:before{content:'\e800'}.icon-hugo:before{content:'\e81f'}.icon-ie:before{content:'\e843'}.icon-info:before{content:'\e811'}.icon-instagram:before{content:'\f32d'}.icon-javascript:before{content:'\e802'}.icon-js:before{content:'\e802'}.icon-json:before{content:'\e81c'}.icon-link:before{content:'\e816'}.icon-linkedin:before{content:'\f30c'}.icon-love:before{content:'\e81d'}.icon-mail:before{content:'\e821'}.icon-markdown:before{content:'\e80e'}.icon-md:before{content:'\e80e'}.icon-note:before{content:'\e80d'}.icon-opera:before{content:'\e842'}.icon-pdf:before{content:'\f1c1'}.icon-pencil:before{content:'\e80c'}.icon-picture:before{content:'\e808'}.icon-quLine truncated
|
||||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;border-radius:0px !important;outline:none}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0px;padding:0px;outline:none;border:none;font-size:18px;font-family:"muli","Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;color:#222;line-height:1.6;font-weight:300;overflow-x:hidden}body{font-size:93%;overflow-x:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media only screen and (min-width: 760px){body{font-size:97%}}@media only screen and (min-width: 960px){body{font-size:100%}}strong{font-weight:600;color:#222}p{margin-top:0px;margin-bottom:1.5em;line-height:1.6}@font-face{font-family:'fontello';src:url("/fonts/fontello/fontello.eot");src:url("/fonts/fontello/fontello.woff2") format("woff2"),url("/fonts/fontello/fontello.woff") format("woff"),url("/fonts/fontello/fontello.ttf") format("truetype"),url("/fonts/fontello/fontello.svg?78165468#fontello") format("svg");font-weight:normal;font-style:normal}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-alert:before{content:'\e810'}.icon-angle-double-right:before{content:'\f101'}.icon-attach:before{content:'\e820'}.icon-attention:before{content:'\e80f'}.icon-bash:before{content:'\e804'}.icon-bell:before{content:'\e80d'}.icon-cancel:before{content:'\e81e'}.icon-caution:before{content:'\e80f'}.icon-chrome:before{content:'\e841'}.icon-clipboard:before{content:'\e817'}.icon-code:before{content:'\f121'}.icon-cog-alt:before{content:'\e814'}.icon-css3:before{content:'\f13c'}.icon-docs:before{content:'\f15c'}.icon-download:before{content:'\e815'}.icon-facebook-official:before{content:'\f230'}.icon-firefox:before{content:'\e840'}.icon-flag:before{content:'\e813'}.icon-forum:before{content:'\f03d';margin-right:.3em}.icon-github:before{content:'\f09b'}.icon-gitter:before{content:'\e819'}.icon-go:before{content:'\e801'}.icon-golang:before{content:'\e801'}.icon-heart:before{content:'\e81d'}.icon-help:before{content:'\e81b'}.icon-home:before{content:'\e812'}.icon-html.input:before{content:'\e81f'}.icon-html5:before{content:'\e800'}.icon-html:before{content:'\e800'}.icon-hugo:before{content:'\e81f'}.icon-ie:before{content:'\e843'}.icon-info:before{content:'\e811'}.icon-instagram:before{content:'\f32d'}.icon-javascript:before{content:'\e802'}.icon-js:before{content:'\e802'}.icon-json:before{content:'\e81c'}.icon-link:before{content:'\e816'}.icon-linkedin:before{content:'\f30c'}.icon-love:before{content:'\e81d'}.icon-mail:before{content:'\e821'}.icon-markdown:before{content:'\e80e'}.icon-md:before{content:'\e80e'}.icon-note:before{content:'\e80d'}.icon-opera:before{content:'\e842'}.icon-pdf:before{content:'\f1c1'}.icon-pencil:before{content:'\e80c'}.icon-picture:before{content:'\e808'}.icon-quLine truncated
|
||||
@@ -1,9 +1,9 @@
|
||||
<span class="last-modified">Last Updated: {{with .Lastmod}}{{.Format "2006-01-02"}}{{else}}{{.PublishDate.Format "2006-01-02"}}{{end}}</span>
|
||||
<div class="last-modified">Last Updated: {{with .Lastmod}}{{.Format "2006-01-02"}}{{else}}{{.PublishDate.Format "2006-01-02"}}{{end}}</div>
|
||||
<footer id="content-footer">
|
||||
{{$section := .Section}}
|
||||
{{ if .NextInSection }}
|
||||
<a href="{{.NextInSection.Permalink}}" class="prev-and-next-link prev-page">
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
<a href="{{.NextInSection.Permalink}}" class="cf-link prev-page">
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
<div class="page-info">
|
||||
<span>Previous</span>
|
||||
<h5 class="{{$section}}">{{if eq .Section "functions"}}{{- replace (.NextInSection.LinkTitle) "and" "<em>and</em>" | safeHTML -}}{{else}}{{.NextInSection.Title | markdownify}}{{end}}</h5>
|
||||
@@ -11,8 +11,10 @@
|
||||
</a>
|
||||
{{ else if eq .Kind "page" }}
|
||||
{{ with .Site.GetPage "section" $section }}
|
||||
<a href="{{.Permalink}}" class="prev-and-next-link prev-page">
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
<a href="{{.Permalink}}" class="cf-link prev-page">
|
||||
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
|
||||
<div class="page-info">
|
||||
<span>Previous</span>
|
||||
<h5 class="{{$section}}">{{if eq .Section "functions"}}{{- replace (.LinkTitle) "and" "<em>and</em>" | safeHTML -}}{{else}}{{.Title | markdownify}}{{end}}</h5>
|
||||
@@ -21,7 +23,7 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ with .PrevInSection }}
|
||||
<a href="{{.Permalink}}" class="prev-and-next-link next-page">
|
||||
<a href="{{.Permalink}}" class="cf-link next-page">
|
||||
<div class="page-info">
|
||||
<span>Next</span>
|
||||
<h5 class="{{$section}}">{{if eq .Section "functions"}}{{- replace (.LinkTitle) "and" "<em>and</em>" | safeHTML -}}{{else}}{{.Title | markdownify}}{{end}}</h5>
|
||||
@@ -31,12 +33,14 @@
|
||||
{{ end }}
|
||||
{{if eq .Kind "section"}}
|
||||
{{ range first 1 .Data.Pages }}
|
||||
<a href="{{.Permalink}}" class="prev-and-next-link next-page">
|
||||
<a href="{{.Permalink}}" class="cf-link next-page">
|
||||
<div class="page-info">
|
||||
<span>Next</span>
|
||||
<h5 class="{{.Section}}">{{.Title}}</h5>
|
||||
</div>
|
||||
<i class="fa fa-chevron-right"></i>
|
||||
|
||||
<i class="fa fa-chevron-right"></i>
|
||||
|
||||
</a>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -48,7 +48,7 @@ $code-font-family:'robotomono',courier,monospace;
|
||||
$base-font-weight: 300;
|
||||
$base-font-bold-weight: 600;
|
||||
$heading-font-weight: 600;
|
||||
$code-font-base-weight: $base-font-weight;
|
||||
$code-font-base-weight: 400;
|
||||
$code-font-bold-weight: 500;
|
||||
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ h6 {
|
||||
font-family: $heading-font-family;
|
||||
font-weight: $heading-font-weight;
|
||||
margin: 0px;
|
||||
line-height: 1.4;
|
||||
line-height: 1.2;
|
||||
position: relative;
|
||||
> code, > a {
|
||||
font-weight: $heading-font-weight;
|
||||
|
||||
@@ -3,8 +3,8 @@ code,
|
||||
pre {
|
||||
font-family: $code-font-family;
|
||||
margin: 0px;
|
||||
font-weight:$code-font-base-weight;
|
||||
color:inherit;
|
||||
font-weight: $code-font-base-weight;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.body-copy > pre {
|
||||
@@ -97,9 +97,9 @@ div.code-copy {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.code-copy-content {
|
||||
padding-top:.5em;
|
||||
padding-top: .5em;
|
||||
&.output-content {
|
||||
padding-bottom:.5em;
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -114,14 +114,14 @@ button.download-button {
|
||||
box-shadow: none;
|
||||
padding: 0px;
|
||||
transition: all .2s ease-in-out;
|
||||
opacity: 1;
|
||||
background-color: $code-copy-button-color;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
z-index: 4;
|
||||
min-width: 90px;
|
||||
width: auto;
|
||||
// min-width: 90px;
|
||||
// width: auto;
|
||||
@include size(30px);
|
||||
padding: {
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
@@ -132,7 +132,6 @@ button.download-button {
|
||||
font-weight: $code-font-bold-weight;
|
||||
color: $code-copy-button-text-color;
|
||||
font-size: 14px;
|
||||
width: 80px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
@@ -148,10 +147,20 @@ button.download-button {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
|
||||
// .button.copy-button {
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
code {
|
||||
font-weight: $code-font-bold-weight;
|
||||
font-size:.95em;
|
||||
font-size: .95em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,105 +1,79 @@
|
||||
.last-modified {
|
||||
color: $hugo-gray;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
clear: both;
|
||||
min-width: 200px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
font-size: .8em;
|
||||
position: relative;
|
||||
bottom: -1.75em;
|
||||
border-bottom: 2px solid $hugo-gray;
|
||||
}
|
||||
|
||||
#content-footer {
|
||||
min-height: 100px;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-top: 2px solid $hugo-gray-light;
|
||||
width: 100%;
|
||||
margin-bottom: 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 60px;
|
||||
justify-content:space-between;
|
||||
margin-bottom:2em;
|
||||
}
|
||||
|
||||
.prev-and-next-link {
|
||||
display: inline-block;
|
||||
margin-top: 2em;
|
||||
min-width: 45%;
|
||||
max-width: 45%;
|
||||
min-height: 70px;
|
||||
position: relative;
|
||||
@include MQ(M) {
|
||||
transition: background-color .3s ease-in-out;
|
||||
&:hover {
|
||||
transition: background-color .3s ease-in-out;
|
||||
background-color: $hugo-pink;
|
||||
color: $hugo-white;
|
||||
.page-info {
|
||||
color:$hugo-white;
|
||||
h5 {
|
||||
color:$hugo-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
min-height: 100%;
|
||||
}
|
||||
.page-info {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
line-height: 1.2;
|
||||
margin-top: .5em;
|
||||
color:$hugo-pink;
|
||||
}
|
||||
span {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
margin-top: .5em;
|
||||
}
|
||||
}
|
||||
i.fa.fa-chevron-right,
|
||||
i.fa.fa-chevron-left {
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
@include MQ(M) {
|
||||
font-size: 30px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
i.fa.fa-chevron-left {
|
||||
left: 0px;
|
||||
}
|
||||
i.fa.fa-chevron-right {
|
||||
right: 0px;
|
||||
}
|
||||
&.prev-page {
|
||||
text-align: left;
|
||||
float: left;
|
||||
.page-info {
|
||||
padding-left: 1.75em;
|
||||
}
|
||||
}
|
||||
&.next-page {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
right: 0px;
|
||||
float: right;
|
||||
.page-info {
|
||||
padding-right: 1.75em;
|
||||
}
|
||||
}
|
||||
.cf-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color:$base-font-color;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border: 0px solid transparent;
|
||||
background-color: $hugo-pink;
|
||||
color:$hugo-white;
|
||||
h5 {
|
||||
color:$hugo-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
min-height: 60px;
|
||||
width: 24px;
|
||||
i {
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
.next-page {
|
||||
justify-content:flex-end;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
margin:0px .5em 0px .5em;
|
||||
}
|
||||
|
||||
// .prev-page {
|
||||
// float: left;
|
||||
// > .page-info {
|
||||
// padding-left: 20px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .next-page {
|
||||
// float: right;
|
||||
// text-align: right;
|
||||
// > .page-info {
|
||||
// padding-right: 20px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.page-info {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
span {
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
@@ -57,9 +57,13 @@ nav#TableOfContents {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
height: auto;
|
||||
li code {
|
||||
font-family:$base-font-family;
|
||||
}
|
||||
li.active > a > code {
|
||||
color: inherit;
|
||||
font-weight: 700;
|
||||
font-family:$base-font-family;
|
||||
}
|
||||
> ul:first-child {
|
||||
padding-left: 0px;
|
||||
|
||||
Reference in new issue
Block a user