style.css

/*
Natalie Clarius - Personal Website
(C) 2022-2024 Natalie Clarius <natalie_clarius@yahoo.de>
*/

/*
=======================
root
=======================
*/

:root.light {
    --white: #ffffff;
    --lightgray: #d3d3d3;
    --darkgray: #3c3c3c;
    --black: #0f0f0f;
    --lightshadowgray: #d3d3d3;
    --darkshadowgray: #808080;
}

:root.dark {
    --white: #292929;
    --lightgray: #505050;
    --darkgray: #d3d3d3;
    --black: #f0f0f0;
    --lightshadowgray: #161616;
    --darkshadowgray: #030303;
}

@media only screen and (min-width: 1001px) {
    :root {
        --sticky-header-height: 80px;
        --expanded-header-height: 300px;
    }
}

@media only screen and (min-width: 601px) and (max-width: 1000px) {
    :root {
        --sticky-header-height: 60px;
        --expanded-header-height: 200px;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --sticky-header-height: 60px;
        --expanded-header-height: 60px;
    }
}

@media only screen and (min-width: 0px) {
    :root {
        --footer-height: 90px;
    }
}

/*
=======================
html, body
=======================
*/

* {
    box-sizing: border-box;
  }

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    position: relative;
    min-height: 100%;
    margin: auto;
    font-size: 18px;
    font-family: "Open Sans", sans-serif;
    color: var(--black);
    background-color: var(--white);
}

