charlesroper/spurs-colours.html

## spurs-colours.html

<!DOCTYPE html>
<html>
<head>
<style>
      /* Define colour variables in the :root scope for easy reuse throughout the stylesheet */
      :root {
        /* Grouped blue colours */
        --blue-brand-color: hsl(231, 53%, 14%); /* Brand's main dark blue colour */
        --blue-brand-dark-color: hsl(231, 40%, 9%); /* Darker variant of the brand's blue */
        --blue-brand-light-color: hsl(231, 26%, 23%); /* Lighter variant of the brand's blue */
        --blue-light-color: hsl(225, 17%, 87%); /* Light blue for subtle backgrounds */
        --blue-light-alt-color: hsl(227, 14%, 88%); /* Alternative light blue for variations */

        /* Other colours */
        --grey-light-color: hsl(210, 14%, 94%); /* Light grey colour for backgrounds */
        --yellow-color: hsl(58, 74%, 63%); /* Yellow colour for highlighting elements */
        --red-sale: hsl(356, 100%, 34%); /* Red colour used for sale notifications */

        /* Font stack */
        /* Shared font stack for consistency across components */
        --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }

      /* Define the palette container */
      .palette {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Create 4 equal columns */
        gap: 10px; /* Space between each colour box */
        margin: 10px; /* Margin around the palette container */
      }

      /* Define the style for each colour box */
      .color-box {
        padding: 10px;
        height: 100px;
        color: #ffffff; /* Default text colour to white for readability on dark backgrounds */
        font-family: var(--font-stack); /* Use shared font stack */
        font-weight: bold;
        font-size: 14px;
        display: flex; /* Use flexbox to center content */
        flex-direction: column; /* Arrange content vertically */
        align-items: center; /* Center align items horizontally */
        justify-content: center; /* Center align items vertically */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
      }

      /* Define the style for the colour name inside each colour box */
      .color-name {
        margin-top: 5px; /* Space between the hex value and the colour name */
      }

      /* Adjust text color for light backgrounds to ensure readability */
      .dark-text {
        color: #000000; /* Set text colour to black for better contrast on light backgrounds */
      }

      /* Responsive adjustments for smaller screens */
      @media (max-width: 50em) { /* Use 'em' units for better scalability */
        .palette {
          grid-template-columns: repeat(2, 1fr); /* Reduce to 2 columns for medium screens */
        }
      }

      @media (max-width: 31.25em) { /* Use 'em' units for better scalability */
        .palette {
          grid-template-columns: 1fr; /* Stack all items in a single column for small screens */
        }
      }
    </style>
</head>
<body>
<div class="palette">

<div class="color-box dark-text" style="background-color: var(--grey-light-color)" aria-label="Light grey colour">
<div>#EFF0F1</div>
<div class="color-name">--grey-light-color</div>
</div>

<div class="color-box dark-text" style="background-color: var(--yellow-color)" aria-label="Yellow colour">
<div>#E1E55A</div>
<div class="color-name">--yellow-color</div>
</div>

<div class="color-box dark-text" style="background-color: var(--blue-light-color)" aria-label="Light blue colour">
<div>#DCDFE6</div>
<div class="color-name">--blue-light-color</div>
</div>

<div class="color-box dark-text" style="background-color: var(--blue-light-alt-color)" aria-label="Alternative light blue colour">
<div>#DDDFE5</div>
<div class="color-name">--blue-light-alt-color</div>
</div>

<div class="color-box" style="background-color: var(--blue-brand-color)" aria-label="Brand dark blue colour">
<div>#111836</div>
<div class="color-name">--blue-brand-color</div>
</div>

<div class="color-box" style="background-color: var(--blue-brand-dark-color)" aria-label="Brand darker blue colour">
<div>#0A0E1E</div>
<div class="color-name">--blue-brand-dark-color</div>
</div>

<div class="color-box" style="background-color: var(--blue-brand-light-color)" aria-label="Brand light blue colour">
<div>#292F49</div>
<div class="color-name">--blue-brand-light-color</div>
</div>

