Fix footer for additional twitter list for bep spf13 and gohugoio

This commit is contained in:
Ryan Watters
2017-02-24 04:10:35 -06:00
parent 718ed72a3e
commit d93008b468
7 changed files with 118 additions and 71 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1,5 +1,5 @@
{{ define "main" }}
<main class="main" id="homepage">
<main id="homepage">
<div class="homepage-image">
<img src="{{"images/hugo-logo/hugo-h-only.png" | relURL}}" alt="Official full-size Hugo logo">
</div>
@@ -4,20 +4,21 @@
<span>By <a href="http://spf13.com" target="_blank">spf13</a> and friends.</span>
<img src="{{ "images/hugo-logo/made-with-hugo-dark.png" | relURL}}" alt="Made with Hugo Logo">
</div>
<div>
<div class="footer-lists">
<ul class="footer-list">
<li><a href="{{.Site.Params.ghrepo}}" target="_blank"><i class="icon-github"></i> Project Source</a></li>
<li><a href="{{.Site.Params.discuss}}" target="_blank"><i class="icon-forum"></i> Discuss Hugo</a></li>
<li><a href="{{.Site.Params.gitter}}" target="_blank"><i class="icon-gitter"></i> Gitter (Dev Chat Only)</a></li>
</ul>
</div>
<div>
<ul class="footer-list">
<li><a href="https://twitter.com/spf13" target="_blank"><i class="icon-twitter"></i> @spf13</a></li>
<li><a href="https://twitter.com/gohugoio" target="_blank"><i class="icon-twitter"></i> @GoHugoIO</a></li>
<li><a href="https://twitter.com/bepsays" target="_blank"><i class="icon-twitter"></i> @bepsays</a></li>
<li><a href="https://"></a></li>
</ul>
</div>
<div>
</div>
</div>
</footer>
@@ -38,18 +38,14 @@ main.main {
display: block;
margin-left: auto;
margin-right: auto;
// max-width: $content-max-width;
position: relative;
min-height:calc(100vh - #{$site-header-height * 2});
// overflow-x: hidden;
@include MQ(XL) {
width:90%;
margin-right:0px;
max-width: calc(100vw - #{$site-navigation-width * 2} - 20px );
float:left;
padding-left:1.5em;
// padding-left:2em;
// padding-right:2em;
width: 90%;
margin-right: 0px;
max-width: calc(100vw - #{$site-navigation-width * 2} - 20px);
float: left;
padding-left: 1.5em;
}
}
@@ -1,42 +1,108 @@
#site-footer {
background-color: $site-footer-bg-color;
min-height: $site-footer-height;
max-height: $site-footer-height;
display: flex;
flex-direction: column;
align-items: center;
height: auto;
padding-bottom: 1em;
// min-height: 500px;
.footer-content {
min-height: $site-footer-height;
max-height: $site-footer-height;
display: flex;
align-items: center;
justify-content: space-around;
width: 90%;
margin-left: auto;
margin-right: auto;
color: $hugo-white;
transition: transform .3s ease-in-out;
div {
display: flex;
flex-direction: column;
span {
text-align: center;
width: 100%;
display: block;
margin-top: 1em;
}
img {
max-width: 200px;
margin-left: auto;
margin-right: auto;
display: block;
}
.footer-lists {
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-around;
margin-right: 1em;
margin-top: 1em;
.footer-list {
max-width: 45%;
}
}
@include MQ(M) {
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 14px;
max-height: 100px;
margin: 0px;
img {
max-width: 120px;
div {
min-width: 50%;
width: 50%;
max-width: 50%;
}
}
&.navigation-open {
transition: transform .3s ease-in-out;
transform: translateX($site-navigation-width);
@include MQ(L) {
transform: translateX(0);
.footer-lists {
display: flex;
justify-content: center;
align-items: center;
.footer-list {
// margin-top: 1em;
max-width: auto;
margin-right: 2em;
@include MQ(L) {
min-width: 150px;
}
}
}
}
i.icon-heart:before {
color: $hugo-pink;
}
@include MQ(L) {
margin-left: 2em;
}
}
@include MQ(M) {
flex-direction: row;
}
// .footer-content {
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: space-around;
// width: 90%;
// color: $hugo-white;
// transition: transform .3s ease-in-out;
// @include MQ(M) {
// min-height: $site-footer-height;
// max-height: $site-footer-height;
// }
// div {
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// font-size: 14px;
// max-height: 100px;
// margin: 0px;
// img {
// max-width: 120px;
// }
// }
// div.footer-lists {
// display:flex;
// width:100vw;
// }
// &.navigation-open {
// transition: transform .3s ease-in-out;
// transform: translateX($site-navigation-width);
// @include MQ(L) {
// transform: translateX(0);
// }
// }
// i.icon-heart:before {
// color: $hugo-pink;
// }
// @include MQ(L) {
// margin-left: 2em;
// }
// }
@include MQ(L) {
width:calc(100% - #{$site-navigation-width});
margin-left: $site-navigation-width;
@@ -68,7 +68,7 @@
margin-left: .4em;
padding-left: .5em;
li {
line-height:1.1;
line-height:1.3;
}
a.submenu-item-link {
font-size: 14px;
@@ -7,33 +7,13 @@
}
}
main#homepage.main {
main#homepage {
width: 90%;
margin-bottom: 2.5em;
overflow-x: hidden;
@include MQ(M) {
max-width:calc(100vw - #{$site-navigation-width});
margin:{
left:auto;
right:auto;
}
@include MQ(L) {
// max-width:calc(100vw - #{$site-navigation-width});
max-width: 100vw;
margin-left: auto;
margin-right: auto;
}
@include MQ(XL) {
// max-width:calc(100vw - #{$site-navigation-width});
max-width: 100vw;
margin-left: auto;
margin-right: auto;
}
// @include MQ(M) {
// max-width: $M * .9;
// }
// @include MQ(L) {
// margin-left:auto;
// margin-right:auto;
// max-width: 860px * .9;
// }
}
.homepage-image {
@@ -57,6 +37,7 @@ main#homepage.main {
list-style: none;
padding-left: 0px;
margin-left: 0px;
max-width:$L;
.homepage-card {
@include card(1, 3);
color: inherit;
@@ -112,8 +93,11 @@ main#homepage.main {
color: lighten($base-font-color, 20%);
}
}
// @include MQ(L) {
// margin-left: auto;
// margin-right: auto;
// }
@include MQ(L) {
margin-left: auto;
margin-right: auto;
}
@include MQ(XL){
max-width:$M;
}
}