Testing hugo

This commit is contained in:
David 2020-11-19 20:49:43 +01:00
commit e3975962fa
327 changed files with 17224 additions and 0 deletions

View file

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2019-present Forestry.io and contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,231 @@
/* PrismJS 1.21.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+git+go+json+json5+jsx+tsx+toml+typescript+yaml&plugins=line-numbers+toolbar+copy-to-clipboard */
/**
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/
code[class*="language-"],
pre[class*="language-"] {
color: #ccc;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #2d2d2d;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
pre[class*="language-"].line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
top: .3em;
right: .2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
/* Separate line b/c rules are thrown out if selector is invalid.
IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar a {
cursor: pointer;
}
div.code-toolbar > .toolbar button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
color: #bbb;
font-size: .8em;
padding: 0 .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
color: inherit;
text-decoration: none;
}

View file

@ -0,0 +1,27 @@
document.getElementById("submitButton").addEventListener("click", addErrorStyles);
document.getElementById("emailInput").addEventListener("keyup", updateStyles);
subscriptionForm = document.getElementById("subscriptionForm");
emailField = document.getElementById("emailInput");
submitted = false;
function addErrorStyles(){
submitted = true;
updateClasses();
}
function updateStyles(){
if (submitted === true){
updateClasses();
}
}
function updateClasses(){
if(emailField.validity.valid){
subscriptionForm.classList.remove("submitted-form");
}
else{
subscriptionForm.classList.add("submitted-form");
emailField.classList.add("submitted-input");
}
}

View file

@ -0,0 +1,22 @@
let collapsed = true;
function displayCoauthors(){
document.getElementById("uncollapsedCoauthors").classList.remove("hidden");
}
function hideCoauthors(){
document.getElementById("uncollapsedCoauthors").classList.add("hidden");
}
function bindCollapseAuthors() {
const collapsedCoauthorsElement = document.getElementById("collapsedCoauthors");
if (collapsedCoauthorsElement === null) {
return;
}
collapsedCoauthorsElement.addEventListener("click", displayCoauthors);
document.getElementById("uncollapsedAction").addEventListener("click", hideCoauthors);
}
bindCollapseAuthors();

View file

@ -0,0 +1,18 @@
document.getElementById("copyButton").addEventListener("click", copyToClipboard);
let currentUrl = window.location;
let copyTextContainer = document.getElementById("copyText");
let toolTip = document.getElementById("toolTip");
function copyToClipboard(){
copyTextContainer.value = currentUrl
copyTextContainer.focus();
copyTextContainer.select();
document.execCommand("copy");
toolTip.style.animationName = "pan-toolbar";
setTimeout(function(){
toolTip.style.removeProperty('animation-name');
}, 2000);
}

View file

@ -0,0 +1,58 @@
let be = document.getElementsByTagName("BODY")[0];
initColors();
function initColors(){
if (localStorage.getItem("isLight") === null) {
localStorage.setItem("isLight", 'true');
}
if (localStorage.getItem("isLight") === 'false'){
makeDark();
}
else{
makeLight();
}
}
function makeDark(){
be.style.setProperty('--primary', "#fff");
be.style.setProperty('--secondary', "#fff");
be.style.setProperty('--grey', "#73737D");
be.style.setProperty('--background-color', "#111216");
be.style.setProperty('--accent', "#E9DAAC");
be.style.setProperty('--hover', "rgba(255, 255, 255, 0.07)");
be.style.setProperty('--gradient', "linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%)");
be.style.setProperty('--articleText', "#fff");
be.style.setProperty('--track', "rgba(255, 255, 255, 0.3)");
be.style.setProperty('--progress', "#fff");
be.style.setProperty('--card', "#1D2128");
be.style.setProperty('--error', "#EE565B");
be.style.setProperty('--success', "#46B17B");
be.style.setProperty('--errorBackground', "rgba(238, 86, 91, 0.1)");
be.style.setProperty('--horizontalRule', "rgba(255, 255, 255, 0.15)");
be.style.setProperty('--inputBackground', "rgba(255, 255, 255, 0.07)");
be.style.setProperty('--tooltip', "#000");
}
function makeLight(){
be.style.setProperty('--primary', "");
be.style.setProperty('--secondary', "");
be.style.setProperty('--grey', "");
be.style.setProperty('--background-color', "");
be.style.setProperty('--accent', "");
be.style.setProperty('--hover', "");
be.style.setProperty('--gradient', "");
be.style.setProperty('--articleText', "");
be.style.setProperty('--track', "");
be.style.setProperty('--progress', "");
be.style.setProperty('--card', "");
be.style.setProperty('--error', "");
be.style.setProperty('--success', "");
be.style.setProperty('--errorBackground', "");
be.style.setProperty('--horizontalRule', "");
be.style.setProperty('--inputBackground', "");
be.style.setProperty('--tooltip', "lightgrey");
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,42 @@
window.addEventListener("scroll", updateProgress);
progressBar = document.getElementById("progressBar");
scrollProgress = document.getElementById("progressIndicator");
if (document.getElementById("subscriptionSection")){
articleSubscription = document.getElementById("subscriptionSection").offsetHeight;
}
else{
articleSubscription = 0;
}
if(document.getElementById("articleNext")){
articleNext = document.getElementById("articleNext").offsetHeight;
}
else{
articleNext = 0;
}
footerSection = 150;
bottomOffset = ((articleSubscription + articleNext + footerSection + 250) / document.body.scrollHeight) * 100 ;
bottomOffset += bottomOffset * 1.1;
function updateProgress(){
let percentScrolled = (window.pageYOffset / document.body.scrollHeight) * (100 + bottomOffset);
scrollProgress.style.transform = "translateY(" + percentScrolled + "%)";
if (percentScrolled > 100){
progressBar.style.animationName = "progress-fade-out";
setTimeout(function(){
progressBar.style.opacity = "0";
}, 500);
}
else{
progressBar.style.animationName = "progress-fade-in";
setTimeout(function(){
progressBar.style.opacity = "1";
}, 500);
}
}

View file

@ -0,0 +1,13 @@
window.addEventListener("resize", adjustListBorder);
let listRemoveWidth = window.matchMedia("(max-width: 1070px)");
let listAddWidth = window.matchMedia("(min-width: 1070px)");
function adjustListBorder(){
if (listRemoveWidth.matches) {
document.getElementById("articlesList").classList.remove("author-alc");
}
else if (listAddWidth.matches) {
document.getElementById("articlesList").classList.add("author-alc");
}
}

View file

@ -0,0 +1,104 @@
document.getElementById("themeColorButton").addEventListener("click", toggleColors);
let bodyElement = document.getElementsByTagName("BODY")[0];
let moonOrSun = document.getElementById("moonOrSun");
let sunRays = document.getElementById("sunRays");
let moonMask = document.getElementById("moonMask");
initAnimation();
function initAnimation(){
if (localStorage.getItem("isLight") === 'true'){
moonMask.style.top = "-8px";
moonMask.style.right = "-5px";
moonOrSun.style.transform = "scale(1)"
sunRays.style.transform = "scale(0.1)"
}
else{
moonMask.style.top = "-25px";
moonMask.style.right = "-15px";
moonOrSun.style.transform = "scale(0.5)"
sunRays.style.transform = "scale(0.6)"
}
}
function toggleColors(){
if (localStorage.getItem("isLight") === 'true'){
makeDark();
moonMask.classList.add("mask-to-sun-animation");
moonOrSun.classList.add("to-sun-animation");
sunRays.classList.add("expand-rays");
setTimeout(function(){
sunRays.classList.remove("expand-rays");
}, 500);
setTimeout(function(){
moonMask.classList.remove("mask-to-sun-animation");
moonOrSun.classList.remove("to-sun-animation");
initAnimation();
}, 400);
localStorage.setItem("isLight", 'false');
}
else{
makeLight();
moonMask.classList.add("mask-to-moon-animation");
moonOrSun.classList.add("to-moon-animation");
sunRays.classList.add("contract-rays");
setTimeout(function(){
sunRays.classList.remove("contract-rays");
}, 500);
setTimeout(function(){
moonMask.classList.remove("mask-to-moon-animation");
moonOrSun.classList.remove("to-moon-animation");
sunRays.classList.remove("contract-rays");
initAnimation();
}, 400);
localStorage.setItem("isLight", 'true');
}
}
function makeDark(){
bodyElement.style.setProperty('--primary', "#fff");
bodyElement.style.setProperty('--secondary', "#fff");
bodyElement.style.setProperty('--grey', "#73737D");
bodyElement.style.setProperty('--background-color', "#111216");
bodyElement.style.setProperty('--accent', "#E9DAAC");
bodyElement.style.setProperty('--hover', "rgba(255, 255, 255, 0.07)");
bodyElement.style.setProperty('--gradient', "linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%)");
bodyElement.style.setProperty('--articleText', "#fff");
bodyElement.style.setProperty('--track', "rgba(255, 255, 255, 0.3)");
bodyElement.style.setProperty('--progress', "#fff");
bodyElement.style.setProperty('--card', "#1D2128");
bodyElement.style.setProperty('--error', "#EE565B");
bodyElement.style.setProperty('--success', "#46B17B");
bodyElement.style.setProperty('--errorBackground', "rgba(238, 86, 91, 0.1)");
bodyElement.style.setProperty('--horizontalRule', "rgba(255, 255, 255, 0.15)");
bodyElement.style.setProperty('--inputBackground', "rgba(255, 255, 255, 0.07)");
bodyElement.style.setProperty('--tooltip', "#000");
}
function makeLight(){
bodyElement.style.setProperty('--primary', "");
bodyElement.style.setProperty('--secondary', "");
bodyElement.style.setProperty('--grey', "");
bodyElement.style.setProperty('--background-color', "");
bodyElement.style.setProperty('--accent', "");
bodyElement.style.setProperty('--hover', "");
bodyElement.style.setProperty('--gradient', "");
bodyElement.style.setProperty('--articleText', "");
bodyElement.style.setProperty('--track', "");
bodyElement.style.setProperty('--progress', "");
bodyElement.style.setProperty('--card', "");
bodyElement.style.setProperty('--error', "");
bodyElement.style.setProperty('--success', "");
bodyElement.style.setProperty('--errorBackground', "");
bodyElement.style.setProperty('--horizontalRule', "");
bodyElement.style.setProperty('--inputBackground', "");
bodyElement.style.setProperty('--tooltip', "lightgrey");
}

View file

@ -0,0 +1,32 @@
document.getElementById("btnGrid").addEventListener("click", makeGrid);
document.getElementById("btnRows").addEventListener("click", makeRows);
window.addEventListener("resize", adjustListAtMobile);
document.getElementById("rows").style.fill = "var(--grey)";
let listRemoveWidth = window.matchMedia("(max-width: 735px)");
let listAddWidth = window.matchMedia("(min-width: 735px)");
let isList = false;
function adjustListAtMobile(){
if (listRemoveWidth.matches) {
document.getElementById("articlesList").classList.remove("articles-list-container-alt");
}
else if (listAddWidth.matches && isList === true) {
document.getElementById("articlesList").classList.add("articles-list-container-alt");
}
}
function makeGrid(){
document.getElementById("articlesList").classList.remove("articles-list-container-alt");
document.getElementById("tiles").style.fill = "var(--primary)";
document.getElementById("rows").style.fill = "var(--grey)";
isList = false;
}
function makeRows(){
document.getElementById("articlesList").classList.add("articles-list-container-alt");
document.getElementById("rows").style.fill = "var(--primary)";
document.getElementById("tiles").style.fill = "var(--grey)";
isList = true;
}

View file

@ -0,0 +1,15 @@
window.addEventListener("resize", toggleLogo);
let lrw = window.matchMedia("(max-width: 735px)");
let law = window.matchMedia("(min-width: 735px)");
function toggleLogo(){
if (lrw.matches) {
document.getElementById("logo-mobile").classList.remove("hidden");
document.getElementById("logo-desktop").classList.add("hidden");
}
else if (law.matches) {
document.getElementById("logo-mobile").classList.add("hidden");
document.getElementById("logo-desktop").classList.remove("hidden");
}
}

View file

@ -0,0 +1,16 @@
a{
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
color: var(--accent);
}
a:visited {
color: var(--accent);
opacity: 0.85;
}
a:hover,
a:focus {
text-decoration: underline;
}

View file

@ -0,0 +1,503 @@
/**************************************ARTICLE HEAD**************************************/
.article-hero{
@media screen and (max-width: $phablet){
&::before {
content: "";
width: 100%;
height: 20px;
background: var(--primary);
position: absolute;
left: 0;
top: 0;
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
}
&::after {
content: "";
width: 100%;
height: 10px;
background: var(--background-color);
position: absolute;
left: 0;
top: 10px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
}
}
}
.article-meta{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/*PHABLET*/
@media screen and (max-width: $phablet){
margin-left: 0;
flex-direction: column;
}
}
.article-header{
position: relative;
z-index: 10;
margin:100px auto 120px;
padding-left: 68px;
max-width: 749px;
@media screen and (max-width: $desktop){
padding-left: 53px;
max-width: calc(507px + 53px);
margin: 100px auto 70px;
}
@media screen and (max-width: $tablet){
padding-left: 0;
margin: 100px auto 70px;
max-width: 480px;
}
@media screen and (max-width: $phablet){
margin: 170px auto 180px;
padding: 0 40px;
}
@media screen and (max-height: 700px) {
margin: 100px auto;
}
}
.article-hero-heading{
font-size: 48px;
font-family: var(--serif);
margin-bottom: 25px;
font-weight: bold;
line-height: 1.32;
@media screen and (max-width: $tablet){
margin-bottom: 20px;
font-size: 36px;
}
@media screen and (max-width: $phablet){
font-size: 32px;
}
}
.article-hero-subtitle{
padding: 10px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 18px;
color: var(--grey);
/*PHABLET*/
@media screen and (max-width: $phablet){
border: 1px solid var(--horizontalRule);
border-radius: 5px;
}
@media screen and(max-width: $phablet){
font-size: 14px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
&.has-coauthors::before{
content: '';
position: absolute;
left: -20px;
right: -20px;
top: -10px;
bottom: -10px;
border: 1px solid var(--horizontalRule);
opacity: 0.5;
border-radius: 5px;
}
strong {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
}
}
.article-hero-image{
position: absolute;
z-index: 1;
width: 100%;
max-width: 944px;
overflow: hidden;
margin: 0 auto;
-webkit-box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.2),
0 18px 36px -18px rgba(0, 0, 0, 0.22);
box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.2),
0 18px 36px -18px rgba(0, 0, 0, 0.22);
img{
width: 100%;
}
/*DESKTOP MEDIUM*/
@media screen and (max-width: $desktop_medium){
position: relative;
}
/*TABLET*/
@media screen and (max-width: $tablet){
max-width: 100%;
}
/*PHABLET*/
@media screen and (max-width: phablet){
margin: 0 auto;
width: calc(100vw - 40px);
height: 220px;
& > div {
height: 220px;
}
}
}
.article-author-link{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: inherit;
&:hover{
text-decoration: none;
}
&:visited{
color: inherit;
}
strong {
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
}
&:hover strong {
color: var(--primary);
}
}
.article-author-avatar{
height: 25px;
width: 25px;
border-radius: 50%;
margin-right: 14px;
background: var(--grey);
overflow: hidden;
img{
width: 100%;
}
.gatsby-image-wrapper > div {
padding-bottom: 100% !important;
}
/*PHABLET*/
@media screen and (max-width: $phablet){
display: none;
}
}
.hide-on-mobile{
/*PHABLET*/
@media screen and (max-width: $phablet){
display: none;
}
}
.article-coauthors-container{
margin-right: 10px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 18px;
color: var(--grey);
cursor: pointer;
&::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -16px;
bottom: -16px;
background: var(--card);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
border-radius: 5px;
z-index: 0;
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
cursor: pointer;
opacity: 0;
}
&:hover::before {
opacity: 1;
}
/*PHABLET*/
@media screen and (max-width: $phablet){
font-size: 14px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
&::before {
-webkit-box-shadow: none;
box-shadow: none;
bottom: -30px;
background: transparent;
}
strong {
display: block;
font-weight: semi-bold;
margin-bottom: 5px;
}
}
}
.article-coauthors-collapsed{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.article-coauthors-list{
position: relative;
height: 25px;
margin-right: 15px;
margin-left: 15px;
/*PHABLET*/
@media screen and (max-width: $phablet){
display: none;
}
}
.article-coauthors-avatar{
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
z-index: 1;
background: var(--grey);
-webkit-box-shadow: 0 0 0 2px var(--background-color);
box-shadow: 0 0 0 2px var(--background-color);
-webkit-transition: -webkit-box-shadow 0.25s ease;
transition: -webkit-box-shadow 0.25s ease;
-o-transition: box-shadow 0.25s ease;
transition: box-shadow 0.25s ease;
transition: box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease;
overflow: hidden;
pointer-events: none;
img{
width: 100%;
}
/*PHABLET*/
@media screen and (max-width: $phablet){
display: none;
}
}
.article-coauthors-name-container{
position: relative;
max-width: 260px;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
font-weight: 600;
cursor: pointer;
/*DESKTOP*/
@media screen and (max-width: $desktop){
max-width: 120px;
}
/*PHABLET*/
@media screen and (max-width: $phablet){
max-width: 200px;
}
}
.article-coauthors-icon-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
cursor: pointer;
margin-left: 10px;
margin-right: 10px;
/*PHABLET*/
@media screen and (max-width: $phablet){
position: absolute;
right: 0;
bottom: 0;
top: 10px;
height: 100%;
}
}
.article-coauthors-list-open{
position: absolute;
z-index: 2;
left: -21px;
right: -21px;
top: -19px;
padding: 21px;
background: var(--card);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
border-radius: 5px;
cursor: pointer;
list-style-type: none;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
li::before{
display: none;
}
}
.article-icon-open-container{
position: absolute;
cursor: pointer;
top: 25px;
right: 10px;
}
.article-coauthors-list-item-open{
padding: 0;
a {
width: 100%;
}
&:not(:last-child) {
margin-bottom: 10px;
}
}
.article-coauthor-avatar-open{
height: 25px;
width: 25px;
border-radius: 50%;
margin-right: 15px;
background: var(--grey);
overflow: hidden;
pointer-events: none;
img{
width: 100%;
}
.gatsby-image-wrapper > div {
padding-bottom: 100% !important;
overflow: hidden;
}
}
.article-author-name-open{
position: relative;
cursor: pointer;
color: var(--secondary);
font-weight: 600;
}
/**************************************ARTICLE BODY**************************************/
.post-content{
padding: 160px 0 35px;
}
/**************************************ARTICLE NEXT**************************************/
.footer-next-heading{
display: block;
font-size: 1.6rem;
position: relative;
opacity: 0.25;
margin-left: 0;
margin-right: 0;
margin-bottom: 100px;
min-width: 100%;
font-weight: 400;
color: var(--primary);
/*TABLET*/
@media screen and (max-width: $tablet){
margin-bottom: 60px;
}
&::after {
content: '';
position: absolute;
background: var(--grey);
width: 62%;
max-width: 100%;
height: 1px;
right: 0;
top: 50%;
/*TABLET*/
@media screen and (max-width: $tablet){
width: 41.7%;
}
/*PHABLET*/
@media screen and (max-width: $phablet){
width: 27.8%;
}
/*PHONE*/
@media screen and (max-width: $phone){
width: 90px;
}
}
}
.footer-spacer{
margin-bottom: 65px;
}

