Scss file update

.gitignore

@@ -26,3 +26,138 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+package-lock.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# Gitpod
+.gitmodules
+.gitpod.yml

BEM reference.md

@@ -0,0 +1,92 @@
+Sources  -- https://bem-cheat-sheet.9elements.com/, GPT , https://sass-guidelin.es/#architecture
+
+# BEM (Block, Element, Modifier) is a naming convention for writing clean and maintainable CSS. 
+
+- Block: The main component or section of the webpage. It’s like a container that holds elements. For example, a navigation menu, a button, or a form.
+Example: menu, button, form
+
+- Element: A part of the block that performs a specific function. Elements are always part of a block and can’t exist without it.
+Example: menu__item, button__icon, form__input
+
+- Modifier: A variation or state of a block or element. Modifiers are used to change the appearance or behavior.
+Example: button--large, form__input--error
+
+### Code Example
+
+HTML Code
+
+```html
+<div class="card">
+  <h2 class="card__title">Card Title</h2>
+  <p class="card__description">This is a description of the card.</p>
+  <button class="card__button card__button--primary">Learn More</button>
+</div>
+```
+
+SCSS Code
+
+```scss
+.card {
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+
+  &__title {
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+
+  &__description {
+    font-size: 16px;
+    margin-bottom: 15px;
+  }
+
+  &__button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+
+    &--primary {
+      background-color: blue;
+      color: white;
+    }
+  }
+}
+```
+
+CSS Code
+This is how scss to css code will be compiled when `npm build:css` is executed.
+
+```css
+/* Block: card */
+.card {
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+/* Element: card__title */
+.card__title {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+/* Element: card__description */
+.card__description {
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+
+/* Element: card__button */
+.card__button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+/* Modifier: card__button--primary */
+.card__button--primary {
+  background-color: blue;
+  color: white;
+}
+```

README.md

@@ -38,6 +38,12 @@ git clone --recurse-submodules https://github.com/ActivityWatch/aw-leaderboard-f
 
 ### Install the dependencies
 
+#### Install the live server Globally
+
+```sh
+npm install live-server -g
+```
+
 ```sh
 npm install
 ```
@@ -82,4 +88,18 @@ npm run test:e2e
 npm run lint
 ```
 
+### Runs Live  Server
+
+```sh
+npm start-server
+```
+
+### Compiles, adds prefixes & compress  scss files to the css file
+
+This command is executed when the project is ready for deployment
+
+```sh
+npm run build:css
+```
+
 </details>

SCSS references.md

@@ -0,0 +1,51 @@
+Sources - https://sass-guidelin.es
+
+
+# Variables 
+
+```
+// Initialize a global variable at root level.
+//All the variables goes in `_variables.scss`
+$variable: 'initial value';
+```
+
+Example
+
+```scss
+$primary-color : "red"; // Variable Declared 
+background-color: $primary-color // Variable Called
+```
+
+# Mixins
+
+Mixins are like sort of functions, saves times. Generally goes in `_mixins.scss`.
+
+```scss
+@mixins mixin-name{
+    `Code Goes here`
+}
+```
+
+You can also add arguments in mixins 
+
+```scss
+@mixin size($width, $height: $width) {
+  width: $width;
+  height: $height;
+}
+```
+
+To call a mixin 
+
+```scss
+/*
+    Variables in _variables.scss
+    $width:150px;
+    $height:150px;
+ */
+
+.img{
+    @include($width, $height)
+}
+
+```

THIRD_PARTY_LICENSES.md

@@ -0,0 +1,12 @@
+# Third-Party Licenses
+
+SASS (MIT License)
+[SASS Authors] Natalie Weizenbaum 
+SASS[https://github.com/sass]
+MIT License[https://mit-license.org/]
+
+
+SCSSAssist(Apache 2.0)
+[SCSSAssist Author] Avadhut
+SCSSAssist[https://github.com/avadhut-the-merciful/SCSSAssist]
+Apache License Version 2.0[http://www.apache.org/licenses/]