janiczek.css

/* font credit: Tom Anders Watkins https://www.behance.net/gallery/18068463/Anders-(Free-Font) */
@font-face {
    font-family: 'Anders';
    font-weight: 200;
    font-style: normal;
    src: local('Anders'),
         url('./assets/Anders.woff2') format('woff2'),
         url('./assets/Anders.woff') format('woff'),
         url('./assets/Anders.ttf') format('truetype');
}

/* GENERAL BODY STYLING */
html {
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    -o-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
body {
    margin: 0 auto;
    font-family: "Droid Sans", sans-serif;
    font-weight: 300;
    font-size: 100%;
    color: #35373c;
}
.grad {
    color: #40c48f;
    -webkit-text-fill-color: transparent;
    /* got rid of the non-webkit options since this css trick only works properly on webkit anyway, this way non-webkit browsers
    fall back to defaults instead of displaying weird effects
    background-image: linear-gradient(to right, #52f2b2, #094741);
    background-clip: text; */
    background: -webkit-linear-gradient(135deg, #7f0000 16%,#40c48f 85%);
    -webkit-background-clip: text;
}
.section-container {
    text-align: center;
    padding: 5rem 0rem;
}
.section-container header {
    padding: 0rem 5rem;
}
.section-title {
    font-size: 3rem;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    margin: 0px;
}
.subsection-title {
    font-size: 1.75rem;
    font-family: "Raleway", sans-serif;
    font-weight: normal;
    width: 100%;
}
.section-subtitle {
    font-size: 1.25rem;
    font-family: "Ubuntu", sans-serif;
    font-weight: normal;
}
.displaybox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: top;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0rem;
}
.box-item {
    margin: 2rem;
    padding: 0;
    position: relative;
    max-width: 300px;
}
.box-item:hover {
    transform: translateY(-5px);
}
.box-item h4 {
    font-family: "Ubuntu", sans-serif;
    font-size: 1.25rem;
    margin: 0.5rem;
    color: #35373c;
}
.box-item p {
    font-family: "Droid Sans", sans-serif;
    margin: 0.5rem;
    color: #35373c;
}
.shadowed {
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
}

/* COVER PAGE */
.cover-page {
    background-image: url("./assets/IBM1401_Manufacturing_Landscape_1960.jpg");
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#hamburger {
    position: absolute;
    top: 20px;
    right: 20px;
    text-decoration: none;
    color: #40c48f;
}
.caption {
    text-align: center;
    color: #40c48f;
}
.caption h1 {
    font-size: 6rem;
    font-family: "Raleway", sans-serif;
    margin: 0px;
}
.caption h4 {
    font-size: 2.75rem;
    font-family: "Ubuntu", sans-serif;
    margin: 0px;
    font-weight: normal;
}
.button-list {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: inline;
}
.button-list a {
    text-decoration: none;
    font-size: 3vh;
    color: black;
}
.button-list a i:nth-child(1) {
    color: white;
}

/* NAVBAR */
#navbar {
    width: 100%;
    background-color: black;
    z-index: 3;
}
#navbar ul {
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    padding: 0px;
}
#navbar ul a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 1.25rem;
    font-family: Anders, sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 1rem 4%;
}
#navbar ul a:active {
    transform: translateY(0.2rem);
}
#navbar ul a li {
    list-style: none;
}
.glued {
    position: fixed;
    top: 0;
}
#logo {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 2.5rem;
    padding: 0% 4%;
    margin-top: -0.3rem;
    font-family: "Droid Sans", sans-serif;
    font-weight: 700;
    letter-spacing: -0.6rem;
    color: #40c48f;
}
#first {
    color: #7f0000;
    font-size: 2.5rem;
}