<div class="color-box" style="background-color: var(--red-sale)" aria-label="Red sale colour">
<div>#AD000C</div>
<div class="color-name">--red-sale</div>
</div>
</div>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	/* Define colour variables in the :root scope for easy reuse throughout the stylesheet */
	:root {
	/* Grouped blue colours */
	--blue-brand-color: hsl(231, 53%, 14%); /* Brand's main dark blue colour */
	--blue-brand-dark-color: hsl(231, 40%, 9%); /* Darker variant of the brand's blue */
	--blue-brand-light-color: hsl(231, 26%, 23%); /* Lighter variant of the brand's blue */
	--blue-light-color: hsl(225, 17%, 87%); /* Light blue for subtle backgrounds */
	--blue-light-alt-color: hsl(227, 14%, 88%); /* Alternative light blue for variations */

	/* Other colours */
	--grey-light-color: hsl(210, 14%, 94%); /* Light grey colour for backgrounds */
	--yellow-color: hsl(58, 74%, 63%); /* Yellow colour for highlighting elements */
	--red-sale: hsl(356, 100%, 34%); /* Red colour used for sale notifications */

	/* Font stack */
	/* Shared font stack for consistency across components */
	--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	}

	/* Define the palette container */
	.palette {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* Create 4 equal columns */
	gap: 10px; /* Space between each colour box */
	margin: 10px; /* Margin around the palette container */
	}

	/* Define the style for each colour box */
	.color-box {
	padding: 10px;
	height: 100px;
	color: #ffffff; /* Default text colour to white for readability on dark backgrounds */
	font-family: var(--font-stack); /* Use shared font stack */
	font-weight: bold;
	font-size: 14px;
	display: flex; /* Use flexbox to center content */
	flex-direction: column; /* Arrange content vertically */
	align-items: center; /* Center align items horizontally */
	justify-content: center; /* Center align items vertically */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
	}

	/* Define the style for the colour name inside each colour box */
	.color-name {
	margin-top: 5px; /* Space between the hex value and the colour name */
	}

	/* Adjust text color for light backgrounds to ensure readability */
	.dark-text {
	color: #000000; /* Set text colour to black for better contrast on light backgrounds */
	}

	/* Responsive adjustments for smaller screens */
	@media (max-width: 50em) { /* Use 'em' units for better scalability */
	.palette {
	grid-template-columns: repeat(2, 1fr); /* Reduce to 2 columns for medium screens */
	}
	}

	@media (max-width: 31.25em) { /* Use 'em' units for better scalability */
	.palette {
	grid-template-columns: 1fr; /* Stack all items in a single column for small screens */
	}
	}
	</style>
	</head>
	<body>
	<div class="palette">

	<div class="color-box dark-text" style="background-color: var(--grey-light-color)" aria-label="Light grey colour">
	<div>#EFF0F1</div>
	<div class="color-name">--grey-light-color</div>
	</div>

	<div class="color-box dark-text" style="background-color: var(--yellow-color)" aria-label="Yellow colour">
	<div>#E1E55A</div>
	<div class="color-name">--yellow-color</div>
	</div>

	<div class="color-box dark-text" style="background-color: var(--blue-light-color)" aria-label="Light blue colour">
	<div>#DCDFE6</div>
	<div class="color-name">--blue-light-color</div>
	</div>

	<div class="color-box dark-text" style="background-color: var(--blue-light-alt-color)" aria-label="Alternative light blue colour">
	<div>#DDDFE5</div>
	<div class="color-name">--blue-light-alt-color</div>
	</div>

	<div class="color-box" style="background-color: var(--blue-brand-color)" aria-label="Brand dark blue colour">
	<div>#111836</div>
	<div class="color-name">--blue-brand-color</div>
	</div>

	<div class="color-box" style="background-color: var(--blue-brand-dark-color)" aria-label="Brand darker blue colour">
	<div>#0A0E1E</div>
	<div class="color-name">--blue-brand-dark-color</div>
	</div>

	<div class="color-box" style="background-color: var(--blue-brand-light-color)" aria-label="Brand light blue colour">
	<div>#292F49</div>
	<div class="color-name">--blue-brand-light-color</div>
	</div>

	<div class="color-box" style="background-color: var(--red-sale)" aria-label="Red sale colour">
	<div>#AD000C</div>
	<div class="color-name">--red-sale</div>
	</div>
	</div>
	</body>
	</html>