Commit bb80b7f2 authored by cermak's avatar cermak
Browse files

Revert "Remove hiring, added discord contact"

This reverts commit ff07a638.
parent 1118d8c6
//
// Scaffolding
// --------------------------------------------------
// Body reset
html {
font-size: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
}
// Reset fonts for relevant elements
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
// Links
a {
color: $color-link;
text-decoration: none;
transition: all 0.3s;
&:hover,
&:focus {
color: $color-link--hover;
text-decoration: none;
}
&:focus {
}
}
// Images
img {
vertical-align: middle;
max-width: 100%;
}
// Horizontal rules
hr {
margin-top: 0;
margin-bottom: 0;
border: 0;
border-top: 1px solid black;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
[role="button"] {
cursor: pointer;
}
h1,h2,h3,h4{
font-family: $font-headings;
}
h1{
color: $color-headings-primary;
line-height: 1.17;
@include fluidFontSize(30px, 70px, 480px, 1200px, 30px);
}
.small h1{
color: $color-headings-primary;
line-height: 1.3;
@include fluidFontSize(30px, 50px, 480px, 1200px, 30px);
}
h2{
color: $color-headings-primary;
line-height: 1.25;
@include fluidFontSize(30px, 40px, 320px, 1200px, 30px);
}
h3{
color: $color-headings-secondary;
font-size: 1.125rem;
line-height: 1.333333;
}
h4{
color: $color-headings-secondary;
font-size: 1rem;
line-height: 1.5;
}
p, li{
font-size: 0.875rem;
}
ul {list-style-type:none}
.c-article{
&__item{
margin-bottom: 30px;
background: $color-bg-article;
&:last-child{
margin-bottom: 45px;
}
}
&__image{
filter: sepia(60%);
width: calc(20% - 4px);
display: none;
position: relative;
vertical-align: top;
@include tablet-portrait-up{
display: inline-block;
}
&::before{
content: "";
display: block;
margin-top: 100%;
}
img{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__body{
padding: 30px 20px 15px 25px;
display: inline-block;
width: 100%;
vertical-align: top;
@include tablet-portrait-up{
width: calc(80% - 4px);
}
}
&__header{
margin-bottom: 5px;
}
&__text{
margin-bottom: 5px;
}
&__cite{
font-family: $font-headings;
font-style: italic;
margin-bottom: 10px;
}
&__button{
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
i{
padding-left: 3px;
font-size: 10px;
line-height: 1;
color: #727272;
color: $theme-accent;
}
}
}
.c-article-compact{
&__item{
margin-bottom: 30px;
background: $color-bg-article;
&:last-child{
margin-bottom: 45px;
}
}
&__body{
padding: 30px 20px 15px 25px;
display: flex;
width: 100%;
vertical-align: top;
div:nth-of-type(1) { margin-right: 18px; }
div:nth-of-type(2) { flex-grow: 1; }
}
&__header{
margin-bottom: 5px;
width: 100%;
}
&__cite{
float: left;
font-family: $font-headings;
font-style: italic;
}
&__cell{
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
&__doi{
.c-button--simple-text{
&::before{
bottom: -1px;
}
}
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
a{
font-size: 15px;
padding-top: 0px;
padding-bottom: 0px;
}
i{
padding-left: 3px;
font-size: 12px;
line-height: 1;
color: #727272;
color: $theme-accent;
}
}
}
.c-button{
display: inline-block;
border: none;
background: none;
box-sizing: none;
outline: none;
padding-top: 14px;
padding-bottom: 14px;
font-family: $font-text;
font-size: 0.75rem;
text-transform: uppercase;
line-height: 1;
color: $theme-accent;
transition: all 0.3s;
position: relative;
&--primary{
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
padding-bottom: 12px;
background: $theme-accent;
color: $color-text-button-primary;
border: 2px solid $theme-accent;
&:hover, &:active, &:focus{
color: $color-text-button-primary--hover;
background: $body-bg;
}
}
&--bold-text, &--simple-text{
&::before{
content: "";
position: absolute;
height: 1px;
background: $theme-accent;
bottom: 13px;
left: 50%;
right: 50%;
transition: all 0.3s;
}
&:hover{
&::before{
left: 0;
right: 0;
}
}
}
&--bold-text{
font-weight: $weight-black;
}
&--simple-text{
font-weight: $weight-normal;
}
}
.c-card{
position: relative;
&__content{
width: 100%;
}
&__item{
margin-bottom: 5px;
display: inline-block;
min-width: 33%;
background: $color-bg-card;
overflow: hidden;
position: relative;
height: auto;
cursor: pointer;
@include phone-only{
height: 100vh;
}
&:before{
content: "";
background: $theme-accent;
display: block;
width: 200%;
height: 200%;
position: absolute;
bottom: -200%;
right: -200%;
border-radius: 50%;
transition: all 0.5s ease-out;
}
&:hover{
color: $color-text-card--hover;
&::before{
bottom: -50%;
right: -50%;
}
.c-card__header, .c-card__icon {
color: $color-text-card--hover;
}
}
// MODIFICATORS
&--text-only{
background-color: $theme-accent;
background-repeat: no-repeat;
background-size: cover;
.c-card__text{
color: $color-text-card--hover;
font-style: italic;
font-weight: $weight-bold;
font-family: $font-headings;
font-size: 1.125rem;
line-height: 1.55;
}
&:hover{
&::before{
display: none;
}
}
}
&--modal{
position: fixed;
height: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 101;
background: $color-bg-card;
overflow: hidden;
@include desktop-up{
position: absolute;
height: auto;
}
&:hover{
color: $text-color;
.c-card__icon {
color: $theme-accent;
}
.c-card__header {
color: $color-headings-secondary;
}
&::before{
display: none;
}
}
}
}
&__sizer{
display: block;
margin-top: 102.5%;
}
&__inner{
padding-left: 50px;
padding-right: 50px;
z-index: 10;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
&__modal-content{
display: none;
padding-right: 15px;
padding-left: 15px;
width: 100%;
@include phone-only{
overflow-y: scroll;
}
@include tablet-portrait-up{
padding-right: 60px;
padding-left: 60px;
}
@include desktop-up{
padding-right: 120px;
padding-left: 120px;
}
}
&__icon{
margin-bottom: 28px;
color: $theme-accent;
font-size: 2.25rem;
transition: all 0.3s;
line-height: 1;
}
&__header{
margin-bottom: 10px;
transition: all 0.3s;
}
&__text{
margin-bottom: 10px;
transition: all 0.3s;
}
&__button{
position: absolute;
bottom: 0;
right: 0;
width: 84px;
height: 84px;
color: $color-text-card--hover;
background-image: $grad-button-card;
}
&__button-field{
cursor: pointer;
position: absolute;
bottom: 10px;
right: 13px;
z-index: 10;
padding: 0;
text-align: center;
box-shadow: none;
color: $color-text-card--hover;
border: none;
background: none;
outline: none;
&::after{
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
margin-left: -12px;
border: 1px solid $color-text-card--hover;
border-radius: 50%;
width: 24px;
height: 24px;
}
&::before{
content: "\eb8b";
font-family: 'icofont';
font-size: 18px;
line-height: 1;
}
&--is-active{
&::before{
content: "\efb5";
}
}
}
&__caption{
font-size: 0.75rem;
}
&__link{
display: block;
font-size: 0.75rem;
color: $theme-accent;
position: relative;
text-decoration: underline;
margin-bottom: 5px;
&:hover{
text-decoration: none;
}
}
&__link-caption{
margin-bottom: 5px;
}
}
.c-form{
label{
margin-bottom: 7px;
display: block;
font-family: $font-headings;
font-size: 0.875rem;
line-height: 1.2888;
font-weight: $weight-bold;
}
input, textarea{
margin-bottom: 15px;
display: inline-block;
width: 100%;
outline: none;
padding: 9px 0px 8px 10px;
font-size: 0.75rem;
line-height: 1.75;
border: 1px solid $color-form-border;
&:placeholder{
color: $color-form-placeholder;
}
&:valid{
box-shadow: $shadow-form-valid