Set up a stylesheet #28

Merged
savanni merged 3 commits from feature/scss-storybook into main 2023-03-04 22:13:44 +00:00
5 changed files with 298 additions and 73 deletions
Showing only changes of commit 8300b84525 - Show all commits

View File

@ -0,0 +1,81 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Music Player</title>
</head>
<body>
<div class="colorset">
<div class="swatch swatch-grey-900"></div>
<div class="swatch swatch-grey-800"></div>
<div class="swatch swatch-grey-700"></div>
<div class="swatch swatch-grey-600"></div>
<div class="swatch swatch-grey-500"></div>
<div class="swatch swatch-grey-400"></div>
<div class="swatch swatch-grey-300"></div>
<div class="swatch swatch-grey-200"></div>
<div class="swatch swatch-grey-100"></div>
</div>
<div class="colorset">
<div class="swatch swatch-blue-900"></div>
<div class="swatch swatch-blue-800"></div>
<div class="swatch swatch-blue-700"></div>
<div class="swatch swatch-blue-600"></div>
<div class="swatch swatch-blue-500"></div>
<div class="swatch swatch-blue-400"></div>
<div class="swatch swatch-blue-300"></div>
<div class="swatch swatch-blue-200"></div>
<div class="swatch swatch-blue-100"></div>
</div>
<div class="colorset">
<div class="swatch swatch-purple-900"></div>
<div class="swatch swatch-purple-800"></div>
<div class="swatch swatch-purple-700"></div>
<div class="swatch swatch-purple-600"></div>
<div class="swatch swatch-purple-500"></div>
<div class="swatch swatch-purple-400"></div>
<div class="swatch swatch-purple-300"></div>
<div class="swatch swatch-purple-200"></div>
<div class="swatch swatch-purple-100"></div>
</div>
<div class="colorset">
<div class="swatch swatch-red-900"></div>
<div class="swatch swatch-red-800"></div>
<div class="swatch swatch-red-700"></div>
<div class="swatch swatch-red-600"></div>
<div class="swatch swatch-red-500"></div>
<div class="swatch swatch-red-400"></div>
<div class="swatch swatch-red-300"></div>
<div class="swatch swatch-red-200"></div>
<div class="swatch swatch-red-100"></div>
</div>
<div class="flex">
<div class="card card--low">
</div>
<div class="card card--medium">
</div>
<div class="card card--high">
</div>
</div>
<div class="flex">
<div class="card card--low track-card">
<div class="track-card__name">Underground</div>
<div class="track-card__length">5:15</div>
<div class="track-card__album">Artemis</div>
<div class="track-card__artist">Lindsey Stirling</div>
</div>
</div>
<script src="./bundle.js" type="module"></script>
</body>
</html>

View File

@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" type="text/css" />
<title>Music Player</title>
</head>
<body>

View File