/* HEADER */
header.main {
    background-color: #F2F2F2;
    width: 100%;
    position: relative;
    padding-top: 3.65rem;
    overflow-x: hidden;
}
.center {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 3rem 2rem 5rem 2rem;
}
#welcome {
    color: #7f0000;
    padding: 0px;
    margin: 0rem 4rem 1rem 4rem;
    text-align: center;
    vertical-align: center;
}
#welcome h1 {
    font-size: 4rem;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    margin: 0px;
    vertical-align: center;
}
#welcome p {
    font-size: 1.75rem;
    font-family: "Ubuntu", sans-serif;
    margin: 0px;
    vertical-align: center;
}
.slideshow {
    padding: 0rem 4.5rem;
}
.slideshow img {
    position: absolute;
    width: 432px;
    height: 253px;
    padding: 0%;
}
.slideshow img:nth-child(7) {
    visibility: hidden;
    width: 432px;
    height: 253px;
    position: static;
    padding: 0%;
}
.slideshow img:nth-child(6) {
    position: absolute;
    width: 460px;
    height: 392px;
    padding: 0%;
    margin-left: -14px;
    margin-top: -14px;
    z-index: 2;
    overflow-y: hidden;
}
@keyframes xfade{
    0%{
        opacity: 1;
      }
      20% {
        opacity:1;
      }
      23.3% {
        opacity:0;
      }
      96.7% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
}
.slideshow img:nth-child(5) {
    animation: xfade 10s 0s infinite;
}
.slideshow img:nth-child(4) {
    animation: xfade 10s 2s infinite;
}
.slideshow img:nth-child(3) {
    animation: xfade 10s 4s infinite;
}
.slideshow img:nth-child(2) {
    animation: xfade 10s 6s infinite;
}
.slideshow img:nth-child(1) {
    animation: xfade 10s 8s infinite;
}

/* PROJECTS SECTION */
.box-item img {
    width: 100%;
    height: auto;
    max-height: 300px;
    padding: 0;
    margin: 0;
}
.hidden-info {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-decoration: none;
    text-align: left;
    opacity: 0;
    color: black;
    background-color: white;
    transition: all 1s;
}
.hidden-info:hover {
    opacity: 0.8;
}

/* SKILLS SECTION */
#skills {
    color: #40c48f;
    background-color: #d8f3e8;
}
/* based on http://www.cssscript.com/animated-circular-progress-bar-using-svg-path-animation/ */
@keyframes load{ 
    0% {
        stroke-dashoffset:0
    }
}
.circle-container {
    box-sizing: border-box;
    max-width: 14rem;
    padding: 2rem;
}
.circle {
    display: inline-block;
    position: relative;
    text-align: center;
    color: #93A2AC;
    font-family: "Droid Sans", sans-serif;
    margin: 0px;
}
.circle:before {
    content: attr(data-name);
    position: absolute;
    width: 100%;
    bottom: -2rem;
}
.circle:after {
    content: attr(data-percent);
    position: absolute;
    width: 100%;
    top: 3.7rem;
    left: 0;
    font-size: 2rem;
    text-align: center;
}
svg {
    width: 100%;
    height: 10rem;
    stroke: #003306;
}
svg:nth-child(2) {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-90deg);
}
svg:nth-child(2) path {
    fill: none;
    stroke-width: 14;
    stroke-dasharray: 629;
    stroke: #fff;
    opacity: 0.9;
}
#hidden-svg {
    width: 0px;
    height: 0px;
}

/* ABOUT ME SECTION */
#ascii {
    width: 200px !important;
    height: 286px !important;
    display: inline;
    float: left;
    margin-right: 2rem;
}
.long-text {
    padding: 0px;
    margin: 0px;
    line-height: 1.75rem;
    text-align: justify;
}
.portrait-text {
    padding: 4rem 12rem;
}

/* CONTACT SECTION */
#contact {
    background-color: #40c48f;
    color: white;
}
#contact form {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 0rem 0rem 0rem;
}
#contact input, #contact textarea {
    box-sizing: border-box;
    width: 90%;
    padding: 0.5rem;
    border: 1px solid #CCC;
    background-color: #FFF;
    margin: 0.5rem 0rem;
    color: #35373c;
}
#contact input:focus, #contact textarea:focus {
    border: 1px solid #666;
}
#contact input[type="submit"] {
    cursor: pointer;
    background-color: #0CF;
    color: #FFF;
    border: none;
}
#contact input[type="submit"]:hover {
    background-color: #09C;
    transition: background-color 0.2s ease-in-out;
}
#contact input[type="submit"]:active {
    transform: translateY(0.1rem);
}
#contact textarea {
    resize: none;
    height: 9rem;
}

/* FOOTER */
footer {
    background-color: #35373c;
}
footer p {
    text-align: center;
    margin: 0px;
    padding-bottom: 1.5rem;
    color: #d3d3d3;
    line-height: 1.75rem;
}
.social {
    margin: 0 auto;
    text-align: center;
    padding: 2rem;
}
.social a {
    display: inline;
    text-decoration: none;
    font-size: 4vh;
    color: #d3d3d3;
    padding: 0rem 0.5rem;
}

