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;
}
}