Styles HTML and CSS with custom variables

by Codi Bezouka-Smith

HTML

<div id="modal">
  <div class="modal-content">
    <header>
      <span class="close">×</span>
    </header>
    <main>
      <!-- <h1>Codi - concrete city</h1> -->
      <img class="photo" src="https://i.imgur.com/pHvn5dn.jpeg" alt="codi-concrete-city" />
    </main>
    <footer>
      <p class="date">Oct 20, 2024</p>
      <p class="location">New York, United States</p>
      <p class="camera">NIKON D3100</p>
      <div class="details">
        <p>f/2</p>
        <p>1/200</p>
        <p>30mm</p>
        <p>ISO400</p>
      </div>
    </footer>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

$color-active: #32A852;
$color-black: rgb(0, 0, 0);
$color-gray: rgb(26, 26, 26);
$color-offset: #EBEBEB;
$color-secondary: dodgerblue;
$color-white: rgb(255, 255, 255);
$color-yellow: #F0E68C;

$font-default: '';
$font-mono: 'Roboto Mono', serif;
$font-stack: '';

$photo-codi: 'https://i.imgur.com/3tZ26pp.jpeg';

@mixin flex ($direction, $align, $justify) {
	align-items: $align;
	display: flex;
	flex-direction: $direction;
	justify-content: $justify;
};
@mixin respond($breakpoint) {
	@if ($breakpoint == xl) { @media (max-width: 1200px) { @content } };
	@if ($breakpoint == lg) { @media (max-width: 900px) { @content } };
	@if ($breakpoint == md) { @media (max-width: 600px) { @content } };
	@if ($breakpoint == sm) { @media (max-width: 480px) { @content } };
	@if ($breakpoint == xs) { @media (max-width: 400px) { @content } };
	@if ($breakpoint == xxs) { @media (max-width: 320px) { @content } };
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: relative;
}

body  {
  background: lavender;
	margin: 0; padding: 0;
	height: 100vh;
}

#modal {
  @include flex(row, center, center);
  background: rgb(0,0,0);
  background: rgba(0,0,0,0.4);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 1;
  .modal-content {
    @include flex(column, flex-start, flex-start);
    @include respond(sm) { padding: 10px; width: 100%; }
    background-color: #fefefe;
    border: 1px solid #888;
    margin: 0 auto;
    padding: 10px;
    width: 600px;

    header {
      @include flex(row, center, flex-end);
      // background: dodgerblue;
      width: 100%;

      span.close {
        color: #aaa;
        cursor: pointer;
        font-size: 20px;
        &:focus, &:hover { color: rgb(0,0,0) }
      }
    }
    main {
      @include flex(row, center,...

JavaScript

const close = document.querySelector('header span.close');
close.addEventListener('click', () => {
  document.getElementById('modal').style.display = 'none';
})