@import “midnight”;
// STYLING PREFERNCES for SITE // mixin used as a template for buttons @mixin button { width: auto; height: auto; border-radius: 10px; background-color: #21807C; border: 3px solid black; font-size: 1.5em; display: flex; justify-content: center; align-items: center; grid-column: span 1; grid-row: span 1; // Creates smooth animation effect transition: all 0.5s; } /* define class for redifined button / .button { @include button; } / darkens the background color on hover to create a selecting effect / .button:hover { background-color: #373737; } / “row style” is flexible size and aligns pictures in center / .row { align-items: center; display: flex; } / “column style” is one-third of the width with padding / .column { flex: 16.66%; padding: 3px; } // STYLING FOR CALCULATOR / class to create the calculator’s container; uses CSS grid dsiplay to partition off buttons / .calculator-container { width: 90vw; / this width and height is specified for mobile devices by default / height: 80vh; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); / fr is a special unit; learn more here: https://css-tricks.com/introduction-fr-css-unit/ / grid-template-rows: 0.5fr repeat(5, 1fr); gap: 10px 10px; } @media (min-width: 600px) { .calculator-container { width: 40vw; height: 80vh; } } / styling for the calculator number button / .calculator-number { @extend .button; } / styling for the calculator operation button / .calculator-operation { @extend .button; } / styling for the calculator clear button / .calculator-clear { @extend .button; background-color: #E68B1C; grid-column: span 3; grid-row: span 1; } / styling for the calculator equals button */ .calculator-equals { @extend .button; background-color: #E70F0F; grid-column: span 2; grid-row: span 1; }