index.css

/*-- WHOLE-DOCUMENT STYLES --*/

:root {
  --primaryText: #eee;
  --secondaryText: #ddd;
  --primaryBackground: #112;
  --secondaryBackground: #223;
  --tertiaryBackground: #334;
  --primaryColor: #e0728c;
  --secondaryColor: #89befd;
  --successColor: #69da9c;
  --warningColor: #ddc77e;

  --headerHeight: 24px;
  --hoverTime: 0.2s;
}

::-webkit-scrollbar {
  width: 12px;
  transition: all var(--hoverTime) ease-in-out;
}
::-webkit-scrollbar-track {
  background-color: var(--secondaryBackground);
  border-radius: 10px;
  transition: all var(--hoverTime) ease-in-out;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--tertiaryBackground);
  transition: all var(--hoverTime) ease-in-out;
}

.w-70 {
  width: 70% !important;
}
.w-90 {
  width: 90% !important;
}

.w-95 {
  width: 95% !important;
}

#homepage_body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1em;
  color: var(--primaryText) !important;
  background-color: var(--primaryBackground);
  transition: all var(--hoverTime) ease-in-out;
}

/* Prevents body width issues on small screens */
.no-overflow {
  overflow-x: initial;
  background-color: var(--primaryBackground);
}

/* Secondary color thicker borders between sections */
.section-border-bottom.border-bottom {
  border-color: var(--secondaryColor) !important;
  border-bottom-width: 2px !important;
  transition: all var(--hoverTime) ease-in-out;
}

/* Primary color borders for certain text elements -
 * this is used in jumbotron and work cards
 */
h3.border-pink,
p.border-pink {
  border-color: var(--primaryColor) !important;
  transition: all var(--hoverTime) ease-in-out;
}

/* Changes all link colors (non-nav links are indicated with an icon) */
.nav-link,
a.project-link {
  color: var(--primaryText) !important;
}

/* scale cards on hover for large enough screens */
@media screen and (min-width: 576px) {
  .jumbotron-fluid:hover,
  .card-block:hover,
  .work-card:hover {
    transform: scale(1.05, 1.05);
    box-shadow: none;
  }
}

/*------------------------- NAVBAR -------------------------*/

.navbar-nav.rounded {
  background-color: var(--secondaryBackground);
  border-color: var(--tertiaryBackground) !important;
  width: max-content;
  float: right;
}

.nav-item.border {
  background-color: var(--tertiaryBackground) !important;
  border-color: var(--secondaryColor) !important;
  margin: 4px 6px;
  width: fit-content;
  transition: all var(--hoverTime) ease-in-out;
}
.nav-item.border:hover,
.navbar-toggler.border:hover {
  border-color: var(--primaryColor) !important;
}

.nav-link {
  padding: 6px 8px !important;
}

/* Need media query to right-align nav items in expanded menu without
 * messing up left margin on first item for larger screens
 */
@media screen and (max-width: 992px) {
  .nav-item.border {
    margin-left: auto;
  }
  .navbar-nav.rounded {
    padding-left: 0.65rem !important;
  }
}

/* Override bootstrap default colors and add transition details for card-like components */
.navbar-toggler.border,
.work-card,
.card.card-block,
.jumbotron-fluid {
  background-color: var(--secondaryBackground) !important;
  border-color: var(--secondaryColor) !important;
  transition: all var(--hoverTime) ease-in-out;
}

/*------------------------- ABOUT ME -------------------------*/

/* Constrain jumbotron dimensions */
.jumbotron-fluid {
  max-width: 1140px;
}
@media screen and (max-width: 575px) {
  .jumbotron-fluid {
    width: 100% !important;
  }
}

