www/assets/scss/main.scss

//! Copyright 2023, Aliberk Sandıkçı 
@use "colors" as c;
@use "fonts" as font;
@use "utils" as util;
@use "images" as im;
@use "copy" as copy;

@use "header" as h;
@use "nav" as n;
@use "article" as a;
@use "footer" as f;

@use "form" as form;

.HIDDEN {
  display: none;
}

html,
body {
  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  height: 100%;

  padding: 0;
  margin: 0;

  font-family: font.$font1;
  background-color: c.$bg;
  color: c.$text;


  // Header Types
  header {
    @include h.main;
  }

  // Navigation Menu Types
  nav {
    @include n.main
  }

  // Article Types
  article {

    @include a.main;

    form {
      @include form.main;
    }

    &.plain {
      @include a.plain;
    }

    &.sections {
      @include a.sections;
    }
  }

  // Footer Types
  footer {
    @include f.main;
  }

  // General
  a {
    background-color: transparent;
    text-decoration: none;

    &:link {
      color: c.$accent;
    }

    &:visited {
      color: desaturate($color: c.$accent, $amount: 20);
    }

    &:hover {
      color: saturate($color: c.$accent, $amount: 100);
      text-decoration: underline;
    }

    &:active {
      color: desaturate($color: c.$accent, $amount: 50);
    }
  }

  .main-scrollable {
    height: 100%;
    overflow-y: auto;
    @include util.hide-scroll;
  }

  @include copy.copy;
}