styles.scss

/*
 *   Copyright (c) 2022 Nazmul Idris
 *   All rights reserved.
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 */

// Variables used in this file.
$modifiedBackgroundColorForHeaders: lighten($backgroundColor, 5%);
$modifiedBackgroundColorForBorder: lighten($backgroundColor, 10%);
$modifiedBackgroundColorForSearch: darken($textColor, 20%);
$borderOutline: 1.125pt;
$searchPostBorder: 4pt;

body {
  // More info on background image on viewport.
  // https://www.freecodecamp.org/news/css-full-page-background-image-tutorial/
  $bodyBackgroundSemiTransparentColor: rgba($backgroundColor, 0.85);
  background-image: linear-gradient($bodyBackgroundSemiTransparentColor,
      $bodyBackgroundSemiTransparentColor ),
    url("/assets/background-image-1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  word-wrap: break-word;
}

// .page-content {
//   $contentBackgroundSemiTransparentColor: rgba(black, 0.15);
//   background-color: $contentBackgroundSemiTransparentColor;
//   backdrop-filter: blur(10px);
//   z-index: -1;
// }

.site-header {
  $headerBackgroundSemiTransparentColor: rgba(white, 0.15);
  border-top: none;
  background-color: $headerBackgroundSemiTransparentColor;
  backdrop-filter: blur(10px);
}

.plain-text-smaller {
  font-family: $baseFontFamily;
  font-size: 0.9em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $headingFontFamily;
  font-weight: 700;
  letter-spacing: 1pt;
}

header h1,
.page-heading {
  font-family: $specialHeadingFontFamily;
}

hr {
  margin-top: 1rem * 2;
  margin-bottom: 1rem / 2;
  border: 0;
  height: 1rem / 2;
  border-radius: $globalBorderRadius;
  background-image: linear-gradient(to right,
      transparentize($brandColor, 0.7),
      transparentize($brandColor, 0.4),
      transparentize($brandColor, 0.7));
}

// Youtube video embeds.
iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

// Other styling.

.related-post-block {
  $relatedPostBorder: 4pt;

  border: $borderOutline dashed $modifiedBackgroundColorForBorder;
  background-color: $modifiedBackgroundColorForHeaders;
  padding-left: $relatedPostBorder * 2;
  padding-right: $relatedPostBorder * 2;
  padding-top: $relatedPostBorder;
  padding-bottom: $relatedPostBorder;
}

.social-media-container {
  display: flex;
  flex-direction: row;
  margin-top: 8pt;
  justify-content: flex-start;
  height: 25pt;
  justify-content: center;
  align-items: center;
}

.social-media-item {
  align-self: center;
  margin: 3pt;
}

.post-hero-image {
  padding-bottom: 24px;
  -webkit-animation: fadein 1s;
  animation: fadein 1s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.footer-col-half {
  width: -webkit-calc(50% - (#{$spacingUnit} / 2));
  width: calc(50% - (#{$spacingUnit} / 2));
}

@include media-query($onLaptop) {
  .footer-col-half {
    width: -webkit-calc(100% - (#{$spacingUnit} / 2));
    width: calc(100% - (#{$spacingUnit} / 2));
  }
}

// In the header, when a category is selected, this is applied
.category-selected {
  border-bottom: 3px solid $brandColor;
}

.search-block {
  border: $borderOutline dashed $modifiedBackgroundColorForBorder;
  background-color: rgba($modifiedBackgroundColorForHeaders, 0.5);
  padding-left: $searchPostBorder * 2;
  padding-right: $searchPostBorder * 2;
  padding-top: $searchPostBorder;
  padding-bottom: $searchPostBorder;
  margin-bottom: $searchPostBorder * 5;
}

.search-input-text {
  width: 100%;
  padding: $searchPostBorder * 2 $searchPostBorder * 2;
  margin: $searchPostBorder * 2 0;
  box-sizing: border-box;
  font-family: $baseFontFamily;
  font-size: $baseFontSize;
  background: $modifiedBackgroundColorForSearch;
  border: none;
}

::placeholder {
  color: $backgroundColor;
}

.result-block {
  margin: 0;
  list-style: none;
}

.result-item {
  margin: $searchPostBorder * 0.7;
}

.avatar-container {
  display: flex;
  flex-direction: row;
  margin: 4pt;
  align-items: center;
}

.avatar-icon {
  flex-basis: 128px;
  margin: 1ch;
  flex-shrink: 0;
}

.avatar-text {
  flex-grow: 1;
  margin: 4pt;
}

.caption {
  text-align: center;
  font-size: 0.8em;
}

.big-quote {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  padding-top: 12pt;
  padding-bottom: 12pt;
}

// More info: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}