codeface.css

/* Basic Elements */

@font-face
{
    font-family: RegularFont;
    src: url("fonts/SF-Pro-Text-Regular.otf") format("opentype");
}

@font-face
{
    font-family: BoldFont;
    src: url("fonts/SF-Pro-Display-Bold.otf") format("opentype");
}

@font-face
{
    font-family: CodeFont;
    src: url("fonts/FiraCode-Regular.ttf") format("truetype");
}

body
{
    margin: 0px;
}

html
{
    scroll-behavior: smooth;
    
    background: black;
    color: white;
    
    font-family: RegularFont;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.6;
}

section
{
    padding-bottom: 90px;
    
    background: black; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(black, rgba(20, 20, 20, 1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(black, rgba(20, 20, 20, 1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(black, rgba(20, 20, 20, 1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(black, rgba(20, 20, 20, 1)); /* Standard syntax */
}

section > div
{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

h1
{
    text-align: center;
    
    font-family: BoldFont;
    font-size: 72px;
    font-weight: normal;
    letter-spacing: -2px;
}

h2
{
    font-family: CodeFont;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: -1.5px;
}


@media only screen and (max-width: 400px) /* smaller headlines on very narrow screens */
{
    h1
    {
        font-size: 48px;
    }
    
    h2
    {
        font-size: 24px;
    }
}

h3
{
    font-family: BoldFont;
    font-size: 18px;
    font-weight: normal;
}

img
{
    max-width: 100%;
}

code
{
    font-family: CodeFont;
    font-weight: normal;
    letter-spacing: -1px;
}

a
{
    color: rgba(67,141,227,1.0);
    text-decoration: none;
}

a:hover
{
    color: rgba(84,178,235,1.0);
    text-decoration: underline;
}

a.subtle-link
{
    color: white;
}

a.subtle-link:hover
{
    color: rgb(84,178,235);
    text-decoration: none;
}

.secondary-text-color
{
    color: gray;
}

/* Fancy clickable images */

.clickable-image, a > img
{
    transition: transform .4s; /* Animation */
    transition-timing-function: ease-out;
}

.clickable-image:hover, a > img:hover
{
    transform: scale(1.07);
}

/* Navbar and Bottom Bar */

section.codeface-bar
{
    background: rgb(20,20,20);
}

section.codeface-bar > div
{
    max-width: 1280px;
}

/* Navbar */

#codeface-navbar {
    padding: 0px;
    border-bottom: 1px solid;
    border-color: rgb(50, 50, 50);
}

#codeface-navbar > div {
    height: 62px;
}

#logo {
    float: left;
    display: inline-block;
    
    height: 62px;
    padding-top: 17px;
    padding-right: 25px;
}

.left {
    float: left;
    display: inline-block;
    
    text-align: center;
    
    padding-top: 18px;
    padding-bottom: 16px;
    padding-left: 25px;
    padding-right: 25px;
}

#call-to-action {
    float: right;
    
    padding-top: 9px;
    padding-right: 0px;
}

@media only screen and (max-width: 680px) {
    #logo {
        padding-right: 15px;
    }
    
    .left {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .hide-on-narrow-screens {
        display: none;
    }
}

/* Bottom Bar */

#codeface-bottom-bar
{
    padding: 0px;
    color: gray;
}

#codeface-bottom-bar > div
{
    display: grid;
    grid-template-columns: 40% auto 40%;
    grid-column-gap: 10px;
}

.bottom-bar-text-element
{
    padding-top: 18px;
    padding-bottom: 16px;
}

#codeface-bottom-bar a
{
    color: gray;
}

#codeface-bottom-bar a:hover
{
    color: rgb(84,178,235);
    text-decoration: none;
}