blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-09-01 03:02:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix odd behavior of content footer with flexbox

Browse Source
This commit is contained in:
Ryan Watters
2017-02-27 21:12:10 -06:00
parent be081676e6
commit 9c6096db76
8 changed files with 103 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/templates/rendering-lists.md
+1 -1
View File
@@ -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
static/css/style.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
themes/hugodocs/layouts/partials/content-footer.html
+12 -8
View File
@@ -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}}
themes/hugodocs/pipeline/scss/_variables.scss
+1 -1
View File
@@ -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;
themes/hugodocs/pipeline/scss/base/_typography.scss
+1 -1
View File
@@ -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;
themes/hugodocs/pipeline/scss/components/_code.scss
+19 -10
View File
@@ -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;
}
}
themes/hugodocs/pipeline/scss/components/_content-footer.scss
+64 -90
View File
@@ -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;
}
}
themes/hugodocs/pipeline/scss/components/_table-of-contents.scss
+4
View File
@@ -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;