View file

@ -0,0 +1,624 @@
/****************************************HEADER****************************************/
.subheading-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 100px;
/*DESKTOP*/
@media screen and (max-width: $desktop){
margin-bottom: 80px;
}
/*TABLET*/
@media screen and (max-width: $tablet){
margin-bottom: 60px;
}
/*PHABLET*/
@media screen and (max-width: $phablet){
display: none;
}
}
.grid-controls-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/*TABLET*/
@media screen and (max-width: $tablet){
display: none !important;
}
}
.heading-container{
margin: 100px 0;
/*DESKTOP*/
@media screen and (max-width: $desktop){
width: 80%;
}
/*TABLET*/
@media screen and (max-width: $tablet){
width: 100%;
}
}
.hero-heading{
font-style: normal;
font-weight: 600;
font-size: 52px;
font-family: var(--sanserif);
line-height: 1.15;
color: var(--primary);
margin: 0;
/*DESKTOP*/
@media screen and (max-width: $desktop){
font-size: 38px
}
/*PHABLET*/
@media screen and (max-width: $phablet){
font-size: 32px;
}
}
.grid-button{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 36px;
width: 36px;
border-radius: 50%;
background: transparent;
-webkit-transition: background 0.25s;
-o-transition: background 0.25s;
transition: background 0.25s;
&:not(:last-child) {
margin-right: 30px;
}
&:hover {
background: var(--hover);
}
&[data-a11y="true"]:focus::after {
content: "";
position: absolute;
left: -10%;
top: -10%;
width: 120%;
height: 120%;
border: 2px solid var(--accent);
background: rgba(255, 255, 255, 0.01);
border-radius: 50%;
}
svg {
-webkit-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
path {
fill: var(--primary);
}
}
}
/****************************************LIST****************************************/
/*LIMIT TO TWO LINES*/
.limit-to-two-lines, .articles-title, .article-excerpt{
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow-wrap: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
white-space: normal;
overflow: hidden;
/*PHABLET*/
@media screen and (max-width: $phablet){
-webkit-line-clamp: 3;
}
}
/*SHOW DETAILS*/
.show-details{
p {
display: -webkit-box;
}
h2 {
margin-bottom: 10px;
}
}
.articles-list-container{
-webkit-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.author-alc{
background-image: -webkit-gradient(linear, left top, left bottom, from(var(--card)), to(var(--background-color)));
background-image: -o-linear-gradient(var(--card), var(--background-color));
background-image: linear-gradient(var(--card), var(--background-color));
padding-top: 90px;
.post-row-alt{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
.article-link{
max-width: 40%!important;
margin: 15px;
}
}
}
/*LIST TITLE*/
.list-title{
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns:
'457px 1fr';
grid-template-columns:
'457px 1fr';
-ms-grid-rows: 2;
grid-template-rows: 2;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
&:not(:last-child) {
margin-bottom: 75px;
}
/*DESKTOP MEDIUM*/
@media screen and (max-width: $desktop_medium){
grid-template-columns: 1fr 1fr;
}
/*TABLET*/
@media screen and (max-width: $tablet){
grid-template-columns: 1fr;
&:not(:last-child) {
margin-bottom: 0;
}
}
}
.list-title > *:nth-child(1){
-ms-grid-row: 1;
-ms-grid-column: 1
}
.list-title-alt{
-ms-grid-columns:
'457px 1fr';
grid-template-columns:
'457px 1fr';
}
.list-item-row{
display: -ms-grid;
display: grid;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
-ms-grid-columns: 1fr 96px 488px;
grid-template-columns: 1fr 488px;
grid-column-gap: 96px;
-ms-grid-rows: 1;
grid-template-rows: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
margin-bottom: 50px;
/*DESKTOP*/
@media screen and (max-width: $desktop){
grid-column-gap: 24px;
grid-template-columns: 1fr 380px;
}
/*TABLET*/
@media screen and (max-width: $tablet){
grid-template-columns: 1fr;
}
@media (max-width: 540px) {
background: var(--card);
}
/*PHABLET*/
@media screen and (max-width: $phablet){
-webkit-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
}.list-item-row > *:nth-child(1){
-ms-grid-row: 1;
-ms-grid-column: 1;
}.list-item-row > *:nth-child(2){
-ms-grid-row: 1;
}
.list-item-tile{
position: relative;
/*TABLET*/
@media screen and (max-width: $tablet){
margin-bottom: 60px;
}
@media (max-width: 540px) {
background: var(--card);
}
/*PHABLET*/
@media screen and (max-width: $phablet){
margin-bottom: 40px;
-webkit-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
}
.list-row{
display: -ms-grid;
display: grid;
-ms-grid-rows: "1fr 1fr";
grid-template-rows: "1fr 1fr";
}
.list-row-alt{
-ms-grid-rows: "1fr";
grid-template-rows: "1fr";
}
.image-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
position: relative;
height: 280px;
-webkit-box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.22),
0 18px 36px -18px rgba(0, 0, 0, 0.25);
box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.22),
0 18px 36px -18px rgba(0, 0, 0, 0.25);
margin-bottom: 30px;
-webkit-transition: -webkit-transform 0.3s var(--ease-out-quad),
-webkit-box-shadow 0.3s var(--ease-out-quad);
transition: -webkit-transform 0.3s var(--ease-out-quad),
-webkit-box-shadow 0.3s var(--ease-out-quad);
-o-transition: transform 0.3s var(--ease-out-quad),
box-shadow 0.3s var(--ease-out-quad);
transition: transform 0.3s var(--ease-out-quad),
box-shadow 0.3s var(--ease-out-quad);
transition: transform 0.3s var(--ease-out-quad),
box-shadow 0.3s var(--ease-out-quad),
-webkit-transform 0.3s var(--ease-out-quad),
-webkit-box-shadow 0.3s var(--ease-out-quad);
& > div {
height: 100%;
}
/*TABLET*/
@media screen and (max-width: $tablet){
height: 200px;
margin-bottom: 35px;
}
/*PHABLET*/
@media screen and (max-width: $phablet){
overflow: hidden;
margin-bottom: 0;
-webkit-box-shadow: none;
box-shadow: none;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
}
.article-image{
-ms-flex-negative: 0;
flex-shrink: 0;
max-width: 100%;
min-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.article-title{
font-size: 21px;
font-family: var(--serif);
margin-bottom: 35px;
-webkit-transition: color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
/*DESKTOP*/
@media screen and (max-width: $desktop){
margin-bottom: 15px;
}
/*TABLET*/
@media screen and (max-width: $tablet){
font-size: 24px;
}
/*PHABLET*/
@media screen and (max-width: $phablet){
font-size: 22px;
padding: 0 20px 0;
margin-bottom: 10px;
-webkit-line-clamp: 3;
}
}
.article-excerpt{
font-size: 16px;
margin-left: 0;
margin-right: 0;
margin-bottom: 10px;
color: var(--grey);
display: none;
/*DESKTOP*/
@media screen and (max-width: $desktop){
display: -webkit-box;
}
/*PHABLET*/
@media screem and (max-width: $phablet){
margin-bottom: 15px;
max-width: 100%;
padding: 0 20px;
margin-bottom: 20px;
-webkit-line-clamp: 3;
}
}
.article-metadata{
font-weight: 600;
font-size: 16px;
color: var(--grey);
opacity: 0.33;
/*PHABLET*/
@media screen and (max-width: $phablet){
max-width: 100%;
padding: 0 20px 30px;
}
}
.post-row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
margin-bottom: 100px;
/*TABLET*/
@media screen and (max-width: $tablet){
margin: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.post-row-alt{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
margin-bottom: 100px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.article-link{
margin-top: 75px;
max-width: 48.3%;
/*TABLET*/
@media screen and (max-width: $tablet){
max-width: 100%;
}
}
}
.article-link{
max-width: 39.5%;
position: relative;
display: block;
width: 100%;
top: 0;
left: 0;
border-radius: 5px;
z-index: 1;
-webkit-transition: -webkit-transform 0.33s var(--ease-out-quart);
transition: -webkit-transform 0.33s var(--ease-out-quart);
-o-transition: transform 0.33s var(--ease-out-quart);
transition: transform 0.33s var(--ease-out-quart);
transition: transform 0.33s var(--ease-out-quart), -webkit-transform 0.33s var(--ease-out-quart);
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
&:hover{
text-decoration: none;
}
&:hover .image-container, &:focus .image-container {
-webkit-transform: translateY(-1px);
-ms-transform: translateY(-1px);
transform: translateY(-1px);
-webkit-box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.27),
0 30px 50px -30px rgba(0, 0, 0, 0.3);
box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.27),
0 30px 50px -30px rgba(0, 0, 0, 0.3);
}
&:hover h2,
&:focus h2 {
color: var(--accent);
}
&[data-a11y="true"]:focus::after {
content: "";
position: absolute;
left: -1.5%;
top: -2%;
width: 103%;
height: 104%;
border: 3px solid var(--accent);
background: rgba(255, 255, 255, 0.01);
border-radius: 5px;
}
/*DESKTOP MEDIUM*/
@media screen and (max-width: $desktop_medium){
max-width: 48.5%;
}
/*TABLET*/
@media screen and (max-width: $tablet){
min-width: 80% !important;
display: block;
margin-bottom: 60px;
p{
padding: 0;
}
}
/*PHABLET*/
@media screen and (max-width: $phablet){
min-width: 100% !important;
margin-bottom: 40px;
-webkit-box-shadow: 0px 20px 40px rgba(0,0,0,0.2);
box-shadow: 0px 20px 40px rgba(0,0,0,0.2);
&:hover .image-container {
-webkit-transform: none;
-ms-transform: none;
transform: none;
-webkit-box-shadow: initial;
box-shadow: initial;
}
&:active {
-webkit-transform: scale(0.97) translateY(3px);
-ms-transform: scale(0.97) translateY(3px);
transform: scale(0.97) translateY(3px);
}
p{
padding: 0 20px 0;
}
}
}
#article-link-bigger{
max-width: 58.5% !important;
/*DESKTOP MEDIUM*/
@media screen and (max-width: $desktop_medium){
max-width: 48.5% !important;
}
}
.articles-list-container-alt{
.post-row{
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important;
margin-bottom: 0;
.article-link{
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
min-width: 100% !important;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: none;
flex-wrap: none;
.article-data-outer{
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
min-width: 100% !important;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: none;
flex-wrap: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
.image-container{
max-width: 46%;
}
.article-data{
width: 46%;
}
}
}
}
}

