:root { --typography-base-fz: 100%; --typography-base-lh: 1.42; --typography-h1-fz: 2em; --typography-h1-lh: 1.25; --typography-h2-fz: 1.625em; --typography-h2-lh: 1.15384615; --typography-h3-fz: 1.375em; --typography-h3-lh: 1.13636364; --typography-h4-fz: 1.125em; --typography-h4-lh: 1.11; --typography-h5-fz: 1.075em; --typography-h5-lh: 1.11; --typography-h6-fz: 0.925em; --typography-h6-lh: 1.11; } @media all and (min-width: 48em) { :root { --typography-base-fz: 125%; --typography-base-lh: 1.5; } } @media all and (min-width: 85em) { :root { --typography-base-fz: 150%; --typography-base-lh: 1.62; } } :root { --theme-background: #f5f6fa; --theme-color: #282828; /** Root properties, typically colour declarations, but contains other things too. */ --color-primary: #00a6ed; --color-secondary: #bf1ca9; --color-positive: #5ad42f; --color-negative: #d4372f; --site-container-width: 90%; --site-content-max-width: 81.25em; --site-owl-spacing: 1rem; --site-clip: polygon( calc(100% - var(--clip-notch)) 0, 100% var(--clip-notch), 100% 100%, var(--clip-notch) 100%, 0 calc(100% - var(--clip-notch)), 0 0 ); /** Base typography settings. Other typography settings will inherit/extend upon these. */ --typography-body-family: "Merriweather", serif; --typography-heading-family: "Lato", serif; --typography-link-text-shadow-color: var(--theme-background); /** General shared properties. */ --box-shadow: 0 0 7px rgba(0, 0, 0, 0.05); --box-shadow_hover: 0 0 15px rgba(0, 0, 0, 0.15); /** Component declarations */ --hero-matrix-url: url("/assets/oscailte/img/hero_matrix.png"); --clip-notch: 10%; } @media all and (min-width: 48em) { .Site:not(.Site--home) .Site__main { --site-container-width: 75%; } } @media all and (min-width: 85em) { .Site:not(.Site--home) .Site__main { --site-container-width: auto; --site-content-max-width: 60rem ; } } @font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 400; src: url("/assets/oscailte/fonts/lato-v16-latin-regular.eot"); src: local("Lato Regular"), local("Lato-Regular"), url("/assets/oscailte/fonts/lato-v16-latin-regular.eot?#iefix") format("embedded-opentype"), url("/assets/oscailte/fonts/lato-v16-latin-regular.woff2") format("woff2"), url("/assets/oscailte/fonts/lato-v16-latin-regular.woff") format("woff"), url("/assets/oscailte/fonts/lato-v16-latin-regular.ttf") format("truetype"), url("/assets/oscailte/fonts/lato-v16-latin-regular.svg#Lato") format("svg"); } @font-face { font-display: swap; font-family: 'Merriweather'; font-style: normal; font-weight: 400; src: url("/assets/oscailte/fonts/merriweather-v21-latin-regular.eot"); src: local("Merriweather Regular"), local("Merriweather-Regular"), url("/assets/oscailte/fonts/merriweather-v21-latin-regular.eot?#iefix") format("embedded-opentype"), url("/assets/oscailte/fonts/merriweather-v21-latin-regular.woff2") format("woff2"), url("/assets/oscailte/fonts/merriweather-v21-latin-regular.woff") format("woff"), url("/assets/oscailte/fonts/merriweather-v21-latin-regular.ttf") format("truetype"), url("/assets/oscailte/fonts/merriweather-v21-latin-regular.svg#Merriweather") format("svg"); } @font-face { font-display: swap; font-family: 'Merriweather'; font-style: italic; font-weight: 400; src: url("/assets/oscailte/fonts/merriweather-v21-latin-italic.eot"); src: local("Merriweather Italic"), local("Merriweather-Italic"), url("/assets/oscailte/fonts/merriweather-v21-latin-italic.eot?#iefix") format("embedded-opentype"), url("/assets/oscailte/fonts/merriweather-v21-latin-italic.woff2") format("woff2"), url("/assets/oscailte/fonts/merriweather-v21-latin-italic.woff") format("woff"), url("/assets/oscailte/fonts/merriweather-v21-latin-italic.ttf") format("truetype"), url("/assets/oscailte/fonts/merriweather-v21-latin-italic.svg#Merriweather") format("svg"); } @font-face { font-display: swap; font-family: 'Merriweather'; font-style: normal; font-weight: 700; src: url("/assets/oscailte/fonts/merriweather-v21-latin-700.eot"); src: local("Merriweather Bold"), local("Merriweather-Bold"), url("/assets/oscailte/fonts/merriweather-v21-latin-700.eot?#iefix") format("embedded-opentype"), url("/assets/oscailte/fonts/merriweather-v21-latin-700.woff2") format("woff2"), url("/assets/oscailte/fonts/merriweather-v21-latin-700.woff") format("woff"), url("/assets/oscailte/fonts/merriweather-v21-latin-700.ttf") format("truetype"), url("/assets/oscailte/fonts/merriweather-v21-latin-700.svg#Merriweather") format("svg"); } /*! modern-normalize v0.5.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /* Document ========================================================================== */ /** Use a better box model (opinionated). */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /** Use a more readable tab size (opinionated). */ :root { -moz-tab-size: 4; tab-size: 4; } /** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** Remove the margin in all browsers. */ body { margin: 0; } /** Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; } /* Grouping content ========================================================================== */ /** Add the correct height in Firefox. */ hr { height: 0; } /* Text-level semantics ========================================================================== */ /** Add the correct text decoration in Chrome, Edge, and Safari. */ abbr[title] { text-decoration: underline dotted; } /** Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 2. Correct the odd 'em' font sizing in all browsers. */ code, kbd, samp, pre { font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** Add the correct font size in all browsers. */ small { font-size: 80%; } /** Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** Remove the inheritance of text transform in Edge and Firefox. 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } /** Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } /** Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */ legend { padding: 0; } /** Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /** Correct the cursor style of increment and decrement buttons in Safari. */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** Remove the inner padding in Chrome and Safari on macOS. */ [type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to 'inherit' in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } * + * { margin-top: var(--site-owl-spacing); } html { font-size: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; line-height: var(--typography-base-lh); overflow-y: scroll; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { background: var(--theme-background); color: var(--theme-color); font-family: var(--typography-body-family); font-size: var(--typography-base-fz); } blockquote { border-left: 3px solid var(--color-primary); font-style: italic; margin-left: 0; padding-left: 40px; } :root { --highlighter-background: #fff; --highlighter-color: #666; } @media (prefers-color-scheme: dark) { :root { --highlighter-background: #333; --highlighter-color: #fff; } } code.highlighter-rouge { background-color: var(--highlighter-background); border: 1px solid; border-radius: 3px; color: var(--highlighter-color); padding: 0 .15em; } h1, h2, h3, h4, h5, h6 { font-family: var(--typography-heading-family); } h1, .h1 { font-size: var(--typography-h1-fz); line-height: var(--typography-h1-lh); } h2, .h2 { font-size: var(--typography-h2-fz); line-height: var(--typography-h2-lh); } h3, .h3 { font-size: var(--typography-h3-fz); line-height: var(--typography-h3-lh); } h4, .h4 { font-size: var(--typography-h4-fz); line-height: var(--typography-h4-lh); } h5, .h5 { font-size: var(--typography-h5-fz); line-height: var(--typography-h5-lh); } h6, .h6 { font-size: var(--typography-h6-fz); line-height: var(--typography-h6-lh); } hr { border: none; border-top: 1px solid rgba(0, 0, 0, 0.15); } img { max-width: 100%; } a { color: var(--link-color, var(--color-primary)); } .highlight pre, pre, .highlight .hll, .o-circuited { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='304' height='304'%3E%3Cpath fill='%23bcbcbf' fill-opacity='.045' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2a3 3 0 1 0 5.7 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.2l-32 32H118zm28.1 90.1a5 5 0 1 1-2 0v-76.5L175.6 80H224V21.9a5 5 0 1 1 2 0V82h-49.6L146 112.4v75.7zm16 32a5 5 0 1 1-2 0v-99.5L184.6 96H300a5 5 0 0 1 3.9-3.9v2a3 3 0 0 0 0 5.7v2.1A5 5 0 0 1 300 98H185.4L162 121.4v98.7zm-144-64a5 5 0 1 1-2 0v-3.5l48-48V48h32V0h2v50H66v55.4l-48 48v2.7zM50 53.9v43.5l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.4l48-48V53.9a5 5 0 1 1 2 0zm-16 16v19.5l-34 34v-2.8l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.4L0 43.4v-2.8L8.6 32H12zm265.8 18a5 5 0 1 1 0-2h18.7l7.4-7.4v2.8l-6.6 6.6H278zm-16 160a5 5 0 1 1 0-2H288v-71.4l16-16v2.8l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.6L40.6 194H21.9a5 5 0 1 1 0-2h19.5L66 216.6V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.6L48.6 178H21.9a5 5 0 1 1 0-2h27.5L82 208.6V258H53.9zM34 39.8v1.6L9.4 66H0v-2h8.6L32 40.6V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9h-2a3 3 0 0 0-3.9-1.8V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5 5 0 0 1 6 97a5 5 0 0 1-6 4.9v-2a3 3 0 1 0 0-5.7V92zM80 272h2v32h-2v-32zm37.9 32h-2a3 3 0 0 0-5.7 0H108a5 5 0 0 1 9.8 0zM5.9 0A5 5 0 0 1 0 5.9v-2A3 3 0 0 0 3.8 0H6zm294.2 0h2a3 3 0 0 0 1.9 3.8V6a5 5 0 0 1-3.9-5.9zm3.9 300.1v2a3 3 0 0 0-1.8 1.9H300a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E"); } .o-list-bare { list-style-type: none; margin: 0; padding: 0; } .o-list-inline { display: inline-flex; flex-wrap: wrap; justify-content: space-around; } .o-muted { opacity: .85; } .o-no-owl { margin-top: 0; } .Button { background-color: var(--color-primary); border-radius: 4px; box-shadow: inset 0px -3px 0 rgba(0, 0, 0, 0.2); color: #fff; display: inline-block; padding: .5em .75em; text-align: center; text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); } .Card { background: #fff; border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); padding: 1rem; } .Card__title { font-size: 1em; margin: 0; } .Card__meta { color: #666; } .Card__meta .Icon { margin-right: 5px; } .Site__footer { background-color: #222; color: #aaa; padding: calc(var(--site-owl-spacing) * 2) 0; text-align: center; text-shadow: 1px 1px 0 #000; } .Site__footer br, .Site__footer p { margin: 0; } @media all and (min-width: 48em) { .Site__footer .Container { display: flex; justify-content: space-between; } .Site__footer { text-align: left; } } .Header { background-color: var(--header-background, #fff); border-top: 5px solid var(--color-primary); box-shadow: var(--box-shadow); margin: 0; padding: 1em 0; } .Header .Container { display: flex; flex-direction: column; justify-content: space-between; } .Header a { color: var(--header-link-color, var(--color-primary)); } .Header__title { line-height: 1; margin: 0; text-align: center; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); } .Header__title a { display: flex; flex-direction: column; text-decoration: none; } .Header__subtitle { font-size: .55em; } @media all and (min-width: 48em) { .Header .Container { flex-direction: row; } .Header__title { text-align: left; } .Header__subtitle { margin-top: 0; } } .Hero { padding: 3.5em 0; text-align: center; } .Hero .avatar { border: 0.75rem solid var(--color-primary); border-radius: 50%; height: auto; } .Hero__content { color: #fff; position: relative; z-index: 1; } .Hero__title { margin: 0; text-shadow: 1px 1px 0 #000; } .Hero.o-circuited { background-color: #222; } .Site--default .Hero, .Site--home .Hero { position: relative; } .Site--default .Hero::after, .Site--home .Hero::after { background-color: rgba(0, 0, 0, 0.1); background-image: var(--hero-matrix-url); content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .Site--default .Hero__title, .Site--home .Hero__title { max-width: 58rem; } .Site--post .Hero__title { text-align: center; } .Site--post .Hero__content { flex-direction: column; justify-content: center; } @media all and (min-width: 48em) { .Hero .avatar { max-width: 100%; } .Hero__content { align-items: center; display: flex; } .Hero__title { padding: 0 1em; text-align: left; } } @media all and (min-width: 85em) { .Hero .avatar { margin: 0 5%; } } .Icon { fill: currentColor; line-height: 1; height: 1em; vertical-align: middle; width: 1em; } .Navigation__items, .Navigation__item { height: 100%; } .Navigation__items { display: flex; flex-direction: row; justify-content: center; } .Navigation__item { align-items: center; display: flex; margin: 0; } .Navigation__link { display: block; padding: .5em 1em; text-align: center; text-decoration: none; width: 100%; } @media all and (min-width: 48em) { .Navigation { margin-top: 0; } } .RecentPosts__title { display: inline-block; } .RecentPosts__list { display: grid; grid-template: auto; gap: var(--site-owl-spacing); } .RecentPosts__item { display: flex; flex-direction: column; max-height: 20rem; } .RecentPosts__excerpt { flex: 1; overflow: hidden; position: relative; } .RecentPosts__excerpt::before { background-image: linear-gradient(to top, #fff, transparent); content: ""; display: block; height: 3rem; position: absolute; bottom: 0; width: 100%; } .RecentPosts__excerpt > p { margin: 0; } .RecentPosts .Button { align-self: flex-end; display: block; width: 100%; } @media all and (min-width: 48em) { .RecentPosts__list { grid-template: auto/repeat(2, 1fr); } .RecentPosts .Button { font-size: 1rem; width: auto; } } @media all and (min-width: 85em) { .RecentPosts__list { grid-template: auto/repeat(3, 1fr); } } .SkipNav { margin: 0; padding: 0; position: absolute; top: 0; transform: translateY(-100vh); } .SkipNav:focus { transform: translateY(0); } .Social__list { display: flex; flex-wrap: wrap; gap: calc(var(--site-owl-spacing) / 2); justify-content: center; } .Social__item { font-size: 2em; } .Social__item--dribbble { background-color: #EA4C89; color: #000; } .Social__item--facebook { background-color: #4172B8; color: #fff; } .Social__item--flickr { background-color: #0063DC; color: #fff; } .Social__item--github { background-color: #181717; color: #fff; } .Social__item--instagram { background-color: #E4405F; color: #fff; } .Social__item--keybase { background-color: #33A0FF; color: #000; } .Social__item--linkedin { background-color: #0077B5; color: #fff; } .Social__item--pinterest { background-color: #BD081C; color: #fff; } .Social__item--telegram { background-color: #2CA5E0; color: #000; } .Social__item--twitter { background-color: #1DA1F2; color: #000; } .Social__item--rss { background-color: #FFA500; color: #000; } .Social__link { color: inherit; display: block; line-height: 1; overflow: hidden; padding: 0.2em; text-decoration: none; z-index: 1; } .Social__link:hover .Icon { transform: scale(1.15) rotate(10deg); } .Social .Icon { transition: all 120ms ease-out; vertical-align: top; } @media all and (min-width: 48em) { .Social { margin-top: 0; } .Social__list { display: grid; grid-template: auto/repeat(5, auto); } .Icon { font-size: 1em; } } figure.highlight { margin-left: 0; margin-right: 0; } /* Adjusted to give override background and text colour */ .highlight pre, pre, .highlight .hll { background-color: #222; border: 1px solid #ccc; border-radius: 3px; color: #fff; overflow: auto; padding: var(--site-owl-spacing); } /* Highlights taken from https://gist.github.com/asaaki/1007420 for Monokai theme */ .highlight .c { color: #75715e; } /* Comment */ .highlight .err { color: #960050; background-color: #1e0010; } /* Error */ .highlight .k { color: #66d9ef; } /* Keyword */ .highlight .l { color: #ae81ff; } /* Literal */ .highlight .n { color: #f8f8f2; } /* Name */ .highlight .o { color: #f92672; } /* Operator */ .highlight .p { color: #f8f8f2; } /* Punctuation */ .highlight .cm { color: #75715e; } /* Comment.Multiline */ .highlight .cp { color: #75715e; } /* Comment.Preproc */ .highlight .c1 { color: #75715e; } /* Comment.Single */ .highlight .cs { color: #75715e; } /* Comment.Special */ .highlight .ge { font-style: italic; } /* Generic.Emph */ .highlight .gs { font-weight: bold; } /* Generic.Strong */ .highlight .kc { color: #66d9ef; } /* Keyword.Constant */ .highlight .kd { color: #66d9ef; } /* Keyword.Declaration */ .highlight .kn { color: #f92672; } /* Keyword.Namespace */ .highlight .kp { color: #66d9ef; } /* Keyword.Pseudo */ .highlight .kr { color: #66d9ef; } /* Keyword.Reserved */ .highlight .kt { color: #66d9ef; } /* Keyword.Type */ .highlight .ld { color: #e6db74; } /* Literal.Date */ .highlight .m { color: #ae81ff; } /* Literal.Number */ .highlight .s { color: #e6db74; } /* Literal.String */ .highlight .na { color: #a6e22e; } /* Name.Attribute */ .highlight .nb { color: #f8f8f2; } /* Name.Builtin */ .highlight .nc { color: #a6e22e; } /* Name.Class */ .highlight .no { color: #66d9ef; } /* Name.Constant */ .highlight .nd { color: #a6e22e; } /* Name.Decorator */ .highlight .ni { color: #f8f8f2; } /* Name.Entity */ .highlight .ne { color: #a6e22e; } /* Name.Exception */ .highlight .nf { color: #a6e22e; } /* Name.Function */ .highlight .nl { color: #f8f8f2; } /* Name.Label */ .highlight .nn { color: #f8f8f2; } /* Name.Namespace */ .highlight .nx { color: #a6e22e; } /* Name.Other */ .highlight .py { color: #f8f8f2; } /* Name.Property */ .highlight .nt { color: #f92672; } /* Name.Tag */ .highlight .nv { color: #f8f8f2; } /* Name.Variable */ .highlight .ow { color: #f92672; } /* Operator.Word */ .highlight .w { color: #f8f8f2; } /* Text.Whitespace */ .highlight .mf { color: #ae81ff; } /* Literal.Number.Float */ .highlight .mh { color: #ae81ff; } /* Literal.Number.Hex */ .highlight .mi { color: #ae81ff; } /* Literal.Number.Integer */ .highlight .mo { color: #ae81ff; } /* Literal.Number.Oct */ .highlight .sb { color: #e6db74; } /* Literal.String.Backtick */ .highlight .sc { color: #e6db74; } /* Literal.String.Char */ .highlight .sd { color: #e6db74; } /* Literal.String.Doc */ .highlight .s2 { color: #e6db74; } /* Literal.String.Double */ .highlight .se { color: #ae81ff; } /* Literal.String.Escape */ .highlight .sh { color: #e6db74; } /* Literal.String.Heredoc */ .highlight .si { color: #e6db74; } /* Literal.String.Interpol */ .highlight .sx { color: #e6db74; } /* Literal.String.Other */ .highlight .sr { color: #e6db74; } /* Literal.String.Regex */ .highlight .s1 { color: #e6db74; } /* Literal.String.Single */ .highlight .ss { color: #e6db74; } /* Literal.String.Symbol */ .highlight .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */ .highlight .vc { color: #f8f8f2; } /* Name.Variable.Class */ .highlight .vg { color: #f8f8f2; } /* Name.Variable.Global */ .highlight .vi { color: #f8f8f2; } /* Name.Variable.Instance */ .highlight .il { color: #ae81ff; } /* Literal.Number.Integer.Long */ html, body { height: 100%; } body { display: flex; flex-direction: column; } .Site__main { flex: 1; } .Container { margin: auto; max-width: var(--site-content-max-width); width: var(--site-container-width); } .Site--post article.Container img { background-color: var(--header-background, #fff); box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); border-radius: 3px; display: block; margin: auto; padding: .25rem; } .Site--post .Hero__title { margin-top: 0; } /*# sourceMappingURL=main.css.map */