├── 2020 ├── normalize.min.css ├── variables.min.css ├── variables.css ├── normalize.css ├── skeletal.min.css ├── index.html └── skeletal.css ├── 2021 ├── twitter_banner.png ├── normalize.min.css ├── variables.min.css ├── variables.css ├── normalize.css ├── skeletal.min.css ├── skeletal.css └── index.html ├── twitter_banner.png ├── README.md ├── normalize.min.css ├── variables.min.css ├── variables.css ├── normalize.css ├── skeletal.min.css ├── index.html ├── skeletal.css └── nim-conf-2022.svg /twitter_banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pietroppeter/conf.nim-lang.org/master/twitter_banner.png -------------------------------------------------------------------------------- /2021/twitter_banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pietroppeter/conf.nim-lang.org/master/2021/twitter_banner.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![NimConf 2021](https://raw.githubusercontent.com/nim-lang/conf.nim-lang.org/master/nim-conf-menace2-2021.svg) 2 | This is intended to be the website for the Nim conference 2021. It's just a 3 | super simple site built with Skeletal (feel free to use the `variables.css` file 4 | from this library to build your own Nim-looking sites). 5 | -------------------------------------------------------------------------------- /normalize.min.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} -------------------------------------------------------------------------------- /2020/normalize.min.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} -------------------------------------------------------------------------------- /2021/normalize.min.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} -------------------------------------------------------------------------------- /variables.min.css: -------------------------------------------------------------------------------- 1 | :root{--line-height:calc(1em * 1.7);--element-padding:8px;--element-border:1px;--element-height:calc(var(--line-height) + var(--element-padding)*2 + var(--element-border)*2);--border-radius:4px;--main-color:#33C3F0;--main-color-contrast:#FFF;--activated-color:#1EAEDB;--activated-color-contrast:#FFF;--container-max-width:1200px;--text-color:#fff;--link-color:#ffe953;--link-color-hover:#f1fa8c;--background-color:#1e202a;--font-family:"Open Sans",sans;--font-size:1.8rem;--font-weight:400;--heading-base-size:var(--font-size);--heading-increase-pitch:0.7rem;--heading-increase-pitch-phone:0.5rem;--heading-base-line-height:1.6;--heading-decrease-pitch:0.08;--heading-font-family:"Titillium Web";--heading-color:#ffe953;--heading-margin:1.8rem;--button-height:var(--element-height);--button-line-height:calc(var(--element-height) - var(--element-border));--button-border:var(--element-border) solid;--button-border-radius:var(--border-radius);--button-padding-leftright:30px;--button-color:#555;--button-background-color:var(--background-color);--button-border-color:#bbb;--button-color-focus:#333;--button-background-color-focus:var(--background-color);--button-border-color-focus:#888;--button-primary-color:var(--main-color-contrast);--button-primary-background-color:var(--main-color);--button-primary-border-color:var(--main-color);--button-primary-color-focus:var(--activated-color-contrast);--button-primary-background-color-focus:var(--activated-color);--button-primary-border-color-focus:var(--activated-color);--input-padding-topbottom:var(--element-padding);--input-padding-leftright:10px;--input-height:var(--element-height);--textarea-min-height:calc((var(--element-height) - var(--element-padding) - var(--element-border))*2);--input-border:var(--element-border) solid;--input-border-color:#D1D1D1;--input-border-color-focus:var(--main-color);--input-border-radius:var(--border-radius);--input-color:var(--text-color);--input-background-color:var(--background-color);--placeholder-color:var(--text-color);--placeholder-opacity:0.8;--code-color:var(--text-color);--code-background-color:#FAFAFA;--code-border:var(--element-border) solid;--code-border-color:#E1E1E1;--code-border-radius:var(--border-radius);--code-block-color:var(--code-color);--code-block-background-color:var(--code-background-color);--code-block-border:var(--code-border);--code-block-border-color:var(--code-border-color);--code-block-border-radius:var(--code-border-radius);--td-border-bottom:0px solid #E1E1E1;--hr-border-top:0px solid #E1E1E1;--navbar-border-top:1px solid #E1E1E1;--navbar-border-bottom:1px solid #E1E1E1;--hero-padding:6vh} -------------------------------------------------------------------------------- /2020/variables.min.css: -------------------------------------------------------------------------------- 1 | :root{--line-height:calc(1em * 1.7);--element-padding:8px;--element-border:1px;--element-height:calc(var(--line-height) + var(--element-padding)*2 + var(--element-border)*2);--border-radius:4px;--main-color:#33C3F0;--main-color-contrast:#FFF;--activated-color:#1EAEDB;--activated-color-contrast:#FFF;--container-max-width:1200px;--text-color:#fff;--link-color:#ffe953;--link-color-hover:#f1fa8c;--background-color:#1e202a;--font-family:"Open Sans",sans;--font-size:1.8rem;--font-weight:400;--heading-base-size:var(--font-size);--heading-increase-pitch:0.7rem;--heading-increase-pitch-phone:0.5rem;--heading-base-line-height:1.6;--heading-decrease-pitch:0.08;--heading-font-family:"Titillium Web";--heading-color:#ffe953;--heading-margin:1.8rem;--button-height:var(--element-height);--button-line-height:calc(var(--element-height) - var(--element-border));--button-border:var(--element-border) solid;--button-border-radius:var(--border-radius);--button-padding-leftright:30px;--button-color:#555;--button-background-color:var(--background-color);--button-border-color:#bbb;--button-color-focus:#333;--button-background-color-focus:var(--background-color);--button-border-color-focus:#888;--button-primary-color:var(--main-color-contrast);--button-primary-background-color:var(--main-color);--button-primary-border-color:var(--main-color);--button-primary-color-focus:var(--activated-color-contrast);--button-primary-background-color-focus:var(--activated-color);--button-primary-border-color-focus:var(--activated-color);--input-padding-topbottom:var(--element-padding);--input-padding-leftright:10px;--input-height:var(--element-height);--textarea-min-height:calc((var(--element-height) - var(--element-padding) - var(--element-border))*2);--input-border:var(--element-border) solid;--input-border-color:#D1D1D1;--input-border-color-focus:var(--main-color);--input-border-radius:var(--border-radius);--input-color:var(--text-color);--input-background-color:var(--background-color);--placeholder-color:var(--text-color);--placeholder-opacity:0.8;--code-color:var(--text-color);--code-background-color:#FAFAFA;--code-border:var(--element-border) solid;--code-border-color:#E1E1E1;--code-border-radius:var(--border-radius);--code-block-color:var(--code-color);--code-block-background-color:var(--code-background-color);--code-block-border:var(--code-border);--code-block-border-color:var(--code-border-color);--code-block-border-radius:var(--code-border-radius);--td-border-bottom:0px solid #E1E1E1;--hr-border-top:0px solid #E1E1E1;--navbar-border-top:1px solid #E1E1E1;--navbar-border-bottom:1px solid #E1E1E1;--hero-padding:6vh} -------------------------------------------------------------------------------- /2021/variables.min.css: -------------------------------------------------------------------------------- 1 | :root{--line-height:calc(1em * 1.7);--element-padding:8px;--element-border:1px;--element-height:calc(var(--line-height) + var(--element-padding)*2 + var(--element-border)*2);--border-radius:4px;--main-color:#33C3F0;--main-color-contrast:#FFF;--activated-color:#1EAEDB;--activated-color-contrast:#FFF;--container-max-width:1200px;--text-color:#fff;--link-color:#ffe953;--link-color-hover:#f1fa8c;--background-color:#1e202a;--font-family:"Open Sans",sans;--font-size:1.8rem;--font-weight:400;--heading-base-size:var(--font-size);--heading-increase-pitch:0.7rem;--heading-increase-pitch-phone:0.5rem;--heading-base-line-height:1.6;--heading-decrease-pitch:0.08;--heading-font-family:"Titillium Web";--heading-color:#ffe953;--heading-margin:1.8rem;--button-height:var(--element-height);--button-line-height:calc(var(--element-height) - var(--element-border));--button-border:var(--element-border) solid;--button-border-radius:var(--border-radius);--button-padding-leftright:30px;--button-color:#555;--button-background-color:var(--background-color);--button-border-color:#bbb;--button-color-focus:#333;--button-background-color-focus:var(--background-color);--button-border-color-focus:#888;--button-primary-color:var(--main-color-contrast);--button-primary-background-color:var(--main-color);--button-primary-border-color:var(--main-color);--button-primary-color-focus:var(--activated-color-contrast);--button-primary-background-color-focus:var(--activated-color);--button-primary-border-color-focus:var(--activated-color);--input-padding-topbottom:var(--element-padding);--input-padding-leftright:10px;--input-height:var(--element-height);--textarea-min-height:calc((var(--element-height) - var(--element-padding) - var(--element-border))*2);--input-border:var(--element-border) solid;--input-border-color:#D1D1D1;--input-border-color-focus:var(--main-color);--input-border-radius:var(--border-radius);--input-color:var(--text-color);--input-background-color:var(--background-color);--placeholder-color:var(--text-color);--placeholder-opacity:0.8;--code-color:var(--text-color);--code-background-color:#FAFAFA;--code-border:var(--element-border) solid;--code-border-color:#E1E1E1;--code-border-radius:var(--border-radius);--code-block-color:var(--code-color);--code-block-background-color:var(--code-background-color);--code-block-border:var(--code-border);--code-block-border-color:var(--code-border-color);--code-block-border-radius:var(--code-border-radius);--td-border-bottom:0px solid #E1E1E1;--hr-border-top:0px solid #E1E1E1;--navbar-border-top:1px solid #E1E1E1;--navbar-border-bottom:1px solid #E1E1E1;--hero-padding:6vh} -------------------------------------------------------------------------------- /variables.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeletal V1.0.0 3 | * Copyright 2019, Peter Munch-Ellingsen 4 | * skeleton.peterme.net 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 22/10/2019 8 | * 9 | * Based on Skeleton v2.0.4 10 | * Copyright 2014, Dave Gamache 11 | * www.getskeleton.com 12 | * Free to use under the MIT license. 13 | * http://www.opensource.org/licenses/mit-license.php 14 | * 12/29/2014 15 | */ 16 | 17 | 18 | /* Variables 19 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 20 | :root { 21 | /* Globals */ 22 | --line-height: calc(1em * 1.7); /* Set this way so it can be used in calculations */ 23 | --element-padding: 8px; 24 | --element-border: 1px; 25 | --element-height: calc(var(--line-height) + var(--element-padding)*2 + var(--element-border)*2); 26 | --border-radius: 4px; 27 | --main-color: #33C3F0; 28 | --main-color-contrast: #FFF; 29 | --activated-color: #1EAEDB; 30 | --activated-color-contrast: #FFF; 31 | /* Basics */ 32 | --container-max-width: 1200px; 33 | --text-color: #fff; 34 | --link-color: #ffe953; 35 | --link-color-hover: #f1fa8c; 36 | --background-color: #1e202a; 37 | --font-family: "Open Sans", sans; 38 | --font-size: 1.8rem; 39 | --font-weight: 400; 40 | --heading-base-size: var(--font-size); 41 | --heading-increase-pitch: 0.7rem; 42 | --heading-increase-pitch-phone: 0.5rem; 43 | --heading-base-line-height: 1.6; 44 | --heading-decrease-pitch: 0.08; 45 | --heading-font-family: "Titillium Web"; 46 | --heading-color: #ffe953; 47 | --heading-margin: 1.8rem; 48 | /* Buttons */ 49 | --button-height: var(--element-height); 50 | --button-line-height: calc(var(--element-height) - var(--element-border)); 51 | --button-border: var(--element-border) solid; 52 | --button-border-radius: var(--border-radius); 53 | --button-padding-leftright: 30px; 54 | /* Basic button */ 55 | --button-color: #555; 56 | --button-background-color: var(--background-color); 57 | --button-border-color: #bbb; 58 | --button-color-focus: #333; 59 | --button-background-color-focus: var(--background-color); 60 | --button-border-color-focus: #888; 61 | /* Primary button */ 62 | --button-primary-color: var(--main-color-contrast); 63 | --button-primary-background-color: var(--main-color); 64 | --button-primary-border-color: var(--main-color); 65 | --button-primary-color-focus: var(--activated-color-contrast); 66 | --button-primary-background-color-focus: var(--activated-color); 67 | --button-primary-border-color-focus: var(--activated-color); 68 | /* Forms */ 69 | --input-padding-topbottom: var(--element-padding); 70 | --input-padding-leftright: 10px; 71 | --input-height: var(--element-height); 72 | --textarea-min-height: calc((var(--element-height) - var(--element-padding) - var(--element-border))*2); 73 | --input-border: var(--element-border) solid; 74 | --input-border-color: #D1D1D1; 75 | --input-border-color-focus: var(--main-color); 76 | --input-border-radius: var(--border-radius); 77 | --input-color: var(--text-color); 78 | --input-background-color: var(--background-color); 79 | --placeholder-color: var(--text-color); 80 | --placeholder-opacity: 0.8; 81 | /* Code */ 82 | --code-color: var(--text-color); 83 | --code-background-color: #FAFAFA; 84 | --code-border: var(--element-border) solid; 85 | --code-border-color: #E1E1E1; 86 | --code-border-radius: var(--border-radius); 87 | --code-block-color: var(--code-color); 88 | --code-block-background-color: var(--code-background-color); 89 | --code-block-border: var(--code-border); 90 | --code-block-border-color: var(--code-border-color); 91 | --code-block-border-radius: var(--code-border-radius); 92 | /* Tables */ 93 | --td-border-bottom: 0px solid #E1E1E1; 94 | /* Horizontal rule */ 95 | --hr-border-top: 0px solid #E1E1E1; 96 | /* Navbar */ 97 | --navbar-border-top: 1px solid #E1E1E1; 98 | --navbar-border-bottom: 1px solid #E1E1E1; 99 | /* Hero */ 100 | --hero-padding: 6vh; 101 | } 102 | -------------------------------------------------------------------------------- /2020/variables.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeletal V1.0.0 3 | * Copyright 2019, Peter Munch-Ellingsen 4 | * skeleton.peterme.net 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 22/10/2019 8 | * 9 | * Based on Skeleton v2.0.4 10 | * Copyright 2014, Dave Gamache 11 | * www.getskeleton.com 12 | * Free to use under the MIT license. 13 | * http://www.opensource.org/licenses/mit-license.php 14 | * 12/29/2014 15 | */ 16 | 17 | 18 | /* Variables 19 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 20 | :root { 21 | /* Globals */ 22 | --line-height: calc(1em * 1.7); /* Set this way so it can be used in calculations */ 23 | --element-padding: 8px; 24 | --element-border: 1px; 25 | --element-height: calc(var(--line-height) + var(--element-padding)*2 + var(--element-border)*2); 26 | --border-radius: 4px; 27 | --main-color: #33C3F0; 28 | --main-color-contrast: #FFF; 29 | --activated-color: #1EAEDB; 30 | --activated-color-contrast: #FFF; 31 | /* Basics */ 32 | --container-max-width: 1200px; 33 | --text-color: #fff; 34 | --link-color: #ffe953; 35 | --link-color-hover: #f1fa8c; 36 | --background-color: #1e202a; 37 | --font-family: "Open Sans", sans; 38 | --font-size: 1.8rem; 39 | --font-weight: 400; 40 | --heading-base-size: var(--font-size); 41 | --heading-increase-pitch: 0.7rem; 42 | --heading-increase-pitch-phone: 0.5rem; 43 | --heading-base-line-height: 1.6; 44 | --heading-decrease-pitch: 0.08; 45 | --heading-font-family: "Titillium Web"; 46 | --heading-color: #ffe953; 47 | --heading-margin: 1.8rem; 48 | /* Buttons */ 49 | --button-height: var(--element-height); 50 | --button-line-height: calc(var(--element-height) - var(--element-border)); 51 | --button-border: var(--element-border) solid; 52 | --button-border-radius: var(--border-radius); 53 | --button-padding-leftright: 30px; 54 | /* Basic button */ 55 | --button-color: #555; 56 | --button-background-color: var(--background-color); 57 | --button-border-color: #bbb; 58 | --button-color-focus: #333; 59 | --button-background-color-focus: var(--background-color); 60 | --button-border-color-focus: #888; 61 | /* Primary button */ 62 | --button-primary-color: var(--main-color-contrast); 63 | --button-primary-background-color: var(--main-color); 64 | --button-primary-border-color: var(--main-color); 65 | --button-primary-color-focus: var(--activated-color-contrast); 66 | --button-primary-background-color-focus: var(--activated-color); 67 | --button-primary-border-color-focus: var(--activated-color); 68 | /* Forms */ 69 | --input-padding-topbottom: var(--element-padding); 70 | --input-padding-leftright: 10px; 71 | --input-height: var(--element-height); 72 | --textarea-min-height: calc((var(--element-height) - var(--element-padding) - var(--element-border))*2); 73 | --input-border: var(--element-border) solid; 74 | --input-border-color: #D1D1D1; 75 | --input-border-color-focus: var(--main-color); 76 | --input-border-radius: var(--border-radius); 77 | --input-color: var(--text-color); 78 | --input-background-color: var(--background-color); 79 | --placeholder-color: var(--text-color); 80 | --placeholder-opacity: 0.8; 81 | /* Code */ 82 | --code-color: var(--text-color); 83 | --code-background-color: #FAFAFA; 84 | --code-border: var(--element-border) solid; 85 | --code-border-color: #E1E1E1; 86 | --code-border-radius: var(--border-radius); 87 | --code-block-color: var(--code-color); 88 | --code-block-background-color: var(--code-background-color); 89 | --code-block-border: var(--code-border); 90 | --code-block-border-color: var(--code-border-color); 91 | --code-block-border-radius: var(--code-border-radius); 92 | /* Tables */ 93 | --td-border-bottom: 0px solid #E1E1E1; 94 | /* Horizontal rule */ 95 | --hr-border-top: 0px solid #E1E1E1; 96 | /* Navbar */ 97 | --navbar-border-top: 1px solid #E1E1E1; 98 | --navbar-border-bottom: 1px solid #E1E1E1; 99 | /* Hero */ 100 | --hero-padding: 6vh; 101 | } 102 | -------------------------------------------------------------------------------- /2021/variables.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeletal V1.0.0 3 | * Copyright 2019, Peter Munch-Ellingsen 4 | * skeleton.peterme.net 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 22/10/2019 8 | * 9 | * Based on Skeleton v2.0.4 10 | * Copyright 2014, Dave Gamache 11 | * www.getskeleton.com 12 | * Free to use under the MIT license. 13 | * http://www.opensource.org/licenses/mit-license.php 14 | * 12/29/2014 15 | */ 16 | 17 | 18 | /* Variables 19 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 20 | :root { 21 | /* Globals */ 22 | --line-height: calc(1em * 1.7); /* Set this way so it can be used in calculations */ 23 | --element-padding: 8px; 24 | --element-border: 1px; 25 | --element-height: calc(var(--line-height) + var(--element-padding)*2 + var(--element-border)*2); 26 | --border-radius: 4px; 27 | --main-color: #33C3F0; 28 | --main-color-contrast: #FFF; 29 | --activated-color: #1EAEDB; 30 | --activated-color-contrast: #FFF; 31 | /* Basics */ 32 | --container-max-width: 1200px; 33 | --text-color: #fff; 34 | --link-color: #ffe953; 35 | --link-color-hover: #f1fa8c; 36 | --background-color: #1e202a; 37 | --font-family: "Open Sans", sans; 38 | --font-size: 1.8rem; 39 | --font-weight: 400; 40 | --heading-base-size: var(--font-size); 41 | --heading-increase-pitch: 0.7rem; 42 | --heading-increase-pitch-phone: 0.5rem; 43 | --heading-base-line-height: 1.6; 44 | --heading-decrease-pitch: 0.08; 45 | --heading-font-family: "Titillium Web"; 46 | --heading-color: #ffe953; 47 | --heading-margin: 1.8rem; 48 | /* Buttons */ 49 | --button-height: var(--element-height); 50 | --button-line-height: calc(var(--element-height) - var(--element-border)); 51 | --button-border: var(--element-border) solid; 52 | --button-border-radius: var(--border-radius); 53 | --button-padding-leftright: 30px; 54 | /* Basic button */ 55 | --button-color: #555; 56 | --button-background-color: var(--background-color); 57 | --button-border-color: #bbb; 58 | --button-color-focus: #333; 59 | --button-background-color-focus: var(--background-color); 60 | --button-border-color-focus: #888; 61 | /* Primary button */ 62 | --button-primary-color: var(--main-color-contrast); 63 | --button-primary-background-color: var(--main-color); 64 | --button-primary-border-color: var(--main-color); 65 | --button-primary-color-focus: var(--activated-color-contrast); 66 | --button-primary-background-color-focus: var(--activated-color); 67 | --button-primary-border-color-focus: var(--activated-color); 68 | /* Forms */ 69 | --input-padding-topbottom: var(--element-padding); 70 | --input-padding-leftright: 10px; 71 | --input-height: var(--element-height); 72 | --textarea-min-height: calc((var(--element-height) - var(--element-padding) - var(--element-border))*2); 73 | --input-border: var(--element-border) solid; 74 | --input-border-color: #D1D1D1; 75 | --input-border-color-focus: var(--main-color); 76 | --input-border-radius: var(--border-radius); 77 | --input-color: var(--text-color); 78 | --input-background-color: var(--background-color); 79 | --placeholder-color: var(--text-color); 80 | --placeholder-opacity: 0.8; 81 | /* Code */ 82 | --code-color: var(--text-color); 83 | --code-background-color: #FAFAFA; 84 | --code-border: var(--element-border) solid; 85 | --code-border-color: #E1E1E1; 86 | --code-border-radius: var(--border-radius); 87 | --code-block-color: var(--code-color); 88 | --code-block-background-color: var(--code-background-color); 89 | --code-block-border: var(--code-border); 90 | --code-block-border-color: var(--code-border-color); 91 | --code-block-border-radius: var(--code-border-radius); 92 | /* Tables */ 93 | --td-border-bottom: 0px solid #E1E1E1; 94 | /* Horizontal rule */ 95 | --hr-border-top: 0px solid #E1E1E1; 96 | /* Navbar */ 97 | --navbar-border-top: 1px solid #E1E1E1; 98 | --navbar-border-bottom: 1px solid #E1E1E1; 99 | /* Hero */ 100 | --hero-padding: 6vh; 101 | } 102 | -------------------------------------------------------------------------------- /normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /2020/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /2021/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /skeletal.min.css: -------------------------------------------------------------------------------- 1 | @import url(variables.css);html{font-size:62.5%}body{font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);font-family:var(--font-family);color:var(--text-color);background-color:var(--background-color)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--heading-margin);color:var(--heading-color);font-family:var(--heading-font-family)}h1,h2{font-weight:400}h3,h4{font-weight:500}h5,h6{font-weight:600}h1{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*5);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4)}h2{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*4);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4)}h3{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*3);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*3)}h4{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*2);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*2)}h5{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone));line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch))}h6{font-size:var(--heading-base-size);line-height:var(--heading-base-line-height);text-transform:uppercase}@media (min-width:550px){h1{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*5)}h2{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*4)}h3{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*3)}h4{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*2)}h5{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch))}h6{font-size:var(--heading-base-size)}}p{margin-top:0}a{color:var(--link-color)}a:hover{color:var(--link-color-hover)}.button,button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;height:var(--button-height);padding:0 var(--button-padding-leftright);color:var(--button-color);background-color:var(--button-background-color);text-align:center;font-size:73%;font-weight:600;line-height:var(--button-line-height);letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-radius:var(--button-border-radius);border:var(--button-border);border-color:var(--button-border-color);cursor:pointer;box-sizing:border-box}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{color:var(--button-color-focus);background-color:var(--button-background-color-focus);border-color:var(--button-border-color-focus);outline:0}.button.button-primary,button.button-primary,input[type=button].button-primary,input[type=reset].button-primary,input[type=submit].button-primary{color:var(--button-primary-color);background-color:var(--button-primary-background-color);border-color:var(--button-primary-border-color)}.button.button-primary:focus,.button.button-primary:hover,button.button-primary:focus,button.button-primary:hover,input[type=button].button-primary:focus,input[type=button].button-primary:hover,input[type=reset].button-primary:focus,input[type=reset].button-primary:hover,input[type=submit].button-primary:focus,input[type=submit].button-primary:hover{color:var(--button-primary-color-focus);background-color:var(--button-primary-background-color-focus);border-color:var(--button-primary-border-color-focus)}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:var(--input-height);padding:var(--input-padding-topbottom) var(--input-padding-leftright);color:var(--input-color);background-color:var(--input-background-color);border:var(--input-border) var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:none;box-sizing:border-box}::placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:var(--textarea-min-height);line-height:var(--line-height)}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border:var(--input-border) var(--input-border-color-focus);outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin:0 auto}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;color:var(--code-color);background:var(--code-background-color);border:var(--code-border) var(--code-border-color);border-radius:var(--code-border-radius)}pre>code{display:block;padding:1rem 1.5rem;white-space:pre;color:var(--code-block-color);background:var(--code-block-background-color);border:var(--code-block-border) var(--code-block-border-color);border-radius:var(--code-block-border-radius);overflow-x:auto}td,th{padding:calc(var(--font-size)/1.5) calc(var(--font-size));text-align:left;border-bottom:var(--td-border-bottom)}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}.button,button{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,p,pre,table{margin-bottom:2.5rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right!important}.u-pull-left{float:left!important}.u-center{text-align:center;justify-content:center}.u-uppcase{text-transform:uppercase}.u-hero>*{margin-top:0}.u-hero>.row{margin-right:0;margin-left:0}.u-hero{padding-top:var(--hero-padding);margin-bottom:var(--hero-padding)}ul.navbar{list-style-type:none;margin:4rem 0;padding:0;padding-bottom:calc(.2em + 1vmin);overflow:hidden;border-top:var(--navbar-border-top);border-bottom:var(--navbar-border-bottom)}ul.navbar>li{float:left;margin-bottom:0}ul.navbar>li.u-pull-right{flex-grow:1;text-align:right}ul.navbar>li a{display:block;padding-left:1rem;padding-right:1rem;padding-top:calc(.3rem + 1vmin);text-decoration:none}@media (min-width:550px){ul.navbar>li a{padding-left:1.5rem;padding-right:1.5rem}}ul.navbar>li a>*{margin:0!important}hr{margin-top:4rem;margin-bottom:4.5rem;border-width:0;border-top:var(--hr-border-top)}.container:after,.u-cf,.u-hero:after{content:"";display:table;clear:both}.container{position:relative;width:100%;max-width:var(--container-max-width);margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.row{display:flex}.container{width:80%}.column,.columns{padding-left:2%;padding-right:2%}.column:first-child,.columns:first-child{padding-left:0}.column:last-child,.columns:last-child{padding-right:0}.one.column,.one.columns{flex-basis:8.3333333333%}.two.columns{flex-basis:16.6666666667%}.three.columns{flex-basis:25%}.four.columns{flex-basis:33.3333333333%}.five.columns{flex-basis:41.6666666667%}.six.columns{flex-basis:50%}.seven.columns{flex-basis:58.3333333333%}.eight.columns{flex-basis:66.6666666667%}.nine.columns{flex-basis:75%}.ten.columns{flex-basis:83.3333333333%}.eleven.columns{flex-basis:91.6666666667%}.twelve.columns{flex-basis:100%;margin-left:0}.one-third.column{flex-basis:33.3333333333%}.two-thirds.column{flex-basis:66.6666666667%}.one-half.column{flex-basis:50%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.3333333333%}.offset-by-two.column,.offset-by-two.columns{margin-left:16.6666666667%}.offset-by-three.column,.offset-by-three.columns{margin-left:25%}.offset-by-four.column,.offset-by-four.columns{margin-left:33.3333333333%}.offset-by-five.column,.offset-by-five.columns{margin-left:41.6666666666%}.offset-by-six.column,.offset-by-six.columns{margin-left:50%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:58.3333333333%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:66.6666666667%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:75%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:83.3333333333%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:91.6666666667%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:33.3333333333%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:66.6666666667%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:50%}} 2 | -------------------------------------------------------------------------------- /2020/skeletal.min.css: -------------------------------------------------------------------------------- 1 | @import url(variables.css);html{font-size:62.5%}body{font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);font-family:var(--font-family);color:var(--text-color);background-color:var(--background-color)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--heading-margin);color:var(--heading-color);font-family:var(--heading-font-family)}h1,h2{font-weight:400}h3,h4{font-weight:500}h5,h6{font-weight:600}h1{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*5);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4)}h2{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*4);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4)}h3{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*3);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*3)}h4{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*2);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*2)}h5{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone));line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch))}h6{font-size:var(--heading-base-size);line-height:var(--heading-base-line-height);text-transform:uppercase}@media (min-width:550px){h1{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*5)}h2{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*4)}h3{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*3)}h4{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*2)}h5{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch))}h6{font-size:var(--heading-base-size)}}p{margin-top:0}a{color:var(--link-color)}a:hover{color:var(--link-color-hover)}.button,button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;height:var(--button-height);padding:0 var(--button-padding-leftright);color:var(--button-color);background-color:var(--button-background-color);text-align:center;font-size:73%;font-weight:600;line-height:var(--button-line-height);letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-radius:var(--button-border-radius);border:var(--button-border);border-color:var(--button-border-color);cursor:pointer;box-sizing:border-box}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{color:var(--button-color-focus);background-color:var(--button-background-color-focus);border-color:var(--button-border-color-focus);outline:0}.button.button-primary,button.button-primary,input[type=button].button-primary,input[type=reset].button-primary,input[type=submit].button-primary{color:var(--button-primary-color);background-color:var(--button-primary-background-color);border-color:var(--button-primary-border-color)}.button.button-primary:focus,.button.button-primary:hover,button.button-primary:focus,button.button-primary:hover,input[type=button].button-primary:focus,input[type=button].button-primary:hover,input[type=reset].button-primary:focus,input[type=reset].button-primary:hover,input[type=submit].button-primary:focus,input[type=submit].button-primary:hover{color:var(--button-primary-color-focus);background-color:var(--button-primary-background-color-focus);border-color:var(--button-primary-border-color-focus)}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:var(--input-height);padding:var(--input-padding-topbottom) var(--input-padding-leftright);color:var(--input-color);background-color:var(--input-background-color);border:var(--input-border) var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:none;box-sizing:border-box}::placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:var(--textarea-min-height);line-height:var(--line-height)}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border:var(--input-border) var(--input-border-color-focus);outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin:0 auto}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;color:var(--code-color);background:var(--code-background-color);border:var(--code-border) var(--code-border-color);border-radius:var(--code-border-radius)}pre>code{display:block;padding:1rem 1.5rem;white-space:pre;color:var(--code-block-color);background:var(--code-block-background-color);border:var(--code-block-border) var(--code-block-border-color);border-radius:var(--code-block-border-radius);overflow-x:auto}td,th{padding:calc(var(--font-size)/1.5) calc(var(--font-size));text-align:left;border-bottom:var(--td-border-bottom)}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}.button,button{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,p,pre,table{margin-bottom:2.5rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right!important}.u-pull-left{float:left!important}.u-center{text-align:center;justify-content:center}.u-uppcase{text-transform:uppercase}.u-hero>*{margin-top:0}.u-hero>.row{margin-right:0;margin-left:0}.u-hero{padding-top:var(--hero-padding);margin-bottom:var(--hero-padding)}ul.navbar{list-style-type:none;margin:4rem 0;padding:0;padding-bottom:calc(.2em + 1vmin);overflow:hidden;border-top:var(--navbar-border-top);border-bottom:var(--navbar-border-bottom)}ul.navbar>li{float:left;margin-bottom:0}ul.navbar>li.u-pull-right{flex-grow:1;text-align:right}ul.navbar>li a{display:block;padding-left:1rem;padding-right:1rem;padding-top:calc(.3rem + 1vmin);text-decoration:none}@media (min-width:550px){ul.navbar>li a{padding-left:1.5rem;padding-right:1.5rem}}ul.navbar>li a>*{margin:0!important}hr{margin-top:4rem;margin-bottom:4.5rem;border-width:0;border-top:var(--hr-border-top)}.container:after,.u-cf,.u-hero:after{content:"";display:table;clear:both}.container{position:relative;width:100%;max-width:var(--container-max-width);margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.row{display:flex}.container{width:80%}.column,.columns{padding-left:2%;padding-right:2%}.column:first-child,.columns:first-child{padding-left:0}.column:last-child,.columns:last-child{padding-right:0}.one.column,.one.columns{flex-basis:8.3333333333%}.two.columns{flex-basis:16.6666666667%}.three.columns{flex-basis:25%}.four.columns{flex-basis:33.3333333333%}.five.columns{flex-basis:41.6666666667%}.six.columns{flex-basis:50%}.seven.columns{flex-basis:58.3333333333%}.eight.columns{flex-basis:66.6666666667%}.nine.columns{flex-basis:75%}.ten.columns{flex-basis:83.3333333333%}.eleven.columns{flex-basis:91.6666666667%}.twelve.columns{flex-basis:100%;margin-left:0}.one-third.column{flex-basis:33.3333333333%}.two-thirds.column{flex-basis:66.6666666667%}.one-half.column{flex-basis:50%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.3333333333%}.offset-by-two.column,.offset-by-two.columns{margin-left:16.6666666667%}.offset-by-three.column,.offset-by-three.columns{margin-left:25%}.offset-by-four.column,.offset-by-four.columns{margin-left:33.3333333333%}.offset-by-five.column,.offset-by-five.columns{margin-left:41.6666666666%}.offset-by-six.column,.offset-by-six.columns{margin-left:50%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:58.3333333333%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:66.6666666667%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:75%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:83.3333333333%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:91.6666666667%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:33.3333333333%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:66.6666666667%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:50%}} 2 | -------------------------------------------------------------------------------- /2021/skeletal.min.css: -------------------------------------------------------------------------------- 1 | @import url(variables.css);html{font-size:62.5%}body{font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);font-family:var(--font-family);color:var(--text-color);background-color:var(--background-color)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--heading-margin);color:var(--heading-color);font-family:var(--heading-font-family)}h1,h2{font-weight:400}h3,h4{font-weight:500}h5,h6{font-weight:600}h1{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*5);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4)}h2{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*4);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4)}h3{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*3);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*3)}h4{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*2);line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*2)}h5{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch-phone));line-height:calc(var(--heading-base-line-height) - var(--heading-decrease-pitch))}h6{font-size:var(--heading-base-size);line-height:var(--heading-base-line-height);text-transform:uppercase}@media (min-width:550px){h1{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*5)}h2{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*4)}h3{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*3)}h4{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch)*2)}h5{font-size:calc(var(--heading-base-size) + var(--heading-increase-pitch))}h6{font-size:var(--heading-base-size)}}p{margin-top:0}a{color:var(--link-color)}a:hover{color:var(--link-color-hover)}.button,button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;height:var(--button-height);padding:0 var(--button-padding-leftright);color:var(--button-color);background-color:var(--button-background-color);text-align:center;font-size:73%;font-weight:600;line-height:var(--button-line-height);letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-radius:var(--button-border-radius);border:var(--button-border);border-color:var(--button-border-color);cursor:pointer;box-sizing:border-box}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{color:var(--button-color-focus);background-color:var(--button-background-color-focus);border-color:var(--button-border-color-focus);outline:0}.button.button-primary,button.button-primary,input[type=button].button-primary,input[type=reset].button-primary,input[type=submit].button-primary{color:var(--button-primary-color);background-color:var(--button-primary-background-color);border-color:var(--button-primary-border-color)}.button.button-primary:focus,.button.button-primary:hover,button.button-primary:focus,button.button-primary:hover,input[type=button].button-primary:focus,input[type=button].button-primary:hover,input[type=reset].button-primary:focus,input[type=reset].button-primary:hover,input[type=submit].button-primary:focus,input[type=submit].button-primary:hover{color:var(--button-primary-color-focus);background-color:var(--button-primary-background-color-focus);border-color:var(--button-primary-border-color-focus)}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:var(--input-height);padding:var(--input-padding-topbottom) var(--input-padding-leftright);color:var(--input-color);background-color:var(--input-background-color);border:var(--input-border) var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:none;box-sizing:border-box}::placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:var(--textarea-min-height);line-height:var(--line-height)}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border:var(--input-border) var(--input-border-color-focus);outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin:0 auto}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;color:var(--code-color);background:var(--code-background-color);border:var(--code-border) var(--code-border-color);border-radius:var(--code-border-radius)}pre>code{display:block;padding:1rem 1.5rem;white-space:pre;color:var(--code-block-color);background:var(--code-block-background-color);border:var(--code-block-border) var(--code-block-border-color);border-radius:var(--code-block-border-radius);overflow-x:auto}td,th{padding:calc(var(--font-size)/1.5) calc(var(--font-size));text-align:left;border-bottom:var(--td-border-bottom)}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}.button,button{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,p,pre,table{margin-bottom:2.5rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right!important}.u-pull-left{float:left!important}.u-center{text-align:center;justify-content:center}.u-uppcase{text-transform:uppercase}.u-hero>*{margin-top:0}.u-hero>.row{margin-right:0;margin-left:0}.u-hero{padding-top:var(--hero-padding);margin-bottom:var(--hero-padding)}ul.navbar{list-style-type:none;margin:4rem 0;padding:0;padding-bottom:calc(.2em + 1vmin);overflow:hidden;border-top:var(--navbar-border-top);border-bottom:var(--navbar-border-bottom)}ul.navbar>li{float:left;margin-bottom:0}ul.navbar>li.u-pull-right{flex-grow:1;text-align:right}ul.navbar>li a{display:block;padding-left:1rem;padding-right:1rem;padding-top:calc(.3rem + 1vmin);text-decoration:none}@media (min-width:550px){ul.navbar>li a{padding-left:1.5rem;padding-right:1.5rem}}ul.navbar>li a>*{margin:0!important}hr{margin-top:4rem;margin-bottom:4.5rem;border-width:0;border-top:var(--hr-border-top)}.container:after,.u-cf,.u-hero:after{content:"";display:table;clear:both}.container{position:relative;width:100%;max-width:var(--container-max-width);margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.row{display:flex}.container{width:80%}.column,.columns{padding-left:2%;padding-right:2%}.column:first-child,.columns:first-child{padding-left:0}.column:last-child,.columns:last-child{padding-right:0}.one.column,.one.columns{flex-basis:8.3333333333%}.two.columns{flex-basis:16.6666666667%}.three.columns{flex-basis:25%}.four.columns{flex-basis:33.3333333333%}.five.columns{flex-basis:41.6666666667%}.six.columns{flex-basis:50%}.seven.columns{flex-basis:58.3333333333%}.eight.columns{flex-basis:66.6666666667%}.nine.columns{flex-basis:75%}.ten.columns{flex-basis:83.3333333333%}.eleven.columns{flex-basis:91.6666666667%}.twelve.columns{flex-basis:100%;margin-left:0}.one-third.column{flex-basis:33.3333333333%}.two-thirds.column{flex-basis:66.6666666667%}.one-half.column{flex-basis:50%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.3333333333%}.offset-by-two.column,.offset-by-two.columns{margin-left:16.6666666667%}.offset-by-three.column,.offset-by-three.columns{margin-left:25%}.offset-by-four.column,.offset-by-four.columns{margin-left:33.3333333333%}.offset-by-five.column,.offset-by-five.columns{margin-left:41.6666666666%}.offset-by-six.column,.offset-by-six.columns{margin-left:50%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:58.3333333333%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:66.6666666667%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:75%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:83.3333333333%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:91.6666666667%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:33.3333333333%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:66.6666666667%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:50%}} 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | NimConf 2022 - Online Nim conference 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 67 | 68 | 69 | 76 | 77 | 78 | 79 |
80 |
81 |
82 |
83 |

Welcome to NimConf 2022!

84 |

Mark the date and time: Saturday, October 22nd 2022 at 10am UTC.

85 | 86 |

NimConf 2022 is an online conference and it will take place on October 22nd. 87 | It will be streamed for free and it doesn’t require any traveling - you will be 88 | able to participate from your home, without any travel and accommodation expenses.

89 | 90 |

Participating as an audience

91 | 92 |

All talks will be streamed and recorded for later viewing. 93 | Watching the talks live will allow you to ask questions and participate in the 94 | discussions with other viewers and the speakers.

95 | 96 |

Each talk will premiere on our YouTube channel 97 | as a part of NimConf 2022 playlist.

98 | 99 |

While you're waiting for the conference, you can watch all the talks from the last two years, available here: 2020 and 2021.

100 |
101 |
102 |
103 |

Streaming live in:

104 |

105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
Days
Hours
Minutes
Seconds
116 |

117 |
118 | 126 |
127 |
128 |
129 |
130 |

Schedule (October 22nd)

131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 |
Talk name
Starting time
Presenter
Nim 2 (link)10:00 UTCAndreas Rumpf
moe (link)10:45 UTCShuhei Nogawa
Libp2p in Nim & other languages (link)11:00 UTCTanguy
Fuzzing with drchaos (link)11:30 UTCAntonis Geralis
Break (1 hour)
Nimib goes interactive (link)13:00 UTCPietro Peterlongo and Hugo Granstrom
Make beautiful presentations in Nim using NimiSlides (link)14:15 UTCHugo Granstrom
Exprgrad (link)15:00 UTCCan Lehmann
Polymorph (link)15:30 UTCRyan Lipscombe
Break (1 hour)
State of NimForUE (link)17:00 UTCJuan Gomez
Nim-SOS and Nim-HPX (link)17:45 UTCChris Taylor
Scratch Built Games (link)18:45 UTCAndre von Houck
227 |
228 |
229 |
230 | 309 | 310 | 311 | -------------------------------------------------------------------------------- /2020/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | NimConf 2020 - Online Nim conference 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 67 | 68 | 69 | 76 | 77 | 78 | 79 |
80 |
81 |
82 |
83 |

Welcome to NimConf 2020!

84 |

Mark the date and time: Saturday, June 20th 2020 at 11am UTC.

85 | 86 |

As the COVID-19 situation unfolds, many of us are stuck at home. 87 | This gives us a perfect reason to set up an online conference and we are doing 88 | just that. 89 | NimConf 2020 will take place on June 20th. 90 | It will be streamed for free and it doesn’t require any travelling - you will be 91 | able to participate from your home, without any travel and accommodation expenses.

92 | 93 |

Participating as an audience

94 | 95 |

All talks will be streamed and recorded for later viewing. 96 | Watching the talks live will allow you to ask questions and participate in the 97 | discussions with other viewers and the speakers.

98 | 99 |

Each talk will premiere on our YouTube channel as a part of NimConf 2020 playlist.

100 |
101 |
102 |
103 |

Streaming live in:

104 |

105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
Days
Hours
Minutes
Seconds
116 |

117 |
118 |

Relevant links and discussions

119 | 124 |
125 |
126 |
127 |
128 |

Time schedule

129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 |
Talk name
Starting time
Presenter
NimConf 2020 introduction (video)11:00 UTCAndreas Rumpf
An intro to Nim for the uninitiated (video)11:15 UTCDominik Picheta
Making games quickly in Nim with Nico (video)12:00 UTCJez Impbox
INim is back! (video)12:30 UTCTristram Oaten
Embedding NimScript (video)12:45 UTCPeter Munch-Ellingsen
Coffee break
Omni - DSL for low level audio programming (video)13:30 UTCFrancesco Cameli
Nim in a light switch - Programming the ESP8266 (video)14:15 UTCChristian Jacobsen
Game Boy Advance Development in Nim (video)14:45 UTCJeremy Clarke
Lunch break
Nim ARC/ORC (video)16:00 UTCAndreas Rumpf
Dali: Assembling Android .apk files with Nim (video)16:45 UTCMateusz Czapliński
Multithreaded programs - the good, the bad and the buggy (video)17:30 UTCMamy André-Ratsimbazafy
Coffee break
Decimal128: When/How To Use (video)18:30 UTCJohn Dupuy
Gerbil: A "Dynamic Site Generator" in Nim (video)19:00 UTCJason Jones
Plugins for Jester (video)19:30 UTCJohn Dupuy
Fidget: Let's rethink UI development with Nim (video)20:00 UTCAndre von Houck
Introducing Enu, 3D live-coding in Nim (video)20:45 UTCScott Wadden
265 |
266 |
267 |
268 | 305 | 306 | 307 | -------------------------------------------------------------------------------- /skeletal.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeletal V1.0.0 3 | * Copyright 2019, Peter Munch-Ellingsen 4 | * skeleton.peterme.net 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 22/10/2019 8 | * 9 | * Based on Skeleton v2.0.4 10 | * Copyright 2014, Dave Gamache 11 | * www.getskeleton.com 12 | * Free to use under the MIT license. 13 | * http://www.opensource.org/licenses/mit-license.php 14 | * 12/29/2014 15 | */ 16 | 17 | 18 | /* Table of contents 19 | –––––––––––––––––––––––––––––––––––––––––––––––––– 20 | - Grid 21 | - Base Styles 22 | - Typography 23 | - Links 24 | - Buttons 25 | - Forms 26 | - Lists 27 | - Code 28 | - Tables 29 | - Spacing 30 | - Utilities 31 | - Clearing 32 | - Media Queries 33 | */ 34 | 35 | @import "variables.css"; 36 | 37 | /* Base Styles 38 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 39 | /* NOTE 40 | html is set to 62.5% so that all the REM measurements throughout Skeleton 41 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 42 | html { 43 | font-size: 62.5%; } 44 | body { 45 | font-size: var(--font-size); 46 | line-height: var(--line-height); 47 | font-weight: var(--font-weight); 48 | font-family: var(--font-family); 49 | color: var(--text-color); 50 | background-color: var(--background-color); } 51 | 52 | 53 | /* Typography 54 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 55 | h1, h2, h3, h4, h5, h6 { 56 | margin-top: 0; 57 | margin-bottom: var(--heading-margin); 58 | color: var(--heading-color); 59 | font-family: var(--heading-font-family); } 60 | h1, h2 { 61 | font-weight: 400; } 62 | h3, h4 { 63 | font-weight: 500; } 64 | h5, h6 { 65 | font-weight: 600; } 66 | h1 { 67 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*5); 68 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4); } 69 | h2 { 70 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*4); 71 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4); } 72 | h3 { 73 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*3); 74 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*3); } 75 | h4 { 76 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*2); 77 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*2); } 78 | h5 { 79 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)); 80 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch));} 81 | h6 { 82 | font-size: var(--heading-base-size); 83 | line-height: var(--heading-base-line-height); 84 | text-transform: uppercase; } 85 | 86 | /* Larger than phablet */ 87 | @media (min-width: 550px) { 88 | h1 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*5); } 89 | h2 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*4); } 90 | h3 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*3); } 91 | h4 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*2); } 92 | h5 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)); } 93 | h6 { font-size: var(--heading-base-size); } 94 | } 95 | 96 | p { 97 | margin-top: 0; } 98 | 99 | 100 | /* Links 101 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 102 | a { 103 | color: var(--link-color); } 104 | a:hover { 105 | color: var(--link-color-hover); } 106 | 107 | 108 | /* Buttons 109 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 110 | .button, 111 | button, 112 | input[type="submit"], 113 | input[type="reset"], 114 | input[type="button"] { 115 | display: inline-block; 116 | height: var(--button-height); 117 | padding: 0 var(--button-padding-leftright); 118 | color: var(--button-color); 119 | background-color: var(--button-background-color); 120 | text-align: center; 121 | font-size: 73%; 122 | font-weight: 600; 123 | line-height: var(--button-line-height); 124 | letter-spacing: .1rem; 125 | text-transform: uppercase; 126 | text-decoration: none; 127 | white-space: nowrap; 128 | border-radius: var(--button-border-radius); 129 | border: var(--button-border); 130 | border-color: var(--button-border-color); 131 | cursor: pointer; 132 | box-sizing: border-box; } 133 | .button:hover, 134 | button:hover, 135 | input[type="submit"]:hover, 136 | input[type="reset"]:hover, 137 | input[type="button"]:hover, 138 | .button:focus, 139 | button:focus, 140 | input[type="submit"]:focus, 141 | input[type="reset"]:focus, 142 | input[type="button"]:focus { 143 | color: var(--button-color-focus); 144 | background-color: var(--button-background-color-focus); 145 | border-color: var(--button-border-color-focus); 146 | outline: 0; } 147 | /* If more button styles are wanted copy all button-primary styles and create 148 | * a new one. */ 149 | .button.button-primary, 150 | button.button-primary, 151 | input[type="submit"].button-primary, 152 | input[type="reset"].button-primary, 153 | input[type="button"].button-primary { 154 | color: var(--button-primary-color); 155 | background-color: var(--button-primary-background-color); 156 | border-color: var(--button-primary-border-color); } 157 | .button.button-primary:hover, 158 | button.button-primary:hover, 159 | input[type="submit"].button-primary:hover, 160 | input[type="reset"].button-primary:hover, 161 | input[type="button"].button-primary:hover, 162 | .button.button-primary:focus, 163 | button.button-primary:focus, 164 | input[type="submit"].button-primary:focus, 165 | input[type="reset"].button-primary:focus, 166 | input[type="button"].button-primary:focus { 167 | color: var(--button-primary-color-focus); 168 | background-color: var(--button-primary-background-color-focus); 169 | border-color: var(--button-primary-border-color-focus); } 170 | 171 | 172 | /* Forms 173 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 174 | input[type="email"], 175 | input[type="number"], 176 | input[type="search"], 177 | input[type="text"], 178 | input[type="tel"], 179 | input[type="url"], 180 | input[type="password"], 181 | textarea, 182 | select { 183 | height: var(--input-height); 184 | padding: var(--input-padding-topbottom) var(--input-padding-leftright); 185 | color: var(--input-color); 186 | background-color: var(--input-background-color); 187 | border: var(--input-border) var(--input-border-color); 188 | border-radius: var(--input-border-radius); 189 | box-shadow: none; 190 | box-sizing: border-box; } 191 | ::placeholder { 192 | color: var(--placeholder-color); 193 | opacity: var(--placeholder-opacity); 194 | } 195 | /* Removes awkward default styles on some inputs for iOS */ 196 | input[type="email"], 197 | input[type="number"], 198 | input[type="search"], 199 | input[type="text"], 200 | input[type="tel"], 201 | input[type="url"], 202 | input[type="password"], 203 | textarea { 204 | -webkit-appearance: none; 205 | -moz-appearance: none; 206 | appearance: none; } 207 | textarea { 208 | min-height: var(--textarea-min-height); 209 | line-height: var(--line-height); } 210 | input[type="email"]:focus, 211 | input[type="number"]:focus, 212 | input[type="search"]:focus, 213 | input[type="text"]:focus, 214 | input[type="tel"]:focus, 215 | input[type="url"]:focus, 216 | input[type="password"]:focus, 217 | textarea:focus, 218 | select:focus { 219 | border: var(--input-border) var(--input-border-color-focus); 220 | outline: 0; } 221 | label, 222 | legend { 223 | display: block; 224 | margin-bottom: .5rem; 225 | font-weight: 600; } 226 | fieldset { 227 | padding: 0; 228 | border-width: 0; } 229 | input[type="checkbox"], 230 | input[type="radio"] { 231 | display: inline; } 232 | label > .label-body { 233 | display: inline-block; 234 | margin-left: .5rem; 235 | font-weight: normal; } 236 | 237 | 238 | /* Lists 239 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 240 | ul { 241 | list-style: circle inside; } 242 | ol { 243 | list-style: decimal inside; } 244 | ol, ul { 245 | padding-left: 0; 246 | margin: 0 auto; } 247 | ul ul, 248 | ul ol, 249 | ol ol, 250 | ol ul { 251 | margin: 1.5rem 0 1.5rem 3rem; 252 | font-size: 90%; } 253 | li { 254 | margin-bottom: 1rem; } 255 | 256 | 257 | /* Code 258 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 259 | code { 260 | padding: .2rem .5rem; 261 | margin: 0 .2rem; 262 | font-size: 90%; 263 | white-space: nowrap; 264 | color: var(--code-color); 265 | background: var(--code-background-color); 266 | border: var(--code-border) var(--code-border-color); 267 | border-radius: var(--code-border-radius); } 268 | pre > code { 269 | display: block; 270 | padding: 1rem 1.5rem; 271 | white-space: pre; 272 | color: var(--code-block-color); 273 | background: var(--code-block-background-color); 274 | border: var(--code-block-border) var(--code-block-border-color); 275 | border-radius: var(--code-block-border-radius); 276 | overflow-x: auto; } 277 | 278 | 279 | /* Tables 280 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 281 | th, 282 | td { 283 | padding: calc(var(--font-size)/1.5) calc(var(--font-size)); 284 | text-align: left; 285 | border-bottom: var(--td-border-bottom); } 286 | th:first-child, 287 | td:first-child { 288 | padding-left: 0; } 289 | th:last-child, 290 | td:last-child { 291 | padding-right: 0; } 292 | 293 | 294 | /* Spacing 295 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 296 | button, 297 | .button { 298 | margin-bottom: 1rem; } 299 | input, 300 | textarea, 301 | select, 302 | fieldset { 303 | margin-bottom: 1.5rem; } 304 | pre, 305 | blockquote, 306 | dl, 307 | figure, 308 | table, 309 | p, 310 | form { 311 | margin-bottom: 2.5rem; } 312 | 313 | 314 | /* Utilities 315 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 316 | .u-full-width { 317 | width: 100%; 318 | box-sizing: border-box; } 319 | .u-max-full-width { 320 | max-width: 100%; 321 | box-sizing: border-box; } 322 | .u-pull-right { 323 | float: right!important; } 324 | .u-pull-left { 325 | float: left!important; } 326 | .u-center { 327 | text-align: center; 328 | justify-content: center; } 329 | .u-uppcase { 330 | text-transform: uppercase; } 331 | .u-hero > * { 332 | margin-top: 0; } 333 | .u-hero > .row { 334 | margin-right: 0rem; 335 | margin-left: 0rem; } 336 | .u-hero { 337 | padding-top: var(--hero-padding); 338 | margin-bottom: var(--hero-padding); } 339 | 340 | 341 | /* Navbar 342 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 343 | ul.navbar { 344 | list-style-type: none; 345 | margin: 4rem 0; 346 | padding: 0; 347 | padding-bottom: calc(0.2em + 1vmin); 348 | overflow: hidden; 349 | border-top: var(--navbar-border-top); 350 | border-bottom: var(--navbar-border-bottom); } 351 | 352 | ul.navbar > li { 353 | float: left; 354 | margin-bottom: 0; } 355 | 356 | ul.navbar > li.u-pull-right { 357 | flex-grow: 1; 358 | text-align: right; } 359 | 360 | ul.navbar > li a { 361 | display: block; 362 | padding-left: 1rem; 363 | padding-right: 1rem; 364 | padding-top: calc(0.3rem + 1vmin); 365 | text-decoration: none; } 366 | 367 | @media (min-width: 550px) { 368 | ul.navbar > li a { 369 | padding-left: 1.5rem; 370 | padding-right: 1.5rem; } 371 | } 372 | 373 | ul.navbar > li a > * { 374 | margin: 0!important; } 375 | 376 | 377 | /* Misc 378 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 379 | hr { 380 | margin-top: 4rem; 381 | margin-bottom: 4.5rem; 382 | border-width: 0; 383 | border-top: var(--hr-border-top); } 384 | 385 | 386 | /* Clearing 387 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 388 | 389 | /* Self Clearing Goodness */ 390 | .container:after, 391 | .u-hero:after, 392 | .u-cf { 393 | content: ""; 394 | display: table; 395 | clear: both; } 396 | 397 | 398 | /* Media Queries 399 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 400 | /* 401 | Note: The best way to structure the use of media queries is to create the queries 402 | near the relevant code. For example, if you wanted to change the styles for buttons 403 | on small devices, paste the mobile query code up in the buttons section and style it 404 | there. 405 | */ 406 | 407 | /* Larger than mobile */ 408 | @media (min-width: 400px) {} 409 | 410 | /* Larger than phablet (also point when grid becomes active) */ 411 | @media (min-width: 550px) {} 412 | 413 | /* Larger than tablet */ 414 | @media (min-width: 750px) {} 415 | 416 | /* Larger than desktop */ 417 | @media (min-width: 1000px) {} 418 | 419 | /* Larger than Desktop HD */ 420 | @media (min-width: 1200px) {} 421 | 422 | /* Grid 423 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 424 | .container { 425 | position: relative; 426 | width: 100%; 427 | max-width: var(--container-max-width); 428 | margin: 0 auto; 429 | padding: 0 20px; 430 | box-sizing: border-box; } 431 | .column, 432 | .columns { 433 | width: 100%; 434 | float: left; 435 | box-sizing: border-box; } 436 | 437 | /* For devices larger than 400px */ 438 | @media (min-width: 400px) { 439 | .container { 440 | width: 85%; 441 | padding: 0; } 442 | } 443 | 444 | /* For devices larger than 550px */ 445 | @media (min-width: 550px) { 446 | .row { 447 | display: flex; } 448 | .container { 449 | width: 80%; } 450 | .column, 451 | .columns { 452 | padding-left: 2%; 453 | padding-right: 2%; } 454 | .column:first-child, 455 | .columns:first-child { 456 | padding-left: 0; } 457 | .column:last-child, 458 | .columns:last-child { 459 | padding-right: 0; } 460 | 461 | .one.column, 462 | .one.columns { flex-basis: 8.3333333333%; } 463 | .two.columns { flex-basis: 16.6666666667%; } 464 | .three.columns { flex-basis: 25%; } 465 | .four.columns { flex-basis: 33.3333333333%; } 466 | .five.columns { flex-basis: 41.6666666667%; } 467 | .six.columns { flex-basis: 50%; } 468 | .seven.columns { flex-basis: 58.3333333333%; } 469 | .eight.columns { flex-basis: 66.6666666667%; } 470 | .nine.columns { flex-basis: 75%; } 471 | .ten.columns { flex-basis: 83.3333333333%; } 472 | .eleven.columns { flex-basis: 91.6666666667%; } 473 | .twelve.columns { flex-basis: 100%; margin-left: 0; } 474 | 475 | .one-third.column { flex-basis: 33.3333333333%; } 476 | .two-thirds.column { flex-basis: 66.6666666667%; } 477 | 478 | .one-half.column { flex-basis: 50%; } 479 | 480 | /* Offsets */ 481 | .offset-by-one.column, 482 | .offset-by-one.columns { margin-left: 8.3333333333%; } 483 | .offset-by-two.column, 484 | .offset-by-two.columns { margin-left: 16.6666666667%; } 485 | .offset-by-three.column, 486 | .offset-by-three.columns { margin-left: 25%; } 487 | .offset-by-four.column, 488 | .offset-by-four.columns { margin-left: 33.3333333333%; } 489 | .offset-by-five.column, 490 | .offset-by-five.columns { margin-left: 41.6666666666%; } 491 | .offset-by-six.column, 492 | .offset-by-six.columns { margin-left: 50%; } 493 | .offset-by-seven.column, 494 | .offset-by-seven.columns { margin-left: 58.3333333333%; } 495 | .offset-by-eight.column, 496 | .offset-by-eight.columns { margin-left: 66.6666666667%; } 497 | .offset-by-nine.column, 498 | .offset-by-nine.columns { margin-left: 75%; } 499 | .offset-by-ten.column, 500 | .offset-by-ten.columns { margin-left: 83.3333333333%; } 501 | .offset-by-eleven.column, 502 | .offset-by-eleven.columns { margin-left: 91.6666666667%; } 503 | 504 | .offset-by-one-third.column, 505 | .offset-by-one-third.columns { margin-left: 33.3333333333%; } 506 | .offset-by-two-thirds.column, 507 | .offset-by-two-thirds.columns { margin-left: 66.6666666667%; } 508 | 509 | .offset-by-one-half.column, 510 | .offset-by-one-half.columns { margin-left: 50%; } 511 | } 512 | -------------------------------------------------------------------------------- /2020/skeletal.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeletal V1.0.0 3 | * Copyright 2019, Peter Munch-Ellingsen 4 | * skeleton.peterme.net 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 22/10/2019 8 | * 9 | * Based on Skeleton v2.0.4 10 | * Copyright 2014, Dave Gamache 11 | * www.getskeleton.com 12 | * Free to use under the MIT license. 13 | * http://www.opensource.org/licenses/mit-license.php 14 | * 12/29/2014 15 | */ 16 | 17 | 18 | /* Table of contents 19 | –––––––––––––––––––––––––––––––––––––––––––––––––– 20 | - Grid 21 | - Base Styles 22 | - Typography 23 | - Links 24 | - Buttons 25 | - Forms 26 | - Lists 27 | - Code 28 | - Tables 29 | - Spacing 30 | - Utilities 31 | - Clearing 32 | - Media Queries 33 | */ 34 | 35 | @import "variables.css"; 36 | 37 | /* Base Styles 38 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 39 | /* NOTE 40 | html is set to 62.5% so that all the REM measurements throughout Skeleton 41 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 42 | html { 43 | font-size: 62.5%; } 44 | body { 45 | font-size: var(--font-size); 46 | line-height: var(--line-height); 47 | font-weight: var(--font-weight); 48 | font-family: var(--font-family); 49 | color: var(--text-color); 50 | background-color: var(--background-color); } 51 | 52 | 53 | /* Typography 54 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 55 | h1, h2, h3, h4, h5, h6 { 56 | margin-top: 0; 57 | margin-bottom: var(--heading-margin); 58 | color: var(--heading-color); 59 | font-family: var(--heading-font-family); } 60 | h1, h2 { 61 | font-weight: 400; } 62 | h3, h4 { 63 | font-weight: 500; } 64 | h5, h6 { 65 | font-weight: 600; } 66 | h1 { 67 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*5); 68 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4); } 69 | h2 { 70 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*4); 71 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4); } 72 | h3 { 73 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*3); 74 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*3); } 75 | h4 { 76 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*2); 77 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*2); } 78 | h5 { 79 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)); 80 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch));} 81 | h6 { 82 | font-size: var(--heading-base-size); 83 | line-height: var(--heading-base-line-height); 84 | text-transform: uppercase; } 85 | 86 | /* Larger than phablet */ 87 | @media (min-width: 550px) { 88 | h1 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*5); } 89 | h2 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*4); } 90 | h3 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*3); } 91 | h4 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*2); } 92 | h5 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)); } 93 | h6 { font-size: var(--heading-base-size); } 94 | } 95 | 96 | p { 97 | margin-top: 0; } 98 | 99 | 100 | /* Links 101 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 102 | a { 103 | color: var(--link-color); } 104 | a:hover { 105 | color: var(--link-color-hover); } 106 | 107 | 108 | /* Buttons 109 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 110 | .button, 111 | button, 112 | input[type="submit"], 113 | input[type="reset"], 114 | input[type="button"] { 115 | display: inline-block; 116 | height: var(--button-height); 117 | padding: 0 var(--button-padding-leftright); 118 | color: var(--button-color); 119 | background-color: var(--button-background-color); 120 | text-align: center; 121 | font-size: 73%; 122 | font-weight: 600; 123 | line-height: var(--button-line-height); 124 | letter-spacing: .1rem; 125 | text-transform: uppercase; 126 | text-decoration: none; 127 | white-space: nowrap; 128 | border-radius: var(--button-border-radius); 129 | border: var(--button-border); 130 | border-color: var(--button-border-color); 131 | cursor: pointer; 132 | box-sizing: border-box; } 133 | .button:hover, 134 | button:hover, 135 | input[type="submit"]:hover, 136 | input[type="reset"]:hover, 137 | input[type="button"]:hover, 138 | .button:focus, 139 | button:focus, 140 | input[type="submit"]:focus, 141 | input[type="reset"]:focus, 142 | input[type="button"]:focus { 143 | color: var(--button-color-focus); 144 | background-color: var(--button-background-color-focus); 145 | border-color: var(--button-border-color-focus); 146 | outline: 0; } 147 | /* If more button styles are wanted copy all button-primary styles and create 148 | * a new one. */ 149 | .button.button-primary, 150 | button.button-primary, 151 | input[type="submit"].button-primary, 152 | input[type="reset"].button-primary, 153 | input[type="button"].button-primary { 154 | color: var(--button-primary-color); 155 | background-color: var(--button-primary-background-color); 156 | border-color: var(--button-primary-border-color); } 157 | .button.button-primary:hover, 158 | button.button-primary:hover, 159 | input[type="submit"].button-primary:hover, 160 | input[type="reset"].button-primary:hover, 161 | input[type="button"].button-primary:hover, 162 | .button.button-primary:focus, 163 | button.button-primary:focus, 164 | input[type="submit"].button-primary:focus, 165 | input[type="reset"].button-primary:focus, 166 | input[type="button"].button-primary:focus { 167 | color: var(--button-primary-color-focus); 168 | background-color: var(--button-primary-background-color-focus); 169 | border-color: var(--button-primary-border-color-focus); } 170 | 171 | 172 | /* Forms 173 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 174 | input[type="email"], 175 | input[type="number"], 176 | input[type="search"], 177 | input[type="text"], 178 | input[type="tel"], 179 | input[type="url"], 180 | input[type="password"], 181 | textarea, 182 | select { 183 | height: var(--input-height); 184 | padding: var(--input-padding-topbottom) var(--input-padding-leftright); 185 | color: var(--input-color); 186 | background-color: var(--input-background-color); 187 | border: var(--input-border) var(--input-border-color); 188 | border-radius: var(--input-border-radius); 189 | box-shadow: none; 190 | box-sizing: border-box; } 191 | ::placeholder { 192 | color: var(--placeholder-color); 193 | opacity: var(--placeholder-opacity); 194 | } 195 | /* Removes awkward default styles on some inputs for iOS */ 196 | input[type="email"], 197 | input[type="number"], 198 | input[type="search"], 199 | input[type="text"], 200 | input[type="tel"], 201 | input[type="url"], 202 | input[type="password"], 203 | textarea { 204 | -webkit-appearance: none; 205 | -moz-appearance: none; 206 | appearance: none; } 207 | textarea { 208 | min-height: var(--textarea-min-height); 209 | line-height: var(--line-height); } 210 | input[type="email"]:focus, 211 | input[type="number"]:focus, 212 | input[type="search"]:focus, 213 | input[type="text"]:focus, 214 | input[type="tel"]:focus, 215 | input[type="url"]:focus, 216 | input[type="password"]:focus, 217 | textarea:focus, 218 | select:focus { 219 | border: var(--input-border) var(--input-border-color-focus); 220 | outline: 0; } 221 | label, 222 | legend { 223 | display: block; 224 | margin-bottom: .5rem; 225 | font-weight: 600; } 226 | fieldset { 227 | padding: 0; 228 | border-width: 0; } 229 | input[type="checkbox"], 230 | input[type="radio"] { 231 | display: inline; } 232 | label > .label-body { 233 | display: inline-block; 234 | margin-left: .5rem; 235 | font-weight: normal; } 236 | 237 | 238 | /* Lists 239 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 240 | ul { 241 | list-style: circle inside; } 242 | ol { 243 | list-style: decimal inside; } 244 | ol, ul { 245 | padding-left: 0; 246 | margin: 0 auto; } 247 | ul ul, 248 | ul ol, 249 | ol ol, 250 | ol ul { 251 | margin: 1.5rem 0 1.5rem 3rem; 252 | font-size: 90%; } 253 | li { 254 | margin-bottom: 1rem; } 255 | 256 | 257 | /* Code 258 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 259 | code { 260 | padding: .2rem .5rem; 261 | margin: 0 .2rem; 262 | font-size: 90%; 263 | white-space: nowrap; 264 | color: var(--code-color); 265 | background: var(--code-background-color); 266 | border: var(--code-border) var(--code-border-color); 267 | border-radius: var(--code-border-radius); } 268 | pre > code { 269 | display: block; 270 | padding: 1rem 1.5rem; 271 | white-space: pre; 272 | color: var(--code-block-color); 273 | background: var(--code-block-background-color); 274 | border: var(--code-block-border) var(--code-block-border-color); 275 | border-radius: var(--code-block-border-radius); 276 | overflow-x: auto; } 277 | 278 | 279 | /* Tables 280 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 281 | th, 282 | td { 283 | padding: calc(var(--font-size)/1.5) calc(var(--font-size)); 284 | text-align: left; 285 | border-bottom: var(--td-border-bottom); } 286 | th:first-child, 287 | td:first-child { 288 | padding-left: 0; } 289 | th:last-child, 290 | td:last-child { 291 | padding-right: 0; } 292 | 293 | 294 | /* Spacing 295 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 296 | button, 297 | .button { 298 | margin-bottom: 1rem; } 299 | input, 300 | textarea, 301 | select, 302 | fieldset { 303 | margin-bottom: 1.5rem; } 304 | pre, 305 | blockquote, 306 | dl, 307 | figure, 308 | table, 309 | p, 310 | form { 311 | margin-bottom: 2.5rem; } 312 | 313 | 314 | /* Utilities 315 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 316 | .u-full-width { 317 | width: 100%; 318 | box-sizing: border-box; } 319 | .u-max-full-width { 320 | max-width: 100%; 321 | box-sizing: border-box; } 322 | .u-pull-right { 323 | float: right!important; } 324 | .u-pull-left { 325 | float: left!important; } 326 | .u-center { 327 | text-align: center; 328 | justify-content: center; } 329 | .u-uppcase { 330 | text-transform: uppercase; } 331 | .u-hero > * { 332 | margin-top: 0; } 333 | .u-hero > .row { 334 | margin-right: 0rem; 335 | margin-left: 0rem; } 336 | .u-hero { 337 | padding-top: var(--hero-padding); 338 | margin-bottom: var(--hero-padding); } 339 | 340 | 341 | /* Navbar 342 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 343 | ul.navbar { 344 | list-style-type: none; 345 | margin: 4rem 0; 346 | padding: 0; 347 | padding-bottom: calc(0.2em + 1vmin); 348 | overflow: hidden; 349 | border-top: var(--navbar-border-top); 350 | border-bottom: var(--navbar-border-bottom); } 351 | 352 | ul.navbar > li { 353 | float: left; 354 | margin-bottom: 0; } 355 | 356 | ul.navbar > li.u-pull-right { 357 | flex-grow: 1; 358 | text-align: right; } 359 | 360 | ul.navbar > li a { 361 | display: block; 362 | padding-left: 1rem; 363 | padding-right: 1rem; 364 | padding-top: calc(0.3rem + 1vmin); 365 | text-decoration: none; } 366 | 367 | @media (min-width: 550px) { 368 | ul.navbar > li a { 369 | padding-left: 1.5rem; 370 | padding-right: 1.5rem; } 371 | } 372 | 373 | ul.navbar > li a > * { 374 | margin: 0!important; } 375 | 376 | 377 | /* Misc 378 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 379 | hr { 380 | margin-top: 4rem; 381 | margin-bottom: 4.5rem; 382 | border-width: 0; 383 | border-top: var(--hr-border-top); } 384 | 385 | 386 | /* Clearing 387 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 388 | 389 | /* Self Clearing Goodness */ 390 | .container:after, 391 | .u-hero:after, 392 | .u-cf { 393 | content: ""; 394 | display: table; 395 | clear: both; } 396 | 397 | 398 | /* Media Queries 399 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 400 | /* 401 | Note: The best way to structure the use of media queries is to create the queries 402 | near the relevant code. For example, if you wanted to change the styles for buttons 403 | on small devices, paste the mobile query code up in the buttons section and style it 404 | there. 405 | */ 406 | 407 | /* Larger than mobile */ 408 | @media (min-width: 400px) {} 409 | 410 | /* Larger than phablet (also point when grid becomes active) */ 411 | @media (min-width: 550px) {} 412 | 413 | /* Larger than tablet */ 414 | @media (min-width: 750px) {} 415 | 416 | /* Larger than desktop */ 417 | @media (min-width: 1000px) {} 418 | 419 | /* Larger than Desktop HD */ 420 | @media (min-width: 1200px) {} 421 | 422 | /* Grid 423 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 424 | .container { 425 | position: relative; 426 | width: 100%; 427 | max-width: var(--container-max-width); 428 | margin: 0 auto; 429 | padding: 0 20px; 430 | box-sizing: border-box; } 431 | .column, 432 | .columns { 433 | width: 100%; 434 | float: left; 435 | box-sizing: border-box; } 436 | 437 | /* For devices larger than 400px */ 438 | @media (min-width: 400px) { 439 | .container { 440 | width: 85%; 441 | padding: 0; } 442 | } 443 | 444 | /* For devices larger than 550px */ 445 | @media (min-width: 550px) { 446 | .row { 447 | display: flex; } 448 | .container { 449 | width: 80%; } 450 | .column, 451 | .columns { 452 | padding-left: 2%; 453 | padding-right: 2%; } 454 | .column:first-child, 455 | .columns:first-child { 456 | padding-left: 0; } 457 | .column:last-child, 458 | .columns:last-child { 459 | padding-right: 0; } 460 | 461 | .one.column, 462 | .one.columns { flex-basis: 8.3333333333%; } 463 | .two.columns { flex-basis: 16.6666666667%; } 464 | .three.columns { flex-basis: 25%; } 465 | .four.columns { flex-basis: 33.3333333333%; } 466 | .five.columns { flex-basis: 41.6666666667%; } 467 | .six.columns { flex-basis: 50%; } 468 | .seven.columns { flex-basis: 58.3333333333%; } 469 | .eight.columns { flex-basis: 66.6666666667%; } 470 | .nine.columns { flex-basis: 75%; } 471 | .ten.columns { flex-basis: 83.3333333333%; } 472 | .eleven.columns { flex-basis: 91.6666666667%; } 473 | .twelve.columns { flex-basis: 100%; margin-left: 0; } 474 | 475 | .one-third.column { flex-basis: 33.3333333333%; } 476 | .two-thirds.column { flex-basis: 66.6666666667%; } 477 | 478 | .one-half.column { flex-basis: 50%; } 479 | 480 | /* Offsets */ 481 | .offset-by-one.column, 482 | .offset-by-one.columns { margin-left: 8.3333333333%; } 483 | .offset-by-two.column, 484 | .offset-by-two.columns { margin-left: 16.6666666667%; } 485 | .offset-by-three.column, 486 | .offset-by-three.columns { margin-left: 25%; } 487 | .offset-by-four.column, 488 | .offset-by-four.columns { margin-left: 33.3333333333%; } 489 | .offset-by-five.column, 490 | .offset-by-five.columns { margin-left: 41.6666666666%; } 491 | .offset-by-six.column, 492 | .offset-by-six.columns { margin-left: 50%; } 493 | .offset-by-seven.column, 494 | .offset-by-seven.columns { margin-left: 58.3333333333%; } 495 | .offset-by-eight.column, 496 | .offset-by-eight.columns { margin-left: 66.6666666667%; } 497 | .offset-by-nine.column, 498 | .offset-by-nine.columns { margin-left: 75%; } 499 | .offset-by-ten.column, 500 | .offset-by-ten.columns { margin-left: 83.3333333333%; } 501 | .offset-by-eleven.column, 502 | .offset-by-eleven.columns { margin-left: 91.6666666667%; } 503 | 504 | .offset-by-one-third.column, 505 | .offset-by-one-third.columns { margin-left: 33.3333333333%; } 506 | .offset-by-two-thirds.column, 507 | .offset-by-two-thirds.columns { margin-left: 66.6666666667%; } 508 | 509 | .offset-by-one-half.column, 510 | .offset-by-one-half.columns { margin-left: 50%; } 511 | } 512 | -------------------------------------------------------------------------------- /2021/skeletal.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeletal V1.0.0 3 | * Copyright 2019, Peter Munch-Ellingsen 4 | * skeleton.peterme.net 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 22/10/2019 8 | * 9 | * Based on Skeleton v2.0.4 10 | * Copyright 2014, Dave Gamache 11 | * www.getskeleton.com 12 | * Free to use under the MIT license. 13 | * http://www.opensource.org/licenses/mit-license.php 14 | * 12/29/2014 15 | */ 16 | 17 | 18 | /* Table of contents 19 | –––––––––––––––––––––––––––––––––––––––––––––––––– 20 | - Grid 21 | - Base Styles 22 | - Typography 23 | - Links 24 | - Buttons 25 | - Forms 26 | - Lists 27 | - Code 28 | - Tables 29 | - Spacing 30 | - Utilities 31 | - Clearing 32 | - Media Queries 33 | */ 34 | 35 | @import "variables.css"; 36 | 37 | /* Base Styles 38 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 39 | /* NOTE 40 | html is set to 62.5% so that all the REM measurements throughout Skeleton 41 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 42 | html { 43 | font-size: 62.5%; } 44 | body { 45 | font-size: var(--font-size); 46 | line-height: var(--line-height); 47 | font-weight: var(--font-weight); 48 | font-family: var(--font-family); 49 | color: var(--text-color); 50 | background-color: var(--background-color); } 51 | 52 | 53 | /* Typography 54 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 55 | h1, h2, h3, h4, h5, h6 { 56 | margin-top: 0; 57 | margin-bottom: var(--heading-margin); 58 | color: var(--heading-color); 59 | font-family: var(--heading-font-family); } 60 | h1, h2 { 61 | font-weight: 400; } 62 | h3, h4 { 63 | font-weight: 500; } 64 | h5, h6 { 65 | font-weight: 600; } 66 | h1 { 67 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*5); 68 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4); } 69 | h2 { 70 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*4); 71 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*4); } 72 | h3 { 73 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*3); 74 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*3); } 75 | h4 { 76 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)*2); 77 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch)*2); } 78 | h5 { 79 | font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch-phone)); 80 | line-height: calc(var(--heading-base-line-height) - var(--heading-decrease-pitch));} 81 | h6 { 82 | font-size: var(--heading-base-size); 83 | line-height: var(--heading-base-line-height); 84 | text-transform: uppercase; } 85 | 86 | /* Larger than phablet */ 87 | @media (min-width: 550px) { 88 | h1 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*5); } 89 | h2 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*4); } 90 | h3 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*3); } 91 | h4 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)*2); } 92 | h5 { font-size: calc(var(--heading-base-size) + var(--heading-increase-pitch)); } 93 | h6 { font-size: var(--heading-base-size); } 94 | } 95 | 96 | p { 97 | margin-top: 0; } 98 | 99 | 100 | /* Links 101 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 102 | a { 103 | color: var(--link-color); } 104 | a:hover { 105 | color: var(--link-color-hover); } 106 | 107 | 108 | /* Buttons 109 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 110 | .button, 111 | button, 112 | input[type="submit"], 113 | input[type="reset"], 114 | input[type="button"] { 115 | display: inline-block; 116 | height: var(--button-height); 117 | padding: 0 var(--button-padding-leftright); 118 | color: var(--button-color); 119 | background-color: var(--button-background-color); 120 | text-align: center; 121 | font-size: 73%; 122 | font-weight: 600; 123 | line-height: var(--button-line-height); 124 | letter-spacing: .1rem; 125 | text-transform: uppercase; 126 | text-decoration: none; 127 | white-space: nowrap; 128 | border-radius: var(--button-border-radius); 129 | border: var(--button-border); 130 | border-color: var(--button-border-color); 131 | cursor: pointer; 132 | box-sizing: border-box; } 133 | .button:hover, 134 | button:hover, 135 | input[type="submit"]:hover, 136 | input[type="reset"]:hover, 137 | input[type="button"]:hover, 138 | .button:focus, 139 | button:focus, 140 | input[type="submit"]:focus, 141 | input[type="reset"]:focus, 142 | input[type="button"]:focus { 143 | color: var(--button-color-focus); 144 | background-color: var(--button-background-color-focus); 145 | border-color: var(--button-border-color-focus); 146 | outline: 0; } 147 | /* If more button styles are wanted copy all button-primary styles and create 148 | * a new one. */ 149 | .button.button-primary, 150 | button.button-primary, 151 | input[type="submit"].button-primary, 152 | input[type="reset"].button-primary, 153 | input[type="button"].button-primary { 154 | color: var(--button-primary-color); 155 | background-color: var(--button-primary-background-color); 156 | border-color: var(--button-primary-border-color); } 157 | .button.button-primary:hover, 158 | button.button-primary:hover, 159 | input[type="submit"].button-primary:hover, 160 | input[type="reset"].button-primary:hover, 161 | input[type="button"].button-primary:hover, 162 | .button.button-primary:focus, 163 | button.button-primary:focus, 164 | input[type="submit"].button-primary:focus, 165 | input[type="reset"].button-primary:focus, 166 | input[type="button"].button-primary:focus { 167 | color: var(--button-primary-color-focus); 168 | background-color: var(--button-primary-background-color-focus); 169 | border-color: var(--button-primary-border-color-focus); } 170 | 171 | 172 | /* Forms 173 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 174 | input[type="email"], 175 | input[type="number"], 176 | input[type="search"], 177 | input[type="text"], 178 | input[type="tel"], 179 | input[type="url"], 180 | input[type="password"], 181 | textarea, 182 | select { 183 | height: var(--input-height); 184 | padding: var(--input-padding-topbottom) var(--input-padding-leftright); 185 | color: var(--input-color); 186 | background-color: var(--input-background-color); 187 | border: var(--input-border) var(--input-border-color); 188 | border-radius: var(--input-border-radius); 189 | box-shadow: none; 190 | box-sizing: border-box; } 191 | ::placeholder { 192 | color: var(--placeholder-color); 193 | opacity: var(--placeholder-opacity); 194 | } 195 | /* Removes awkward default styles on some inputs for iOS */ 196 | input[type="email"], 197 | input[type="number"], 198 | input[type="search"], 199 | input[type="text"], 200 | input[type="tel"], 201 | input[type="url"], 202 | input[type="password"], 203 | textarea { 204 | -webkit-appearance: none; 205 | -moz-appearance: none; 206 | appearance: none; } 207 | textarea { 208 | min-height: var(--textarea-min-height); 209 | line-height: var(--line-height); } 210 | input[type="email"]:focus, 211 | input[type="number"]:focus, 212 | input[type="search"]:focus, 213 | input[type="text"]:focus, 214 | input[type="tel"]:focus, 215 | input[type="url"]:focus, 216 | input[type="password"]:focus, 217 | textarea:focus, 218 | select:focus { 219 | border: var(--input-border) var(--input-border-color-focus); 220 | outline: 0; } 221 | label, 222 | legend { 223 | display: block; 224 | margin-bottom: .5rem; 225 | font-weight: 600; } 226 | fieldset { 227 | padding: 0; 228 | border-width: 0; } 229 | input[type="checkbox"], 230 | input[type="radio"] { 231 | display: inline; } 232 | label > .label-body { 233 | display: inline-block; 234 | margin-left: .5rem; 235 | font-weight: normal; } 236 | 237 | 238 | /* Lists 239 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 240 | ul { 241 | list-style: circle inside; } 242 | ol { 243 | list-style: decimal inside; } 244 | ol, ul { 245 | padding-left: 0; 246 | margin: 0 auto; } 247 | ul ul, 248 | ul ol, 249 | ol ol, 250 | ol ul { 251 | margin: 1.5rem 0 1.5rem 3rem; 252 | font-size: 90%; } 253 | li { 254 | margin-bottom: 1rem; } 255 | 256 | 257 | /* Code 258 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 259 | code { 260 | padding: .2rem .5rem; 261 | margin: 0 .2rem; 262 | font-size: 90%; 263 | white-space: nowrap; 264 | color: var(--code-color); 265 | background: var(--code-background-color); 266 | border: var(--code-border) var(--code-border-color); 267 | border-radius: var(--code-border-radius); } 268 | pre > code { 269 | display: block; 270 | padding: 1rem 1.5rem; 271 | white-space: pre; 272 | color: var(--code-block-color); 273 | background: var(--code-block-background-color); 274 | border: var(--code-block-border) var(--code-block-border-color); 275 | border-radius: var(--code-block-border-radius); 276 | overflow-x: auto; } 277 | 278 | 279 | /* Tables 280 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 281 | th, 282 | td { 283 | padding: calc(var(--font-size)/1.5) calc(var(--font-size)); 284 | text-align: left; 285 | border-bottom: var(--td-border-bottom); } 286 | th:first-child, 287 | td:first-child { 288 | padding-left: 0; } 289 | th:last-child, 290 | td:last-child { 291 | padding-right: 0; } 292 | 293 | 294 | /* Spacing 295 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 296 | button, 297 | .button { 298 | margin-bottom: 1rem; } 299 | input, 300 | textarea, 301 | select, 302 | fieldset { 303 | margin-bottom: 1.5rem; } 304 | pre, 305 | blockquote, 306 | dl, 307 | figure, 308 | table, 309 | p, 310 | form { 311 | margin-bottom: 2.5rem; } 312 | 313 | 314 | /* Utilities 315 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 316 | .u-full-width { 317 | width: 100%; 318 | box-sizing: border-box; } 319 | .u-max-full-width { 320 | max-width: 100%; 321 | box-sizing: border-box; } 322 | .u-pull-right { 323 | float: right!important; } 324 | .u-pull-left { 325 | float: left!important; } 326 | .u-center { 327 | text-align: center; 328 | justify-content: center; } 329 | .u-uppcase { 330 | text-transform: uppercase; } 331 | .u-hero > * { 332 | margin-top: 0; } 333 | .u-hero > .row { 334 | margin-right: 0rem; 335 | margin-left: 0rem; } 336 | .u-hero { 337 | padding-top: var(--hero-padding); 338 | margin-bottom: var(--hero-padding); } 339 | 340 | 341 | /* Navbar 342 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 343 | ul.navbar { 344 | list-style-type: none; 345 | margin: 4rem 0; 346 | padding: 0; 347 | padding-bottom: calc(0.2em + 1vmin); 348 | overflow: hidden; 349 | border-top: var(--navbar-border-top); 350 | border-bottom: var(--navbar-border-bottom); } 351 | 352 | ul.navbar > li { 353 | float: left; 354 | margin-bottom: 0; } 355 | 356 | ul.navbar > li.u-pull-right { 357 | flex-grow: 1; 358 | text-align: right; } 359 | 360 | ul.navbar > li a { 361 | display: block; 362 | padding-left: 1rem; 363 | padding-right: 1rem; 364 | padding-top: calc(0.3rem + 1vmin); 365 | text-decoration: none; } 366 | 367 | @media (min-width: 550px) { 368 | ul.navbar > li a { 369 | padding-left: 1.5rem; 370 | padding-right: 1.5rem; } 371 | } 372 | 373 | ul.navbar > li a > * { 374 | margin: 0!important; } 375 | 376 | 377 | /* Misc 378 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 379 | hr { 380 | margin-top: 4rem; 381 | margin-bottom: 4.5rem; 382 | border-width: 0; 383 | border-top: var(--hr-border-top); } 384 | 385 | 386 | /* Clearing 387 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 388 | 389 | /* Self Clearing Goodness */ 390 | .container:after, 391 | .u-hero:after, 392 | .u-cf { 393 | content: ""; 394 | display: table; 395 | clear: both; } 396 | 397 | 398 | /* Media Queries 399 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 400 | /* 401 | Note: The best way to structure the use of media queries is to create the queries 402 | near the relevant code. For example, if you wanted to change the styles for buttons 403 | on small devices, paste the mobile query code up in the buttons section and style it 404 | there. 405 | */ 406 | 407 | /* Larger than mobile */ 408 | @media (min-width: 400px) {} 409 | 410 | /* Larger than phablet (also point when grid becomes active) */ 411 | @media (min-width: 550px) {} 412 | 413 | /* Larger than tablet */ 414 | @media (min-width: 750px) {} 415 | 416 | /* Larger than desktop */ 417 | @media (min-width: 1000px) {} 418 | 419 | /* Larger than Desktop HD */ 420 | @media (min-width: 1200px) {} 421 | 422 | /* Grid 423 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 424 | .container { 425 | position: relative; 426 | width: 100%; 427 | max-width: var(--container-max-width); 428 | margin: 0 auto; 429 | padding: 0 20px; 430 | box-sizing: border-box; } 431 | .column, 432 | .columns { 433 | width: 100%; 434 | float: left; 435 | box-sizing: border-box; } 436 | 437 | /* For devices larger than 400px */ 438 | @media (min-width: 400px) { 439 | .container { 440 | width: 85%; 441 | padding: 0; } 442 | } 443 | 444 | /* For devices larger than 550px */ 445 | @media (min-width: 550px) { 446 | .row { 447 | display: flex; } 448 | .container { 449 | width: 80%; } 450 | .column, 451 | .columns { 452 | padding-left: 2%; 453 | padding-right: 2%; } 454 | .column:first-child, 455 | .columns:first-child { 456 | padding-left: 0; } 457 | .column:last-child, 458 | .columns:last-child { 459 | padding-right: 0; } 460 | 461 | .one.column, 462 | .one.columns { flex-basis: 8.3333333333%; } 463 | .two.columns { flex-basis: 16.6666666667%; } 464 | .three.columns { flex-basis: 25%; } 465 | .four.columns { flex-basis: 33.3333333333%; } 466 | .five.columns { flex-basis: 41.6666666667%; } 467 | .six.columns { flex-basis: 50%; } 468 | .seven.columns { flex-basis: 58.3333333333%; } 469 | .eight.columns { flex-basis: 66.6666666667%; } 470 | .nine.columns { flex-basis: 75%; } 471 | .ten.columns { flex-basis: 83.3333333333%; } 472 | .eleven.columns { flex-basis: 91.6666666667%; } 473 | .twelve.columns { flex-basis: 100%; margin-left: 0; } 474 | 475 | .one-third.column { flex-basis: 33.3333333333%; } 476 | .two-thirds.column { flex-basis: 66.6666666667%; } 477 | 478 | .one-half.column { flex-basis: 50%; } 479 | 480 | /* Offsets */ 481 | .offset-by-one.column, 482 | .offset-by-one.columns { margin-left: 8.3333333333%; } 483 | .offset-by-two.column, 484 | .offset-by-two.columns { margin-left: 16.6666666667%; } 485 | .offset-by-three.column, 486 | .offset-by-three.columns { margin-left: 25%; } 487 | .offset-by-four.column, 488 | .offset-by-four.columns { margin-left: 33.3333333333%; } 489 | .offset-by-five.column, 490 | .offset-by-five.columns { margin-left: 41.6666666666%; } 491 | .offset-by-six.column, 492 | .offset-by-six.columns { margin-left: 50%; } 493 | .offset-by-seven.column, 494 | .offset-by-seven.columns { margin-left: 58.3333333333%; } 495 | .offset-by-eight.column, 496 | .offset-by-eight.columns { margin-left: 66.6666666667%; } 497 | .offset-by-nine.column, 498 | .offset-by-nine.columns { margin-left: 75%; } 499 | .offset-by-ten.column, 500 | .offset-by-ten.columns { margin-left: 83.3333333333%; } 501 | .offset-by-eleven.column, 502 | .offset-by-eleven.columns { margin-left: 91.6666666667%; } 503 | 504 | .offset-by-one-third.column, 505 | .offset-by-one-third.columns { margin-left: 33.3333333333%; } 506 | .offset-by-two-thirds.column, 507 | .offset-by-two-thirds.columns { margin-left: 66.6666666667%; } 508 | 509 | .offset-by-one-half.column, 510 | .offset-by-one-half.columns { margin-left: 50%; } 511 | } 512 | -------------------------------------------------------------------------------- /2021/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | NimConf 2021 - Online Nim conference 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 67 | 68 | 69 | 76 | 77 | 78 | 79 |
80 |
81 |
82 |
83 |

Welcome to NimConf 2021!

84 |

Mark the date and time: Saturday, June 26th 2021 at 11am UTC.

85 | 86 |

NimConf 2021 is an online conference and it will take place on June 26th. 87 | It will be streamed for free and it doesn’t require any travelling - you will be 88 | able to participate from your home, without any travel and accommodation expenses.

89 | 90 |

Participating as an audience

91 | 92 |

All talks will be streamed and recorded for later viewing. 93 | Watching the talks live will allow you to ask questions and participate in the 94 | discussions with other viewers and the speakers.

95 | 96 |

Each talk will premiere on our YouTube channel 97 | as a part of NimConf 2021 playlist.

98 | 99 |

While you're waiting for the conference, you can watch all the talks from the last year, available here.

100 |
101 |
102 |
103 |

Streaming live in:

104 |

105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
Days
Hours
Minutes
Seconds
116 |

117 |
118 | 126 |
127 |
128 |
129 |
130 |

Schedule (June 26th)

131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 |
Talk name
Starting time
Presenter
Zen of Nim (link)11:00 UTCAndreas Rumpf
Making a Platformer in NICO with Nim (link)12:00 UTCJez Impbox
Share your Nim adventures with Nimib (link)12:30 UTCPietro Peterlongo
Nicoru - Development Container Runtime in Nim (link)13:00 UTCShuhei Nogawa
Coffee break (15 min)
Why I wrote my own keyboard firmware in Nim (link)13:30 UTCPeter Munch-Ellingsen
Torrentinim - Building a torrent crawler with Nim (link)14:15 UTCSergio Tapia
Nim in production (link)14:30 UTCMamy Ratsimbazafy
Lunch break (1 hour)
Dimscord - Interact with the Discord API using Nim (link)16:00 UTCkrisppurg
Nim in an RTOS World (link)16:30 UTCJaremy Creechley
Norm: Where we at, where are we going (link)17:15 UTCConstantine Molchanov
Coffee break (15 min)
Min - implementing a programming language with Nim (link)18:00 UTCFabio Cevasco
Making music with paraMIDI and ANSIWAVE (link)18:45 UTCZach Oakes
Creating a 3D game in Enu 0.2 (link)19:15 UTCScott Wadden
Pixie - A full-featured 2D graphics library for Nim (link)19:45 UTCAndre von Houck
252 |
253 |
254 |
255 | 346 | 347 | 348 | -------------------------------------------------------------------------------- /nim-conf-2022.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 35 | 36 | 37 | 38 | 205 | 206 | --------------------------------------------------------------------------------