View file

@ -0,0 +1,108 @@
/****************************HERO****************************/
.author-hero{
position: relative;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 35px auto 110px;
}
.author-hero-image{
position: relative;
z-index: 1;
height: 164px;
width: 164px;
margin-bottom: 35px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(background-color);
-webkit-box-shadow: 0px 15.619px 31.2381px rgba(0, 0, 0, 0.15);
box-shadow: 0px 15.619px 31.2381px rgba(0, 0, 0, 0.15);
border: 2px solid var(--card);
img{
width: 100%;
}
/*TABLET*/
@media screen and (max-width: $tablet){
width: 146px;
height: 146px;
}
/*PHABLET*/
@media screen and (max-width: $phablet){
width: 136px;
height: 136px;
margin-bottom: 25px;
}
}
.author-heading{
font-size: 38px;
font-family: var(--sanserif);
color: var(--primary);
margin-bottom: 15px;
font-weight: 600;
text-align: center;
}
.author-subheading{
margin: 0 auto;
max-width: 450px;
color: var(--grey);
font-size: 18px;
font-family: var(--sanserif);
line-height: 1.4;
text-align: center;
/*PHABLET*/
@media screen and (max-width: $phablet){
font-size: 14px;
}
}
.author-social{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 35px;
width: 100%;
/*PHABLET*/
@media screen and (max-width: $phablet){
font-size: 14px;
}
}
/****************************CONTENT****************************/
.authors-gradient{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 590px;
z-index: 0;
pointer-events: none;
background: var(--gradient);
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
}