/* Wrap bio in border independent of second paragraph display state */
.bio-border-left {
  /* top border handled with bootstrap class on text tag */
  border-left: 1px solid var(--primaryColor);
  position: absolute;
  height: 80%;
  top: 1px;
  left: 0px;
  pointer-events: none;
  transition: all var(--hoverTime) ease-in-out;
}
.bio-border-bottom {
  border-right: 1px solid var(--primaryColor);
  border-bottom: 1px solid var(--primaryColor);
  position: absolute;
  height: 80%;
  width: 100%;
  bottom: -3px;
  right: 0px;
  pointer-events: none;
  transition: all var(--hoverTime) ease-in-out;
}
/* adjust for when second paragraph is not displayed */
@media screen and (min-width: 576px) {
  .bio-border-left {
    height: 50%;
  }
}

/* constrain bio image size, override bootstrap border color */
#selfie {
  max-height: 200px;
  max-width: 200px;
  border: 2px solid var(--primaryColor);
}
.img-link:hover {
  text-decoration: none;
}

/*------------------------- PREVIOUS WORK -------------------------*/

/* see page-wide selectors */

/*------------------------- PROJECTS -------------------------*/

/* Indicate external links with a simple icon */
.project-link:after {
  content: URL('../images/externalLink.png');
  width: 20px;
  height: 20px;
}

/* fix scrolling row dimensions for various screen sizes */
.flex-row.flex-nowrap {
  max-width: fit-content; /* centers on xxwide screens */
  height: 445px; /* min height */
}
/* md */
@media screen and (min-width: 768px) {
  .flex-row.flex-nowrap {
    height: 525px;
  }
}
/* lg */
@media screen and (min-width: 992px) {
  .flex-row.flex-nowrap {
    height: 670px;
  }
}

/* Fix card dimensions in harmony with row dimensions */
div.col-5 {
  min-width: 350px;
  max-width: 600px;
}
/* Final card */
div.col-12 {
  min-width: 360px !important;
  max-width: 500px !important;
  max-height: 620px !important;
}
/* fine-grain tweak for final card - title margin needs weird breakpoint */
@media screen and (min-width: 395px) and (max-width: 767px) {
  div.col-12 > div.card > h3.h5 {
    margin-bottom: 0.5rem !important;
  }
}

/* center project descriptions in their areas of the card */
p.project-description {
  height: 100%;
  display: flex;
  align-items: center;
}

/* fix project image dimensions */
.project-img {
  max-height: 300px;
  object-fit: contain;
}

/* Replicate similar borders found elsewhere on page */
.project-border-top {
  border-left: 1px solid var(--primaryColor);
  border-top: 1px solid var(--primaryColor);
  position: absolute;
  height: 70%;
  width: 93%;
  top: 15px;
  left: 10px;

  pointer-events: none;
  transition: all var(--hoverTime) ease-in-out;
}
.project-border-bottom {
  border-right: 1px solid var(--primaryColor);
  border-bottom: 1px solid var(--primaryColor);
  position: absolute;
  height: 70%;
  width: 93%;
  bottom: 15px;
  right: 10px;

  pointer-events: none;
  transition: all var(--hoverTime) ease-in-out;
}

/* bootstrap has no d-lg-listitem class */
#hidden-future-project {
  display: none;
}

@media screen and (min-width: 992px) {
  #hidden-future-project {
    display: list-item;
    list-style-type: disc;
  }
}

/*------------------------- FORM -------------------------*/

/* give form background color and fix max width to prevent awkward proportions */
.form {
  background-color: var(--secondaryBackground);
  max-width: 900px !important;
}

/* Custom input surround color */
.form-control:focus {
  border-color: var(--primaryColor) !important;
  box-shadow: 0 0 0 0.2rem var(--primaryColor) !important;
}

