/** Oceanic Theme **/

$avatar-border-width: $avatar-width + 16px; $avatar-border-height: $avatar-height + 16px; $max-content-width: 1024px; $max-sidebar-width: 360px; $max-sidebar-element-width: 205px;

/**********************************************************************/ /** Core Styles **/ /**********************************************************************/ body {

align-items: stretch;
color: $text-color;
display: flex;
font-family: $default-font;
font-size: 14pt;
margin: 0;
min-height: 100vh;
background: $body-background;

}

/* Headers */ h1, h2, h3, h4, h5, h6 {

color: $heading-color;
font-family: $default-font;

} h1 {

border-bottom: 1px solid $title-underline-color;
color: $title-color;
font-size: 36pt;
font-weight: 100;
text-align: center;

} h2 {

margin-top:1.5em;

}

/* Hyperlinks */ a {

color: $link-unvisited-color;

} a:visited {

color: $link-visited-color;

}

/**********************************************************************/ /** Page Left/Right Side **/ /**********************************************************************/

body > header, body >.hires-padding {

border-right: $header-seam;
padding: 50px 20px;
width: 25%;
min-width: $max-sidebar-element-width;
max-width: $max-sidebar-width;

}

body > .hires-padding {

border-left: $header-seam;
display: none;

}

/**********************************************************************/ /** Page Header **/ /**********************************************************************/

/* Force all header text to the same color. */ body > header, body > header a, body > header a:visited, body > header h1, body > header h2 {

font-family: $header-font;
color: $header-text-color;
text-decoration: none;

} body > header h1, body > header h2 {

border: 0;
display: block;
margin: 0.5em auto auto auto;
max-width: $max-sidebar-element-width;
text-align: center;

} body > header h1 {

font-family:$site-title-font;
font-size:120%;
font-weight: 900;

} body > header h2 {

font-family: $header-font;
font-size:100%;
font-weight:$subtitle-font-weight;

}

