jenningscreate
6/5/2018 - 7:13 PM

Stack Theme Improvements

These code snippets change up the formatting and functionality of the Stack theme to what I would consider to be a better design. Copy/paste these designs into the CSS file at the beginning of a project.

/* --- Style Footer --- */

.list--hover li:not(:hover) {
  opacity:1;
}

footer li {
  font-size:0.9em;
}

footer li > a {
  display:block;
  font-size:inherit;
  opacity:0.7;
  transition:all ease 0.3s;
}

footer li > a:hover {
  opacity:1;
}

footer .row > div {
  margin-bottom:2.7em;
}

footer .row > div h6 {
  margin-bottom:1.5em;
}
/* --- Formatting --- */

body, section {
  font-size:16px;
}

section:not(.imagebg):not([class*='bg-']) + section.bg--secondary, section.bg--secondary:not(.imagebg) + section:not(.imagebg):not([class*='bg-']) {
  border-top: none;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  line-height:1.35em;
  margin-bottom:0.4em;
}

p, p.lead {
  font-size:1em;
  line-height:1.8em;
}

.btn:focus {
  box-shadow:none;
}
/* --- Style Accordions --- */
 
.accordion li {
  border-bottom: 1px solid #ECECEC;
  margin-bottom:10px;
}
 
.accordion li.active {
  border-color: #aaa;
  padding-bottom:15px;
  transition:border ease 0.3s;
}
 
.accordion li .accordion__title {
  position: relative;
  border: none!important;
  margin-bottom: 0;
  padding: 12px 30px 12px 0px;
}
 
.accordion li .accordion__title:before {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  content: '\e80a';
  transition:all ease 0.3s;
}
 
.accordion .accordion__title span {
  font-size:1em;
}

.accordion li.active .accordion__title {
  background:none;
  color:#333;
}

.accordion li.active .accordion__title span {
  color:inherit;
}

.accordion li.active .accordion__title:before {
  content: '\e80a';
  transform: translateY(-50%) rotate(-180deg);
  color:#333;
}
/* --- Style Header --- */

@media only screen and (min-width:768px) {
  .bar {
    padding: 0.8em 0 1em 0;
  }
  
  .bar .logo {
    max-height:60px;
  }
  
  /* Add class to navigation column */
  .nav-col {
    padding-top:0.7em;
  }
  
  .bar-1 .menu-horizontal > li > .dropdown__trigger, .bar-1 .menu-horizontal > li > a {
    font-size:1em;
  }
}