body, body * {
    transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

/*
=======================
main
=======================
*/

html {
    scroll-padding-top: calc(var(--sticky-header-height) + 1px);
}

@media only screen and (max-width: 1000px) {
    main {
        margin: auto 20px auto 20px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
    main {
        margin: auto 65px auto 65px;
    }
}

@media only screen and (min-width: 1001px) {
    main {
        margin: auto;
        width: calc(100% - 500px);
    }
}

main {
    position: sticky;
}

/*
=======================
sections
=======================
*/

section {
    flex-grow: 1;
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;
}

section:last-child {
    margin-bottom: 0;
}

@media only screen and (min-width: 1001px) {
    section:not(last-child) {
        margin-bottom: 250px;
        min-height: calc(100vh - var(--sticky-header-height) - 1px - 250px);
    }

    section:last-child {
        min-height: calc(100vh - var(--sticky-header-height) - 1px - var(--footer-height) - 1px);
    }
}

@media only screen and (max-width: 1000px) {
    section:not(last-child) {
        margin-bottom: 150px;
        min-height: calc(100vh - var(--sticky-header-height) -1px - 150px);
    }

    section:last-child {
        min-height: calc(100vh - var(--sticky-header-height) -1px - var(--footer-height) - 1px);
    }
}

/*
=======================
paragraphs, lists, tables, tiles
=======================
*/

p {
    margin-right: 20px;
}

p.footnote {
    padding: 8px 4px 8px;
    margin: 0px;
    font-size: 0.75em;
}

p.headnote {
    padding: 4px 0px 10px;
    margin: 0px;
}

ul {
    list-style-type: square;
    list-style-position: outside;
}

td {
    vertical-align: top;
    font-size: 1em;
}

.tile-link {
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 3px 7px 0px var(--lightshadowgray);
}

/*
=======================
headings and over- and underlines
=======================
*/

h1,
h1 a,
h2,
h2 a,
h3,
h3 a,
h4,
h4 a,
h5,
h5 a,
nav li a,
.caption-position,
.caption-teaching {
    color: var(--darkgray);
}

h1,
h2,
h3 {
    text-align: center;
}

h2,
h3 {
    font-variant: small-caps;
}

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.25em;
    margin-top: 30px;
    margin-bottom: 15px;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: 1em;
    font-weight: normal;
}

hr {
    height: 0px;
    width: 250px;
    border: none;
    border-top: 1px solid var(--darkgray);
}

hr.heading-underline {
    margin-bottom: 27px;
}

hr.footer-overline {
    margin-bottom: 2px;
}

/*
=======================
links and buttons
=======================
*/

h1 a:hover,
a:hover .label-sec,
p a:hover,
a:hover .tile-link *,
a:hover .project-software * {
    text-decoration: underline;
}

p a[href^="#"]::after { /* internal link */
    content: "open_in_new";
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    color: var(--darkgray);
    display: inline-block;
    vertical-align: text-bottom;
    margin-left: 0.25ex;
    transform: rotate(90deg) translateX(-0.1ex);
}

.footnote a:not([href^="#"])::after,
.description a:not([href^="#"])::after,
a:not([href^="#"]) .caption::after { /* external link */
    content: "open_in_new";
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    color: var(--darkgray);
    display: inline-block;
    margin-left: 0.25ex;
    vertical-align: text-bottom;
    transform: translateY(-0.1ex);
}

a,
p a,
button {
    color: var(--black);
    background: var(--white);
    border: none;
    cursor:pointer;
    text-decoration: none;
}

button,
button.active {
    outline: none;
}

button:focus {
    outline: 2px solid AccentColor;
}

/*
=======================
media
=======================
*/

.expandable {
    max-height: 300px;
    overflow-y: hidden;
    transition: max-height 0.5s;
}

.expandable:hover {
    max-height: 1000px;
}

.expandable .hideable {
    display: none;
    height: 0;
}

.expandable:hover .hideable {
    display: block;
    height: 100%;
}


/*
=======================
nav
=======================
*/

nav {
    position: absolute;
    top: var(--sticky-header-height);
    right: 0;
    height: calc(100% - var(--sticky-header-height) - var(--footer-height));
    text-align: right;
    z-index: 1;
}

nav ul {
    position: fixed;
    right: 0;
}

nav.closed ul {
    display: none;
}

nav li {
    display: block;
    padding: 6px 8px 6px 8px;
    font-size: 1.5em;
    color: var(--darkgray);
}

.icon-sec {
    font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 48;
    vertical-align: sub;
    margin-right: 3px;
}

.label-sec {
    text-decoration: none;
    font-variant: small-caps;
    transition: font-weight 0.25s;
    vertical-align: middle;
}

nav li.active a {
    font-weight: bold;
}

@media only screen and (min-width: 1001px) {
    nav {
        width: 220px;
        margin-left: 30px;
    }

    nav ul {
        margin-right: 40px;
    }
}

@media only screen and (max-width: 1000px) {
    nav {
        border-top: 1px solid var(--white);
        box-shadow: -3px 0px 12px -6px var(--darkshadowgray);
        background: var(--white);
        transition: width 0.25s;
    }

    nav.open {
        width: 265px;
    }

    nav.closed {
        width: 0px;
    }

    nav ul {
        margin-right: 60px;
    }
}

/*
=======================
navigation buttons
=======================
*/

@media only screen and (min-width: 1001px) {
    .btn-nav {
        display: none;
    }

}

@media only screen and (max-width: 1000px) {
    .btn-nav {
        display: inline-block;
        position: fixed;
        right: 0;
        width: 50px;
        height: 50px;
        overflow-x: hidden;
    }

    .btn-nav.closed {
        z-index: 3;
        box-shadow: 0px 2px 6px -2px var(--darkshadowgray);
    }

    .btn-nav.open {
        z-index: 2;
        box-shadow: none;
    }

    #btn-hamburger {
        top: calc((100% + var(--sticky-header-height) - 50px) / 2);
    }

    #btn-top {
        top: calc((var(--mheader-height)) + 4px);
    }

    #btn-bottom {
        bottom: 4px;
    }

    .icon-nav {
        font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
        vertical-align: middle;
    }

    #icon-hamburger.open {
        transform: rotate(90deg);
    }

    #btn-hamburger:hover #icon-hamburger {
        transition: transform 0.25s;
    }

}

/*
=======================
scroll button
=======================
*/

@media only screen and (min-width: 1001px) {
    #btn-scroll {
        z-index: 3;
        height: 50px;
        position: fixed;
        left: 50%;
        bottom: 16px;
        width: 50px;
        display: none;
        border: none;
        overflow-x: hidden;
        color: var(--black);
        background: var(--white);
        box-shadow: 0px 2px 6px -2px var(--darkshadowgray);
        transition: opacity 0.25s;
    }

}