/* Avatar Image */ body > header .avatar-wrap {

margin: 0 auto;
width: $avatar-border-width;
height: $avatar-border-height;
overflow: visible;
background: radial-gradient(circle, $avatar-aura-color 62%, #0000 65%);

} body > header .avatar-wrap > .avatar {

position: relative;
top: 8px;
left: 8px;
width: $avatar-width;
height: $avatar-height;
background-image: $avatar-img;
border-radius:50%;

}

body > header input, body > header label {

display: none;

}

/* Navigation */ body > header nav ul {

letter-spacing: 2px;
list-style: none;
margin-top:40px;
padding: 0;

} body > header nav li {

border-bottom: $header-separator;
display: block;
margin: 0 auto;
padding: 0.5em 0;
text-align: center;
width: $max-sidebar-element-width;

} body > header label svg {

stroke: $hamburger-menu-color;

}

body > header nav .current a {

color: $selected-navigation-color;

} body > header nav li:first-child {

border-top: $header-separator;

}

/* Social Media Links */ body > header .social-icons {

margin: 40px auto 0 auto;
text-align: center;
width: $max-sidebar-element-width;

} body > header .social-icons ul {

list-style: none;
padding: 0;

} body > header .social-icons li {

display: inline;
padding: 5px;

} body > header .social-icons svg {

height: 24px;
width: 24px;

}

body > header .social-icons svg {

fill: $social-media-icon-color;

}

/**********************************************************************/ /** Content Area **/ /**********************************************************************/

body > .content-area {

vertical-align:top;
flex: 1 1;
margin: 0 0 0 0;
background: #FFF;
padding: 20px;

} main {

max-width:1024px;
margin: 0 auto;

}

body > .content-area > footer {

color: #BBB;
font-family: $aside-font;
font-size: 0.7em;
text-align: center;
margin-top: 2em;

}

/**********************************************************************/ /** Multi-Column List **/ /**********************************************************************/

.multi-column-list {

display: flex;
flex-wrap: wrap;

} .multi-column-list article {

border: 1px solid #CCC;
display: block;
padding: 0 2% 10px 2%;
width: 45%;

}

/**********************************************************************/ /** Blog Posts **/ /**********************************************************************/

ol.blog-entries {

list-style: none;
padding: 0;
margin: 0;

}

ol.blog-entries li {

padding: 0;
margin: 1em 0 0 0;
border-top:2px solid #999;

} ol.blog-entries > li:first-child {

border-top: none;

}

ol.blog-entries h3 {

margin-bottom: 0.4em;

}

ol.blog-entries h3 a {

color: $heading-color;
text-decoration: none;

}

ol.blog-entries aside, aside.posted {

color: #666;
font-family: $aside-font;
font-size: 0.7em;

}

ul.pages {

display: block;
list-style: none;
text-align: center;

}

ul.pages li {

/*
 * Falling back to Noto Sans JP font here since it supports the
 * unicode characters we need for navigation.
 */
font-family: "Noto Sans JP", Helvetica, sans-serif;
color: #AAA;
display: inline-block;
font-size: 1em;
vertical-align: middle;
margin: 0 10px;

}

ul.pages li a {

color: $text-color;
text-decoration: none;

}

h1.post-title {

margin-bottom:0.25em;

}

aside.posted {

text-align: center;
margin-bottom:1em;

}

/**********************************************************************/ /** Text Formatting **/ /**********************************************************************/

/* Code Snippets */ code {

font-family: $code-font;

} .highlight > pre {

margin: 1.5em 50px;
padding: 4px 8px;

}

/* Styles for Rouge-generated table when line numbers are enabled. */ .rouge-table {

border: 0;
margin: 0;

} .rouge-table pre {

font-size: 0.8em;
padding: 0 8px;

} .rouge-table td {

border: 0;
padding: 0;

}

blockquote {

border: 2px solid #AAA;
border-top: none;
border-bottom: none;
border-radius: 10px;
padding: 10px 15px;
font-style: italic;
font-size: 0.9em;

}

/**********************************************************************/ /** Tables **/ /**********************************************************************/

table {

margin: 1.5em 0 0 0;
border-spacing: 0;
border-collapse: collapse;
border: $table-border-style;

} table td, table th {

border: $table-cell-border-style;
padding:4px 8px;
text-align: left;

} table th {

font-family: $table-header-font;
font-size: 0.9em;

} table td {

font-family: $table-cell-font;
font-size: 0.9em;

}

/**********************************************************************/ /** Figures **/ /**********************************************************************/

figure {

margin:1.5em auto;
display: block;
text-align:center;

}

figure figcaption {

margin-top:0.5em;
color: #666;
font-family: $aside-font;
font-size:0.8em;

}

/**********************************************************************/ /** Small Screen Optimization **/ /**********************************************************************/

@media screen and (max-width: 768px) {

/******************************************************************/
/**                         Orientation                          **/
/******************************************************************/
body {
        flex-direction: column;
}

body > header,
main {
        width: unset;
        max-width:unset;
}

/******************************************************************/
/**                         Page Header                          **/
/******************************************************************/

body > header {
        padding: 20px 0 0 0;
        border-right: none;
}
body > header > .profile-area {
        display: flex;
}
body > header .avatar-wrap {
        margin: 0 0 20px 20px;
        flex: 0 0 $avatar-border-width;
}
body > header .header-text-wrap {
        margin: 0 0 0 20px;
        vertical-align: middle;
        flex: 1 1;
}
body > header .header-text {
        display: block;
        padding: 20px;
}

body > header h1 {
        margin: 0;
}
body > header h1,
body > header h2 {
        max-width: initial;
}

body > header > label {
        display: block;
        padding: 10px 0;
        text-align: center;
        border-top: $header-seam;
        height: 26px;
}
body > header > label > svg {
        display: block;
        margin: auto;
        height: 26px;
        width: 75px;
}

body > header nav ul {
        margin-top: 1em;
}

body > header input ~ .social-icons,
body > header input ~ nav {
        display: none;
}
body > header input:checked ~ .social-icons,
body > header input:checked ~ nav {
        display: block;
}

body > .content-area {
        margin: 0;
        padding-top: 0;
}
main {
        border-radius:10px;
}

.project-list {
        display: block;
}
.project-list article {
        display: block;
        padding: initial;
        width: initial;
}

/******************************************************************/
/**                            Other                             **/
/******************************************************************/

h1 {
        font-size: 30px;
        border-bottom: none;
}

}

@media screen and (min-width: 1921px) {

body > .hires-padding {
        display: block;
        flex: 1 1 $max-sidebar-width;
        max-width:$max-sidebar-width;
}

body > header {
        width: 25%;
}

}