/* Replicate similar borders found elsewhere on page */
.form-border-top {
  border-left: 1px solid var(--primaryColor);
  border-top: 1px solid var(--primaryColor);
  position: absolute;
  height: 70%;
  width: 95%;
  top: 25px;
  left: 2.25%;
  pointer-events: none;
  transition: all var(--hoverTime) ease-in-out;
}
.form-border-bottom {
  border-right: 1px solid var(--primaryColor);
  border-bottom: 1px solid var(--primaryColor);
  position: absolute;
  height: 70%;
  width: 95%;
  bottom: 25px;
  right: 2.25%;
  pointer-events: none;
  transition: all var(--hoverTime) ease-in-out;
}

/* Color form buttons and give them hover animations */
.border.form-btn {
  color: var(--primaryText) !important;
  background-color: var(--tertiaryBackground) !important;
  border-color: var(--primaryColor) !important;
  transition: all var(--hoverTime) ease-in-out !important;
}
.form-btn[type='submit']:hover {
  background-color: var(--successColor) !important;
  color: var(--primaryBackground) !important;
}
.form-btn[type='reset']:hover {
  background-color: var(--warningColor) !important;
  color: var(--primaryBackground) !important;
}

/*------------------------- FOOTER -------------------------*/

.btn#info-btn {
  color: var(--secondaryText);
  background-color: var(--tertiaryBackground);
  width: 40px;
  height: 40px;
  font-style: italic;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  transition: all var(--hoverTime) ease-in-out;
}

.btn#theme-btn {
  color: var(--secondaryText);
  background-color: var(--tertiaryBackground);
  height: 40px;
  border-radius: 10px;
  transition: all var(--hoverTime) ease-in-out;
}

.btn.footer-btn:hover {
  border-color: var(--primaryColor);
}
.btn.footer-btn:active {
  background-color: var(--secondaryBackground);
  color: #46959b;
}

/*-------------------------- BLOG --------------------------*/

#blog_body {
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1em;
  color: var(--primaryText) !important;
  background-color: var(--secondaryBackground);
}

/* TODO make this collapsible */
#sidebar {
  display: none;
  width: 240px !important;
  font-size: 1em;
  padding-bottom: 10px;
}

#sidebar_expander {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 20px;
  margin-left: 46px;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#sidebar_expander:hover {
    opacity: 100% !important;
}

#expand_sidebar_button {
  position: relative;
  background-color: transparent;
  width: 40px;
  height: 40px;
  right: 5px;
  bottom: 5px;
  border-width: 1px;
  border-radius: 10%;
}

.sidebar_item {
    padding: 0px !important;
    color: var(--primaryText);
    text-decoration: none;
    margin-bottom: 8px;
}

#post_container {
  margin: 20px;
  margin-top: 48px;
}

.blog_post {
  display: grid;
}

.blog_post > h1 {
  font-size: 1.4em;
  grid-area: 1 / 1 / span 1 / span 2;
  align-self: center;
  text-wrap: wrap;
  margin-top: 12px;
}

/* smallest viewport first, then md and large */
.blog_post > img {
  grid-area: 1 / 3 / span 1 / span 1;
  align-self: center;
  justify-self: right;
  max-width: 100%;
  max-height: 100%;
  padding: 10%;
}

.blog_post > p {
	grid-area: 2 / 1 / span 1 / span 3;
}

/* md */
@media screen and (min-width: 768px) {
  .blog_post > h1 {
	font-size: 1.8em;
  }

  #sidebar_expander {
    width: 40px;
    height: 40px;
  }
  #expand_sidebar_button {
    width: 50px;
    height: 50px;
    right: 5px;
    bottom: 5px;
  }
}

/* lg */
@media screen and (min-width: 992px) {
	#blog_body {
    display: grid;
    height: 98% !important;
	}

  #post_container {
    grid-area: 1 / 2 / span 1 / span 1;
    padding-left: 256px;
    margin-top: 0px;
	font-size: 1.2em;
  }

  #sidebar {
    position: fixed;
    width: 25%;
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1 / span 1 / span 1;
    background-color: var(--primaryBackground);
    height: 100%;
  }

  #sidebar_expander {
    display: none;
  }
}