|
|
| (48 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | <html> | | <html> |
| − | <head>
| + | <style> |
| − | <meta charset="utf-8" />
| + | |
| − | <meta http-equiv="X-UA-Compatible" content="IE=edge" />
| + | |
| − | | + | |
| − | <title>Team</title>
| + | |
| − | <meta name="description" content="" />
| + | |
| − | | + | |
| − | <meta name="HandheldFriendly" content="True" />
| + | |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
| + | |
| − | | + | |
| − | <link rel="shortcut icon" href="/favicon.ico">
| + | |
| − | | + | |
| − | <link rel="stylesheet" type="text/css" href="/assets/css/screen.css?v=057f65d5ce" />
| + | |
| − | <link href="//fonts.googleapis.com/css?family=Lato|Raleway&subset=latin-ext" rel="stylesheet">
| + | |
| − | | + | |
| − | <meta name="referrer" content="no-referrer-when-downgrade" />
| + | |
| − | | + | |
| − | <meta property="og:site_name" content="Wiki 2016" />
| + | |
| − | <meta property="og:type" content="article" />
| + | |
| − | <meta property="og:title" content="Team" />
| + | |
| − | <meta property="og:description" content="The Team iGEM Stockholm 2016 team consists of 14 members from diverse backgrounds and different schools; from biotechnology to medicine, to design, currently or previously studying at Karolinska Institutet, KTH Royal Institute of Technology and Konstfack, the University College of Arts, Crafts and Design. Team members Ellinor Lindholm Project leader" />
| + | |
| − | <meta property="article:published_time" content="2016-08-02T09:28:51.000Z" />
| + | |
| − | <meta property="article:modified_time" content="2016-10-08T11:18:51.000Z" />
| + | |
| − | <meta name="twitter:card" content="summary" />
| + | |
| − | <meta name="twitter:title" content="Team" />
| + | |
| − | <meta name="twitter:description" content="The Team iGEM Stockholm 2016 team consists of 14 members from diverse backgrounds and different schools; from biotechnology to medicine, to design, currently or previously studying at Karolinska Institutet, KTH Royal Institute of Technology and Konstfack, the University College of Arts, Crafts and Design. Team members Ellinor Lindholm Project leader" />
| + | |
| − | <meta name="twitter:label1" content="Written by" />
| + | |
| − | <meta name="twitter:data1" content="Leo Fidjeland" />
| + | |
| − | <style> | + | |
| | /********************************* DEFAULT WIKI SETTINGS ********************************/ | | /********************************* DEFAULT WIKI SETTINGS ********************************/ |
| | | | |
| − | #globalWrapper { | + | #bodyContent a[href ^="https://"], .link-https { |
| − | font-size: inherit !important;
| + | padding-right: 0; |
| | } | | } |
| | | | |
| − | #HQ_page p { | + | @font-face { |
| − | font-size: inherit; | + | font-family: 'Raleway'; |
| − | font-family: inherit; | + | font-weight: 400; |
| − | text-align: inherit; | + | font-style: normal; |
| | + | src: local('Raleway'), |
| | + | local('Raleway-regular'), |
| | + | url('https://static.igem.org/mediawiki/2016/c/c9/T--Stockholm--Raleway-regular.woff') format('woff'), |
| | + | url('https://static.igem.org/mediawiki/2016/7/72/T--Stockholm--Raleway-regular.ttf') format('truetype'), |
| | + | url('https://static.igem.org/mediawiki/2016/6/6a/T--Stockholm--Raleway-regular.svg#Raleway') format('svg'); |
| | } | | } |
| | | | |
| − | #sideMenu, #top_title {display:none;} | + | @font-face { |
| − | #content { height: 100%;
| + | font-family: 'Lato'; |
| − | max-height: 100%;
| + | font-weight: 400; |
| − | font-family: "Lato", serif; | + | font-style: normal; |
| − | letter-spacing: 0.01rem; | + | src: local('Lato Regular'), |
| − | font-size: 1.8rem; | + | local('Lato-regular'), |
| − | line-height: 1.75em; | + | url('https://static.igem.org/mediawiki/2016/0/06/T--Stockholm--Lato-regular.woff') format('woff'), |
| − | color: #3A4145;
| + | url('https://static.igem.org/mediawiki/2016/0/05/T--Stockholm--Lato-regular.ttf') format('truetype'), |
| − | -webkit-font-feature-settings: 'kern' 1;
| + | url('https://static.igem.org/mediawiki/2016/d/d7/T--Stockholm--Lato-regular.svg#Raleway') format('svg'); |
| − | -moz-font-feature-settings: 'kern' 1;
| + | |
| − | -o-font-feature-settings: 'kern' 1;
| + | |
| − | text-rendering: geometricPrecision;
| + | |
| − | width: 100%;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| | } | | } |
| − | body {background-color:white; }
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
| | | | |
| − | /* ========================================================================== | + | .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { |
| − | Table of Contents
| + | margin: 0 0 31.5px 0; |
| − | ========================================================================== */ | + | padding: 0 0 0 30px; |
| | + | } |
| | | | |
| − | /* | + | #top_menu_inside { |
| | + | line-height: normal; |
| | + | } |
| | | | |
| − | 0. Normalize | + | #top_menu_inside a:hover { |
| − | 1. Icons
| + | text-decoration: underline !important; |
| − | 2. General
| + | |
| − | 3. Utilities
| + | |
| − | 4. General
| + | |
| − | 5. Single Post
| + | |
| − | 6. Tag Archive
| + | |
| − | 7. Read Next
| + | |
| − | 8. Third Party Elements
| + | |
| − | 9. Pagination
| + | |
| − | 10. Footer
| + | |
| − | 11. Media Queries (Tablet)
| + | |
| − | 12. Media Queries (Mobile)
| + | |
| − | 13. Animations
| + | |
| − | | + | |
| − | */
| + | |
| − | | + | |
| − | /* ==========================================================================
| + | |
| − | 0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified)
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | article, aside, details,
| + | |
| − | figcaption, figure,
| + | |
| − | footer, header, hgroup,
| + | |
| − | main, nav, section,
| + | |
| − | summary { display: block; }
| + | |
| − | audio, canvas, video { display: inline-block; }
| + | |
| − | audio:not([controls]) { display: none; height: 0; }
| + | |
| − | [hidden], template { display: none; }
| + | |
| − | html {
| + | |
| − | font-family: sans-serif;
| + | |
| − | -ms-text-size-adjust: 100%;
| + | |
| − | -webkit-text-size-adjust: 100%;
| + | |
| | } | | } |
| − | body { margin: 0; }
| |
| − | a { background: transparent; }
| |
| − | a:focus { outline: thin dotted; }
| |
| − | a:active, a:hover { outline: 0; }
| |
| − | h1 { font-size: 2em; margin: 0.67em 0; }
| |
| − | abbr[title] { border-bottom: 1px dotted; }
| |
| − | b, strong { font-weight: 700; }
| |
| − | dfn { font-style: italic; }
| |
| − | hr {
| |
| − | -moz-box-sizing: content-box;
| |
| − | box-sizing: content-box;
| |
| − | height: 0;
| |
| − | }
| |
| − | mark { background: #FF0; color: #000; }
| |
| − | code, kbd, pre,
| |
| − | samp { font-family: monospace, serif; font-size: 1em; }
| |
| − | pre { white-space: pre-wrap; }
| |
| − | q { quotes: "\201C" "\201D" "\2018" "\2019"; }
| |
| − | small { font-size: 80%; }
| |
| − | sub, sup {
| |
| − | font-size: 75%;
| |
| − | line-height: 0;
| |
| − | position: relative;
| |
| − | vertical-align: baseline;
| |
| − | }
| |
| − | sup { top: -0.5em; }
| |
| − | sub { bottom: -0.25em; }
| |
| − | img { border: 0; }
| |
| − | svg:not(:root) { overflow: hidden; }
| |
| − | figure { margin: 0; }
| |
| − | fieldset {
| |
| − | border: 1px solid #c0c0c0;
| |
| − | margin: 0 2px;
| |
| − | padding: 0.35em 0.625em 0.75em;
| |
| − | }
| |
| − | legend { border: 0; padding: 0; }
| |
| − | button, input, select,
| |
| − | textarea { font-family: inherit; font-size: 100%; margin: 0; }
| |
| − | button, input { line-height: normal; }
| |
| − | button, select { text-transform: none; }
| |
| − | button, html input[type="button"],
| |
| − | input[type="reset"], input[type="submit"] {
| |
| − | -webkit-appearance: button;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | button[disabled], html input[disabled] { cursor: default; }
| |
| − | input[type="checkbox"],
| |
| − | input[type="radio"] { box-sizing: border-box; padding: 0; }
| |
| − | input[type="search"] {
| |
| − | -webkit-appearance: textfield;
| |
| − | -moz-box-sizing: content-box;
| |
| − | -webkit-box-sizing: content-box;
| |
| − | box-sizing: content-box;
| |
| − | }
| |
| − | input[type="search"]::-webkit-search-cancel-button,
| |
| − | input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
| |
| − | button::-moz-focus-inner,
| |
| − | input::-moz-focus-inner { border: 0; padding: 0; }
| |
| − | textarea { overflow: auto; vertical-align: top; }
| |
| − | table { border-collapse: collapse; border-spacing: 0; }
| |
| | | | |
| − | | + | #top_menu_inside a:hover { |
| − | /* ========================================================================== | + | text-decoration: underline !important; |
| − | 1. Icons - Sets up the icon font and respective classes
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | /* Import the font file with the icons in it */
| + | |
| − | @font-face {
| + | |
| − | font-family: "casper-icons";
| + | |
| − | src:url("https://static.igem.org/mediawiki/2016/0/0e/T--Stockholm--casper-icons.eot?v=1");
| + | |
| − | src:url("https://static.igem.org/mediawiki/2016/0/0e/T--Stockholm--casper-icons.eot?v=1#iefix") format("embedded-opentype"),
| + | |
| − | url("https://static.igem.org/mediawiki/2016/d/db/T--Stockholm--casper-icons.woff?v=1") format("woff"),
| + | |
| − | url("https://static.igem.org/mediawiki/2016/a/ad/T--Stockholm--casper-icons.ttf?v=1") format("truetype"),
| + | |
| − | url("https://static.igem.org/mediawiki/2016/5/54/T--Stockholm--casper-icons-svg.svg?v=1#icons") format("svg");
| + | |
| − | font-weight: normal;
| + | |
| − | font-style: normal;
| + | |
| | } | | } |
| | | | |
| − | /* Apply these base styles to all icons */ | + | #top_menu_inside .has_submenu .intro a:hover { |
| − | [class^="icon-"]:before, [class*=" icon-"]:before {
| + | color: orange !important; |
| − | font-family: "casper-icons", "Raleway", sans-serif; | + | |
| − | speak: none;
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: normal;
| + | |
| − | font-variant: normal;
| + | |
| − | text-transform: none;
| + | |
| − | line-height: 1;
| + | |
| − | text-decoration: none !important;
| + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| | } | | } |
| | | | |
| − | /* Each icon is created by inserting the correct character into the | + | #globalWrapper { |
| − | content of the :before pseudo element. Like a boss. */
| + | font-size: inherit !important; |
| − | .icon-ghost:before {
| + | |
| − | content: "\f600"; | + | |
| | } | | } |
| − | .icon-feed:before {
| |
| − | content: "\f601";
| |
| − | }
| |
| − | .icon-twitter:before {
| |
| − | content: "\f602";
| |
| − | font-size: 1.1em;
| |
| − | }
| |
| − | .icon-google-plus:before {
| |
| − | content: "\f603";
| |
| − | }
| |
| − | .icon-facebook:before {
| |
| − | content: "\f604";
| |
| − | }
| |
| − | .icon-arrow-left:before {
| |
| − | content: "\f605";
| |
| − | }
| |
| − | .icon-stats:before {
| |
| − | content: "\f606";
| |
| − | }
| |
| − | .icon-location:before {
| |
| − | content: "\f607";
| |
| − | margin-left: -3px; /* Tracking fix */
| |
| − | }
| |
| − | .icon-link:before {
| |
| − | content: "\f608";
| |
| − | }
| |
| − | .icon-menu:before {
| |
| − | content: "\f609";
| |
| − | }
| |
| − | /*
| |
| − | IMPORTANT: When making any changes to the icon font, be sure to increment
| |
| − | the version number by 1 in the @font-face rule. `?v=1` becomes `?v=2`
| |
| − | This forces browsers to download the new font file.
| |
| − | */
| |
| | | | |
| − | | + | #HQ_page p { |
| − | /* ==========================================================================
| + | font-size: inherit; |
| − | 2. General - Setting up some base styles
| + | font-family: inherit; |
| − | ========================================================================== */
| + | text-align: inherit; |
| − | | + | |
| − | html { | + | |
| − | height: 100%; | + | |
| − | max-height: 100%;
| + | |
| − | font-size: 62.5%; | + | |
| − | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | + | |
| | } | | } |
| | | | |
| − | body { | + | #sideMenu, #top_title {display:none;} |
| − | height: 100%;
| + | #content { height: 100%; |
| | max-height: 100%; | | max-height: 100%; |
| | font-family: "Lato", serif; | | font-family: "Lato", serif; |
| Line 256: |
Line 72: |
| | -o-font-feature-settings: 'kern' 1; | | -o-font-feature-settings: 'kern' 1; |
| | text-rendering: geometricPrecision; | | text-rendering: geometricPrecision; |
| − | }
| |
| − |
| |
| − | ::-moz-selection {
| |
| − | background: #D6EDFF;
| |
| − | }
| |
| − |
| |
| − | ::selection {
| |
| − | background: #D6EDFF;
| |
| − | }
| |
| − |
| |
| − | h1, h2, h3,
| |
| − | h4, h5, h6 {
| |
| − | -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
| |
| − | -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
| |
| − | -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
| |
| − | color: #2E2E2E;
| |
| − | line-height: 1.15em;
| |
| − | margin: 0 0 0.4em 0;
| |
| − | font-family: "Raleway", sans-serif !important;
| |
| − | text-rendering: geometricPrecision;
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | font-size: 5rem;
| |
| − | letter-spacing: -2px;
| |
| − | text-indent: -3px;
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | font-size: 3.6rem;
| |
| − | letter-spacing: -1px;
| |
| − | }
| |
| − |
| |
| − | h3 {
| |
| − | font-size: 3rem;
| |
| − | }
| |
| − |
| |
| − | h4 {
| |
| − | font-size: 2.5rem;
| |
| − | }
| |
| − |
| |
| − | h5 {
| |
| − | font-size: 2rem;
| |
| − | }
| |
| − |
| |
| − | h6 {
| |
| − | font-size: 2rem;
| |
| − | }
| |
| − |
| |
| − | a {
| |
| − | color: #4A4A4A;
| |
| − | transition: color 0.3s ease;
| |
| − | }
| |
| − |
| |
| − | a:hover {
| |
| − | color: #111;
| |
| − | }
| |
| − |
| |
| − | a.ref {
| |
| − | vertical-align: super;
| |
| − | font-size: smaller;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | a.ref:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | p, ul, ol, dl {
| |
| − | -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
| |
| − | -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
| |
| − | -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
| |
| − | margin: 0 0 1.75em 0;
| |
| − | text-rendering: geometricPrecision;
| |
| − | }
| |
| − |
| |
| − | ol, ul {
| |
| − | padding-left: 3rem;
| |
| − | }
| |
| − |
| |
| − | ol ol, ul ul,
| |
| − | ul ol, ol ul {
| |
| − | margin: 0 0 0.4em 0;
| |
| − | padding-left: 2em;
| |
| − | }
| |
| − |
| |
| − | dl dt {
| |
| − | float: left;
| |
| − | width: 180px;
| |
| − | overflow: hidden;
| |
| − | clear: left;
| |
| − | text-align: right;
| |
| − | text-overflow: ellipsis;
| |
| − | white-space: nowrap;
| |
| − | font-weight: 700;
| |
| − | margin-bottom: 1em;
| |
| − | }
| |
| − |
| |
| − | dl dd {
| |
| − | margin-left: 200px;
| |
| − | margin-bottom: 1em
| |
| − | }
| |
| − |
| |
| − | li {
| |
| − | margin: 0.4em 0;
| |
| − | }
| |
| − |
| |
| − | li li {
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | hr {
| |
| − | display: block;
| |
| − | height: 1px;
| |
| − | border: 0;
| |
| − | border-top: #EFEFEF 1px solid;
| |
| − | margin: 3.2em 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | blockquote {
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | margin: 1.75em 0 1.75em -2.2em;
| |
| − | padding: 0 0 0 1.75em;
| |
| − | border-left: #4A4A4A 0.4em solid;
| |
| − | }
| |
| − |
| |
| − | blockquote p {
| |
| − | margin: 0.8em 0;
| |
| − | font-style: italic;
| |
| − | }
| |
| − |
| |
| − | blockquote small {
| |
| − | display: inline-block;
| |
| − | margin: 0.8em 0 0.8em 1.5em;
| |
| − | font-size: 0.9em;
| |
| − | color: #CCC;
| |
| − | }
| |
| − |
| |
| − | blockquote small:before { content: "\2014 \00A0"; }
| |
| − |
| |
| − | blockquote cite {
| |
| − | font-weight: 700;
| |
| − | }
| |
| − |
| |
| − | blockquote cite a { font-weight: normal; }
| |
| − |
| |
| − | mark {
| |
| − | background-color: #fdffb6;
| |
| − | }
| |
| − |
| |
| − | code, tt {
| |
| − | padding: 1px 3px;
| |
| − | font-family: Inconsolata, monospace, sans-serif;
| |
| − | font-size: 0.85em;
| |
| − | white-space: pre-wrap;
| |
| − | border: #E3EDF3 1px solid;
| |
| − | background: #F7FAFB;
| |
| − | border-radius: 2px;
| |
| − | }
| |
| − |
| |
| − | pre {
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | margin: 0 0 1.75em 0;
| |
| − | border: #E3EDF3 1px solid;
| |
| | width: 100%; | | width: 100%; |
| − | padding: 10px;
| |
| − | font-family: Inconsolata, monospace, sans-serif;
| |
| − | font-size: 0.9em;
| |
| − | white-space: pre;
| |
| − | overflow: auto;
| |
| − | background: #F7FAFB;
| |
| − | border-radius: 3px;
| |
| − | }
| |
| − |
| |
| − | pre code, pre tt {
| |
| − | font-size: inherit;
| |
| − | white-space: pre-wrap;
| |
| − | background: transparent;
| |
| − | border: none;
| |
| | padding: 0; | | padding: 0; |
| − | }
| |
| − |
| |
| − | kbd {
| |
| − | display: inline-block;
| |
| − | margin-bottom: 0.4em;
| |
| − | padding: 1px 8px;
| |
| − | border: #CCC 1px solid;
| |
| − | color: #666;
| |
| − | text-shadow: #FFF 0 1px 0;
| |
| − | font-size: 0.9em;
| |
| − | font-weight: 700;
| |
| − | background: #F4F4F4;
| |
| − | border-radius: 4px;
| |
| − | box-shadow:
| |
| − | 0 1px 0 rgba(0, 0, 0, 0.2),
| |
| − | 0 1px 0 0 #fff inset;
| |
| − | }
| |
| − |
| |
| − | table {
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | margin: 1.75em 0;
| |
| − | width: 100%;
| |
| − | max-width: 100%;
| |
| − | background-color: transparent;
| |
| − | }
| |
| − |
| |
| − | table th,
| |
| − | table td {
| |
| − | padding: 8px;
| |
| − | line-height: 20px;
| |
| − | text-align: left;
| |
| − | vertical-align: top;
| |
| − | border-top: #EFEFEF 1px solid;
| |
| − | }
| |
| − |
| |
| − | table th { color: #000; }
| |
| − |
| |
| − | table caption + thead tr:first-child th,
| |
| − | table caption + thead tr:first-child td,
| |
| − | table colgroup + thead tr:first-child th,
| |
| − | table colgroup + thead tr:first-child td,
| |
| − | table thead:first-child tr:first-child th,
| |
| − | table thead:first-child tr:first-child td {
| |
| − | border-top: 0;
| |
| − | }
| |
| − |
| |
| − | table tbody + tbody { border-top: #EFEFEF 2px solid; }
| |
| − |
| |
| − | table table table { background-color: #FFF; }
| |
| − |
| |
| − | table tbody > tr:nth-child(odd) > td,
| |
| − | table tbody > tr:nth-child(odd) > th {
| |
| − | background-color: #F6F6F6;
| |
| − | }
| |
| − |
| |
| − | table.plain tbody > tr:nth-child(odd) > td,
| |
| − | table.plain tbody > tr:nth-child(odd) > th {
| |
| − | background: transparent;
| |
| − | }
| |
| − |
| |
| − | iframe, .fluid-width-video-wrapper {
| |
| − | display: block;
| |
| − | margin: 1.75em 0;
| |
| − | }
| |
| − |
| |
| − | /* When a video is inside the fitvids wrapper, drop the
| |
| − | margin on the iframe, cause it breaks stuff. */
| |
| − | .fluid-width-video-wrapper iframe {
| |
| | margin: 0; | | margin: 0; |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 3. Utilities - These things get used a lot
| |
| − | ========================================================================== */
| |
| − |
| |
| − | /* Clears shit */
| |
| − | .clearfix:before,
| |
| − | .clearfix:after {
| |
| − | content: " ";
| |
| − | display: table;
| |
| − | }
| |
| − | .clearfix:after { clear: both; }
| |
| − | .clearfix { zoom: 1; }
| |
| − |
| |
| − | /* Hides shit */
| |
| − | .hidden {
| |
| − | text-indent: -9999px;
| |
| − | visibility: hidden;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Creates a responsive wrapper that makes our content scale nicely */
| |
| − | .inner {
| |
| − | position: relative;
| |
| − | width: 80%;
| |
| − | max-width: 710px;
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − |
| |
| − | /* Centres vertically yo. (IE8+) */
| |
| − | .vertical {
| |
| − | display: table-cell;
| |
| − | vertical-align: middle;
| |
| − | }
| |
| − |
| |
| − | /* Wraps the main content & footer */
| |
| − | .site-wrapper {
| |
| − | position: relative;
| |
| − | z-index: 10;
| |
| − | min-height: 100%;
| |
| − | background: #fff;
| |
| − | -webkit-transition: -webkit-transform 0.5s ease;
| |
| − | transition: transform 0.5s ease;
| |
| − | }
| |
| − |
| |
| − | /*body.nav-opened .site-wrapper {
| |
| − | overflow-x: hidden;
| |
| − | -webkit-transform: translate3D(-240px, 0, 0);
| |
| − | -ms-transform: translate3D(-240px, 0, 0);
| |
| − | transform: translate3D(-240px, 0, 0);
| |
| − | -webkit-transition: -webkit-transform 0.3s ease;
| |
| − | transition: transform 0.3s ease;
| |
| − | }*/
| |
| − |
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 4. General - The main styles for the the theme
| |
| − | ========================================================================== */
| |
| − |
| |
| − | /* Big cover image on the home page */
| |
| − | .main-header {
| |
| − | position: relative;
| |
| − | display: table;
| |
| − | width: 100%;
| |
| − | height: 100vh;
| |
| − | margin-bottom: 5rem;
| |
| − | text-align: center;
| |
| − | background: #222 no-repeat center center;
| |
| − | background-size: cover;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .logo {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | z-index: 200;
| |
| − | }
| |
| − |
| |
| − | .hamburger {
| |
| − | position: fixed;
| |
| − | right: 63px;
| |
| − | top: 101px;
| |
| − | font-size: 30px;
| |
| − | text-decoration: none;
| |
| − | z-index: 90;
| |
| − | }
| |
| − |
| |
| − | .hamburger-hover {
| |
| − | position: fixed;
| |
| − | right: 38px;
| |
| − | top: 82px;
| |
| − | width: 80px;
| |
| − | height: 80px;
| |
| − | z-index: 91;
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | #navigator-opener {
| |
| − | position: fixed; /* stick the nav */
| |
| − | width: 100%; /* make the nav full width of the screen */
| |
| − | top: 0; /* keep nav stuck at the very top of the screen */
| |
| − | height: 100px;
| |
| − | z-index: 99;
| |
| − | }
| |
| − |
| |
| − | .navigation:hover,
| |
| − | #navigator-opener:hover + .navigation,
| |
| − | .hamburger-hover:hover + div + div + div,
| |
| − | .logo:hover + div + div {
| |
| − | display: flex;
| |
| − | display: -webkit-flex;
| |
| − | }
| |
| − |
| |
| − | .nav-opened .navigation {
| |
| − | display: flex;
| |
| − | display: -webkit-flex;
| |
| − | }
| |
| − |
| |
| − | .references p {
| |
| − | font-size: smaller;
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| − |
| |
| − | figcaption {
| |
| − | text-align: center;
| |
| − | margin-bottom: 10px;
| |
| − | font-size: smaller;
| |
| − | }
| |
| − |
| |
| − | .navigation {
| |
| − | display: none;
| |
| − | position: fixed; /* stick the nav */
| |
| − | width: 100%; /* make the nav full width of the screen */
| |
| − | top: 0; /* keep nav stuck at the very top of the screen */
| |
| − | height: 230px;
| |
| − | z-index: 100; /* move nav to the front of the content */
| |
| − | text-align: right; /* styling */
| |
| − | background-color: white; /* styling */
| |
| − | justify-content: center;
| |
| − | border-bottom: 1px solid lightgrey;
| |
| − | }
| |
| − |
| |
| − | .navigation div {
| |
| − | display: flex;
| |
| − | }
| |
| − |
| |
| − | .navigation div.nav-sublevel{
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | top: 38px;
| |
| − | left: -14px;
| |
| − | padding: 7px 30px 55px 30px; /* Area is bigger than text so that menu doesn't close */
| |
| − | }
| |
| − |
| |
| − | .nav-content{
| |
| − | display: flex;
| |
| − | width: 1300px;
| |
| − | justify-content: flex-start;
| |
| − | margin-left: 250px;
| |
| − | }
| |
| − |
| |
| − | .nav-items{
| |
| − | display: flex;
| |
| − | flex-direction: row;
| |
| − | align-items: center;
| |
| − | }
| |
| − |
| |
| − | .nav-items > div {
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − | .site-wrapper {
| |
| − | margin-top: 50px; /* This is here to keep content from going behind the menu on page load */
| |
| − | }
| |
| − |
| |
| − | .navigation div a {
| |
| − | color: #b5b5b5; /* styling */
| |
| − | text-decoration: none;
| |
| − | padding: 7px 25px 0 25px;
| |
| − | font-family: Raleway;
| |
| − | white-space: nowrap;
| |
| − | }
| |
| − |
| |
| − | .navigation div.nav-sublevel a {
| |
| − | padding: 3px 10px;
| |
| − | white-space: nowrap;
| |
| − | font-size: smaller;
| |
| − | font-style: italic;
| |
| − | }
| |
| − |
| |
| − | .navigation div a:hover {
| |
| − | color: black; /* styling */
| |
| − | }
| |
| − |
| |
| − | .navigation div a:hover + div,
| |
| − | .navigation div.nav-sublevel:hover{
| |
| − | display: flex;
| |
| − | }
| |
| − |
| |
| − | .main-header .inner {
| |
| − | width: 80%;
| |
| − | }
| |
| − |
| |
| − | .main-nav {
| |
| − | position: relative;
| |
| − | padding: 35px 40px;
| |
| − | margin: 0 0 30px 0;
| |
| − | }
| |
| − |
| |
| − | .main-nav a {
| |
| − | text-decoration: none;
| |
| − | font-family: 'Raleway', sans-serif;
| |
| − | }
| |
| − |
| |
| − | /* Navigation */
| |
| − | /*body.nav-opened .nav-cover {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | right: 240px;
| |
| − | bottom: 0;
| |
| − | z-index: 200;
| |
| − | }*/
| |
| − |
| |
| − | .nav {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | z-index: 5;
| |
| − | width: 240px;
| |
| − | opacity: 0;
| |
| − | background: #111;
| |
| − | margin-bottom: 0;
| |
| − | text-align: left;
| |
| − | overflow-y: auto;
| |
| − | -webkit-transition: -webkit-transform 0.5s ease,
| |
| − | opacity 0.3s ease 0.7s;
| |
| − | transition: transform 0.5s ease,
| |
| − | opacity 0.3s ease 0.7s;
| |
| − | }
| |
| − |
| |
| − | body.nav-closed .nav {
| |
| − | -webkit-transform: translate3D(97px, 0, 0);
| |
| − | -ms-transform: translate3D(97px, 0, 0);
| |
| − | transform: translate3D(97px, 0, 0);
| |
| − | }
| |
| − |
| |
| − | /*body.nav-opened .nav {
| |
| − | opacity: 1;
| |
| − | -webkit-transition: -webkit-transform 0.3s ease,
| |
| − | opacity 0s ease 0s;
| |
| − | transition: transform 0.3s ease,
| |
| − | opacity 0s ease 0s;
| |
| − | -webkit-transform: translate3D(0, 0, 0);
| |
| − | -ms-transform: translate3D(0, 0, 0);
| |
| − | transform: translate3D(0, 0, 0);
| |
| − | }*/
| |
| − |
| |
| − | .nav-title {
| |
| − | position: absolute;
| |
| − | top: 45px;
| |
| − | left: 30px;
| |
| − | font-size: 16px;
| |
| − | font-weight: 100;
| |
| − | text-transform: uppercase;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .nav-close {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | top: 20px;
| |
| − | right: 0;
| |
| − | width: 32px;
| |
| − | height: 32px;
| |
| − | padding: 30px;
| |
| − | font-size: 10px;
| |
| − | z-index: 200;
| |
| − | }
| |
| − |
| |
| − | .nav-close-cross {
| |
| − | position: absolute;
| |
| − | top: 30px;
| |
| − | left: 33px;
| |
| − | }
| |
| − |
| |
| − | .nav-opened .nav-close {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .nav-close:focus {
| |
| − | outline: 0;
| |
| − | }
| |
| − |
| |
| − | .nav-close-cross:before,
| |
| − | .nav-close-cross:after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | width: 25px;
| |
| − | height: 1px;
| |
| − | background: rgb(150,150,150);
| |
| − | top: 15px;
| |
| − | -webkit-transition: background 0.15s ease;
| |
| − | transition: background 0.15s ease;
| |
| − | }
| |
| − |
| |
| − | .nav-close-cross:before {
| |
| − | -webkit-transform: rotate(45deg);
| |
| − | -ms-transform: rotate(45deg);
| |
| − | transform: rotate(45deg);
| |
| − | }
| |
| − |
| |
| − | .nav-close-cross:after {
| |
| − | -webkit-transform: rotate(-45deg);
| |
| − | -ms-transform: rotate(-45deg);
| |
| − | transform: rotate(-45deg);
| |
| − | }
| |
| − |
| |
| − | .nav-close-cross:hover:before,
| |
| − | .nav-close-cross:hover:after {
| |
| − | background: rgb(0,0,0);
| |
| − | }
| |
| − |
| |
| − | .nav ul {
| |
| − | padding: 90px 9% 5%;
| |
| − | list-style: none;
| |
| − | counter-reset: item;
| |
| − | }
| |
| − |
| |
| − | .nav li:before {
| |
| − | display: block;
| |
| − | float: right;
| |
| − | padding-right: 4%;
| |
| − | padding-left: 5px;
| |
| − | text-align: right;
| |
| − | font-size: 1.2rem;
| |
| − | vertical-align: bottom;
| |
| − | color: #B8B8B8;
| |
| − | content: counter(item, lower-roman);
| |
| − | counter-increment: item;
| |
| − | }
| |
| − | .nav li {
| |
| − | margin: 0;
| |
| − | }
| |
| − | .nav li a {
| |
| − | text-decoration: none;
| |
| − | line-height: 1.4;
| |
| − | font-size: 1.4rem;
| |
| − | display: block;
| |
| − | padding: 0.6rem 4%;
| |
| − | overflow: hidden;
| |
| − | white-space: nowrap;
| |
| − | text-overflow: ellipsis;
| |
| − | }
| |
| − | .nav li a:after {
| |
| − | display: inline-block;
| |
| − | content: " .......................................................";
| |
| − | color: rgba(255,255,255,0.2);
| |
| − | margin-left: 5px;
| |
| − | }
| |
| − | .nav .nav-current:before {
| |
| − | color: #fff;
| |
| − | }
| |
| − | .nav .nav-current a:after {
| |
| − | content: " ";
| |
| − | border-bottom: rgba(255,255,255,0.5) 1px solid;
| |
| − | width: 100%;
| |
| − | height: 1px;
| |
| − | }
| |
| − |
| |
| − | .nav a:link,
| |
| − | .nav a:visited {
| |
| − | color: #B8B8B8;
| |
| − | }
| |
| − |
| |
| − | .nav li.nav-current a,
| |
| − | .nav a:hover,
| |
| − | .nav a:active,
| |
| − | .nav a:focus {
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .subscribe-button {
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | bottom: 30px;
| |
| − | left: 30px;
| |
| − | right: 30px;
| |
| − | height: 38px;
| |
| − | padding: 0 20px;
| |
| − | color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */
| |
| − | text-align: center;
| |
| − | font-size: 12px;
| |
| − | font-family: "Raleway", sans-serif;
| |
| − | text-transform: uppercase;
| |
| − | text-decoration: none;
| |
| − | line-height: 35px;
| |
| − | border-radius: 3px;
| |
| − | background: #fff;
| |
| − | transition: all ease 0.3s;
| |
| − | }
| |
| − | .subscribe-button:before {
| |
| − | font-size: 9px;
| |
| − | margin-right: 6px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Create a bouncing scroll-down arrow on homepage with cover image */
| |
| − | .scroll-down {
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | z-index: 100;
| |
| − | bottom: 45px;
| |
| − | left: 50%;
| |
| − | margin-left: -16px;
| |
| − | width: 34px;
| |
| − | height: 34px;
| |
| − | font-size: 34px;
| |
| − | text-align: center;
| |
| − | text-decoration: none;
| |
| − | color: rgba(255,255,255,0.7);
| |
| − | -webkit-transform: rotate(-90deg);
| |
| − | -ms-transform: rotate(-90deg);
| |
| − | transform: rotate(-90deg);
| |
| − | -webkit-animation: bounce 4s 2s infinite;
| |
| − | animation: bounce 4s 2s infinite;
| |
| − | }
| |
| − |
| |
| − | /* Stop it bouncing and increase contrast when hovered */
| |
| − | .scroll-down:hover {
| |
| − | color: #fff;
| |
| − | -webkit-animation: none;
| |
| − | animation: none;
| |
| − | }
| |
| − |
| |
| − | /* Put a semi-opaque radial gradient behind the icon to make it more visible
| |
| − | on photos which happen to have a light background. */
| |
| − | .home-template .main-header:after {
| |
| − | display: block;
| |
| − | content: " ";
| |
| − | width: 150px;
| |
| − | height: 130px;
| |
| − | border-radius: 100%;
| |
| − | position: absolute;
| |
| − | bottom: 0;
| |
| − | left: 50%;
| |
| − | margin-left: -75px;
| |
| − | background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
| |
| − | }
| |
| − |
| |
| − | /* Hide when there's no cover image or on page2+ */
| |
| − | .no-cover .scroll-down,
| |
| − | .no-cover.main-header:after,
| |
| − | .archive-template .scroll-down,
| |
| − | .archive-template .main-header:after {
| |
| − | display: none
| |
| − | }
| |
| − |
| |
| − | /* Appears in the top left corner of your home page */
| |
| − | .blog-logo {
| |
| − | display: block;
| |
| − | float: left;
| |
| − | background: none !important; /* Makes sure there is never a background */
| |
| − | border: none !important; /* Makes sure there is never a border */
| |
| − | }
| |
| − |
| |
| − | .blog-logo img {
| |
| − | /*-webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | display: block;*/
| |
| − | height: 230px;
| |
| − | width: 230px;
| |
| − | }
| |
| − |
| |
| − | .menu-button {
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | display: inline-block;
| |
| − | float: right;
| |
| − | height: 38px;
| |
| − | padding: 0 15px;
| |
| − | border-style: solid;
| |
| − | border-width: 1px;
| |
| − | opacity: 1;
| |
| − | text-align: center;
| |
| − | font-size: 12px;
| |
| − | text-transform: uppercase;
| |
| − | line-height: 35px;
| |
| − | white-space: nowrap;
| |
| − | border-radius: 3px;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | .menu-button:before {
| |
| − | font-size: 12px;
| |
| − | font-weight: bold;
| |
| − | margin-right: 6px;
| |
| − | position: relative;
| |
| − | top: 1px;
| |
| − | }
| |
| − | .menu-button:hover {
| |
| − | background: #fff;
| |
| − | }
| |
| − | .menu-button:focus {
| |
| − | outline: 0;
| |
| − | }
| |
| − |
| |
| − | /* When the navigation is closed */
| |
| − | .nav-closed .menu-button {
| |
| − | color: #fff;
| |
| − | border-color: rgba(255, 255, 255, 0.6);
| |
| − | }
| |
| − | .nav-closed .menu-button:hover {
| |
| − | color: #222;
| |
| − | }
| |
| − |
| |
| − | /* When the navigation is closed and there is no cover image */
| |
| − | .nav-closed .no-cover .menu-button {
| |
| − | border-color: #BFC8CD;
| |
| − | color: #9EABB3;
| |
| − | }
| |
| − | .nav-closed .no-cover .menu-button:hover {
| |
| − | border-color: #555;
| |
| − | color: #555;
| |
| − | }
| |
| − |
| |
| − | /* When the navigation is opened */
| |
| − | /*.nav-opened .menu-button {
| |
| − | padding: 0 12px;
| |
| − | background: #111;
| |
| − | border-color: #111;
| |
| − | color: #fff;
| |
| − | -webkit-transform: translate3D(94px, 0, 0);
| |
| − | -ms-transform: translate3D(94px, 0, 0);
| |
| − | transform: translate3D(94px, 0, 0);
| |
| − | transition: all 0.3s ease;
| |
| − | }*/
| |
| − |
| |
| − | /*.nav-opened .menu-button .word {
| |
| − | opacity: 0;
| |
| − | transition: all 0.3s ease;
| |
| − | }*/
| |
| − |
| |
| − | /* Special styles when overlaid on an image*/
| |
| − | .main-nav.overlay {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | height: 70px;
| |
| − | border: none;
| |
| − | background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
| |
| − | }
| |
| − | .no-cover .main-nav.overlay {
| |
| − | background: none;
| |
| − | }
| |
| − |
| |
| − | /* The details of your blog. Defined in ghost/settings/ */
| |
| − | .page-title {
| |
| − | margin: 10px 0 10px 0;
| |
| − | font-size: 5rem;
| |
| − | letter-spacing: -1px;
| |
| − | font-weight: 700;
| |
| − | font-family: "Raleway", sans-serif;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .page-description {
| |
| − | margin: 0;
| |
| − | font-size: 2rem;
| |
| − | line-height: 1.5em;
| |
| − | font-weight: 400;
| |
| − | font-family: "Lato", serif;
| |
| − | letter-spacing: 0.01rem;
| |
| − | color: rgba(255,255,255,0.8);
| |
| − | }
| |
| − |
| |
| − | .no-cover.main-header {
| |
| − | min-height: 160px;
| |
| − | max-height: 40vh;
| |
| − | background: #f5f8fa;
| |
| − | }
| |
| − |
| |
| − | .no-cover .page-title {
| |
| − | color: rgba(0,0,0,0.8);
| |
| − | }
| |
| − |
| |
| − | .no-cover .page-description {
| |
| − | color: rgba(0,0,0,0.5);
| |
| − | }
| |
| − |
| |
| − | /* Add subtle load-in animation for content on the home page */
| |
| − | .home-template .page-title {
| |
| − | -webkit-animation: fade-in-down 0.6s;
| |
| − | animation: fade-in-down 0.6s;
| |
| − | -webkit-animation-delay: 0.2s;
| |
| − | animation-delay: 0.2s;
| |
| − | }
| |
| − | .home-template .page-description {
| |
| − | -webkit-animation: fade-in-down 0.9s;
| |
| − | animation: fade-in-down 0.9s;
| |
| − | -webkit-animation-delay: 0.1s;
| |
| − | animation-delay: 0.1s;
| |
| − | }
| |
| − |
| |
| − | /* Every post, on every page, gets this style on its <article> tag */
| |
| − | .post {
| |
| − | position: relative;
| |
| − | width: 80%;
| |
| − | max-width: 800px;
| |
| − | margin: 4rem auto;
| |
| − | padding-bottom: 4rem;
| |
| − | border-bottom: #EBF2F6 1px solid;
| |
| − | word-wrap: break-word;
| |
| − | }
| |
| − |
| |
| − | /* Add a little circle in the middle of the border-bottom on our .post
| |
| − | just for the lolz and stylepoints. */
| |
| − | .post:after {
| |
| − | display: block;
| |
| − | content: "";
| |
| − | width: 7px;
| |
| − | height: 7px;
| |
| − | border: #E7EEF2 1px solid;
| |
| − | position: absolute;
| |
| − | bottom: -5px;
| |
| − | left: 50%;
| |
| − | margin-left: -5px;
| |
| − | background: #FFF;
| |
| − | border-radius: 100%;
| |
| − | box-shadow: #FFF 0 0 0 5px;
| |
| − | }
| |
| − |
| |
| − | body:not(.post-template) .post-title {
| |
| − | font-size: 3.6rem;
| |
| − | }
| |
| − |
| |
| − | .post-title a {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .post-excerpt p {
| |
| − | margin: 0;
| |
| − | font-size: 0.9em;
| |
| − | line-height: 1.7em;
| |
| − | }
| |
| − |
| |
| − | .read-more {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .post-meta {
| |
| − | display: block;
| |
| − | margin: 1.75rem 0 0 0;
| |
| − | font-family: "Raleway", sans-serif;
| |
| − | font-size: 1.5rem;
| |
| − | line-height: 2.2rem;
| |
| − | color: #9EABB3;
| |
| − | }
| |
| − |
| |
| − | .author-thumb {
| |
| − | width: 24px;
| |
| − | height: 24px;
| |
| − | float: left;
| |
| − | margin-right: 9px;
| |
| − | border-radius: 100%;
| |
| − | }
| |
| − |
| |
| − | .post-meta a {
| |
| − | color: #9EABB3;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .post-meta a:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | .user-meta {
| |
| − | position: relative;
| |
| − | padding: 0.3rem 40px 0 100px;
| |
| − | min-height: 77px;
| |
| − | }
| |
| − |
| |
| − | .post-date {
| |
| − | display: inline-block;
| |
| − | margin-left: 8px;
| |
| − | padding-left: 12px;
| |
| − | border-left: #d5dbde 1px solid;
| |
| − | text-transform: uppercase;
| |
| − | font-size: 1.3rem;
| |
| − | white-space: nowrap;
| |
| − | }
| |
| − |
| |
| − | .user-image {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | }
| |
| − |
| |
| − | .user-name {
| |
| − | display: block;
| |
| − | font-weight: 700;
| |
| − | }
| |
| − |
| |
| − | .user-bio {
| |
| − | display: block;
| |
| − | max-width: 440px;
| |
| − | font-size: 1.4rem;
| |
| − | line-height: 1.5em;
| |
| − | }
| |
| − |
| |
| − | .publish-meta {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | padding: 4.3rem 0 4rem 0;
| |
| − | text-align: right;
| |
| − | }
| |
| − |
| |
| − | .publish-heading {
| |
| − | display: block;
| |
| − | font-weight: 700;
| |
| − | }
| |
| − |
| |
| − | .publish-date {
| |
| − | display: block;
| |
| − | font-size: 1.4rem;
| |
| − | line-height: 1.5em;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 5. Single Post - When you click on an individual post
| |
| − | ========================================================================== */
| |
| − |
| |
| − | .post-template .post-header {
| |
| − | margin-bottom: 3.4rem;
| |
| − | }
| |
| − |
| |
| − | .post-template .post-title {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − |
| |
| − | .post-template .post-meta {
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .post-template .post-date {
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | border: none;
| |
| − | }
| |
| − |
| |
| − | /* Stop elements, such as img wider than the post content, from
| |
| − | creating horizontal scroll - slight hack due to imperfections
| |
| − | with browser width % calculations and rounding */
| |
| − | .post-template .content {
| |
| − | overflow: hidden;
| |
| − | margin-top: 100px;
| |
| − | }
| |
| − |
| |
| − | /* Tweak the .post wrapper style */
| |
| − | .post-template .post {
| |
| − | margin-top: 0;
| |
| − | border-bottom: none;
| |
| − | padding-bottom: 0;
| |
| − | }
| |
| − |
| |
| − | /* Kill that stylish little circle that was on the border, too */
| |
| − | .post-template .post:after {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Keep images centered, and allow images wider than the main
| |
| − | text column to break out. */
| |
| − | .post-content img {
| |
| − | display: block;
| |
| − | max-width: 126%;
| |
| − | height: auto;
| |
| − | padding: 0.6em 0;
| |
| − | /* Centers an image by (1) pushing its left edge to the
| |
| − | center of its container and (2) shifting the entire image
| |
| − | in the opposite direction by half its own width.
| |
| − | Works for images that are larger than their containers. */
| |
| − | position: relative;
| |
| − | left: 50%;
| |
| − | -webkit-transform: translateX(-50%); /* for Safari and iOS */
| |
| − | -ms-transform: translateX(-50%); /* for IE9 */
| |
| − | transform: translateX(-50%);
| |
| − | }
| |
| − |
| |
| − | .footnotes {
| |
| − | font-style: italic;
| |
| − | font-size: 1.3rem;
| |
| − | line-height: 1.6em;
| |
| − | }
| |
| − |
| |
| − | .footnotes li {
| |
| − | margin: 0.6rem 0;
| |
| − | }
| |
| − |
| |
| − | .footnotes p {
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .footnotes p a:last-child {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* The author credit area after the post */
| |
| − | .post-footer {
| |
| − | position: relative;
| |
| − | margin: 6rem 0 0 0;
| |
| − | padding: 6rem 0 0 0;
| |
| − | border-top: #EBF2F6 1px solid;
| |
| − | }
| |
| − |
| |
| − | .post-footer h4 {
| |
| − | font-size: 1.8rem;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .post-footer p {
| |
| − | margin: 1rem 0;
| |
| − | font-size: 1.4rem;
| |
| − | line-height: 1.75em;
| |
| − | }
| |
| − |
| |
| − | /* list of author links - location / url */
| |
| − | .author-meta {
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | list-style: none;
| |
| − | font-size: 1.4rem;
| |
| − | line-height: 1;
| |
| − | font-style: italic;
| |
| − | color: #9EABB3;
| |
| − | }
| |
| − |
| |
| − | .author-meta a {
| |
| − | color: #9EABB3;
| |
| − | }
| |
| − | .author-meta a:hover {
| |
| − | color: #111;
| |
| − | }
| |
| − |
| |
| − | /* Create some space to the right for the share links */
| |
| − | .post-footer .author {
| |
| − | margin-right: 180px;
| |
| − | }
| |
| − |
| |
| − | .post-footer h4 a {
| |
| − | color: #2e2e2e;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .post-footer h4 a:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | /* Drop the share links in the space to the right.
| |
| − | Doing it like this means it's easier for the author bio
| |
| − | to be flexible at smaller screen sizes while the share
| |
| − | links remain at a fixed width the whole time */
| |
| − | .post-footer .share {
| |
| − | position: absolute;
| |
| − | top: 6rem;
| |
| − | right: 0;
| |
| − | width: 140px;
| |
| − | }
| |
| − |
| |
| − | .post-footer .share a {
| |
| − | font-size: 1.8rem;
| |
| − | display: inline-block;
| |
| − | margin: 1rem 1.6rem 1.6rem 0;
| |
| − | color: #BBC7CC;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .post-footer .share .icon-twitter:hover {
| |
| − | color: #55acee;
| |
| − | }
| |
| − | .post-footer .share .icon-facebook:hover {
| |
| − | color: #3b5998;
| |
| − | }
| |
| − | .post-footer .share .icon-google-plus:hover {
| |
| − | color: #dd4b39;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 6. Author profile
| |
| − | ========================================================================== */
| |
| − |
| |
| − | .post-head.main-header {
| |
| − | height: 65vh;
| |
| − | min-height: 180px;
| |
| − | }
| |
| − |
| |
| − | .no-cover.post-head.main-header {
| |
| − | height: 85px;
| |
| − | min-height: 0;
| |
| − | margin-bottom: 0;
| |
| − | background: transparent;
| |
| − | }
| |
| − |
| |
| − | .tag-head.main-header {
| |
| − | height: 40vh;
| |
| − | min-height: 180px;
| |
| − | }
| |
| − |
| |
| − | .author-head.main-header {
| |
| − | height: 40vh;
| |
| − | min-height: 180px;
| |
| − | }
| |
| − |
| |
| − | .no-cover.author-head.main-header {
| |
| − | height: 10vh;
| |
| − | min-height: 100px;
| |
| − | background: transparent;
| |
| − | }
| |
| − |
| |
| − | .author-profile {
| |
| − | padding: 0 15px 5rem 15px;
| |
| − | border-bottom: #EBF2F6 1px solid;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | /* Add a little circle in the middle of the border-bottom */
| |
| − | .author-profile:after {
| |
| − | display: block;
| |
| − | content: "";
| |
| − | width: 7px;
| |
| − | height: 7px;
| |
| − | border: #E7EEF2 1px solid;
| |
| − | position: absolute;
| |
| − | bottom: -5px;
| |
| − | left: 50%;
| |
| − | margin-left: -5px;
| |
| − | background: #FFF;
| |
| − | border-radius: 100%;
| |
| − | box-shadow: #FFF 0 0 0 5px;
| |
| − | }
| |
| − |
| |
| − | .author-image {
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | top: -40px;
| |
| − | left: 50%;
| |
| − | margin-left: -40px;
| |
| − | width: 80px;
| |
| − | height: 80px;
| |
| − | border-radius: 100%;
| |
| − | overflow: hidden;
| |
| − | padding: 6px;
| |
| − | background: #fff;
| |
| − | z-index: 2;
| |
| − | box-shadow: #E7EEF2 0 0 0 1px;
| |
| − | }
| |
| − |
| |
| − | .author-image .img {
| |
| − | position: relative;
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background-size: cover;
| |
| − | background-position: center center;
| |
| − | border-radius: 100%;
| |
| − | }
| |
| − |
| |
| − | .author-profile .author-image {
| |
| − | position: relative;
| |
| − | left: auto;
| |
| − | top: auto;
| |
| − | width: 120px;
| |
| − | height: 120px;
| |
| − | padding: 3px;
| |
| − | margin: -100px auto 0 auto;
| |
| − | box-shadow: none;
| |
| − | }
| |
| − |
| |
| − | .author-title {
| |
| − | margin: 1.5rem 0 1rem;
| |
| − | }
| |
| − |
| |
| − | .author-bio {
| |
| − | font-size: 1.8rem;
| |
| − | line-height: 1.5em;
| |
| − | font-weight: 200;
| |
| − | color: #50585D;
| |
| − | letter-spacing: 0;
| |
| − | text-indent: 0;
| |
| − | }
| |
| − |
| |
| − | .author-meta {
| |
| − | margin: 1.6rem 0;
| |
| − | }
| |
| − | /* Location, website, and link */
| |
| − | .author-profile .author-meta {
| |
| − | margin: 2rem 0;
| |
| − | font-family: "Lato", serif;
| |
| − | letter-spacing: 0.01rem;
| |
| − | font-size: 1.7rem;
| |
| − | }
| |
| − | .author-meta span {
| |
| − | display: inline-block;
| |
| − | margin: 0 2rem 1rem 0;
| |
| − | word-wrap: break-word;
| |
| − | }
| |
| − | .author-meta a {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | /* Turn off meta for page2+ to make room for extra
| |
| − | pagination prev/next links */
| |
| − | .archive-template .author-profile .author-meta {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 7. Read More - Next/Prev Post Links
| |
| − | ========================================================================== */
| |
| − |
| |
| − | .read-next {
| |
| − | display: -webkit-box;
| |
| − | display: -webkit-flex;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | -webkit-box-align: stretch;
| |
| − | -webkit-align-items: stretch;
| |
| − | -ms-flex-align: stretch;
| |
| − | align-items: stretch;
| |
| − | margin-top: 10rem;
| |
| − | }
| |
| − |
| |
| − | .read-next-story {
| |
| − | display: -webkit-box;
| |
| − | display: -webkit-flex;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | -webkit-box-flex: 1;
| |
| − | -webkit-flex-grow: 1;
| |
| − | -ms-flex-positive: 1;
| |
| − | flex-grow: 1;
| |
| − | min-width: 50%;
| |
| − | text-decoration: none;
| |
| − | position: relative;
| |
| − | text-align: center;
| |
| − | color: #fff;
| |
| − | background: #222 no-repeat center center;
| |
| − | background-size: cover;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .read-next-story:hover:before {
| |
| − | background: rgba(0,0,0,0.8);
| |
| − | transition: all 0.2s ease;
| |
| − | }
| |
| − | .read-next-story:hover .post:before {
| |
| − | color: #222;
| |
| − | background: #fff;
| |
| − | transition: all 0.2s ease;
| |
| − | }
| |
| − |
| |
| − | .read-next-story:before {
| |
| − | content: "";
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | background: rgba(0,0,0,0.7);
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − |
| |
| − | .read-next-story .post {
| |
| − | padding-top: 6rem;
| |
| − | padding-bottom: 6rem;
| |
| − | }
| |
| − |
| |
| − | .read-next-story .post:before {
| |
| − | content: "Read This Next";
| |
| − | padding: 4px 10px 5px;
| |
| − | text-transform: uppercase;
| |
| − | font-size: 1.1rem;
| |
| − | font-family: "Raleway", sans-serif;
| |
| − | color: rgba(255,255,255,0.8);
| |
| − | border: rgba(255,255,255,0.5) 1px solid;
| |
| − | border-radius: 4px;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | .read-next-story.prev .post:before {
| |
| − | content: "You Might Enjoy";
| |
| − | }
| |
| − |
| |
| − | .read-next-story h2 {
| |
| − | margin-top: 1rem;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .read-next-story p {
| |
| − | margin: 0;
| |
| − | color: rgba(255,255,255,0.8);
| |
| − | }
| |
| − |
| |
| − | /* Special styles for posts with no cover images */
| |
| − | .read-next-story.no-cover {
| |
| − | background: #f5f8fa;
| |
| − | }
| |
| − |
| |
| − | .read-next-story.no-cover:before {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .read-next-story.no-cover .post:before {
| |
| − | color: rgba(0,0,0,0.5);
| |
| − | border-color: rgba(0,0,0,0.2);
| |
| − | }
| |
| − |
| |
| − | .read-next-story.no-cover h2 {
| |
| − | color: rgba(0,0,0,0.8);
| |
| − | }
| |
| − |
| |
| − | .read-next-story.no-cover p {
| |
| − | color: rgba(0,0,0,0.5);
| |
| − | }
| |
| − |
| |
| − | /* if there are two posts without covers, put a border between them */
| |
| − | .read-next-story.no-cover + .read-next-story.no-cover {
| |
| − | border-left: rgba(0,0,100,0.04) 1px solid;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | /* Correctly position site-footer when next to the .read-next container */
| |
| − | .read-next + .site-footer {
| |
| − | position: absolute;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 8. Third Party Elements - Embeds from other services
| |
| − | ========================================================================== */
| |
| − |
| |
| − | /* Github */
| |
| − | .gist table {
| |
| − | margin: 0;
| |
| − | font-size: 1.4rem;
| |
| − | }
| |
| − | .gist td {
| |
| − | line-height: 1.4;
| |
| − | }
| |
| − | .gist .line-number {
| |
| − | min-width: 25px;
| |
| − | }
| |
| − |
| |
| − | /* Pastebin */
| |
| − | .content .embedPastebin {
| |
| − | margin-bottom: 1.75em;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 9. Pagination - Tools to let you flick between pages
| |
| − | ========================================================================== */
| |
| − |
| |
| − | /* The main wrapper for our pagination links */
| |
| − | .pagination {
| |
| − | position: relative;
| |
| − | width: 80%;
| |
| − | max-width: 710px;
| |
| − | margin: 4rem auto;
| |
| − | font-family: "Raleway", sans-serif;
| |
| − | font-size: 1.3rem;
| |
| − | color: #9EABB3;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .pagination a {
| |
| − | color: #9EABB3;
| |
| − | transition: all 0.2s ease;
| |
| − | }
| |
| − |
| |
| − | /* Push the previous/next links out to the left/right */
| |
| − | .older-posts,
| |
| − | .newer-posts {
| |
| − | position: absolute;
| |
| − | display: inline-block;
| |
| − | padding: 0 15px;
| |
| − | border: #bfc8cd 1px solid;
| |
| − | text-decoration: none;
| |
| − | border-radius: 4px;
| |
| − | transition: border 0.3s ease;
| |
| − | }
| |
| − |
| |
| − | .older-posts {
| |
| − | right: 0;
| |
| − | }
| |
| − |
| |
| − | .page-number {
| |
| − | display: inline-block;
| |
| − | padding: 2px 0;
| |
| − | min-width: 100px;
| |
| − | }
| |
| − |
| |
| − | .newer-posts {
| |
| − | left: 0;
| |
| − | }
| |
| − |
| |
| − | .older-posts:hover,
| |
| − | .newer-posts:hover {
| |
| − | color: #889093;
| |
| − | border-color: #98a0a4;
| |
| − | }
| |
| − |
| |
| − | .extra-pagination {
| |
| − | display: none;
| |
| − | border-bottom: #EBF2F6 1px solid;
| |
| − | }
| |
| − | .extra-pagination:after {
| |
| − | display: block;
| |
| − | content: "";
| |
| − | width: 7px;
| |
| − | height: 7px;
| |
| − | border: #E7EEF2 1px solid;
| |
| − | position: absolute;
| |
| − | bottom: -5px;
| |
| − | left: 50%;
| |
| − | margin-left: -5px;
| |
| − | background: #FFF;
| |
| − | border-radius: 100%;
| |
| − | box-shadow: #FFF 0 0 0 5px;
| |
| − | }
| |
| − | .extra-pagination .pagination {
| |
| − | width: auto;
| |
| − | }
| |
| − |
| |
| − | /* On page2+ make all the headers smaller */
| |
| − | .archive-template .main-header {
| |
| − | max-height: 30vh;
| |
| − | }
| |
| − |
| |
| − | /* On page2+ show extra pagination controls at the top of post list */
| |
| − | .archive-template .extra-pagination {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 10. Footer - The bottom of every page
| |
| − | ========================================================================== */
| |
| − |
| |
| − | .site-footer {
| |
| − | width: 80%;
| |
| − | max-width: 800px;
| |
| − | margin: 0 auto;
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − | }
| |
| − |
| |
| − | .site-footer div{
| |
| − | display: flex;
| |
| − | }
| |
| − |
| |
| − | .sponsors {
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .sponsors div {
| |
| − | justify-content: center;
| |
| − | flex-wrap: wrap;
| |
| − | }
| |
| − |
| |
| − | .site-footer img {
| |
| − | padding: 20px;
| |
| − | filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
| |
| − | filter: gray; /* IE6-9 */
| |
| − | -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
| |
| − | -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
| |
| − | -webkit-backface-visibility: hidden; /* Fix for transition flickering */
| |
| − | }
| |
| − |
| |
| − | .site-footer a:hover img {
| |
| − | filter: none;
| |
| − | -webkit-filter: grayscale(0%);
| |
| − | }
| |
| − |
| |
| − | .site-footer a {
| |
| − | color: #BBC7CC;
| |
| − | text-decoration: none;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | .site-footer .sponsors a:hover {
| |
| − | border-bottom: none;
| |
| − | }
| |
| − |
| |
| − | .site-footer a:hover {
| |
| − | border-bottom: #bbc7cc 1px solid;
| |
| − | }
| |
| − |
| |
| − | .poweredby {
| |
| − | display: block;
| |
| − | width: 45%;
| |
| − | float: right;
| |
| − | text-align: right;
| |
| − | }
| |
| − |
| |
| − | .copyright {
| |
| − | display: block;
| |
| − | width: 45%;
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width: 1100px) {
| |
| − | .post {
| |
| − | float:right;
| |
| − | margin: 4rem;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 11. Media Queries - Smaller than 900px
| |
| − | ========================================================================== */
| |
| − |
| |
| − | @media only screen and (max-width: 1150px) {
| |
| − |
| |
| − | blockquote {
| |
| − | margin-left: 0;
| |
| − | }
| |
| − |
| |
| − | .main-header {
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | height: auto;
| |
| − | min-height: 240px;
| |
| − | height: 60vh;
| |
| − | padding: 15% 0;
| |
| − | }
| |
| − |
| |
| − | .scroll-down,
| |
| − | .home-template .main-header:after { display: none; }
| |
| − |
| |
| − | .archive-template .main-header {
| |
| − | min-height: 180px;
| |
| − | padding: 10% 0;
| |
| − | }
| |
| − |
| |
| − | .blog-logo img {
| |
| − | height: 180px;
| |
| − | width: 180px;
| |
| − | }
| |
| − |
| |
| − | .navigation {
| |
| − | height: 180px;
| |
| − | }
| |
| − |
| |
| − | .nav-content {
| |
| − | margin-left: 150px;
| |
| − | }
| |
| − |
| |
| − | .hamburger {
| |
| − | top: 76px;
| |
| − | }
| |
| − |
| |
| − | .hamburger-hover {
| |
| − | top: 54px;
| |
| − | }
| |
| − |
| |
| − | .navigation div a {
| |
| − | padding: 7px 15px 0 15px;
| |
| − | }
| |
| − |
| |
| − | .page-title {
| |
| − | font-size: 4rem;
| |
| − | letter-spacing: -1px;
| |
| − | }
| |
| − |
| |
| − | .page-description {
| |
| − | font-size: 1.8rem;
| |
| − | line-height: 1.5em;
| |
| − | }
| |
| − |
| |
| − | .post {
| |
| − | font-size: 0.95em
| |
| − | }
| |
| − |
| |
| − | body:not(.post-template) .post-title {
| |
| − | font-size: 3.2rem;
| |
| − | }
| |
| − |
| |
| − | hr {
| |
| − | margin: 2.4em 0;
| |
| − | }
| |
| − |
| |
| − | ol, ul {
| |
| − | padding-left: 2em;
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | font-size: 4.5rem;
| |
| − | text-indent: -2px;
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | font-size: 3.6rem;
| |
| − | }
| |
| − |
| |
| − | h3 {
| |
| − | font-size: 3.1rem;
| |
| − | }
| |
| − |
| |
| − | h4 {
| |
| − | font-size: 2.5rem;
| |
| − | }
| |
| − |
| |
| − | h5 {
| |
| − | font-size: 2.2rem;
| |
| − | }
| |
| − |
| |
| − | h6 {
| |
| − | font-size: 1.8rem;
| |
| − | }
| |
| − |
| |
| − | .author-profile {
| |
| − | padding-bottom: 4rem;
| |
| − | }
| |
| − |
| |
| − | .author-profile .author-bio {
| |
| − | font-size: 1.6rem;
| |
| − | }
| |
| − |
| |
| − | .author-meta span {
| |
| − | display: block;
| |
| − | margin: 1.5rem 0;
| |
| − | }
| |
| − | .author-profile .author-meta span {
| |
| − | font-size: 1.6rem;
| |
| − | }
| |
| − |
| |
| − | .post-head.main-header {
| |
| − | height:45vh;
| |
| − | }
| |
| − |
| |
| − | .tag-head.main-header,
| |
| − | .author-head.main-header {
| |
| − | height: 30vh;
| |
| − | }
| |
| − |
| |
| − | .no-cover.post-head.main-header {
| |
| − | height: 55px;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | .no-cover.author-head.main-header {
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | .read-next {
| |
| − | -webkit-box-orient: vertical;
| |
| − | -webkit-box-direction: normal;
| |
| − | -webkit-flex-direction: column;
| |
| − | -ms-flex-direction: column;
| |
| − | flex-direction: column;
| |
| − | margin-top: 4rem;
| |
| − | }
| |
| − |
| |
| − | .read-next p {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .read-next-story.no-cover + .read-next-story.no-cover {
| |
| − | border-top: rgba(0,0,100,0.06) 1px solid;
| |
| − | border-left: none;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ==========================================================================
| |
| − | 12. Media Queries - Smaller than 500px
| |
| − | ========================================================================== */
| |
| − |
| |
| − | @media only screen and (max-width: 900px) {
| |
| − |
| |
| − | .main-header {
| |
| − | margin-bottom: 15px;
| |
| − | height: 40vh;
| |
| − | }
| |
| − |
| |
| − | .blog-logo img {
| |
| − | height: 120px;
| |
| − | width: 120px;
| |
| − | }
| |
| − |
| |
| − | .no-cover.main-header {
| |
| − | height: 30vh;
| |
| − | }
| |
| − |
| |
| − | .archive-template .main-header {
| |
| − | max-height: 20vh;
| |
| − | min-height: 160px;
| |
| − | padding: 10% 0;
| |
| − | }
| |
| − |
| |
| − | .main-nav {
| |
| − | padding: 5px;
| |
| − | margin-bottom: 2rem;
| |
| − | }
| |
| − |
| |
| − | .blog-logo {
| |
| − | /*padding: 5px;*/
| |
| − | }
| |
| − |
| |
| − | .blog-logo img {
| |
| − | /*height: 30px;
| |
| − | width: 30px;*/
| |
| − | }
| |
| − |
| |
| − | .logo {
| |
| | position: absolute; | | position: absolute; |
| | + | top: 18px; |
| | } | | } |
| − | | + | #content .post-content a { |
| − | #navigator-opener { | + | text-decoration: underline; |
| − | display: none; | + | |
| | } | | } |
| − | | + | body {background-color:white; } |
| − | .hamburger-hover { | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { padding: 0; } |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .nav-content {
| + | |
| − | justify-content: center;
| + | |
| − | width: 82%;
| + | |
| − | margin-left: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .nav-items {
| + | |
| − | flex-direction: column;
| + | |
| − | margin-top: 85px;
| + | |
| − | align-items: stretch;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .nav-items div {
| + | |
| − | padding-bottom: 60px;
| + | |
| − | text-align: left;
| + | |
| − | justify-content: space-between;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navigation div.nav-sublevel{
| + | |
| − | display: flex;
| + | |
| − | position: relative;
| + | |
| − | text-align: right;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | padding: 0;
| + | |
| − | flex-direction: column;
| + | |
| − | margin-top: -7px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navigation div a {
| + | |
| − | padding: 0;
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navigation div.nav-sublevel a {
| + | |
| − | text-align: right;
| + | |
| − | padding: 7px 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .hamburger {
| + | |
| − | position: absolute;
| + | |
| − | right: 0;
| + | |
| − | top: 20px;
| + | |
| − | font-size: 30px;
| + | |
| − | text-decoration: none;
| + | |
| − | padding: 30px;
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .nav-opened .hamburger {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navigation {
| + | |
| − | position: relative;
| + | |
| − | margin-top: 34px;
| + | |
| − | padding-bottom: 20px;
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .site-wrapper {
| + | |
| − | margin-top: 130px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .nav-opened .site-wrapper {
| + | |
| − | margin-top: 0px;
| + | |
| − | top: -70px; /* don't know why this is needed /leo */
| + | |
| − | }
| + | |
| − | | + | |
| − | .menu-button {
| + | |
| − | padding: 0 5px;
| + | |
| − | border-radius: 0;
| + | |
| − | border-width: 0;
| + | |
| − | color: #2e2e2e;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | .menu-button:hover {
| + | |
| − | color: #2e2e2e;
| + | |
| − | border-color: transparent;
| + | |
| − | background: none;
| + | |
| − | }
| + | |
| − | /*body.nav-opened .menu-button { | + | |
| − | background: none;
| + | |
| − | border: transparent;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | .main-nav.overlay a:hover {
| + | |
| − | color: #fff;
| + | |
| − | border-color: transparent;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | .no-cover .main-nav.overlay {
| + | |
| − | background: none;
| + | |
| − | }
| + | |
| − | .no-cover .main-nav.overlay .menu-button {
| + | |
| − | border: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .main-nav.overlay .menu-button {
| + | |
| − | border-color: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | .nav-title {
| + | |
| − | top: 25px;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | /*.nav-close {
| + | |
| − | position: absolute;
| + | |
| − | top: 18px;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | .nav ul {
| + | |
| − | padding: 60px 9% 5%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .inner,
| + | |
| − | .pagination {
| + | |
| − | width: auto;
| + | |
| − | margin: 2rem auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post {
| + | |
| − | float: none;
| + | |
| − | width: auto;
| + | |
| − | margin-top: 2rem;
| + | |
| − | margin-bottom: 2rem;
| + | |
| − | margin-left: 16px;
| + | |
| − | margin-right: 16px;
| + | |
| − | padding-bottom: 2rem;
| + | |
| − | line-height: 1.65em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-date {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-template .post-header {
| + | |
| − | margin-bottom: 2rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-template .post-date {
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | | + | |
| − | hr {
| + | |
| − | margin: 1.75em 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | p, ul, ol, dl {
| + | |
| − | font-size: 0.95em;
| + | |
| − | margin: 0 0 2.5rem 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .page-title {
| + | |
| − | font-size: 3rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-excerpt p {
| + | |
| − | font-size: 0.85em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .page-description {
| + | |
| − | font-size: 1.6rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | h1, h2, h3, | + | |
| − | h4, h5, h6 { | + | |
| − | margin: 0 0 0.3em 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | h1 {
| + | |
| − | font-size: 2.8rem;
| + | |
| − | letter-spacing: -1px;
| + | |
| − | }
| + | |
| − | | + | |
| − | h2 {
| + | |
| − | font-size: 2.4rem;
| + | |
| − | letter-spacing: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | h3 {
| + | |
| − | font-size: 2.1rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | h4 {
| + | |
| − | font-size: 1.9rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | h5 {
| + | |
| − | font-size: 1.8rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | h6 {
| + | |
| − | font-size: 1.8rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | body:not(.post-template) .post-title {
| + | |
| − | font-size: 2.5rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-template .site-footer {
| + | |
| − | margin-top: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-content img {
| + | |
| − | padding: 0;
| + | |
| − | width: calc(100% + 32px); /* expand with to image + margins */
| + | |
| − | min-width: 0;
| + | |
| − | max-width: 112%; /* fallback when calc doesn't work */
| + | |
| − | } | + | |
| − | | + | |
| − | .post-meta {
| + | |
| − | font-size: 1.3rem;
| + | |
| − | margin-top: 1rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-footer {
| + | |
| − | padding: 5rem 0 3rem 0;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-footer .author {
| + | |
| − | margin: 0 0 2rem 0;
| + | |
| − | padding: 0 0 1.6rem 0;
| + | |
| − | border-bottom: #EBF2F6 1px dashed;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-footer .share {
| + | |
| − | position: static;
| + | |
| − | width: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-footer .share a {
| + | |
| − | margin: 1.4rem 0.8rem 0 0.8rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .author-meta li {
| + | |
| − | float: none;
| + | |
| − | margin: 0;
| + | |
| − | line-height: 1.75em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .author-meta li:before {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .older-posts,
| + | |
| − | .newer-posts {
| + | |
| − | position: static;
| + | |
| − | margin: 10px 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .page-number {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .site-footer {
| + | |
| − | margin-top: 3rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .author-profile {
| + | |
| − | padding-bottom: 2rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .post-head.main-header {
| + | |
| − | height: 30vh;
| + | |
| − | }
| + | |
| − | | + | |
| − | .tag-head.main-header,
| + | |
| − | .author-head.main-header {
| + | |
| − | height: 20vh;
| + | |
| − | }
| + | |
| − | | + | |
| − | .author-profile .author-image {
| + | |
| − | margin-top: -70px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .author-profile .author-meta span {
| + | |
| − | font-size: 1.4rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .archive-template .main-header .page-description {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .read-next {
| + | |
| − | margin-top: 2rem;
| + | |
| − | margin-bottom: -37px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .read-next .post {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* ==========================================================================
| + | |
| − | 13. Animations
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | /* Used to fade in title/desc on the home page */
| + | |
| − | @-webkit-keyframes fade-in-down {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(-10px);
| + | |
| − | transform: translateY(-10px);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes fade-in-down {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transform: translateY(-10px);
| + | |
| − | transform: translateY(-10px);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Used to bounce .scroll-down on home page */
| + | |
| − | @-webkit-keyframes bounce {
| + | |
| − | 0%, 10%, 25%, 40%, 50% {
| + | |
| − | -webkit-transform: translateY(0) rotate(-90deg);
| + | |
| − | transform: translateY(0) rotate(-90deg);
| + | |
| − | }
| + | |
| − | 20% {
| + | |
| − | -webkit-transform: translateY(-10px) rotate(-90deg);
| + | |
| − | transform: translateY(-10px) rotate(-90deg);
| + | |
| − | }
| + | |
| − | 30% {
| + | |
| − | -webkit-transform: translateY(-5px) rotate(-90deg);
| + | |
| − | transform: translateY(-5px) rotate(-90deg);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes bounce {
| + | |
| − | 0%, 20%, 50%, 80%, 100% {
| + | |
| − | -webkit-transform: translateY(0) rotate(-90deg);
| + | |
| − | transform: translateY(0) rotate(-90deg);
| + | |
| − | }
| + | |
| − | 40% {
| + | |
| − | -webkit-transform: translateY(-10px) rotate(-90deg);
| + | |
| − | transform: translateY(-10px) rotate(-90deg);
| + | |
| − | }
| + | |
| − | 60% {
| + | |
| − | -webkit-transform: translateY(-5px) rotate(-90deg);
| + | |
| − | transform: translateY(-5px) rotate(-90deg);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* ==========================================================================
| + | |
| − | End of file. Animations should be the last thing here. Do not add stuff
| + | |
| − | below this point, or it will probably fuck everything up.
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | | + | |
| | </style> | | </style> |
| − | | + | <meta charset="utf-8" /> |
| − | <meta name="generator" content="Ghost 0.11" /> | + | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| − | <link rel="alternate" type="application/rss+xml" title="Wiki 2016" href="https://wiki.igem.se/rss/" /> | + | <meta name="HandheldFriendly" content="True" /> |
| − | </head> | + | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| − | <body class="post-template nav-closed">
| + | <link rel="shortcut icon" href="/favicon.ico"> |
| − | <a href="#" class="nav-close"><div class="nav-close-cross"></div></a> | + | <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Template:Stockholm/CSS?action=raw&ctype=text/css" /> |
| | + | <div class="post-template nav-closed"> |
| | + | <a href="#" class="nav-close"> |
| | + | <div class="nav-close-cross"> |
| | + | </div> |
| | + | </a> |
| | <a class="hamburger icon-menu" href="#"></a> | | <a class="hamburger icon-menu" href="#"></a> |
| | <div class="hamburger-hover"></div> | | <div class="hamburger-hover"></div> |
| | <div class="logo"> | | <div class="logo"> |
| − | <a class="blog-logo" href="https://wiki.igem.se"> | + | <a class="blog-logo" href="/Team:Stockholm"> |
| − | <img src="https://static.igem.org/mediawiki/2016/4/4c/T--Stockholm--assets-iGEM_Stockolm_logo_230_transparent.gif" alt="Wiki 2016" /> | + | </html>[[File:T--Stockholm--assets-iGEM_Stockolm_logo_230_transparent.gif|link=]]<html> |
| | </a> | | </a> |
| | </div> | | </div> |
| Line 2,448: |
Line 107: |
| | <div class="nav-items"> | | <div class="nav-items"> |
| | <div class="nav-project" role="presentation"> | | <div class="nav-project" role="presentation"> |
| − | <a href="/Team:Stockholm/project/">Project</a> | + | <a href="/Team:Stockholm/Description">Project</a> |
| | <div class="nav-sublevel"> | | <div class="nav-sublevel"> |
| − | <a href="/Team:Stockholm/in-short/">In Short</a> | + | <a href="/Team:Stockholm/Description#inshort">In Short</a> |
| − | <a href="/Team:Stockholm/our-path/">Our Path</a> | + | <a href="/Team:Stockholm/Description#ourpath">Our Path</a> |
| − | <a href="/Team:Stockholm/background/">Background</a> | + | <a href="/Team:Stockholm/Description#biofilm">Background</a> |
| − | <a href="/Team:Stockholm/project/">Our Project</a> | + | <a href="/Team:Stockholm/Description#ourproject">Our Project</a> |
| − | <a href="/Team:Stockholm/combat-proteins/">Combat Proteins</a> | + | <a href="/Team:Stockholm/Description#combatproteins">Combat Proteins</a> |
| − | <a href="/Team:Stockholm/sortase/">Sortase A</a> | + | <a href="/Team:Stockholm/Description#sortasea">Sortase A</a> |
| | + | <a href="/Team:Stockholm/Future">Future</a> |
| | + | <a href="/Team:Stockholm/Medals">Medal achievements</a> |
| | </div> | | </div> |
| | </div> | | </div> |
| | <div class="nav-parts" role="presentation"> | | <div class="nav-parts" role="presentation"> |
| − | <a href="/Team:Stockholm/parts/">Parts</a> | + | <a href="/Team:Stockholm/Parts">Parts</a> |
| | <div class="nav-sublevel"> | | <div class="nav-sublevel"> |
| − | <a href="/Team:Stockholm/parts/">Basic Parts</a> | + | <a href="/Team:Stockholm/Parts">All parts</a> |
| − | <a href="/Team:Stockholm/collection/">Part Collection</a> | + | <a href="/Team:Stockholm/Basic_Parts">Basic Parts</a> |
| − | <a href="/Team:Stockholm/composites/">Composite Part</a> | + | <a href="/Team:Stockholm/Part_Collection">Part Collection</a> |
| | </div> | | </div> |
| | </div> | | </div> |
| | <div class="nav-wet-lab" role="presentation"> | | <div class="nav-wet-lab" role="presentation"> |
| − | <a href="/Team:Stockholm/wetlab/">Lab</a> | + | <a href="/Team:Stockholm/Experiments">Lab</a> |
| | <div class="nav-sublevel"> | | <div class="nav-sublevel"> |
| − | <a href="/Team:Stockholm/experiments/">Experiments</a> | + | <a href="/Team:Stockholm/Experiments">Experiments</a> |
| − | <a href="/Team:Stockholm/lab-book/">Lab book</a> | + | <a href="/Team:Stockholm/Labbook">Lab book</a> |
| − | <a href="/Team:Stockholm/protocols/">Protocols</a> | + | <a href="/Team:Stockholm/Protocols">Protocols</a> |
| − | <a href="/Team:Stockholm/results/">Results</a>
| + | |
| − | <a href="/Team:Stockholm/proof-of-concept/">Proof of concept</a>
| + | |
| − | <a href="/Team:Stockholm/demonstrate/">Demonstrate</a>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| | <div class="nav-results" role="presentation"> | | <div class="nav-results" role="presentation"> |
| − | <a href="/Team:Stockholm/results/">Results</a> | + | <a href="/Team:Stockholm/Proof">Results</a> |
| − | </div>
| + | |
| − | <div class="nav-practises" role="presentation">
| + | |
| − | <a href="/Team:Stockholm/practises/">Human Practises</a>
| + | |
| | <div class="nav-sublevel"> | | <div class="nav-sublevel"> |
| − | <a href="/Team:Stockholm/practises/">The TECH model</a> | + | <a href="/Team:Stockholm/Proof">Proof of concept</a> |
| − | <a href="/Team:Stockholm/teaching/">Teaching</a> | + | <a href="/Team:Stockholm/Results-nuc">Nuc</a> |
| − | <a href="/Team:Stockholm/evolving/">Evolving</a> | + | <a href="/Team:Stockholm/Results-lys">Lys</a> |
| − | <a href="#">Collaboration</a> | + | <a href="/Team:Stockholm/Results-def">Def</a> |
| − | <a href="/Team:Stockholm/health/">Health</a> | + | <a href="/Team:Stockholm/Results-esp">Esp</a> |
| − | <a href="/Team:Stockholm/integrated/">Integrated</a> | + | <a href="/Team:Stockholm/Results-sortase-a">Sort A</a> |
| | </div> | | </div> |
| | </div> | | </div> |
| | <div class="nav-team" role="presentation"> | | <div class="nav-team" role="presentation"> |
| − | <a href="/Team:Stockholm/team/">Team</a> | + | <a href="/Team:Stockholm/Team">Team</a> |
| | <div class="nav-sublevel"> | | <div class="nav-sublevel"> |
| − | <a href="/Team:Stockholm/team/">Members</a> | + | <a href="/Team:Stockholm/Team">Members</a> |
| − | <a href="/Team:Stockholm/collaborations/">Collaborations</a> | + | <a href="/Team:Stockholm/Collaborations">Collaborations</a> |
| − | <a href="/Team:Stockholm/attributions/">Attributions</a> | + | <a href="/Team:Stockholm/Attributions">Attributions</a> |
| − | <a href="/Team:Stockholm/sponsors/">Sponsors</a> | + | <a href="/Team:Stockholm/Sponsors">Sponsors</a> |
| − | <a href="/Team:Stockholm/notebook/">Notebook</a> | + | <a href="/Team:Stockholm/Diary">Diary</a> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | <div class="nav-nic" role="presentation"> | + | <div class="nav-practises" role="presentation"> |
| − | <a href="/Team:Stockholm/nic/">NiC</a> | + | <a href="/Team:Stockholm/HP/Silver">Human Practices</a> |
| | <div class="nav-sublevel"> | | <div class="nav-sublevel"> |
| − | <a href="/Team:Stockholm/nic-workshops/">Workshops</a> | + | <a href="/Team:Stockholm/HP/Silver">CARD</a> |
| − | <a href="/Team:Stockholm/mini-jamboree/">Mini-Jamboree</a> | + | <a href="/Team:Stockholm/HP/Gold">TECH</a> |
| − | <a href="/Team:Stockholm/photo-album/">Photo album</a> | + | <a href="/Team:Stockholm/Integrated_practices">Integrated</a> |
| | + | <a href="/Team:Stockholm/Engagement">Engagement</a> |
| | </div> | | </div> |
| | </div> | | </div> |
| | <div class="nav-safety" role="presentation"> | | <div class="nav-safety" role="presentation"> |
| − | <a href="/Team:Stockholm/safety/">Safety</a> | + | <a href="/Team:Stockholm/Safety">Safety</a> |
| − | <div class="nav- sublevel" > | + | </div> |
| − | <a href="/Team:Stockholm/patients-in-mind/">Patients in mind</a>
| + | <div class="nav- nic" role=" presentation"> |
| − | <a href="/Team:Stockholm/ safety-card/"> CARD</a > | + | <a href="/Team:Stockholm/ NiC"> NiC</a> |
| − | </div>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | </body> | + | </div> |
| | </html> | | </html> |
