reformat footer

master
Aaron N. Brock 4 years ago
parent fa7b7f17c3
commit c1c51c7b44
  1. 14
      assets/scss/_common.scss
  2. 3
      assets/scss/_variables.scss
  3. 35
      assets/scss/components/_footer-section.scss
  4. 16
      assets/scss/components/_skill-section.scss
  5. 145
      exampleSite/config.toml
  6. 23
      layouts/partials/footer.html
  7. 4
      layouts/partials/skillSection.html

@ -1,12 +1,10 @@
// html{
// scroll-behavior: smooth;
// }
// body {
// background: $body-color;
// }
.section{
padding: 100px 0;
}
.unstyle-list {
list-style-type: none;
padding-left: 0;
margin-right: 0;
}

@ -23,6 +23,7 @@ $secondary-font: 'Poppins', sans-serif;
// Colors
$primary: #5D78FF;
$secondary: #7e7e8a;
//
// Typography
@ -52,7 +53,7 @@ $line-height-base: 1.75;
// Coloring
$headings-color: #282f49;
$body-color: #7e7e8a;
$body-color: $secondary;
// Misc
$link-hover-decoration: none;

@ -91,14 +91,6 @@
background: #fff;
}
}
// h1{
// font-size: 55px;
// margin: 0;
// line-height: 1;
// @include desktop{
// font-size: 40px;
// }
// }
}
&_action{
width: 40%;
@ -119,25 +111,16 @@
@include desktop{
text-align: center;
padding: 50px 0;
.footer__widget_address {
ul {
margin-right: 2.14285714em; // match fa-lu margin
}
}
}
&_sitemap{
// @include desktop{
// margin: 40px 0;
// }
// h3{
// margin: 0 0 40px 0;
// line-height: 1;
// font-size: 24px;
// @include desktop{
// margin: 0 0 20px 0;
// }
// }
}
&_address{
// ul{
// margin: 25px;
// }
}
// &_sitemap{
// }
// &_address{
// }
}
&__footer{
padding: 50px 0;

@ -71,32 +71,20 @@
transition: all 0.3s ease;
.progress {
width: 100%;
background: #e7eef2;
background: $light;
height: 10px;
border-radius: 5px;
.progress-bar {
border-radius: 5px;
position: relative;
animation: animate-positive 3000ms;
background: #5d78ff;
background: $primary;
}
}
}
&:not(:last-child) {
margin-bottom: 30px;
}
h6 {
display: inline-block;
font-family: $secondary-font;
font-weight: 400;
font-size: 16px;
}
.progress-value {
float: right;
font-family: $secondary-font;
font-size: 16px;
font-weight: 400;
}
}
}
}