@ -1,68 +0,0 @@
body {
background-color: rgb(240, 230, 230);
}
.currently-playing {
padding: 8px;
}
.controls {
padding: 8px;
}
.track-list {
border: 1px solid black;
display: flex;
}
.track-list__grouping {
padding: 8px;
border-style: solid;
border-width: 0px 5px 0px 0px;
}
.bulletless-list {
list-style: none;
}
.track-list__row {
margin-top: 32px;
}
.card {
border: 1px solid black;
border-radius: 5px;
padding: 8px;
width: 300px;
height: 100px;
}
.track-card {
display: grid;
gap: 4px 4px;
}
.track-card__name {
display: block;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.track-card__length {
display: block;
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.track-card__album {
display: block;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.track-card__artist {
display: block;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}

View File

@ -0,0 +1,212 @@
$color-grey-900: hsl(240 5% 20%);
$color-grey-800: hsl(240 5% 25%);
$color-grey-700: hsl(240 5% 35%);
$color-grey-600: hsl(240 5% 45%);
$color-grey-500: hsl(240 5% 50%);
$color-grey-400: hsl(240 5% 60%);
$color-grey-300: hsl(240 5% 75%);
$color-grey-200: hsl(240 5% 90%);
$color-grey-100: hsl(240 10% 95%);
$color-blue-900: hsl(240 100% 10%);
$color-blue-800: hsl(240 100% 20%);
$color-blue-700: hsl(240 100% 30%);
$color-blue-600: hsl(240 100% 40%);
$color-blue-500: hsl(235 100% 50%);
$color-blue-400: hsl(230 100% 60%);
$color-blue-300: hsl(225 100% 70%);
$color-blue-200: hsl(220 100% 75%);
$color-blue-100: hsl(220 100% 80%);
$color-purple-900: hsl(280 100% 10%);
$color-purple-800: hsl(280 100% 20%);
$color-purple-700: hsl(280 100% 30%);
$color-purple-600: hsl(280 100% 40%);
$color-purple-500: hsl(280 100% 50%);
$color-purple-400: hsl(280 100% 60%);
$color-purple-300: hsl(270 100% 70%);
$color-purple-200: hsl(265 100% 80%);
$color-purple-100: hsl(260 100% 90%);
$color-red-900: hsl(20 100% 10%);
$color-red-800: hsl(20 100% 10%);
$color-red-700: hsl(20 100% 10%);
$color-red-600: hsl(20 100% 10%);
$color-red-500: hsl(20 100% 50%);
$color-red-400: hsl(20 100% 90%);
$color-red-300: hsl(20 100% 90%);
$color-red-200: hsl(20 100% 90%);
$color-red-100: hsl(20 100% 90%);
$shadow-900: rgba(0, 0, 0, .20);
$shadow-500: rgba(0, 0, 0, .15);
$shadow-100: rgba(0, 0, 0, .1);
$colors: [
(grey-900, $color-grey-900),
(grey-800, $color-grey-800),
(grey-700, $color-grey-700),
(grey-600, $color-grey-600),
(grey-500, $color-grey-500),
(grey-400, $color-grey-400),
(grey-300, $color-grey-300),
(grey-200, $color-grey-200),
(grey-100, $color-grey-100),
(blue-900, $color-blue-900),
(blue-800, $color-blue-800),
(blue-700, $color-blue-700),
(blue-600, $color-blue-600),
(blue-500, $color-blue-500),
(blue-400, $color-blue-400),
(blue-300, $color-blue-300),
(blue-200, $color-blue-200),
(blue-100, $color-blue-100),
(purple-900, $color-purple-900),
(purple-800, $color-purple-800),
(purple-700, $color-purple-700),
(purple-600, $color-purple-600),
(purple-500, $color-purple-500),
(purple-400, $color-purple-400),
(purple-300, $color-purple-300),
(purple-200, $color-purple-200),
(purple-100, $color-purple-100),
(red-900, $color-red-900),
(red-500, $color-red-500),
(red-100, $color-red-100),
];
@each $name, $value in $colors {
.swatch-#{$name} {
background-color: #{$value};
}
}
$border-color: $color-grey-600;
$border-shadow: $color-grey-800;
$background-color-light: $color-grey-100;
$background-color-medium: $color-grey-200;
$background-color-dark: $color-grey-300;
$primary-color-light: $color-blue-100;
$primary-color-medium: $color-blue-500;
$primary-color-dark: $color-blue-700;
$accent-color-light: $color-blue-100;
$accent-color-medium: $color-blue-500;
$accent-color-dark: $color-blue-900;
$accent-color: $color-purple-500;
$elevation-low: 1px 2px 3px $shadow-500, 0 1px 2px $shadow-900;
$elevation-medium: 2px 6px 5px $shadow-500, 0 1px 2px $shadow-900;
$elevation-high: 3px 8px 6px $shadow-900, 0 0px 3px $shadow-900;
body {
background-color: $background-color-medium;
}
.colorset {
display: flex;
gap: 4px;
margin: 16px 0px 16px 0px;
}
.swatch {
border: 1px solid black;
border-radius: 5px;
width: 100px;
height: 50px;
}
.flex {
display: flex;
gap: 8px;
margin: 16px 0px 16px 0px;
}
.currently-playing {
padding: 8px;
}
.controls {
padding: 8px;
}
.track-list {
border: 1px solid black;
display: flex;
}
.track-list__grouping {
padding: 8px;
border-style: solid;
border-width: 0px 5px 0px 0px;
}
.bulletless-list {
list-style: none;
}
.track-list__row {
margin-top: 32px;
}
.card {
border-radius: 5px;
padding: 8px;
width: 500px;
height: 100px;
}
.card--low {
border: 1px solid $border-color;
box-shadow: $elevation-low;
}
.card--medium {
border: 1px solid $border-color;
box-shadow: $elevation-medium;
}
.card--high {
border: 1px solid $border-color;
box-shadow: $elevation-high;
}
.track-card {
display: grid;
gap: 4px 4px;
border: 1px solid $border-color;
background-color: $background-color-light;
box-shadow: $elevation-low;
}
.track-card__name {
display: block;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
color: $primary-color-dark;
}
.track-card__length {
display: block;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
text-align: right;
color: $color-blue-300;
}
.track-card__album {
display: block;
grid-column: 1 / span 1;
grid-row: 2 / span 1;
color: $color-grey-800;
}
.track-card__artist {
display: block;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
color: $color-grey-800;
}

View File

@ -3,7 +3,7 @@ const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/main.ts',
entry: ['./src/main.ts', './styles.scss'],
module: {
rules: [
{
@ -16,8 +16,8 @@ module.exports = {
type: 'asset/resource',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
@ -28,7 +28,8 @@ module.exports = {
new CopyPlugin({
patterns: [
{ from: "index.html", to: "index.html" },
{ from: "styles.css", to: "styles.css" },
{ from: "design.html", to: "design.html" },
// { from: "styles.css", to: "styles.css" },
],
}),
],