@media only screen and (max-width: 1000px) {
    #btn-scroll {
        display: none;
    }
}

/*
=======================
color button
=======================
*/

#btn-color {
    position: sticky;
    top: calc(100% - 2 * 16px - 2 * 8px + 2px);
    right: 0px;
    margin: 16px 0px;
    padding: 8px;
    display: inline-block;
}

nav.closed #btn-color {
    display: none;
}

@media only screen and (min-width: 1001px) {
    #btn-color {
        margin-right: 40px;
    }
}

@media screen and (max-width: 1000px) {
    #btn-color {
        margin-right: 60px;
    }
}

#icon-color {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;
    float: right;
    font-size: 1.25em;
    vertical-align: middle;
    transform: rotateY(-180deg);
}

#btn-color:hover #icon-color {
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform 0.25s;
}

/*
=======================
header
=======================
*/

header {
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    top: calc(var(--sticky-header-height) - var(--expanded-header-height));
    height: var(--expanded-header-height);
    width: 100%;
    z-index: 3;
    overflow-x: hidden;
    overflow-y: hidden;
    background: var(--white);
    border-bottom: 1px solid var(--lightgray);
}

header.scrolled {
    border-bottom: 1px solid transparent;
    box-shadow: 0 -6px 12px -1px var(--darkshadowgray);
}

#headings {
    position: sticky;
    top: 0; 
    height: var(--sticky-header-height);
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*
=======================
section about me
=======================
*/

#sec-about {
    max-width: 1000px;
}

#heading-about {
    display: none;
}

#container-about {
    display: grid;
}

#container-about::after {
    content: "";
    clear: both;
    display: table;
}

#text-about ul {
    padding-left: 20px;
}

.img-photo {
    border: 1px solid var(--lightgray);
}

@media only screen and (min-width: 1201px) {
    #container-about {
        margin-top: 10px;
    }

    #figure-about {
        width: 250px;
        margin: 18px 40px 18px 0px;
        margin-top: 18px;
        margin-bottom: 18px;
        padding-top: 0px;
        grid-column: 1 / 2;
        grid-row: 1 / 1;
    }

    #photo-about {
        width: 250px;
    }

    #text-about {
        grid-column: 2 / 2;
        grid-row: 1 / 1;
    }
}

@media only screen and (max-width: 1200px) {
    #container-about {
        margin-top: 28px;
    }

    #figure-about {
        display: grid;
        justify-content: center;
        margin: 0;
    }

    #photo-about {
        width: 200px;
    }
}

/*
=======================
section cv
=======================
*/

#sec-cv {
    max-width: 1000px;
}

.timeline {
    position: relative;
    padding: 4px;
}

.timeline::after { /* vertical line */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--darkgray);
}

.timepoint {
    position: relative;
    display: grid;
}

.timepoint:not(:last-child) {
    margin-bottom: 15px;
}

.timepoint::after { /* squares */
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--white);
  border: 1px solid var(--darkgray);
  border-radius: 0%;
  z-index: 1;
}

.timepoint-current::after {
    background-color: var(--darkgray);
}

@media only screen and (min-width: 1051px) {
    .timeline::after {
        left: 187px;
    }

    .timepoint {
        grid-template-columns: 165px 1fr;
        column-gap: 40px;
    }

    .timepoint::after {
        top: 8px;
        left: 178px;
    }

    .timepoint-time {
        text-align: right;
    }
}

@media only screen and (max-width: 1050px) {
    .timeline::after {
        left: 5px;
    }

    .timepoint {
        grid-template-columns: 1fr;
        left: 21px;
    }

    .timepoint::after {
        top: 7px;
        left: -25px;
    }
}

.timepoint-entry p {
    margin-top: 8px;
}

.caption-position {
    font-weight: bold;
}

.info-position {
    display: block;
}

#note-resume {
    margin-top: 50px;
}

/*
=======================
section teaching
=======================
*/

#sec-teaching {
    max-width: 1000px;
}

.table-teaching {
    width: 100%;
    border-collapse: collapse;
}

.table-teaching td {
    padding: 3pt;
    border-right: 20px solid transparent;
}

.table-teaching ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 25px;
}

