dustin.web/sass/style.scss

$primary-color: #505050;
$primary-color-dark: #282828;
$primary-color-darker: #212121;
$primary-color-light: #7c7c7c;

$secondary-color: #333f58;
$secondary-color-light: #5e6a85;
$secondary-color-dark: #09192f;

$background-color: #121212;
$text-color: #e2e2e2;
$panel-color: $primary-color-dark;
$panel-color-dark: $primary-color-darker;
$toolbar-color: $primary-color;

@font-face {
  font-family: "DejaVu Sans";
  font-weight: 100;
  src: url("fonts/dejavusans-extralight.woff") format("woff");
}

@font-face {
  font-family: "DejaVu Sans";
  font-style: oblique;
  src: url("fonts/dejavusans-oblique.woff") format("woff");
}

@font-face {
  font-family: "DejaVu Sans";
  font-weight: 700;
  font-style: oblique;
  src: url("fonts/dejavusans-boldoblique.woff") format("woff");
}

@font-face {
  font-family: "DejaVu Sans";
  font-weight: 700;
  src: url("fonts/dejavusans-bold.woff") format("woff");
}

@font-face {
  font-family: "DejaVu Sans";
  src: url("fonts/dejavusans-regular.woff") format("woff");
}

@font-face {
  font-family: "DejaVu Sans Mono";
  src: url("fonts/dejavusansmono-book.woff") format("woff");
}

/* Global styles */

html,
body {
  background-color: $background-color;
  color: $text-color;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family:
    "DejaVu Sans",
    "Lucida Sans",
    "Lucida Sans Regular",
    "Lucida Grande",
    "Lucida Sans Unicode",
    Geneva,
    Verdana,
    sans-serif;
}

body.index {
  background-color: $secondary-color-dark;
}

a:link,
a:visited {
  color: $text-color;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $text-color;
}

code,
kbd,
pre,
samp {
  font-family: "DejaVu Sans Mono", monospace, monospace;
}

code {
  background-color: #191919;
}

span#n0 {
  font-family: "DejaVu Sans Mono", monospace, monospace;
}

/* Header */

@media only screen and (min-width: 800px) {
  header.page-header {
    display: flex;
    justify-content: space-between;
  }
}

header.page-header {
  background-color: $secondary-color-dark;
  box-shadow: 2px 2px 8px 0 #000000;
  z-index: 100;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

svg#dustin-logo path {
  fill: $text-color;
}

nav.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.main-nav li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

nav.main-nav li:last-child {
  border-right: none;
}

nav.main-nav li a {
  display: block;
  padding: 1em;
}

nav.main-nav a:link,
nav.main-nav a:visited,
nav.main-nav a:active,
nav.main-nav a:hover {
  text-decoration: none;
}

nav.main-nav li:hover {
  background-color: $secondary-color-light;
}

.panel {
  background-color: $panel-color;
}

@media screen {
  .panel {
    box-shadow: 2px 2px 8px 0 #000000;
  }

}

@media print {
  header.page-header {
    display: none;
  }

  body {
    font-size: 10pt;
  }
}


/* Body */

main.main-content {
  color: #e8e8e8;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

main.main-content div.main-content {
  margin: 0 auto;
  width: 100%;
  max-width: 12in;
  padding: 0 1em;
}

@media only screen and (min-height: 1000px) and (min-width: 1000px) {
  .index main.main-content div.main-content {
    margin-top: 7rem;
  }
}

.home h1.my-name {
  display: flex;
  justify-content: space-around;
  font-size: 48pt;
  font-weight: lighter;
  text-align: center;
  margin-bottom: 0;
  font-family: "DejaVu Sans";
}

.home ul.my-attributes {
  font-size: 10pt;
  text-align: center;
  list-style-type: none;
  margin: 0 0 4em 0;
  padding: 0;
}

.home ul.my-attributes li {
  display: inline;
}

.home ul.my-attributes li:last-child::after {
  content: none;
}

.home ul.my-attributes li::after {
  content: " • ";
}

.home .links {
  width: 100%;
  max-width: 10in;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.home .links .link {
  background-color: $background-color;
  flex: 0 10em;
  margin: 1em;
  padding: 0 0 1em 0;
  text-align: center;
}

.home .links svg {
  fill: $text-color;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

#songquote {
  display: none;
  font-size: 120%;
  text-align: center;
}

#songquote::after {
  content: "♪";
  padding-left: .75em;
}

#songquote::before {
  content: "♪";
  padding-right: .75em;
}

