page

The page composes all the components to form the user interface for the entire web application.

HTML

<div class="page">
  <div class="page__wrapper">
    <div class="page__content">
      <main>
        <!-- The calculator goes here. -->
      </main>
      <footer>
        <!-- The attribution goes here. -->
      </footer>
    </div>
  </div>
</div>

The <main> element represents the dominant content of the <body> of a document. That's why I made the calculator a child of that element.

Sass

@use "../layouts";

.page {
  @include layouts.absolute-center(20px);
}

.page__content {
  @include layouts.centered-column(15px);
}

Mixins

The .page block and .page__content element both make use of general layout patterns that I made reusable with mixins.

@mixin centered-column($gap) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $gap;
}

@mixin absolute-center($padding, $height: 100vh) {
  display: flex;
  height: $height;

  &__wrapper {
    padding: $padding;

    //
    // Ensures the padding is shown when the content overflows its container.
    //
    display: inline-block;

    //
    // Vertically and horizontally center.
    //
    margin: auto;
  }
}

Here's the CSS that's generated:

.page {
  display: flex;
  height: 100vh;
}

.page__wrapper {
  padding: 20px;
  display: inline-block;
  margin: auto;
}

.page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

Demo

Source Code