/*
* Components. This is mostly a cosmetic layer — this is where I included more specific styling instructions for objects. Without the components layer, the site would still have its structure, but would look like a gray-box wireframe. * See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.tbp9yocm3 for details. */
.small, .reading_time {
font-size: .75rem;
}
.bold {
font-weight: bold;
}
.normal_font_size {
font-size: $fontSize;
}
.hidden {
display: none;
}
.float_right {
float: right;
}
.container::before, .container::after {
content:""; display:table;
} .container::after {
clear:both;
} .container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
.form_row {
width: 100%; label { font-weight: bold; font-size: .9rem; } label, input, textarea { width: 100%; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } button { width: 120px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
}
.right_align_contents, .form_row_right_align {
text-align: right;
}
.center_contents {
text-align: center;
}
.post_list {
margin-bottom: 2.5rem;
}
article_footer {
margin-top: 1rem; border-top: 1px solid $material800; h2 { font-size: $fontSize; }
}
page_footer {
margin-top: 1.5rem; border-top: 2px solid $material500; text-align: center;
}
nojavascript {
padding: .2rem;
}