@import “colors”; @import “typography”; @import “code”;
{% assign base_color = site.data.manifest.theme_color | default: '#854fee' %}
:root {
/* Primary Colors (same in all themes) */ --mdc-theme-primary: {{ base_color }}; --mdc-theme-primary-variant: #4e20ba; --mdc-theme-on-secondary: #ffffff; --mdc-theme-overlay: {{ base_color }}1f; --mdc-theme-shadow: #0000001f; /* Background (different in light/dark) */ {% assign background_color = '#f5f5f5' %} --mdc-theme-background: {{ background_color }}; --mdc-theme-border: {{ background_color }}; /* Surfaces (different in light/dark) */ --mdc-theme-surface: #ffffff; --mdc-theme-on-surface: #000000;
}
@media (prefers-color-scheme: dark) {
:root { /* Background (different in light/dark) */ {% assign background_color = '#060606' %} --mdc-theme-background: {{ background_color }}; --mdc-theme-border: {{ background_color }}; /* Surfaces (different in light/dark) */ --mdc-theme-surface: #121212; --mdc-theme-on-surface: #ffffff; }
}
:root {
/* corner radius of the content card */ --content-corners: 2px; /* elevation of the content card */ --content-elevation: 4px; /* padding inside the content card */ --content-padding: 40px; /* spacing around the content card */ --content-spacing: 24px; /* spacing between the content columns */ --column-spacing: 40px; /* spacing around the footnote */ --footnote-spacing-x: 24px; --footnote-spacing-y: 0px; --card-radius: 4px;
}
@media (max-width: 840px) {
:root { --content-corners: 0px; --content-elevation: 0px; --content-padding: 24px; --content-spacing: 0px; --column-spacing: 0px; --footnote-spacing-x: 24px; --footnote-spacing-y: 24px; }
}
@media (max-width: 768px) {
:root { --content-padding: 16px; --footnote-spacing-x: 16px; --footnote-spacing-y: 16px; }
}
html, body {
width: 100%; height: 100%; margin: 0; padding: 0;
}
body {
display: flex; flex-direction: column; height: 100vh;
}
*, ::before, ::after {
box-sizing: border-box; margin: 0;
}
.mdc-list-item {
display: block; height: auto !important; max-height: none !important;
}
.mdc-list-item__text {
white-space: normal; text-align: left; height: auto; max-height: none;
}
.mdc-list-item__primary-text {
white-space: normal;
}
.mdc-list-item__secondary-text {
font-weight: 200; white-space: normal;
}
.mdc-top-app-bar {
-moz-box-shadow: 0px 1px 4px var(--mdc-theme-shadow); -webkit-box-shadow: 0px 1px 4px var(--mdc-theme-shadow); box-shadow: 0px 1px 4px var(--mdc-theme-shadow); z-index: 999;
}
.main-content {
align-items: center; display: flex; flex: 1; flex-direction: column; justify-content: center; left: 0; right: 0; overflow-x: hidden; width: 100%;
}
.main-content article {
border-radius: var(--content-corners); -moz-box-shadow: 0px 0px var(--content-elevation) var(--mdc-theme-shadow); -webkit-box-shadow: 0px 0px var(--content-elevation) var(--mdc-theme-shadow); box-shadow: 0px 0px var(--content-elevation) var(--mdc-theme-shadow); margin: var(--content-spacing); padding: var(--content-padding); width: calc(100% - var(--content-spacing));
}
.mdc-card {
box-shadow: 2px 2px 2px var(--mdc-theme-shadow); border-color: var(--mdc-theme-border) !important; border-style: solid !important; border-width: 1px !important; border-radius: 4px;
}
.mdc-card–outlined {
box-shadow: 0 0 0;
}
.mdc-card__content {
padding: 16px;
}
.mdc-button–outlined, .mdc-button–outlined .mdc-button__ripple, .mdc-button–unelevated, .mdc-button–unelevated .mdc-button__ripple {
border-radius: 24px !important;
}
.col-md-8 {
float: left; width: 67%; padding-right: var(--column-spacing);
}
.col-md-4 {
float: left; width: 33%;
}
@media (max-width: 840px) {
.col-md-8 { float: none; width: 100%; } .col-md-4 { float: none; width: 100%; }
}
.main-content article>header {}
.main-content article section {
margin-bottom: 32px;
}
.main-content article aside {}
.main-content .footnote {
font-size: 11pt; padding: var(--footnote-spacing-y) var(--footnote-spacing-x); width: 100%;
}
footer {
width: 100%;
}
.main-content .footer {
font-size: 12pt; padding: 24px; width: 100%;
}
.main-content .footer .mdc-list-divider {
margin-top: 16px; margin-bottom: 16px;
}
.main-content .footer ul.sitemap {
margin-top: 16px;
}
.main-content .footer ul.sitemap>li {
display: inline-block; margin-right: 24px;
}
@media (max-width: 768px) {
.main-content .footer ul.sitemap>li { display: block; margin-right: 0px; min-height: 48px; }
}
/* Style the list */ .breadcrumbs {
list-style: none;
}
/* Display list items side by side */ .breadcrumbs .breadcrumb-item {
display: inline-block; text-transform: capitalize;
}
/* Add a slash symbol (/) before/behind each list item */ .breadcrumbs .breadcrumb-item+.breadcrumb-item:before {
content: "⟩"; padding: 0 8px;
}
.ml-15 {
margin-left: 15px;
}
/******************************************************************************/ /* UI Elements */ /******************************************************************************/ hr {
opacity: 0.5;
}
hr.mdc-list-divider {
margin: 8px;
}
hr.small {
max-width: 100px
}
ul, .list {
margin: 0; padding: 0; list-style: none;
}
input {
background-color: var(--mdc-theme-background); border: 1px solid var(--mdc-theme-border); border-radius: 4px; color: var(--mdc-theme-on-surface); padding: 8px; width: 100%;
}
input:focus {
outline-style: none; border: 1px solid var(--mdc-theme-primary);
}
img {
max-width: 100%;
}
/******************************************************************************/ /* Main Title Section */ /******************************************************************************/ .about-description {
width: 100%; margin-top: var(--content-padding); margin-bottom: var(--content-padding);
}
/******************************************************************************/ /* Home Banner Section */ /******************************************************************************/ .about-section {
position: relative;
}
.about-section .col-md-8 {
vertical-align: middle; align-self: center;
}
.about-section .about-summary {
text-align: left;
}
.about-section .about-summary .greeting {
font-size: 32px; line-height: 32px; margin-top: var(--content-padding); margin-bottom: 0;
}
.about-section .about-summary .introduction {
font-size: 56px; line-height: 56px; margin-bottom: var(--content-padding);
}
@media (max-width: 840px) {
.about-section { margin-top: 0; } .about-section .about-summary { margin-top: 150px; }
}
/******************************************************************************/ /* Services Section */ /******************************************************************************/ .service-item {
padding: 16px; text-align: center; cursor: pointer;
}
.service-item>.material-icons {
font-size: 48px; margin-bottom: 8px; color: var(--mdc-theme-primary);
}
.service-item h2 {
font-size: 18px; margin-bottom: 8px; text-transform: uppercase; font-weight: normal;
}
.service-item p {
font-size: 16px; margin-bottom: 0;
}
.service-item .mdc-button__label {
text-transform: lowercase;
}
/******************************************************************************/ /* Expreience Section */ /******************************************************************************/ .experience-item {
display: inline-block; position: relative; width: 100%; margin-bottom: 8px;
}
.experience-item .content {
float: left; width: calc(100% - 32px);
}
.experience-item .content .details {
border: 0.5px solid var(--mdc-theme-border); border-radius: 4px; padding: 16px; margin-top: 8px;
}
.experience-item .date {
color: var(--mdc-theme-primary);
}
.experience-item .name {
margin: 0px;
}
.experience-item .timeline {
float: left; width: 24px; margin-right: 8px; text-align: center;
}
.experience-item .timeline .dot {
color: var(--mdc-theme-primary-variant); font-size: 24px; position: relative; z-index: 2;
}
.experience-item .timeline .bar {
background-image: linear-gradient(to bottom, var(--mdc-theme-primary-variant) 0%, var(--mdc-theme-primary-variant) 100%), radial-gradient(circle at top left, var(--mdc-theme-primary-variant), var(--mdc-theme-primary-variant)); width: 2px; position: absolute; top: 20px; bottom: -20px; left: 11px; z-index: 1;
}
.experience-item .timeline .bar-expanded {
background-color: var(--mdc-theme-primary-variant); width: 28px; height: 2px; position: absolute; top: 18px; left: -18px; z-index: 100;
}
/******************************************************************************/ /* Projects Section */ /******************************************************************************/ .portfolio {
width: 100%; height: 100%; margin: 0; padding: 0; min-height: 100vh;
}
.portfolio .filters {
display: inline-block;
}
.portfolio .filters li {
font-size: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer;
}
.portfolio .grid {
margin: auto;
}
.portfolio .grid .portfolio-item {
display: inline-block; width: 128px; border-radius: var(--card-radius); margin: 8px;
}
.portfolio .grid .portfolio-item .project-icon {
background-color: var(--mdc-theme-background);
}
.portfolio .grid .portfolio-item .project-icon .overlay {
position: absolute; left: 0; top: 0; height: 100%; width: 100%; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s;
}
.portfolio .grid .portfolio-item .project-icon:focus .overlay, .portfolio .grid .portfolio-item .project-icon:hover .overlay {
background-color: var(--mdc-theme-overlay);
}
.portfolio .grid .mdc-card {
border-radius: 16px;
}
.portfolio .grid .portfolio-item .project-details {
color: var(--mdc-theme-on-surface); padding: 0px; text-align: center;
}
.portfolio .grid .portfolio-item .project-details strong {
margin-top: 4px; font-size: 11pt; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.portfolio .grid .portfolio-item .project-details small {
font-size: 10pt; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; opacity: 0.5; overflow: hidden; text-overflow: ellipsis;
}
.bottom-navigation {
background: var(--mdc-theme-surface); -moz-box-shadow: 0px -1px 2px var(--mdc-theme-shadow); -webkit-box-shadow: 0px -1px 2px var(--mdc-theme-shadow); box-shadow: 0px -1px 2px var(--mdc-theme-shadow); display: none; position: fixed; width: 100%; height: 48px; bottom: 0; left: 0; right: 0;
}
.hide-when-small {
display: block;
}
@media (max-width: 1024px) {
.portfolio .grid .portfolio-item { width: 112px; }
}
@media (max-width: 930px) {
.portfolio .grid .portfolio-item { width: 96px; }
}
@media (max-width: 840px) {
.portfolio .subtitle, .portfolio hr.small { display: none; } .portfolio .grid { margin: auto; margin-bottom: 0; } .portfolio .grid .portfolio-item { width: 88px; } .bottom-navigation { display: block; } .hide-when-small { display: none; } .portfolio > section { margin-bottom: 0 !important; }
}
@media (max-width: 360px) {
.portfolio .grid .portfolio-item { width: 80px; }
}
@media (max-width: 320px) {
.portfolio .grid .portfolio-item { width: 72px; }
}
@media (max-width: 296px) {
.portfolio .grid .portfolio-item { width: 64px; }
}
@media (max-width: 272px) {
.portfolio .grid .portfolio-item { width: 56px; }
}
@media (max-width: 840px) {
.about-section { min-height: 300px; } .about-section .about-summary { margin-top: 0; } .about-section .about-summary h3 { font-size: 30px; } .about-section .about-summary p br { display: none; } .about-section .about-summary h3 span { line-height: 45px; padding-bottom: 0; padding-top: 0; }
}
@media (max-width: 600px) {
.about-section .about-summary h2 { font-size: 28px; line-height: 38px; } .about-section { min-height: 450px; } .about-section .about-summary img { display: none; } .about-section .about-summary h5 { margin-top: 0; }
}
@media (max-width: 320px) {
.about-section .about-summary { padding: 30px 15px; margin-top: 0; } .about-section .about-summary h3 { font-size: 24px; }
}
/* embed responsively (YouTube vidoes) */ .embed-container {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; width: 100%; border-radius: 8px;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.callout {
font-size: 24px; font-weight: bolder; text-transform: uppercase;
}
.highlighted {
background-color: var(--mdc-theme-overlay); border-radius: 4px;
}
.mdc-drawer .mdc-list-item {
padding: 4px 8px;
}
.mdc-drawer .mdc-list-item–activated {
border-radius: 2px 16px 16px 2px;
}
.page-cover {
position: relative; border-radius: 8px; width: 100%; height: 320px; background-size: cover; background-position: center center; background-repeat: no-repeat; margin-bottom: var(--content-padding);
}
.page-cover::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: linear-gradient(#0000, #0008); z-index: 1;
}
.align-bottom {
width: 100%; padding: 8px 8px 0 8px; position: absolute; bottom: -32px; left: 0; z-index: 2;
}
.align-bottom .project-title, .align-bottom .project-type, .align-bottom .mdc-icon-button {
color: #fff !important;
}
.align-bottom .mdc-icon-button:hover, .align-bottom .mdc-icon-button:focus {
color: var(--mdc-theme-background) !important;
}
.project-summary {
display: inline-block;
}
.project-summary>* {
float: left;
}
.project-logo {
border-radius: 8px; margin-right: 16px; height: 80px; width: 80px; font-size: 80px; line-height: 80px;
}
.project-logo-featured {
border-radius: 8px; margin-right: 12px; height: 64px; width: 64px; font-size: 64px; line-height: 64px;
}
.project-title {
padding: 0; margin: 0;
}
.project-tags {
display: block; margin-bottom: 4px;
}
.project-tag {
display: inline-block; background-color: var(--mdc-theme-background); border-radius: 16px; color: var(--mdc-theme-on-surface); font-size: 10px; font-weight: bold; padding: 2px 8px; text-transform: uppercase;
}
.project-tag .material-icons {
font-size: 10px; margin-right: 4px; vertical-align: middle;
}
.project-type, .project-type * {
color: gray; font-size: 14px; font-weight: bold; vertical-align: middle;
}
.project-portfolio-img {
border-radius: 8px; width: 100%;
}
.mdc-data-table {
width: 100%; max-width: 100%;
}
pwa-install {
--install-button-color: var(--mdc-theme-primary);
}
pwa-install::part(openButton) {
background-color: #0000; width: 40px; height: 40px; border-radius: 24px;
}
pwa-install * {
color: var(--mdc-theme-on-surface) !important; vertical-align: middle;
}
pwa-install:hover * {
color: var(--mdc-theme-primary) !important;
}
.mdc-snackbar {
z-index: 99999;
}
.mdc-snackbar__surface::before {
content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
/* Print Styles */ @media print {
.mdc-top-app-bar, .breadcrumbs, footer { display: none; } .main-content { margin: 0; padding: 0; } article section { page-break-inside: avoid; }
}
ul.downloads {
list-style:none; height:40px; padding:0; background: #f4f4f4; border-radius:5px; border:1px solid #e0e0e0; width:270px;
}
.downloads li {
width:89px; float:left; border-right:1px solid #e0e0e0; height:40px;
}
.downloads li:first-child a {
border-radius:5px 0 0 5px;
}
.downloads li:last-child a {
border-radius:0 5px 5px 0;
}
.downloads a {
line-height:1; font-size:11px; color:#676767; display:block; text-align:center; padding-top:6px; height:34px;
}
.downloads a:hover, .downloads a:focus {
color:#675C5C; font-weight:bold;
}
.downloads ul a:active {
background-color:#f0f0f0;
}
.downloads li + li + li {
border-right:none; width:89px;
}
.downloads a strong {
font-size:14px; display:block; color:#222;
}
@media print, screen and (max-width: 480px) {
.downloads { width:99%; } .downloads li, .downloads li + li + li { width:33%; }
}
/* Blog styles */ .post-container {
border: 1px solid var(--mdc-theme-overlay); border-radius: 8px; padding: 8px; width: 100%; min-height: 240px;
}
.post {
display: flex; width: 100%;
}
.post-container:nth-of-type(odd) .post {
flex-direction: row-reverse;
}
.post-img {
margin-right: 8px; border-radius: 8px; width: 50%; min-height: 240px; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;
}
.post-container:nth-of-type(odd) .post .post-img {
margin-left: 8px; margin-right: 0; flex-direction: row-reverse;
}
.post-details {
width: 50%; text-align: center;
}
.post-date {
font-size: 10pt !important; text-transform: uppercase;
}
.post-title {
font-size: 16pt; font-weight: bold; margin: 8px 0;
}
.post-excerpt {
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
@media (max-width: 840px) {
.post { display: block; } .post-img { margin-left: 0 !important; margin-right: 0; width: 100%; } .post-details { width: 100%; }
}