Noctia Layout

Header

Selector

header.noctia-header

Usage

<header class="noctia-header">

</header>

Base Background Color

:root {
    --noctia-header-bg-color: #FFFFFF;
}

Utility

Footer

Selector

footer.noctia-footer

Usage

<footer class="noctia-footer">

</footer>

Base Background Color

:root {
    --noctia-footer-bg-color: #FFFFFF;
}

Utility

Fixed Layout

Selector

body.noctia-fixed-layout {
    display: flex;
    flex-direction: column;
}

Usage

<body class="noctia-fixed-layout">
  <header>

  </header>
  <main>

  </main>
  <footer>

  </footer>
</body>

Fixed Layout Header

body.noctia-fixed-layout header,
header.noctia-header

Header

Fixed Layout Main

body.noctia-fixed-layout main { flex: 1; }

Auto grow and shrink

Fixed Layout Footer

body.noctia-fixed-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>