personal-website/src/scss/ilia1.scss

/* ---------------- */
/* ILIA1 STYLE FILE */
/* ---------------- */
/*
 * Formalizing the
 * until now very
 * disorganized look
 * and feel of ILIA
                    */

@use "sass:color";
@import "reset";

$color-white: hsl(48, 73%, 84%);
$color-light: hsl(348, 73%, 84%);
$color-dark: hsl(195, 47%, 7%);

/* --------------- */
/* Utility Classes */
/* --------------- */

.flex {
  display: flex;
  gap: 2rem;
}

.column {
  @extend .flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-content: center;
}

.row {
  @extend .flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: baseline;
  max-width: 100%;
}

.container {
  padding-inline: clamp(0.5rem, 4rem, 5rem);
  margin-inline: auto;
  max-width: 80rem;
}

@mixin grid-center($top-offset:1, $bottom-offset:1, $left-offset:1, $right-offset:1) {
  display: grid;
  grid-template-rows: $top-offset*1fr 1fr $bottom-offset*1fr;
  grid-template-columns: $left-offset*1fr 1fr $right-offset*1fr;
  grid-template-areas:
    ". . ."
    ". main ."
    ". . .";

  div {
    place-self: center;
    grid-area: main;
  }
  footer {
    @extend .row;
    flex-wrap: nowrap;

    margin-bottom: 2vh;
    position: static;
    grid-row: 3 / span 1;
    grid-column: 2 / span 1;
    place-self: end center;

  }
}

.grid-center {
  @include grid-center;
}

.grid-center--offset {
  @include grid-center($top-offset: 0.7);
}

.grid-center--offset-wide {
  @include grid-center($top-offset: 0.7, $left-offset: 0.5, $right-offset: 0.5);
}

.fixed {
  position: fixed;
}

.scroll {
  position: scroll;
}

/* ---------- */
/* Tag Styles */
/* ---------- */

body {
  overflow: hidden;
  background-color: black;

  @extend .column;
}

main {
  width: 90%;
  height: 100vh;

  background-color: $color-dark;

  * {
    z-index: 100;
  }
}

/* Text */

h1 {
  margin: 5px 5px;

  font-family: serif;
  font-size: $fs-700;
  text-align: center;

  color: $color-light;
}

h2 {
  font-family: serif;
  font-size: $fs-600;
  text-align: center;

  color: $color-white;
}

h3 {
  font-family: sans-serif;
  font-size: $fs-500;

  color: $color-white;
}

p {
  margin: 5px 0px;

  font-family: sans-serif;
  font-size: $fs-300;
  text-align: left;

  color: $color-white;
}

/* Lists, Modifiers */

ol {
  margin: 0;
  list-style-type: decimal;
}

ul {
  list-style-type: none;
  li {
    &:before {
      content: "- ";
    }
  }
}

li {
  @extend p
}

a {
  position: relative;
  z-index: 999;

  text-decoration: none;

  &:link {
    color: $color-white;
  }
  &:visited {
    color: color.adjust($color-white, $lightness: -20%);
  }
}

/* Semantic */

footer {
  position: fixed;
  bottom: 0px;
}

/* ------------- */
/* ILIA Specific */
/* ------------- */

#overlay {
  width: 100%;
  height: 100vh;
  position: fixed;

  opacity: 0.03;
  z-index: 1;
  background-image: url('../img/noise.gif');
  background-size: 25%;
}

/* Animations */
// GRADIENTS (you might need them!)
$rainbow-gradient: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet);

// ANIMATIONS (love to see them)
@keyframes gradient-bg {
  from {
    background-position: 0%;
  }
  to {
    background-position: 100%;
  }
}

@mixin rainbow-text() {
  animation: gradient-bg 4s linear infinite;
}

// MARKS
mark.rainbow {
  background-image: $rainbow-gradient;
  background-size: 1000% 1000%;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  @include rainbow-text();
}

// ALIASES
mark.internet {
  @extend .rainbow;
  font-weight: bold;
}