123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- /* fonts */
- @font-face {
- font-family: 'aller';
- src: url('https://d2xxklvztqk0jd.cloudfront.net/fonts/aller.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
- }
- @font-face {
- font-family: 'droidsans';
- src: url('https://d2xxklvztqk0jd.cloudfront.net/fonts/droidsans.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
- }
- @font-face {
- font-family: 'formatekonave';
- src: url('https://d2xxklvztqk0jd.cloudfront.net/fonts/formatekonave.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
- }
- /**
- * css reset
- * html5 display-role reset
- * and default styles
- */
- html, body, div, span, object, h1, h2, h3, h4, h5,
- h6, p, blockquote, pre, a, code, em, img, strong,
- dl, ol, ul, li, embed, footer, header, menu, nav,
- time, audio, video, progress {
- margin: 0;
- padding: 0;
- border: 0;
- font: inherit;
- vertical-align: baseline;
- }
- footer, header, menu, nav {
- display: block;
- }
- audio, canvas, progress, video {
- display: inline-block;
- vertical-align: baseline;
- }
- html {
- font-family: 'droidsans', helvetica;
- font-size: 22px;
- }
- body {
- line-height: 1.4;
- color: #333;
- background-color: #fff;
- }
- h1 {
- font-size: 1.75em;
- }
- h2 {
- font-size: 1.5em;
- }
- h3 {
- font-size: 1.25em;
- }
- h1, h2, h3, h4, h5, h6 {
- font-family: 'aller', sans-serif, georgia;
- margin-top: 20px;
- margin-bottom: 12px;
- letter-spacing: 2px;
- }
- h3, h4 {
- margin-top: 15px;
- margin-bottom: 10px;
- }
- h5, h6 {
- margin-top: 10px;
- }
- h1, h2 {
- font-weight: bolder;
- }
- h3, h4, strong, b {
- font-weight: bold;
- }
- em {
- font-style: italic;
- font-weight: 200;
- }
- blockquote {
- font-family: "aller", sans-serif, helvetica;
- quotes: none;
- padding: 10px 20px;
- margin: 0 0 20px;
- border-left: 5px solid #eee;
- font-style: italic;
- }
- hr {
- height: 0;
- margin: 20px 0;
- border: 0;
- border-top: 1px solid #eee;
- }
- pre {
- font-family: 'formatekonave', monospace;
- }
- code {
- padding: 2px 4px;
- font-size: 0.9em;
- padding: 0.05em 4px;
- border-radius: 4px;
- background: #000;
- overflow-x: auto;
- color: #f8f8f8;
- }
- pre code {
- display: block;
- margin: 10px 0;
- padding: 0.5em;
- }
- ul {
- list-style: disc;
- }
- ol {
- list-style: decimal;
- }
- li {
- margin-left: 45px;
- margin-bottom: 5px;
- line-height: 1.25;
- }
- ul, ol, dl, p {
- margin-bottom: 10px;
- }
- a, a:visited {
- color: #337ab7;
- }
- a:hover, a:active {
- background-color: transparent;
- text-decoration: underline;
- outline: 0;
- color: inherit;
- }
- a:hover, a:focus {
- text-decoration: underline;
- color: #23527c;
- }
- a:focus {
- outline: thin dotted;
- text-decoration: underline;
- outline-offset: -2px;
- }
- h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited,
- h4 a, h4 a:visited, strong a, strong a:visited {
- color: #444;
- text-decoration: underline;
- }
- img {
- display: block;
- border: none;
- max-width: 100%;
- height: auto;
- vertical-align: middle;
- }
- /* containers */
- header, .content, footer {
- max-width: 980px;
- margin: 20px auto;
- padding: 0 2%;
- }
- /* header & navigation */
- header>a {
- color: #000;
- text-decoration: none;
- }
- header h1 {
- margin-bottom: 15px;
- }
- nav li {
- font-size: 1.5em;
- line-height: 2;
- padding: 0 15px;
- list-style: none;
- }
- /* footer styles */
- footer {
- text-align: center;
- }
- footer .link {
- display: inline-block;
- width: 29px;
- height: 29px;
- margin: 0 15px;
- overflow: hidden;
- background-repeat: no-repeat;
- }
- footer .facebook {
- background-image: url('https://d2xxklvztqk0jd.cloudfront.net/images/facebook.png');
- }
- footer .linkedin {
- background-image: url('https://d2xxklvztqk0jd.cloudfront.net/images/linkedin.png');
- width: 34px;
- }
- footer .youtube {
- background-image: url('https://d2xxklvztqk0jd.cloudfront.net/images/youtube.png');
- width: 41px;
- }
- footer .github {
- background-image: url('https://d2xxklvztqk0jd.cloudfront.net/images/github.png');
- }
- footer .skype {
- background-image: url('https://d2xxklvztqk0jd.cloudfront.net/images/skype.png');
- }
- /* clearfix */
- .group:after {
- content: "";
- display: table;
- clear: both;
- }
- /* responsive font sizes and link styles */
- @media only screen and (min-width: 981px) {
- html {
- font-size: 19px;
- }
- }
- @media only screen and (min-width: 1200px) {
- html {
- font-size: 16px;
- }
- a, a:hover, a:active, a:visited, h1 a, h2 a, h3 a, h4 a, strong a {
- text-decoration: none;
- }
- header h1 {
- font-size: 3em;
- }
- nav li {
- display: inline;
- }
- }
- /* for print support */
- @media print {
- nav, footer {
- display: none;
- }
- p, ul, ol, li {
- orphans: 5;
- widows: 3;
- }
- ul, ol, blockquote, pre, code {
- page-break-inside: avoid;
- }
- h2, h3, h4 {
- page-break-after: avoid;
- }
- html {
- font-size: 1em;
- }
- body {
- background: white;
- }
- .content {
- background: transparent;
- }
- p a[href^="http"]:after, li a[href^="http"]:after {
- content: " (" attr(href) ")";
- }
- }
|