#songquote .citation .title {
  font-style: italic;
}

#songquote .citation .artist {
  font-variant: small-caps;
}

.recent-posts h2 {
  margin-top: 3em;
}

.recent-posts h3.post-title {
  margin-bottom: 0;
  text-decoration: underline;
}

.recent-posts a {
  text-decoration: none;
}

.recent-posts .post-summary {
  margin-bottom: 2.5em;
}

.recent-posts a.post-summary {
  display: block;
  color: #eeeeee;
}

.recent-posts a.post-summary:hover {
  color: $text-color;
}

.post-date {
  font-size: 10pt;
}

.post.panel {
  padding: 1rem;
}

article.post .post-title {
  margin: 0;
}

article.post .post-date {
  margin-bottom: 3em;
}

.post pre {
  margin: 0 0.25em;
  padding: 0.25em 0.5em;
  overflow: auto;
}

.post p {
  line-height: 1.4em;
}

.post li {
  line-height: 1.4em;
  margin-bottom: 1em;
}

.project-cards {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.project-card {
  width: 100%;
  background-color: $panel-color-dark;
  margin: 0.75em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media only screen and (min-width: 600px) {
  .project-card {
    width: 45%;
  }
}

@media only screen and (min-width: 800px) {
  .project-card {
    width: 30%;
  }
}

.project-card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.project-card a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.project-card h2 {
  text-align: center;
  margin: 0.75em;
  font-size: 1.1em;
}

.project-card img {
  width: 100%;
  aspect-ratio: 640 / 480;
  object-fit: cover;
}

.project-card p {
  margin: 0.75em;
}

/* CV */

.cv.panel {
  padding: 0 1rem 1rem;
}

.cv .content ul {
  list-style-type: '➢ ';
}

.cv .content ul ul {
  list-style-type: '‣ ';
}

@media (min-width: 10in) {
.row {
  display: flex;
  flex-wrap: wrap;
}

.row .col {
  flex: 0 0 50%;
}
}

.cv nav.cv-nav {
  background-color: $toolbar-color;
  padding-top: .5em;
  margin: 0 -1em;
}

.cv nav.cv-nav ul {
  list-style-type: none;
}

nav.cv-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media only screen and (min-width: 900px) {
  nav.cv-nav {
    display: flex;
    justify-content: space-around;
  }

  nav.cv-nav ul {
    display: flex;
  }
}

nav.cv-nav li {
  text-transform: uppercase;
  font-size: smaller;
  display: inline-block;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid transparent;
}

nav.cv-nav li:last-child {
  border-right: none;
}

nav.cv-nav li a {
  display: block;
  padding: 1em;
  color: rgba($text-color, .66);
}

nav.cv-nav a:link,
nav.cv-nav a:visited,
nav.cv-nav a:active,
nav.cv-nav a:hover {
  text-decoration: none;
}

nav.cv-nav li:hover {
  background-color: $primary-color-light;
}

nav.cv-nav li.active {
  color: $text-color;
  border-bottom: 3px solid $text-color;
}

nav.cv-nav li.active a:link,
nav.cv-nav li.active a:visited,
nav.cv-nav li.active a:active,
nav.cv-nav li.active a:hover {
  color: $text-color;
}

@media print {
  nav.cv-nav {
    display: none;
  }
}

a.continue-reading {
  font-size: .75rem;
}

/* Footer */
footer.page-footer {
  font-size: 9pt;
  text-align: center;
  margin-top: 5em;
  margin-bottom: 0.5em;
}

footer.page-footer hr {
  margin-bottom: 1em;
  width: 20%;
}