View file

@ -0,0 +1,76 @@
.bio-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
left: -10px;
}
.bio-link{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
&:hover{
text-decoration: none;
}
}
.bio-avatar{
display: block;
position: relative;
height: 40px;
width: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.25);
margin-right: 16px;
margin: 10px 26px 10px 10px;
}
.bio-avatar::after {
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.25);
}
.bio-avatar[data-a11y="true"]:focus::after {
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 50px;
height: 50px;
border: 2px solid var(--accent);
}
.bio-avatar-inner{
height: 40px;
width: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.25);
margin-right: 16px;
overflow: hidden;
}
.bio-text{
margin-bottom: 0;
max-width: 430px;
font-size: 14px;
line-height: 1.45;
color: var(--grey);
}
.author-avatar{
width: 100%;
}

View file

@ -0,0 +1,36 @@
blockquote{
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
margin: 15px auto 50px;
color: var(--articleText);
font-family: var(--serif);
font-style: italic;
}
blockquote > p {
font-family: var(--serif);
max-width: 880px !important;
padding-right: 100px;
padding-bottom: 0;
width: 100%;
margin: 0 auto;
font-size: 36px;
line-height: 1.32;
font-weight: bold;
}
@media screen and (max-width: 735px) {
blockquote{
margin: 10px auto 35px;
font-size: 26px;
padding: 0 180px;
}
}
@media screen and (max-width: 540px) {
blockquote{
font-size: 36px;
padding: 0 20px 0 40px;
}
}

View file

@ -0,0 +1,25 @@
.code-toolbar{
max-width: 750px;
margin: 0 auto 35px;
overflow: auto;
font-size: 12px;
pre{
padding-top: 2.5em !important;
padding-bottom: 2.5em !important;
padding-left: 5em !important;
padding-right: 5em !important;
border-radius: 5px !important;
background-color: #292c34 !important;
code{
color: white;
}
}
.toolbar-item{
position: absolute;
top: 1em;
right: 1em;
}
}

View file