.table-teaching li:not(:last-child) {
    margin-bottom: 0.5ex;
}

@media only screen and (max-width: 1200px) {
    .table-teaching {
        margin-right: 20px;
        width: 100%;
    }

    .table-teaching tr {
        display: table;
        width: 100%;
        margin-bottom: 1em;
    }

    .table-teaching td {
        display: table-row;
    }

    .table-teaching td .tile-link {
        margin-top: 10px;
    }
}

@media only screen and (min-width: 1201px) {
    .table-teaching td:nth-child(1) {  
        text-align: right;
    }
}

.caption-teaching {
    font-variant: normal;
    font-weight: bold;
    margin-top: 5px;
    line-height: 1.125;
}

.img-presentation {
    max-width: 100%;
    margin-top: 10px;
    border: 1px solid var(--lightgray);
}

.img-account {
    margin-top: 10px;
}

#table-teachings-footnote {
    margin-top: 30px;
}

/*
=======================
section software
=======================
*/

#sec-software {
    max-width: 1325px;
}

#grid-software {
    display: grid;
    margin: -25px auto 0px auto;
}

@media only screen and (min-width: 1201px) {
    #grid-software {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "logic education"
        "plasma extensions"
        "plasma shell"
        "web shell";
        gap: 5px 50px;
    }
}

@media only screen and (max-width: 1200px) {
    #grid-software {
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas: 
            "logic"
            "education"
            "plasma"
            "extensions"
            "shell"
            "web";
        /* max-width: 700px; */
    }
    
}

.category-software {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 10px;
}

.project-software {
    padding: 15px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 25px;
    box-shadow: 0px 3px 7px 0px var(--lightshadowgray);
}

#software-logic {
    grid-area: logic;
}

#software-education {
    grid-area: education;
}

#software-plasma {
    grid-area: plasma;
}

#software-extensions {
    grid-area: extensions;
}

#software-shell {
    grid-area: shell;
}

#software-web {
    grid-area: web;
}

.caption-software {
    font-variant: normal;
    margin-top: 5px;
    margin-bottom: 20px;
    line-height: 1.125;
}

.caption-view-all {
    margin-top: 5px;
    margin-bottom: 5px;
}

.description-software {
    margin-top: -10px;
    margin-bottom: 3px;
}

.img-screenshot {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 10px;
    border: 1px solid var(--lightgray);
}

.img-software-account {
    height: 3em;
    margin-top: 10px;
}

/*
=======================
section contact
=======================
*/

.table-contact {
    word-break: break-word;
    border-collapse: collapse;
    margin: auto;
    margin-bottom: 40px;
}

.table-contact td {
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: top;
}

.table-contact td:nth-of-type(1) {
    border-right: 1em solid transparent;
}


@media only screen and (max-width: 650px) {
    .table-contact {
        margin-right: 20px;
        width: 100%;
    }

    .table-contact tr {
        display: table;
        width: 100%;
        margin-bottom: 1em;
    }

    .table-contact td {
        display: table-row;
    }

    .table-contact td .label-contact {
        font-variant: small-caps;
        font-weight: bold;
        color: var(--darkgray);
    }
}

.icon-contact {
    font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 48;
    vertical-align: text-bottom;
    color: var(--darkgray);
}

#field-accounts {
    display: flex;
    gap: 10px;
}

.icon-account, .icon-support {
    height: 1.125em;
    vertical-align: middle;
}

@media only screen and (max-width: 650px) {
    .icon-account, .icon-support {
        height: 1.375em;
    }

    #field-accounts {
        gap: 15px;
    }
}

:root.light .icon-dark,
:root.dark .icon-light,
.icon-colored {
    display: none;
}

.btn-account:hover .icon-colored,
.btn-support:hover .icon-colored {
    display: inline;
}

.btn-account:hover .icon-dark,
.btn-account:hover .icon-light,
.btn-support:hover .icon-dark,
.btn-support:hover .icon-light {
    display: none;
}


#field-support {
    display: flex;
    gap: 12px;
}

/*
=======================
footer
=======================
*/

footer {
    position: relative;
    bottom: 0px;
    width: 100%;
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top: 1px solid var(--lightgray);
}