Layout

Noctia Logo

Noctia Layout

Selector
body.noctia-layout {
    display: flex;
    flex-direction: column;
}
Usage
<body class="noctia-layout">
  <header>

  </header>
  <main>

  </main>
  <footer>

  </footer>
</body>
Noctia Layout Header
body.noctia-layout header,
header.noctia-header
Header
Noctia Layout Main
body.noctia-layout main { flex: 1; }

Auto grow and shrink

Noctia Layout Footer
body.noctia-layout footer,
footer.noctia-footer
Footer

Noctia Section

.noctia-section > section {
    margin: 2.5rem 0 5rem;
}

.noctia-section section:last-child {
    margin-bottom: 0;
}

.noctia-section .noctia-section > section {
    margin-block: 2rem;
}

Fixed Navigation

This is the fixed navigation sample

Selector
.noctia-fixed-nav-top,
.noctia-fixed-nav-bot
Usage
<div class="noctia-fixed-nav-top"> </div>

<div class="noctia-fixed-nav-bot"> </div>
Base Background Color
:root {
    --noctia-fixed-nav-bg-color: #FFFFFF;
}
Base Border Color
:root {
    --noctia-fixed-nav-border-color
}
Utility

Auto Hiding

Selector
.noctia-fixed-nav-top.auto-hiding

.noctia-fixed-nav-bot.auto-hiding
Usage
<div class="noctia-fixed-nav-top auto-hiding"> </div>

<div class="noctia-fixed-nav-bot auto-hiding"> </div>