@ -0,0 +1,227 @@
@import "vars.scss";
@import "anchor.scss";
@import "bio.scss";
@import "blockquote.scss";
@import "headings.scss";
@import "horizontal-rule.scss";
@import "image.scss";
@import "layout.scss";
@import "lists.scss";
@import "logo.scss";
@import "navigation.scss";
@import "paragraph.scss";
@import "progress.scss";
@import "social-links.scss";
@import "subscription.scss";
@import "tables.scss";
@import "section.scss";
@import "articles.scss";
@import "home-articles.scss";
@import "code.scss";
@import "article.scss";
@import "authors.scss";
@import "paginator.scss";
/**
* Thanks to Benjamin De Cock
* https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d
*/
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
}
@font-face {
font-family: "-apple-system", "BlinkMacSystemFont", "San Francisco",
"Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI",
"Arial", sans-serif;
font-weight: 400;
font-style: normal;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
margin: 0;
padding: 0;
font-size: inherit;
}
:root {
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
cursor: default;
font-size: 0.625rem;
line-height: 1.4;
}
body {
font-family: "-apple-system", "BlinkMacSystemFont", "San Francisco",
"Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI",
"Arial", sans-serif;
font-size: 1.6rem;
margin: 0;
font-weight: 400;
height: 100%;
}
button,
a {
text-decoration: none;
cursor: pointer;
}
a:focus {
outline: none;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
input,
textarea,
select,
button {
font-family: "-apple-system", "BlinkMacSystemFont", "San Francisco",
"Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI",
"Arial", sans-serif;
}
.underline {
text-decoration: underline;
}
button,
input,
select,
textarea {
color: inherit;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
}
code,
kbd,
pre,
samp {
font-family: monospace;
}
fieldset,
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
background: transparent;
}
table {
border-collapse: separate;
border-spacing: 0;
}
audio:not([controls]) {
display: none;
}
details {
display: block;
}
input {
&:focus,
&:active {
outline: none;
}
&[type="number"] {
width: auto;
}
}
img.Image__Zoom ~ div {
background: transparent !important;
}
.Image__Small{
width: 100%;
max-width: 680px;
margin-left: auto;
margin-right: auto;
margin-bottom: 35px;
img{
width: 100%;
}
}
.Image__medium{
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 35px;
img{
width: 100%;
}
}
.Image__large{
width: 100%;
margin-bottom: 35px;
img{
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
}
.author-alc-section{
padding-left: 0;
padding-right: 0;
}
.icon-image{
path{
fill: var(--primary);
}
}
img{
max-width: 100%;
-webkit-animation-name: image-load-in;
animation-name: image-load-in;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
}
@-webkit-keyframes image-load-in {
0% {-webkit-filter: blur(8px);filter: blur(8px); opacity: 0;}
100% {-webkit-filter: blur(0);filter: blur(0); opacity: 1;}
}
@keyframes image-load-in {
0% {-webkit-filter: blur(8px);filter: blur(8px); opacity: 0;}
100% {-webkit-filter: blur(0);filter: blur(0); opacity: 1;}
}

View file

@ -0,0 +1,91 @@
h1, h2, h3, h4, h5, h6{
margin: 0 auto;
font-weight: bold;
color: var(--primary);
font-family: var(--serif);
width: 100%;
max-width: 680px;
}
h1, h1 *, h2, h2 * {
margin: 25px auto 18px;
}
h3, h3 * {
margin: 20px auto 10px;
}
h1{
font-size: 52px;
line-height: 1.15;
}
h2{
font-size: 32px;
line-height: 1.333;
}
h3{
font-size: 24px;
line-height: 1.45;
}
h4{
font-size: 18px;
line-height: 1.45;
}
h5{
font-size: 18px;
line-height: 1.45;
}
h6{
font-size: 16px;
line-height: 1.45;
}
@media screen and (max-width: 1070px){
h1{
font-size: 38px;
line-height: 1.2;
}
h2{
font-size: 21px;
}
}
@media screen and (max-width: 737px){
h1, h2{
margin: 30px auto 18px;
}
h2{
font-size: 24px;
line-height: 1.45;
}
h3{
font-size: 22px;
}
}
@media screen and (max-width: 540px){
h1{
font-size: 32px;
line-height: 1.3;
}
h2{
font-size: 22px;
}
h3{
font-size: 20px;
}
h4{
font-size: 16px;
}
h5{
font-size: 16px;
}
h6{
font-size: 14px;
}
}

View file

@ -0,0 +1,17 @@
.articles-gradient{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 590px;
z-index: 0;
pointer-events: none;
background: var(--gradient);
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
}
.articles-paginator{
margin-top: 95px;
}

View file

@ -0,0 +1,32 @@
hr{
position: relative;
width: 100%;
max-width: 680px;
margin: 50px auto;
border: 0;
height: 14.36px;
background-repeat: repeat-x;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-position: center;
}
@media screen and (max-width: 1070px){
hr{
max-width: 507px;
}
}
@media screen and (max-width: 735px){
hr{
max-width: 486px;
width: calc(100vw - 40px);
margin: 0px auto 50px;
}
}
@media screen and (max-width: 340px){
hr{
padding: 0 20px;
}
}

View file

@ -0,0 +1,29 @@
.image-placeholder{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
background: #ccc;
color: #898989;
font-size: 32px;
font-weight: 600;
}
.image-zoom{
display: block;
margin: 0 auto;
width: 100%;
}
@media screen and (max-width: 540px){
.image-placeholder{
font-size: 28px;
}
}

View file

@ -0,0 +1,8 @@
.layout-styled{
position: relative;
background: var(--background-color);
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
min-height: 100vh;
}

View file

@ -0,0 +1,169 @@
ul{
list-style: none;
counter-reset: list;
color: var(--articleText);
position: relative;
padding: 15px 0 30px 30px;
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
margin: 0 auto;
font-size: 18px;
width: 100%;
max-width: 680px;
}
/*DESKTOP*/
@media screen and (max-width: 1070px){
ul{
max-width: 507px;
}
}
/*TABLET*/
@media screen and (max-width: 735px){
ul{
max-width: 486px;
padding-left: 0px;
}
}
/*PHABLET*/
@media screen and (max-width: 540px){
ul{
padding-left: 20px;
}
}
li{
position: relative;
padding-bottom: 15px;
}
/*TABLET*/
@media screen and (max-width: 735px){
ul li{
padding-left: 30px;
}
ul li p{
padding: 0;
}
}
/*PHABLET*/
@media screen and (max-width: 540px){
ul li{
padding-left: 30px;
}
}
ul li > *{
display: inline;
}
ul li::before{
width: 3rem;
display: inline-block;
position: absolute;
color: var(--articleText);
content: "";
position: absolute;
left: -30px;
top: 8px;
height: 8px;
width: 8px;
background: var(--articleText);
}
/*TABLET*/
@media screen and (max-width: 735px){
ul li::before{
left: 0;
}
}
ol{
list-style: none;
counter-reset: list;
color: var(--articleText);
position: relative;
padding: 15px 0 30px 30px;
margin: 0 auto;
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
font-size: 18px;
width: 100%;
max-width: 680px;
}
/*DESKTOP*/
@media screen and (max-width: 1070px){
ol{
max-width: 507px;
}
}
/*TABLET*/
@media screen and (max-width: 735px){
ol{
max-width: 486px;
padding-left: 0px;
}
}
/*PHABLET*/
@media screen and (max-width: 540px){
ol{
padding-left: 20px;
}
}
ol li{
position: relative;
padding-bottom: 15px;
}
/*TABLET*/
@media screen and (max-width: 735px){
ol li{
padding-left: 30px;
padding: 0;
}
ol li p{
padding-left: 30px;
}
}
/*PHABLET*/
@media screen and (max-width: 540px){
ol li{
padding-left: 30px;
}
}
ol li > *{
display: inline;
}
ol li::before {
width: 3rem;
display: inline-block;
position: absolute;
color: var(--articleText);
counter-increment: list;
content: counter(list) ".";
font-weight: 600;
position: absolute;
left: -3rem;
top: -0.3rem;
font-size: 2rem;
}
@media screen and (max-width: 735px){
ol li::before{
left: 0;
}
}

View file

@ -0,0 +1,20 @@
#logo-desktop{
.change-fill{
fill: var(--primary);
}
}
#logo-mobile{
path{
fill: var(--primary);
}
}
@media screen and (max-width: 735px){
.Logo__Desktop {
display: none;
}
.Logo__Mobile{
display: block;
}
}

View file

