doylet.dev/style.css

/*******************************************************************************
 * Globals
 ******************************************************************************/
* {
    /* Reset all default margins and padding set by browser */
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
    font-family: sans-serif;

    /* Disable auto-resizing on load since it's unreliable. But allow resizing
     * by users after the page has loaded */
    -webkit-text-size-adjust: 100%;
}

p, h4 {
    margin-top: 0.5em;
}

html {
    margin-left: 10px;
    margin-right: 10px;
}

body {
    min-width: 50%;
    margin: auto;
}

@media print {
    html *{
        font-size: 0.99em;
    }
}

@media screen and (min-width: 60em) {
    /* 960px / 16px == 60em (since 1em == 16px, base font size (above)) */
    html {
        font-size: 1.0em;
    }

    body {
        max-width: 940px;
    }
}

@media screen and (max-width: 48em) {
    /* 768px / 16px == 48em (since 1em == 16px, base font size (above)) */
    html {
        font-size: 1.0em;
    }

    body {
        max-width: 100%;
    }
}

@media screen and (max-width: 20em) {
    /* 320px / 16px == 20em (since 1em == 16px, base font size (above)) */
    html {
        font-size: 0.65em;
    }

    body {
        max-width: 100%;
    }
}


a:link, a:visited {
    text-decoration: underline;
}

h1 {
    font-weight: bold;
    font-size: 2em;
}

h2
{
    padding-bottom: 0.5%;
    font-weight: bold;
    font-size: 1.25em;
}

h3  {
    font-size: 1em;
}

h1, h2, a:hover {
    color: #009688;
}

.index_divider, .index_divider_no_top_margin {
    background-color: #009688;
    display: block;
}

/*******************************************************************************
 * Index Page (index.html)
 ******************************************************************************/
#index_wrapper
{
    margin: auto;
}

.index_divider, .index_divider_no_top_margin
{
    height: 2px;

    margin-top:    1em;
    margin-bottom: 0.5em;
}

@media print {
    #index_divider_last_before_optional_content {
        page-break-after: always;
    }
}

.index_divider_no_top_margin {
    margin-top: 0;
}

.index_education_table_cell             p,
.index_education_table_cell_year        p,
.index_table_cell              p,
.index_table_cell_year         p,
.index_table_cell_name         p,
.index_projects_summary_table_cell      p,
.index_projects_summary_table_cell_name p,
.index_projects_summary_table_cell_year p {
    margin-top: 0;
}

.index_projects_summary_table_cell_year p,
.index_education_table_cell_year        p,
.index_table_cell_year         p {
    font-weight: bold;
    min-width: 9ch;
}

@media screen and (max-width: 48em) {
    /* 768px / 16px == 48em (since 1em == 16px, base font size (above)) */
    .index_projects_summary_table_cell_year,
    .index_education_table_cell_year,
    .index_table_cell_year {
        font-weight: bold;
        min-width: 0;
    }
}

.index_generic_table {
    display: table;
}

.index_generic_table_row {
    display: table-row;
}

.index_generic_table_cell {
    display: table-cell;
}

.index_table_cell li {
    list-style-type: disc;
    margin-left: 1em;
}

#index_header_subtitle {
    color: #009688;
    font-weight: bold;
}

#index_header_subtitle a:link {
    text-decoration: none;
}

/*******************************************************************************
 * index_overview
 ******************************************************************************/
.index_overview {
    margin: 0;
}

.index_overview_section {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

#index_overview_section_qr_code > img{
    min-width: 65px;
    max-width: 20%;
}

@media screen and (max-width: 30em) {
    /* 480px / 16px == 40em (since 1em == 16px, base font size (above)) */
    .index_overview_section {
        display: block;
    }
}

.index_overview_section ul {
    font-weight: bold;
}

/*******************************************************************************
 * index_skills
/******************************************************************************/
 #index_skills_table {
    border-spacing: 2em 0.75em;
    border-collapse: separate;
    margin-left: -2em;
    margin-top: -0.75em;
    margin-bottom: -0.75em;
 }

 .index_skills_table_cell {
     display: table-cell;
     padding: 0.25em;
     margin-right: 1em;
     margin-bottom: 0.5em;
     border: 2px solid #009688;
     border-radius: 4px;

     float: left;
 }

/*******************************************************************************
 * index_table
/******************************************************************************/
.index_table {
    display: table;

    border-spacing: 0.5em 0.75em;
    border-collapse: separate;
    margin-left: -0.5em;
    margin-top: -0.75em;
    margin-bottom: -0.75em;
}

.index_table_row {
    display: table-row;
}

.index_table_cell_name,
.index_table_cell_year,
.index_table_cell {
    display: table-cell;
}

.index_table_cell_name {
    display: table-cell;
    max-width: 15ch;
}

.index_table_cell_role {
    color: #009688;
    font-weight: bold;
}

/*******************************************************************************
 * index_eduation
/******************************************************************************/
#index_education_table {
    display: table;

    border-spacing: 0.5em 0.3em;
    border-collapse: separate;
    margin-left: -0.5em;
    margin-top: -0.3em;
    margin-bottom: -0.3em;
}

.index_education_table_row {
    display: table-row;
}

.index_education_table_cell,
.index_education_table_cell_year {
    display: table-cell;
}

/*******************************************************************************
 * index_projects
/******************************************************************************/
.index_projects_header {
    padding-right: 3%;
    margin-bottom: 2%;
}

.index_projects_content {
    padding-right: 3%;
    margin-bottom: 2%;
}

.index_projects_content ul, .index_projects_content li {
    list-style-type: disc;
    margin-top: 0.15em;
    margin-left: 1.25em;
}

.index_projects_content_section {
    margin-bottom: 1em;
}

.index_projects_preview_images {
    text-align: center;
    margin-bottom: 1em;
}

#index_projects_preview_images_loki img {
    width: 100%;
    height: 100%;
}

#index_projects_preview_images_novel img {
    width: 100%;
    height: 100%;
}

#index_projects_preview_images_kay_engine img {
    width: 100%;
    height: 100%;
}


/*******************************************************************************
 * index_projects_dtrenderer
/******************************************************************************/
#index_projects_preview_images_dtrenderer img{
    width: 100%;
    height: 100%;
}

/*******************************************************************************
 * index_projects_math_masher
/******************************************************************************/
#index_projects_math_masher h2 {
}

#index_projects_preview_images_math_masher img{
    width: 33%;
    height: 33%;
}

/*******************************************************************************
 * index_projects_dengine
/******************************************************************************/
#index_projects_dengine h2 {
}

#index_projects_preview_images_dengine img {
    width: 49.5%;
    height: 49.5%;
}

@media screen and (max-width: 45em) {
    /* 720px / 16px == 45em (since 1em == 16px, base font size (above)) */
    #index_projects_preview_images_dengine img {
        width: 95%;
        height: 95%;
        display: inline-block;
    }
}

/*******************************************************************************
 * index_projects_dchip8
/******************************************************************************/
#index_projects_preview_images_dchip8 img {
    width: 49%;
    height: 49%;
}

@media screen and (max-width: 45em) {
    /* 720px / 16px == 45em (since 1em == 16px, base font size (above)) */
    #index_projects_preview_images_dchip8 img {
        width: 95%;
        height: 95%;
        display: inline-block;
    }
}

/*******************************************************************************
 * index_projects_dqn
/******************************************************************************/
#index_projects_preview_images_dqn img {
    width: 100%;
    height: 100%;
}

/*******************************************************************************
 * index_footer
/******************************************************************************/
#index_footer {
    margin-bottom: 25px;
    text-align: center;
}