/* SCROLL ANIMATIONS */
.scroll-animated {
    opacity: 0;
}
.scroll-animated.visible {
    opacity: 1;
}
.scroll-animated.left-slide {
    transform: translateX(-200px);
    transition: all 1s linear;
}
.scroll-animated.right-slide {
    transform: translateX(200px);
    transition: all 1s linear;
}
.scroll-animated.left-slide.visible, .scroll-animated.right-slide.visible {
    transform: translateX(0px);
}
.scroll-animated.bounce-up {
    transform: translateY(100px);
    transition: all 1s linear;
}
.scroll-animated.bounce-up.visible {
    transform: translateY(0px);
}
.scroll-animated.circle-load svg:nth-child(2) path { /* this trickery is necessary because svg-s have position:absolute */
    animation: none;
}
.scroll-animated.circle-load.visible svg:nth-child(2) path {
    animation: load 10s;
}

/* MEDIA QUERIES */
@media (max-width: 1220px) {
    #welcome {
        margin: 0rem 4rem 5rem 4rem;
    }
    .portrait-text {
        padding: 4rem 4rem;
    }
}
@media (max-width: 740px) {
    #logo {
        display: none;
    }
    .caption h1 {
        font-size: 5rem;
    }
    .caption h4 {
        font-size: 2.5rem;
    }
}
@media (max-width: 617px) {
    header.main {
        padding-top: 7.3rem;
    }
    .caption h1 {
        font-size: 4rem;
    }
    .caption h4 {
        font-size: 2rem;
    }
    #welcome {
        margin: 0rem 2rem 5rem 2rem;
    }
    #welcome h1 {
        font-size: 3.5rem;
    }
    #welcome p {
        font-size: 1.5rem;
    }
    .slideshow {
        padding: 0rem;
    }
    .section-title {
        font-size: 2.375rem;
    }
    .section-subtitle {
        font-size: 1.125rem;
    }
    .section-container header {
        padding: 0rem 3rem;
    }
    .portrait-text {
        padding: 4rem 2rem;
    }
}
@media (max-width: 480px) {
    .center {
        padding: 2rem 0rem 0rem 0rem;
    }
    .caption h1 {
        font-size: 3rem;
    }
    .caption h4 {
        font-size: 1.625rem;
    }
    #welcome {
        margin: 0rem 2rem;
    }
    #welcome h1 {
        font-size: 3rem;
    }
    #welcome p {
        font-size: 1.375rem;
    }
    .slideshow {
        padding: 2rem 0rem 0rem 0rem;
        width: 100%;
    }
    .slideshow img, .slideshow img:nth-child(7) {
        width: 100%;
        height: auto;
    }
    .slideshow img:nth-child(6) {
        display: none;
    }
    .section-title {
        font-size: 2rem;
    }
    .section-subtitle {
        font-size: 1rem;
    }
    .section-container header {
        padding: 0rem 1rem;
    }
    .displaybox {
        padding: 0rem;
    }
    .section-container {
        padding: 3rem 0rem;
    }
    .circle-container {
        padding: 0rem 1rem 2rem 1rem;
        max-width: 11rem;
    }
    .circle:before {
        bottom: -1rem;
    }
    .circle:after {
        font-size: 1.75rem;
        top: 4rem;
    }
    .long-text {
        font-size: 0.9rem;
        line-height: 1.6rem;
    }
    .portrait-text {
        padding: 2.5rem 0.5rem;
    }
    .box-item h4 {
        font-size: 1.125rem;
    }
    .box-item p {
        font-size: 0.9rem;
    }
    #ascii {
        margin-right: 0px;
    }
}
@media (max-width: 360px) {
    .caption h1 {
        font-size: 2.5rem;
    }
    .caption h4 {
        font-size: 1.375rem;
    }
    #welcome p {
        font-size: 1.25rem;
    }
    #welcome h1 {
        font-size: 2.5rem;
    }
    .section-title {
        font-size: 1.75rem;
    }
    .section-subtitle {
        font-size: 0.9rem;
    }
    .circle-container {
        max-width: 9.5rem;
    }
    .circle:after {
        font-size: 1.5rem;
    }
    .circle:before {
        bottom: -0.75rem;
    }
    .long-text {
        line-height: 1.4rem;
    }
}