@ -0,0 +1,524 @@
/************************FOOTER************************/
.footer-container{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 80px;
color: var(--grey);
}
/*TABLET*/
@media screen and (max-width: 735px){
.footer-container{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 100px;
}
}
/*PHABLET*/
@media screen and (max-width: 540px){
.footer-container{
padding-bottom: 50px;
}
}
.footer-hr{
position: relative;
margin: 140px auto 50px;
border-bottom: 1px solid var(--horizontalRule);
}
/*TABLET*/
@media screen and (max-width: 735px){
.footer-hr{
margin: 60px auto;
}
.footer-text{
margin-bottom: 80px;
}
}
/*PHABLET*/
@media screen and (max-width: 540px){
.footer-hr{
display: none;
}
.footer-text{
margin: 120px auto 100px;
}
}
.footer-gradient{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 590px;
z-index: 0;
pointer-events: none;
background: var(--gradient);
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
mix-blend-mode: lighten;
}
/************************HEADER************************/
.back-arrow-ico-container{
-webkit-transition: 0.2s -webkit-transform var(--ease-out-quad);
transition: 0.2s -webkit-transform var(--ease-out-quad);
-o-transition: 0.2s transform var(--ease-out-quad);
transition: 0.2s transform var(--ease-out-quad);
transition: 0.2s transform var(--ease-out-quad), 0.2s -webkit-transform var(--ease-out-quad);
opacity: 0;
padding-right: 30px;
-webkit-animation: fadein 0.3s linear forwards;
animation: fadein 0.3s linear forwards;
}
@-webkit-keyframes fadein {
to {
opacity: 1;
}
}
@keyframes fadein {
to {
opacity: 1;
}
}
/*DESKTOP MEDIUM*/
@media screen and (max-width: 1280px){
.back-arrow-ico-container{
display: none;
}
}
.nav-container{
position: relative;
z-index: 100;
padding-top: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media screen and (max-height: 800px) {
.nav-container{
padding-top: 50px;
}
}
/*DESKTOP MEDIUM*/
@media screen and (max-width: 1280px){
.nav-container{
padding-top: 50px;
}
}
.logo-link{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.logo-link[class*="data-ally"]:focus::after {
content: "";
position: absolute;
left: -10%;
top: -30%;
width: 120%;
height: 160%;
border: 2px solid var(--accent);
background: rgba(255, 255, 255, 0.01);
border-radius: 5px;
}
.logo-link[class*="back-arrow-ico-container"]{
-webkit-transform: translateX(-3px);
-ms-transform: translateX(-3px);
transform: translateX(-3px);
}
.logo-link:hover{
text-decoration: none;
}
/*DESKTOP MEDIUM*/
@media screen and (max-width: 1280px){
.logo-link{
left: 0
}
}
.nav-controls{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/*PHABLET*/
@media screen and (max-width: 540px){
.nav-controls{
right: -5px;
}
}
.tool-tip{
opacity: 0;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
position: absolute;
padding: 4px 13px;
border-radius: 5px;
font-size: 14px;
top: -35px;
color: var(--primary);
background-color: var(--tooltip);
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes pan-toolbar {
0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
}
@keyframes pan-toolbar {
0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
}
.icon-wrapper{
opacity: 0.5;
position: relative;
border-radius: 5px;
width: 40px;
height: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
margin-left: 30px;
}
.icon-wrapper:hover{
opacity: 1;
}
.icon-wrapper[class*="data-ally"]:focus::after {
content: "";
position: absolute;
left: 0;
top: -30%;
width: 100%;
height: 160%;
border: 2px solid var(--accent);
background: rgba(255, 255, 255, 0.01);
border-radius: 5px;
}
/*TABLET*/
@media screen and (max-width: 735px){
.icon-wrapper{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-transform: scale(0.708);
-ms-transform: scale(0.708);
transform: scale(0.708);
margin-left: 10px;
}
.icon-wrapper:hover{
opacity: 0.5;
}
}
.sun-rays{
position: relative;
right: -16px;
width: 9px;
height: 9px;
border-radius: 50%;
border: 2px solid
var(--primary);
background: var(--primary);
-webkit-transform: 1;
-ms-transform: 1;
transform: 1;
-webkit-transition: all 0.45s ease;
-o-transition: all 0.45s ease;
transition: all 0.45s ease;
overflow: hidden;
-webkit-box-shadow: 0 -23px 0 var(--primary),
0 23px 0 var(--primary),
23px 0 0 var(--primary),
-23px 0 0 var(--primary),
15px 15px 0 var(--primary),
-15px 15px 0 var(--primary),
15px -15px 0 var(--primary),
-15px -15px 0 var(--primary);
box-shadow: 0 -23px 0 var(--primary),
0 23px 0 var(--primary),
23px 0 0 var(--primary),
-23px 0 0 var(--primary),
15px 15px 0 var(--primary),
-15px 15px 0 var(--primary),
15px -15px 0 var(--primary),
-15px -15px 0 var(--primary);
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
.moon-or-sun{
position: relative;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid
var(--primary);
background: var(--primary);
-webkit-transform: 1;
-ms-transform: 1;
transform: 1;
-webkit-transition: all 0.45s ease;
-o-transition: all 0.45s ease;
transition: all 0.45s ease;
overflow: hidden;
}
.moon-mask{
position: absolute;
right: -1px;
top: -8px;
height: 24px;
width: 24px;
border-radius: 50%;
border: 0;
background: var(--background-color);
-webkit-transform: translate("0, 0");
-ms-transform: translate("0, 0");
transform: translate("0, 0");
opacity: 1;
-webkit-transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
-o-transition: transform 0.45s ease, var(--color-mode-transition);
transition: transform 0.45s ease, var(--color-mode-transition);
transition: transform 0.45s ease, var(--color-mode-transition), -webkit-transform 0.45s ease;
}
.mask-to-sun-animation{
-webkit-animation-name: mask-to-sun;
animation-name: mask-to-sun;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.mask-to-moon-animation{
-webkit-animation-name: mask-to-moon;
animation-name: mask-to-moon;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.to-sun-animation{
-webkit-animation-name: to-sun;
animation-name: to-sun;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.to-moon-animation{
-webkit-animation-name: to-moon;
animation-name: to-moon;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.expand-rays{
-webkit-animation-name: expand-rays;
animation-name: expand-rays;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.contract-rays{
-webkit-animation-name: contract-rays;
animation-name: contract-rays;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
@-webkit-keyframes mask-to-sun {
from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
}
@keyframes mask-to-sun {
from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
}
@-webkit-keyframes mask-to-moon {
from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
}
@keyframes mask-to-moon {
from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
}
@-webkit-keyframes to-sun {
from {-webkit-transform: scale(1);transform: scale(1);}
to {-webkit-transform: scale(0.5);transform: scale(0.5);}
}
@keyframes to-sun {
from {-webkit-transform: scale(1);transform: scale(1);}
to {-webkit-transform: scale(0.5);transform: scale(0.5);}
}
@-webkit-keyframes to-moon {
from {-webkit-transform: scale(0.5);transform: scale(0.5);}
to {-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes to-moon {
from {-webkit-transform: scale(0.5);transform: scale(0.5);}
to {-webkit-transform: scale(1);transform: scale(1);}
}
@-webkit-keyframes expand-rays {
from {-webkit-transform: scale(0.1);transform: scale(0.1);}
to {-webkit-transform: scale(0.6);transform: scale(0.6);}
}
@keyframes expand-rays {
from {-webkit-transform: scale(0.1);transform: scale(0.1);}
to {-webkit-transform: scale(0.6);transform: scale(0.6);}
}
@-webkit-keyframes contract-rays {
from {-webkit-transform: scale(0.6);transform: scale(0.6);}
to {-webkit-transform: scale(0.1);transform: scale(0.1);}
}
@keyframes contract-rays {
from {-webkit-transform: scale(0.6);transform: scale(0.6);}
to {-webkit-transform: scale(0.1);transform: scale(0.1);}
}
.header-hidden{
position: absolute;
display: inline-block;
opacity: 0;
width: 0px;
height: 0px;
visibility: hidden;
overflow: hidden;
}
/************************HEADER************************/
.page-button{
font-weight: 600;
font-size: 18px;
text-decoration: none;
color: var(--primary);
}
.page-button:hover, .page-button:focus{
opacity: 1;
text-decoration: underline;
}
.page-number-button{
font-weight: 400;
font-size: 18px;
text-decoration: none;
color: var(--primary);
}
.page-number-button:hover, .page-number-button:focus{
text-decoration: underline;
}
.spacer{
opacity: 0.3;
}
.spacer::before{
content: "...";
}
.mobiler-reference{
font-weight: 400;
color: var(--primary);
}
.mobile-reference em{
font-style: normal;
color: var(--primary);
}
.frame{
position: relative;
z-index: 1;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/*TABLET*/
@media screen and (max-width: 735px){
.frame{
left: -15px;
}
}

View file

@ -0,0 +1,48 @@
.pagination{
z-index: 100;
margin: 0;
margin-top: 95px;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
&:hover{
cursor: pointer;
}
a:hover{
color: var(--primary);
}
.page-item{
display: block;
width: auto;
height: auto;
padding: 0;
.page-link{
display: block;
color: var(--grey);
min-width: 6rem;
}
.page-next, .page-prev{
color: var(--primary);
}
&::before{
display: none;
}
}
.active{
.page-link{
color: var(--primary);
}
}
}

View file

@ -0,0 +1,38 @@
p{
line-height: 1.756;
font-size: 18px;
color: var(--articleText);
font-family: var(--sanserif);
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
margin: 0 auto 35px;
width: 100%;
max-width: 680px;
}
p b {
font-weight: 800;
}
/*DESKTOP*/
@media screen and (max-width: 1070px){
p{
max-width: 507px;
}
}
/*TABLET*/
@media screen and (max-width: 735px){
p{
max-width: 486px;
margin: 0 auto 25px;
}
}
/*PHABLET*/
@media screen and (max-width: 540px){
p{
padding: 0 20px;
}
}

View file

@ -0,0 +1,111 @@
/*************************ASIDE*************************/
.aside-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
max-width: 1140px;
z-index: 0;
position: -webkit-sticky;
position: sticky;
top: 30%;
-webkit-animation-name: progress-fade-in;
animation-name: progress-fade-in;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
/*DESKTOP MEDIUM*/
@media screen and (max-width: $desktop_medium){
display: none;
}
}
@-webkit-keyframes progress-fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes progress-fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
@-webkit-keyframes progress-fade-out {
from {opacity: 1;}
to {opacity: 0;}
}
@keyframes progress-fade-out {
from {opacity: 1;}
to {opacity: 0;}
}
.aside-align{
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
top: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
z-index: 3;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.4s linear, visibility 0.4s linear;
-o-transition: opacity 0.4s linear, visibility 0.4s linear;
transition: opacity 0.4s linear, visibility 0.4s linear;
}
.overlap-container{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
/*************************PROGRESS*************************/
.progress-container{
position: relative;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.track-line{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: calc(88vh - 40px);
max-height: 425px;
width: 1px;
background-color: var(--track);
opacity: 0.6;
overflow: hidden;
}
.progress-line{
position: absolute;
height: 100%;
top: -100%;
width: 1px;
background-color: var(--progress);
left: 0;
}

View file

@ -0,0 +1,38 @@
.section{
width: 100%;
max-width: 1220px;
margin: 0 auto;
padding: 0 4rem;
/*DESKTOP*/
@media screen and (max-width: 1070px){
max-width: 850px;
}
/*PHABLET*/
@media screen and (max-width: 540px){
max-width: 100%;
padding: 2rem;;
}
p{
/*TABLET*/
@media screen and (max-width: 735px){
padding: 0 4rem;
max-width: 567px;
}
}
}
.narrow{
p{
/*TABLET*/
@media screen and (max-width: 735px){
padding: 0 2rem;
max-width: 527px;
}
}
}

View file

@ -0,0 +1,73 @@
.social-icon-outer{
width: 20%;
min-width: 220px;
}
/*TABLET*/
@media screen and (max-width: $tablet){
.authors-sio{
width: 60%;
}
}
.social-icon-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
min-width: 100%;
position: relative;
margin-left: 3.2rem;
text-decoration: none;
max-width: 16px;
a{
margin-right: 25px;
}
}
.social-icon-container:hover > svg {
fill: var (--primary);
}
.social-icon-container:hover > * {
-webkit-transition: fill 0.25s var(--ease-in-out-quad);
-o-transition: fill 0.25s var(--ease-in-out-quad);
transition: fill 0.25s var(--ease-in-out-quad);
}
.social-icon-container:first-of-type {
margin-left: 0;
}
.social-icon-container:last-child {
margin-right: 0;
}
/*TABLET*/
@media screen and (max-width: 735px){
.social-icon-container{
margin: 0 2.2rem;
}
}
.social-icon-image{
path{
fill: var(--grey);
}
}
.hidden{
width: 0px;
height: 0px;
visibility: hidden;
opacity: 0;
overflow: hidden;
display: inline-block;
}

View file

@ -0,0 +1,283 @@
.subscription-container{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 64px 0 55px;
margin: 10px auto 100px;
background: var(--card);
-webkit-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
z-index: 1;
.subscroiption-text{
margin-left: 0;
margin-right: 0;
}
}
/*TABLET*/
@media screen and (max-width: 735px){
.subscription-container{
padding: 50px 0 0;
text-align: center;
.submitted-input{
max-width: calc(100% - 36px);
}
.submit-button{
position: relative;
width: 100%;
left: 0;
border-radius: 0;
height: 60px;
border: none;
border-top: 1px solid var(--theme-ui-colors-horizontalRule,rgba(8,8,11,0.15));
}
.submitted-form{
.submit-button{
border: none !important;
border-top: 1px solid var(--theme-ui-colors-horizontalRule,rgba(8,8,11,0.15)) !important;
}
}
}
}
/*PHABLET*/
@media screen and (max-width: 540px){
.subscription-container{
margin: -20px auto 80px;
}
}
.subscription-content{
margin: 0 auto;
width: 100%;
max-width: 640px;
}
/*TABLET*/
@media screen and (max-width: 735px){
.subscription-content{
h3{
padding: 0 50px;
}
}
}
/*PHONE*/
@media screen and (max-width: 376px){
.subscription-content{
h3 {
padding: 0 24px;
}
}
}
.subscription-heading{
font-family: var(--serif);
margin-bottom: 20px;
}
/*TABLET*/
@media screen and (max-width: 735px){
.subscription-heading{
margin-bottom: 15px;
}
}
.subscription-text{
margin: 0 0 30px;
max-width: 680px;
color: var(--grey);
line-height: 1.75;
}
/*TABLET*/
@media screen and (max-width: 735px){
.subscription-text{
padding: 0 26px;
margin: 0 auto 25px;
}
}
.subscription-form{
position: relative;
}
.subscription-form::after {
color: var(--accent);
content: ">";
position: absolute;
left: 21px;
top: 10px;
}
/*TABLET*/
@media screen and (max-width: 735px){
.subscription-form:after{
left: 34px;
top: 11px;
}
}
.subscription-input{
position: relative;
border-radius: 35px;
border: none;
padding: 13px 21px 13px 35px;
width: 471px;
color: var(--primary);
background-color: var(--inputBackground);
}
.subscription-input.submitted-input:invalid{
position: relative;
background: var(--theme-ui-colors-errorBackground,rgba(238,86,91,0.1)) !important;
border-radius: 35px;
border: none;
padding: 13px 21px 13px 35px;
width: 471px;
color: var(--primary,#000);
outline: none !important;
}
input:invalid {
-webkit-box-shadow:0 0 2px 1px transparent;
box-shadow:0 0 2px 1px transparent;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.subscription-input.submitted-input:invalid ~ .subscription-error-message{
opacity: 1;
}
.subscription-input.submitted-input:invalid ~ .submit-button{
color: var(--error);
border: 1px solid var(--error);
}
.submitted-form:after{
color: var(--error);
}
.subscription-error-message{
position: absolute;
left: 35px;
bottom: -20px;
color: var(--theme-ui-colors-error,#EE565B);
font-size: 12px;
opacity: 0;
}
.subscription-input::-webkit-input-placeholder {
color: var(--track);
opacity: 1;
}
.subscription-input::-moz-placeholder {
color: var(--track);
opacity: 1;
}
.subscription-input:-ms-input-placeholder {
color: var(--track);
opacity: 1;
}
.subscription-input::-ms-input-placeholder {
color: var(--track);
opacity: 1;
}
.subscription-input::placeholder {
color: var(--track);
opacity: 1;
}
.subscription-input:-ms-input-placeholder {
color: var(--track);
}
.subscription-input::-ms-input-placeholder {
color: var(--track);
}
/*TABLET*/
@media screen and (max-width: 735px){
.subscription-input{
width: calc(100% - 36px);
margin: 0 18px;
padding: 14px 14px 14px 30px;
margin-bottom: 30px;
}
}
.submit-button{
border: 1px solid var(--accent);
color: var(--accent);
position: absolute;
left: 306px;
top: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 161px;
height: 38px;
font-weight: 600;
border-radius: 35px;
letter-spacing: 0.42px;
-webkit-transition: border-color 0.2s var(--ease-in-out-quad),
background 0.2s var(--ease-in-out-quad), color 0.2s var(--ease-in-out-quad);
-o-transition: border-color 0.2s var(--ease-in-out-quad),
background 0.2s var(--ease-in-out-quad), color 0.2s var(--ease-in-out-quad);
transition: border-color 0.2s var(--ease-in-out-quad),
background 0.2s var(--ease-in-out-quad), color 0.2s var(--ease-in-out-quad);
}
.submit-button:disabled {
cursor: not-allowed;
}
.submit-button svg * {
fill: var(--background-color);
}
.submit-error{
position: absolute;
left: 35px;
bottom: -20px;
color: var(--error);
font-size: 12px;
}
.submit-error a {
color: var (--error);
text-decoration: underline;
}
/*TABLET*/
@media screen and (max-width: 735px){
.submit-error{
left: 50px;
top: 50px;
}
}

View file

@ -0,0 +1,107 @@
/*************************************TABLE************************************/
table{
position: relative;
line-height: 1.65;
color: var(--grey);
font-family: var(--sanserif);
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
background: var(--card);
margin: 45px auto 85px;
width: 100%;
max-width: 1004px;
border: 1px solid var(--horizontalRule);
border-radius: 5px;
overflow: hidden;
border-collapse: separate;
}
/*DESKTOP*/
@media screen and (max-width: 1070px){
table{
margin: 25px auto 65px;
}
}
/*TABLET*/
@media screen and (max-width: 735px){
table{
max-width: 486px;
}
}
/*PHABLET*/
@media screen and (max-width: 540px){
table{
margin: 15px auto 55px;
}
}
/*************************************TABLE CELL************************************/
td{
border-top: 1px solid var(--horizontalRule);
border-right: 1px solid var(--horizontalRule);
padding: 15px 30px;
font-size: 16px;
background: var(--card);
&:last-child {
border-right: none;
}
}
/*DESKTOP*/
@media screen and (max-width: 1070px){
td{
padding: 14px 20px;
}
}
/*TABLET*/
@media screen and (max-width: 735px){
td{
font-size: 14px;
}
}
/*************************************TABLE HEAD************************************/
thead{
text-align: left;
border-collapse: collapse;
position: relative;
line-height: 1.756;
font-weight: 600;
color: var(--primary);
font-family: var(--serif);
-webkit-transition: var(--color-mode-transition);
-o-transition: var(--color-mode-transition);
transition: var(--color-mode-transition);
}
th{
border-right: 1px solid var(--horizontalRule);
padding: 15px 30px;
&:last-child {
border-right: none;
}
}
/*DESKTOP*/
@media screen and (max-width: 1070px){
th{
padding: 14px 20px;
}
}
/*TABLET*/
@media screen and (max-width: 735px){
th{
font-size: 14px;
}
}

View file

@ -0,0 +1,85 @@
/*BREAKPOINTS*/
$phone_small: 320px;
$phone: 376px;
$phablet: 540px;
$tablet: 735px;
$desktop: 1070px;
$desktop_medium: 1280px;
$desktop_large: 1440px;
body{
/*FONTS*/
--serif: "Merriweather", Georgia, Serif;
--sanserif: "SF Pro Display", "-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI", "Arial", sans-serif;
--monospace: "Operator Mono", Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace;
/*COLOR MODE TRANSITION*/
--color-mode-transition: background 0.25s var(--ease-in-out-quad), color 0.25s var(--ease-in-out-quad);
/*PRIMARY COLORS*/
--primary: #000;
--secondary: #73737D;
--grey: #73737D;
--background-color: #fafafa;
--accent: #6166DC;
--hover: rgba(0, 0, 0, 0.07);
--gradient: linear-gradient(180deg, rgba(217, 219, 224, 0) 0%, #D9DBE0 100%);
--articleText: #08080B;
--track: rgba(8, 8, 11, 0.3);
--progress: #000;
--card: #fff;
--error: #EE565B;
--success: #46B17B;
--errorBackground: rgba(238, 86, 91, 0.1);
--horizontalRule: rgba(8, 8, 11, 0.15);
--inputBackground: rgba(0, 0, 0, 0.05);
--tooltip: lightgrey;
/*DARK COLORS*/
--dark-grey: #73737D;
--dark-primary: #fff;
--dark-secondary: #fff;
--dark-accent: #E9DAAC;
--dark-background: #111216;
--dark-hover: rgba(255, 255, 255, 0.07);
--dark-gradient: linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%);
--dark-articleText: #fff;
--dark-track: rgba(255, 255, 255, 0.3);
--dark-progress: #fff;
--dark-card: #1D2128;
--dark-error: #EE565B;
--dark-success: #46B17B;
--dark-errorBackground: rgba(238, 86, 91, 0.1);
--dark-horizontalRule: rgba(255, 255, 255, 0.15);
--dark-inputBackground: rgba(255, 255, 255, 0.07);
/*PRISM*/
--token: #fff;
--languageJavascript: #e8696b;
--javascript: #e8696b;
--background: #292c34;
--comment: #5e6a76;
--string: #a8e2a8;
--var: #b3bac5;
--number: #e4854d;
--constant: #b3bac5;
--plain: #fff;
--doctype: #e8696b;
--tag: #e8696b;
--keyword: #d49fd4;
--boolean: #ff5874;
--function: #5F8DC3;
--parameter: #F9965D;
--className: #ffcf74;
--attrName: #bf87ba;
--attrValue: #a8e2a8;
--interpolation: #fff;
--punctuation: #5FA8AA;
--property: #80cbc4;
--propertyAccess: #fff;
--namespace: #b2ccd6;
--highlight: rgba(255,255,255,0.07);
--highlightBorder: #e1bde2;
--dom: #5F8DC3;
--operator: #5FA8AA;
}

View file

@ -0,0 +1,4 @@
baseURL: "https://example.com"
languageCode: "en-us"
title: "Hugo Novela"
pygmentsstyle: 'monokai'

View file

@ -0,0 +1,11 @@
twitter: "https://twitter.com/narative"
github: "https://github.com/narative"
instagram: "https://instagram.com/narative.co"
linkedin: "https://www.linkedin.com/company/narative/"
dribbble: "https://dribbble.com/narativestudio"
youtube: "https://youtube.com"
facebook: ""
medium: ""
patreon: ""
paypal: ""
unsplash: ""

View file

@ -0,0 +1,14 @@
baseURL: "https://example.com"
languageCode: "en-us"
title: "Hugo Novela"
pygmentsstyle: 'monokai'
paginate: 6
social:
twitter: "#"
github: "#"
instagram: "#"
linkedin: "#"
dribbble: "#"
youtube: "#"
taxonomies:
author: authors

View file

@ -0,0 +1,3 @@
module github.com/forestryio/hugo-theme-novela
go 1.13

Binary file not shown.

After

Width:  |  Height:  |  Size: 460 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

View file

@ -0,0 +1,10 @@
[build]
publish = "public"
command = "hugo --gc --minify"
[build.environment]
HUGO_VERSION = "0.69.0"
# This is a starter template for Netlify builds. See the following links for more:
# https://www.netlify.com/docs/continuous-deployment/#deploy-contexts
# https://www.netlify.com/blog/2017/04/11/netlify-plus-hugo-0.20-and-beyond/

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1 @@
{"Target":"scss/global.min.fb4dd79813ef5075eb6e0a596ca103e09f51efc11a614d013d4d9049d60904b1.css","MediaType":"text/css","Data":{"Integrity":"sha256-+03XmBPvUHXrbgpZbKED4J9R78EaYU0BPU2QSdYJBLE="}}

View file

@ -0,0 +1 @@
@import "/Users/tannersmith/theNewDynamic/theme-narrative-hugo/hugo/narative/assets/css/global.css"

View file

@ -0,0 +1 @@
{"Target":"scss/main.min.0516f37d101dd5f2e4db165a5d58e9d22c2a8ed35021e5372d1ecb4bc9482039.css","MediaType":"text/css","Data":{"Integrity":"sha256-BRbzfRAd1fLk2xZaXVjp0iwqjtNQIeU3LR7LS8lIIDk="}}

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View file

@ -0,0 +1,22 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M590 4383 l1 -738 756 -530 c698 -489 1151 -807 2618 -1837 l540
-380 3 748 c2 590 -1 751 -10 760 -7 7 -308 218 -668 470 -360 251 -1230 859
-1933 1351 -702 491 -1284 893 -1292 893 -13 0 -15 -92 -15 -737z"/>
<path d="M3887 4708 l-597 -412 0 -381 0 -381 597 -419 c328 -231 602 -421
610 -423 11 -3 13 204 13 1212 0 987 -2 1216 -13 1216 -7 0 -282 -186 -610
-412z"/>
<path d="M590 2135 c0 -910 3 -1225 11 -1225 10 0 343 231 1049 728 l155 109
0 389 0 388 -595 418 c-327 229 -601 417 -607 418 -10 0 -13 -251 -13 -1225z"/>
<path d="M590 320 l0 -310 1960 0 1960 0 0 310 0 310 -1960 0 -1960 0 0 -310z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 310 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 255 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 194 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

View file

@ -0,0 +1,18 @@
name = "Hugo Novela"
license = "MIT"
licenselink = "https://github.com/forestryio/hugo-theme-novela/blob/master/LICENSE"
description = "A Hugo port of the Novela theme by Narative"
homepage = "https://hugo-novela-forestry.netlify.com/"
tags = ["blog"]
features = ["dark mode", "grid view"]
min_version = "0.55.0"
[author]
name = "The New Dynamic"
homepage = "https://www.thenewdynamic.com/"
# If porting an existing theme
[original]
author = "Narative"
homepage = "https://www.narative.co/"
repo = "https://github.com/narative/gatsby-theme-novela"