/**
* Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
margin: 0; padding: 0;
}
/**
* Basic styling */
body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; color: $text; background-color: $bg; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column;
}
/**
* Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, %vertical-rhythm {
margin-bottom: $spacing-unit / 2;
}
/**
* `main` element */
main {
display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
}
/**
* Images */
img {
display: block; max-width: 80%; height: auto; margin-left: auto; margin-right: auto; margin-top: $spacing-unit; margin-bottom: $spacing-unit; border-radius: 8px; box-shadow: $shadow-body; opacity: 0.75; &:hover { opacity: 1; }
}
/**
* Embed */
iframe {
max-width: 100%; margin-top: $spacing-unit; margin-bottom: $spacing-unit; margin-left: auto; margin-right: auto; border: 0px; opacity: 0.75; &:hover { opacity: 1; }
}
/**
* Figures */
figure > img { }
figcaption {
@include relative-font-size(0.7); margin-top: - $spacing-unit * 0.8; text-align: center; color: $text-muted;
}
/**
* Lists */
ul, ol {
margin-left: $spacing-unit;
}
li {
> ul, > ol { margin-bottom: 0; }
}
/**
* Headings */
h1, h2, h3, h4, h5, h6 {
font-weight: $base-font-weight; color: $text-light
}
hr {
margin-top: $spacing-unit / 2; margin-bottom: $spacing-unit / 2; height: 2px; border-width: 0px; color: $stroke; background-color: $stroke;
}
/**
* Links */
a {
color: $link; text-decoration: none; &:visited { color: $link-muted; text-decoration: none; } &:hover { color: $link-hover; text-decoration: underline; } }
/**
* Blockquotes */
blockquote {
color: $text-dark; margin-left: $spacing-unit / 2; border-left: 6px solid $stroke; padding: $spacing-unit / 2; @include relative-font-size(1.25); font-style: italic; > :last-child { margin-bottom: 0; }
}
/**
* Code formatting */
pre, code {
@include relative-font-size(0.9375); background-color: $code;
}
code {
padding: 1px 5px;
}
pre {
padding: 8px 12px; overflow-x: auto; box-shadow: $shadow-body; border-radius: 8px; > code { border: 0; padding-right: 0; padding-left: 0; }
}
/**
* Wrapper */
.wrapper {
max-width: -webkit-calc(#{$content-width}); max-width: calc(#{$content-width}); margin-right: auto; margin-left: auto; padding-right: $spacing-unit; padding-left: $spacing-unit; @extend %clearfix; @include media-query($on-palm) { max-width: -webkit-calc(#{$content-width}); max-width: calc(#{$content-width}); padding-right: $spacing-unit / 2; padding-left: $spacing-unit / 2; }
}
/**
* Clearfix */
%clearfix:after {
content: ""; display: table; clear: both;
}
/**
* Icons */
.svg-icon {
width: 16px; height: 16px; display: inline-block; fill: #{$box-fill}; padding-right: 5px; vertical-align: text-top;
}
.social-media-list {
li + li { padding-top: 5px; }
}
/**
* Tables */
table {
margin-bottom: $spacing-unit; width: 100%; text-align: $table-text-align; color: $text; border-collapse: collapse; box-shadow: $shadow-body; overflow-x: auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; tr { &:last-child { border-bottom: 0px solid $stroke; } } th, td { padding: ($spacing-unit / 3) ($spacing-unit / 2); border-collapse: collapse; border-right: 1px solid $stroke; &:last-child { border-right: 0px solid $stroke; } } th { background-color: $box-fill; &:first-child { border-radius: 8px 0px 0px 0px; } &:nth-child(even) { border-radius: 0px 0px 0px 0px; } &:nth-child(odd) { border-radius: 8px 0px 0px 0px; } &:last-child { border-radius: 0px 8px 0px 0px; } } tr { &:not(:last-child){ border-bottom:1px solid $stroke; } }
}
/* *
-
Responsive homepage
* */
-
{ box-sizing: border-box;
}
.row::after {
content: ""; clear: both; display: table;
}
- class*=“col-”
-
{
float: left; padding: 15px;
}
.menu ul {
list-style-type: none; margin: 0; padding: 0;
}
.menu li {
padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
/* For mobile phones: */ /[class=“col-”] {
width: 100%;
} */
@media only screen and (max-width: 600px) {
/* For tablets: */ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 600px) and (max-width: 767px){
/* For tablets: */ .col-m-1 {width: 8.33%;} .col-m-2 {width: 16.66%;} .col-m-3 {width: 25%;} .col-m-4 {width: 33.33%;} .col-m-5 {width: 41.66%;} .col-m-6 {width: 50%;} .col-m-7 {width: 58.33%;} .col-m-8 {width: 66.66%;} .col-m-9 {width: 75%;} .col-m-10 {width: 83.33%;} .col-m-11 {width: 91.66%;} .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}
}