assets/css/projects.scss

/* Styles specific to projects page */

/* Widths */
:root {
  --project-card-min-width: 385px;
  --project-card-max-width: 500px;
  --search-bar-width: 450px;
}

.all-projects {
  display: flex;
  flex-wrap: wrap;
}
.project-card {
  position: relative;
  flex: 1 1;
  padding: var(--feather-grid-mega) calc(var(--feather-grid-mega) * 1.5);
  min-width: var(--project-card-min-width);
  max-width: var(--project-card-max-width);
}

.border {
  width: 150px;
  border-bottom-style: solid;
  border-bottom-width: 5px;
}

.project-language {
  color: var(--tw-color-gray-deep);
  font-size: var(--feather-font-size-normal);
  line-height: var(--feather-line-height-normal);

  @media (prefers-color-scheme: dark) {
    color: var(--tw-color-gray-faded);
  }
}

.project-links a {
  display: block;
  font-weight: var(--feather-font-weight-bold);
  text-decoration: none;
}

.project-links a:link, .project-links a:visited {
  color: var(--tw-color-text-primary);

  @media (prefers-color-scheme: dark) {
    color: white;
  }
}

.project-links a:hover, .project-links a:active {
  color: var(--tw-color-text-link);
}

.whitespace {
  height: calc(var(--feather-grid-mega) * 1.6);
}

.project-links {
  position: absolute;
  bottom: var(--feather-grid-mega);
}

.project-card .Button {
  position: absolute;
  bottom: var(--feather-grid-mega);
  right: calc(var(--feather-grid-mega) * 1.5);
}


/* Search Bar */
#search-bar {
  margin-top: var(--feather-grid-mega);
  border-radius: 1.6rem;
  border: 0;
  max-width: var(--search-bar-width);
  min-width: 183px;
  line-height: calc(1.8rem - (1px * 2));
  padding: 0 var(--feather-grid-medium);
  background-color: var(--tw-color-blue-light);
  display: flex;
  justify-content: space-between;

  @media (prefers-color-scheme: dark) {
    background-color: var(--tw-color-gray-deep);
  }
}

#search-box {
  color: white;
  border: 0;
  min-width: 90%;
  line-height: calc(1.8rem - (1px * 2));
  background-color: transparent;
  &::placeholder {
    color: white;
  }
  &:focus {
    outline: none;
  }
}

#search-icon {
  fill: #ffffff;
  height: 17px;
  width: 17px;
  margin-top: 9px;
  flex-shrink: 0;
}

#results {
  padding-top: var(--feather-grid-mega);
  .count, .query {
    font-weight: var(--feather-font-weight-bold);
  }
}