@ -3,70 +3,89 @@ languageCode = "en-us"
paginate = 6
theme = "portio"
title = "Portio"
# Main Menu
[[menu.main]]
name = "Home"
url = "#home"
weight = 1
[[menu.main]]
name = "About"
url = "#about"
weight = 2
[[menu.main]]
name = "Service"
url = "#service"
weight = 3
[[menu.main]]
name = "Work"
url = "#portfolio"
weight = 4
[[menu.main]]
name = "Resume"
url = "#resume"
weight = 5
[[menu.main]]
name = "Blog"
url = "#blog"
weight = 6
[[menu.main]]
name = "Contact"
url = "#contact"
weight = 7
# Main Menu
[[menu.main]]
name = "Home"
url = "#home"
weight = 1
[[menu.main]]
name = "About"
url = "#about"
weight = 2
[[menu.main]]
name = "Service"
url = "#service"
weight = 3
[[menu.main]]
name = "Work"
url = "#portfolio"
weight = 4
[[menu.main]]
name = "Resume"
url = "#resume"
weight = 5
[[menu.main]]
name = "Blog"
url = "#blog"
weight = 6
[[menu.main]]
name = "Contact"
url = "#contact"
weight = 7
# Sitemap Menu
[[menu.sitemap]]
name = "About me"
url = "about"
weight = 1
[[menu.sitemap]]
name = "Frequently Ask Question"
url = "#"
weight = 2
[[menu.sitemap]]
name = "Privacy & Policy"
url = "#"
weight = 3
[[menu.sitemap]]
name = "Latest Article"
url = "#"
weight = 4
# Sitemap Menu
[[menu.sitemap]]
name = "About me"
url = "about"
weight = 1
[[menu.sitemap]]
name = "Frequently Ask Question"
url = "#"
weight = 2
[[menu.sitemap]]
name = "Privacy & Policy"
url = "#"
weight = 3
[[menu.sitemap]]
name = "Latest Article"
url = "#"
weight = 4
[params]
blogPageURL = "blog"
contactLink = "contact"
copyright = "All right reserved copyright © Portio 2020"
footerLogo = "images/contact/widget-logo.png"
formspreeURL = "YOUR FORMSPREE URL"
googleAnalytics = "YOUR GOOGLE ANALYTICS CODE"
logo = "images/site-navigation/logo.png"
blogPageURL = "blog"
contactLink = "contact"
copyright = "All right reserved copyright © Portio 2020"
footerLogo = "images/contact/widget-logo.png"
formspreeURL = "YOUR FORMSPREE URL"
googleAnalytics = "YOUR GOOGLE ANALYTICS CODE"
logo = "images/site-navigation/logo.png"
[params.address]
address = "23 Khan Niketon, Grand Street, NYK."
email = "hello@example.com"
openingHours = "Open from 10am to 6pm (close at 5pm Sundays)"
phone = "+(448) 833 5272 332"
[params.map]
APIkey = "YOUR GOOGLE MAP API"
latitude = "23.7783741"
longitude = "90.3746808"
pinImage = "images/pin.png"
[params.address]
address = "23 Khan Niketon, Grand Street, NYK."
email = "hello@example.com"
openingHours = "Open from 10am to 6pm (close at 5pm Sundays)"
phone = "+(448) 833 5272 332"
[params.map]
APIkey = "YOUR GOOGLE MAP API"
latitude = "23.7783741"
longitude = "90.3746808"
pinImage = "images/pin.png"
# Socail icons
[[params.social]]
icon = "fa-facebook-official"
url = "https://www.facebook.com/"
weight = 1
[[params.social]]
icon = "fa-linkedin-square"
url = "https://www.linkedin.com/"
weight = 2
[[params.social]]
icon = "fa-pinterest-square"
url = "https://www.pinterest.com/"
weight = 3
[[params.social]]
icon = "fa-twitter-square"
url = "https://twitter.com/"
weight = 4

@ -35,26 +35,26 @@
</div>
<div class="row footer__widget">
<div class="col-lg-4">
<div class="footer__widget_logo">
<div class="footer__widget_logo mb-5">
<img src="{{ .Site.Params.footerLogo | absURL }}" alt="widget-logo">
</div>
</div>
<div class="col-lg-4">
<div class="text-light footer__widget_sitemap">
<div class="text-light footer__widget_sitemap mb-5">
<h4 class="base-font">Sitemap</h4>
<ul class="fa-ul small ml-0 mt-4 mr-4 mb-4">
<ul class="unstyle-list small">
{{ $sitemap := .Site.Menus.sitemap }}
{{ range $sitemap }}
<li class="mb-2 ml-0"><a class="text-light" href="{{ .URL | absURL }}">{{ .Name }}</a></li>
<li class="mb-2"><a class="text-light" href="{{ .URL | absURL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="text-light footer__widget_address">
<div class="text-light footer__widget_address mb-5">
<h4 class="base-font">Address</h4>
{{ $address := .Site.Params.address }}
<ul class="fa-ul small m-4">
<ul class="fa-ul small">
<li class="mb-2"><a class="text-light" href="tel:{{ $address.phone }}"><span class="fa-li"><i
class="fa fa-phone"></i></span>{{ $address.phone }}</a></li>
<li class="mb-2"><a class="text-light" href="mailto:{{ $address.email }}"><span class="fa-li"><i
@ -74,11 +74,12 @@
</div>
<div class="col-lg-6">
<div class="footer__footer_social">
<ul>
<li><a href=""><i class="fa fa-facebook-official"></i></a></li>
<li><a href=""><i class="fa fa-linkedin-square"></i></a></li>
<li><a href=""><i class="fa fa-pinterest-square"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<ul class="unstyle-list">
{{ $social := .Site.Params.social }}
{{ range $social }}
<li><a target="_blank" href="{{ .url }}"><i class="fa {{ .icon }}"></i></a>
</li>
{{ end }}
</ul>
</div>
</div>

@ -44,8 +44,8 @@
{{ $section := .skill }}
{{ range $section }}
<div class="skill__progress_item">
<h6> {{ .title }} </h6>
<div class="progress-value"><span>{{ .percent }}</span>%</div>
<span class="d-inline-block text-dark"> {{ .title }} </span>
<div class="progress-value float-right"><span>{{ .percent }}</span>%</div>
<div class="progress">
<div class="progress-bar" style="width:{{ .percent }}%;" aria-valuemin="0"
aria-valuemax="{{ .percent }}"></div>

Loading…
Cancel
Save