From 0accd10d21054b6cb5df0c96489f5311c2b1c9ad Mon Sep 17 00:00:00 2001 From: Daniel W Date: Mon, 27 May 2024 07:29:51 +0200 Subject: [PATCH] refactor: clean variables --- demo-page.html | 1 - getting-started.html | 104 +++++++++++++++---------------------------- index.html | 12 ++--- package.json | 1 - partials/footer.html | 4 +- partials/navbar.html | 1 + pnpm-lock.yaml | 8 ---- src/main.ts | 8 ++-- src/style.scss | 78 +++++--------------------------- 9 files changed, 60 insertions(+), 157 deletions(-) diff --git a/demo-page.html b/demo-page.html index 9b06f75..6c021d1 100644 --- a/demo-page.html +++ b/demo-page.html @@ -30,7 +30,6 @@

Test

asperiores nihil similique minima voluptas.

-

This is an Error

diff --git a/getting-started.html b/getting-started.html index 7076e5c..7c8bc99 100644 --- a/getting-started.html +++ b/getting-started.html @@ -28,8 +28,9 @@

Materialize
are unfamiliar with Sass.

Materializefile_download @@ -42,8 +43,9 @@
Sass
you choose this option.

Sourcefile_download @@ -79,32 +81,23 @@
CDN
jsDelivr. 

-              Copied!
-              content_copy
-              
-    <!-- Compiled and minified CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/css/materialize.min.css">
-    <!-- Compiled and minified JavaScript -->
-    <script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script>
-
+Copied! +content_copy +<!-- Compiled and minified CSS --> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/css/materialize.min.css"> +<!-- Compiled and minified JavaScript --> +<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script> +
NPM

You can also get the latest release using NPM. This release contains source files as well as the compiled CSS and JavaScript files.

- 

-    npm install @materializecss/materialize
-
+ 
npm install @materializecss/materialize
Yarn
-

- Since - Bower is deprecated, you can get the latest release using yarn as your favorite package manager. -

- 

-    yarn add @materializecss/materialize
-
+

Or you can get the latest release using yarn as your favorite package manager.

+ 
yarn add @materializecss/materialize
@@ -142,25 +135,22 @@
HTML Setup
 Copied!
 content_copy
-
-  <!DOCTYPE html>
-  <html>
-    <head>
-      <!--Import Google Icon Font-->
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-      <!--Import materialize.css-->
-      <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
-      <!--Let browser know website is optimized for mobile-->
-      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    </head>
-    <body>
-      <!--JavaScript at end of body for optimized loading-->
-      <script type="text/javascript" src="js/materialize.min.js"></script>
-    </body>
-  </html>
-
-
-
+<!DOCTYPE html> +<html> + <head> + <!--Import Google Icon Font--> + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> + <!--Import materialize.css--> + <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> + <!--Let browser know website is optimized for mobile--> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + </head> + <body> + <!--JavaScript at end of body for optimized loading--> + <script type="text/javascript" src="js/materialize.min.js"></script> + </body> +</html> + @@ -181,10 +171,10 @@
Starter Template

This is the simplest starter page with a Header, Call-to-Action, and Icon Features.

- + Demo search - + Downloadfile_download @@ -195,35 +185,16 @@
Parallax Template

This is the simplest starter page with a Header, Call-to-Action, and Icon Features.

- + Demosearch - + Downloadfile_download - -
-
-

Third-party Options

-

- There are a few community-made options for you to easily include Materialize in your project. Keep in mind these are untested and may be out-of-date. -

-
Ruby Gem
-

- See - here - for documentation on this gem. -

- 

-  gem 'materialize-sass'
-
-
-
-

Sass Setup

@@ -234,10 +205,8 @@
Compiling Sass
Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/materialize.scss into a regular CSS file. At this point you can link this newly outputted file in your HTML page.

- 

-
-MyWebsite/
+<xmp>MyWebsite/
 |--css/
 |  |--materialize.css <-- compiled from scss/materialize.scss
 |
@@ -262,9 +231,6 @@ <h5>Compiling Sass</h5>
                   <li><a href="#download">Download</a></li>
                   <li><a href="#setup">Setup</a></li>
                   <li><a href="#templates">Templates</a></li>
-                  <li>
-                    <a href="#third-party-options">Third-party Options</a>
-                  </li>
                   <li><a href="#sass">Sass</a></li>
                 </ul>
               </div>
diff --git a/index.html b/index.html
index 913ca34..b2c2442 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   <body>
     {{> navbar }}
     <main>
-      <div id="index-banner" style="position: relative; background-color: color-mix(in srgb, var(--primary-color) 30%, var(--background-color))">
+      <div id="index-banner" style="position: relative; background-color: color-mix(in srgb, var(--primary-color) 30%, var(--md-sys-color-background))">
         <!-- Background -->
         <div style="position: absolute; top: 0; height: 100%; overflow: hidden; width: 100%; z-index: 0">
           <div class="gradient"></div>
@@ -22,14 +22,16 @@ <h1 class="header mb-0">Materialize</h1>
             </div>
             <!-- Call to Action -->
             <div style="justify-content: center; display: flex; gap: 0.5rem; flex-wrap: wrap">
-              <a class="btn filled rounded btn-large z-depth-1 waves-effect waves-light" href="getting-started.html" id="download-button">Get started</a>
-              <a class="btn outlined rounded btn-large waves-effect waves-light" href="https://github.com/materializecss/materialize" target="_blank"> View on GitHub</a>
+              <a tabindex="0" class="btn filled rounded btn-large z-depth-1 waves-effect waves-light" href="getting-started.html" id="download-button">Get started</a>
+              <a tabindex="0" class="btn outlined rounded btn-large waves-effect waves-light" href="https://github.com/materializecss/materialize" target="_blank">
+                View on GitHub</a
+              >
             </div>
           </div>
         </div>
       </div>
 
-      <div class="container" style="background-color: var(--background-color)">
+      <div class="container" style="background-color: var(--md-sys-color-background)">
         <!-- Ads -->
         <div class="row center">
           <div class="s12 m4 offset-m2">
@@ -136,7 +138,7 @@ <h3>Materialize is free and open-source. This is made possible by our awesome sp
                 </div>
               </div>
               <div class="center">
-                <a class="btn" target="_blank" href="https://opencollective.com/materialize">Become a sponsor</a>
+                <a tabindex="0" class="btn tonal" target="_blank" href="https://opencollective.com/materialize">Become a sponsor</a>
               </div>
               <p class="center">Materialize development is provided by an international team. Thanks for supporting us! ❤️</p>
             </div>
diff --git a/package.json b/package.json
index abb952a..7e0e0f2 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "glob": "^10.3.3",
     "highlight.js": "^11.9.0",
     "material-icons": "^1.13.8",
-    "prismjs": "^1.29.0",
     "vite-plugin-handlebars": "^1.6.0"
   },
   "devDependencies": {
diff --git a/partials/footer.html b/partials/footer.html
index d73ed76..f53fc69 100644
--- a/partials/footer.html
+++ b/partials/footer.html
@@ -9,7 +9,7 @@ <h5>Help Materialize Grow</h5>
               We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by opening issues or contributing
               on GitHub.
             </p>
-            <a class="btn waves-effect waves-light" target="_blank" href="https://github.com/materializecss/materialize">Contribute</a>
+            <a tabindex="0" class="btn text waves-effect waves-light" target="_blank" href="https://github.com/materializecss/materialize">Contribute</a>
           </div>
 
           <div class="s12 m6 l4">
@@ -18,7 +18,7 @@ <h5>Join the Discussion</h5>
               We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else
               you can think of.
             </p>
-            <a class="btn waves-effect waves-light" href="https://gitter.im/materializecss/materialize" target="_blank">Chat</a>
+            <a tabindex="0" class="btn text waves-effect waves-light" href="https://gitter.im/materializecss/materialize" target="_blank">Chat</a>
           </div>
 
           <div class="s12 m6 l4" style="overflow: hidden">
diff --git a/partials/navbar.html b/partials/navbar.html
index 5fac51a..25ab6f4 100644
--- a/partials/navbar.html
+++ b/partials/navbar.html
@@ -67,6 +67,7 @@
     </li>
   </ul>
 </header>
+
 <div id="palette-selector" class="modal">
   <div class="modal-content">
     <h4>Color Scheme</h4>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44cfbc6..51f3a9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,9 +23,6 @@ importers:
       material-icons:
         specifier: ^1.13.8
         version: 1.13.12
-      prismjs:
-        specifier: ^1.29.0
-        version: 1.29.0
       vite-plugin-handlebars:
         specifier: ^1.6.0
         version: 1.6.0(sass@1.69.0)
@@ -3890,11 +3887,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /prismjs@1.29.0:
-    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
-    engines: {node: '>=6'}
-    dev: false
-
   /proc-log@3.0.0:
     resolution: {integrity: sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
diff --git a/src/main.ts b/src/main.ts
index 34fdbdd..215f378 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,10 +1,8 @@
 import { config } from "../config.materialize";
 import { M } from "@materializecss/materialize";
 import "./style.scss";
-//import Prism from "prismjs";
-//import "prismjs/themes/prism.min.css";
 import { argbFromHex, themeFromSourceColor } from "@material/material-color-utilities";
-import { Themes } from "./themes";
+//import { Themes } from "./themes";
 import { autocompleteDemoData } from "./data-autocomplete";
 import hljs from "highlight.js";
 
@@ -36,7 +34,7 @@ function is_touch_device() {
 globalThis.M = M;
 
 document.addEventListener("DOMContentLoaded", async function () {
-  const themes = new Themes(document);
+  //const themes = new Themes(document);
 
   // CSS > Colors
   document.querySelectorAll(".dynamic-color .col > div").forEach((el) => {
@@ -165,6 +163,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     (document.querySelector("#nav-mobile") as HTMLElement).style.overflow = "auto";
   }
 
+  /*
   themes.applyThemeProperties();
   const themeSwitch = document.querySelector("#theme-switch");
 
@@ -193,6 +192,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   toggleColorsButton?.addEventListener("change", () => {
     themes.setThemePrimaryColor(toggleColorsButton.value);
   });
+  */
 
   // Copy Button
   const copyBtn = Array.prototype.slice.call(document.querySelectorAll(".copyButton"));
diff --git a/src/style.scss b/src/style.scss
index d9fe4be..8790197 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,19 +1,16 @@
 @import "material-icons/iconfont/material-icons.css";
 @import "@materializecss/materialize/sass/materialize.scss";
-$border-color: $divider-color;
-$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
-/***************
-  HTML Styles
-***************/
+/*
+$border-color: var(--md-sys-color-outline-variant);
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
 body {
-  //background-color: #fcfcfc;
-  color: $text-color;
+  //color: $text-color;
+  //background-color: var(--md-sys-color-background);
   line-height: 1.6;
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
-  background-color: var(--background-color);
 }
 
 p.box {
@@ -81,9 +78,7 @@ footer.example {
   }
 }
 
-/********************
-  Index Page Styles
-********************/
+// Index Page Styles
 
 #logo-container {
   margin: 0;
@@ -111,7 +106,6 @@ footer.example {
 }
 
 .intro {
-  //background-color: color-mix(in srgb, var(--primary-color) 30%, var(--background-color));
   padding: 6rem 0;
 }
 
@@ -314,9 +308,7 @@ a.sidenav-trigger.top-nav {
   overflow: hidden;
 }
 
-/*******************
-  Flat Site Mockup
-*******************/
+// Flat Site Mockup
 
 #site-layout-example-left {
   background-color: color("blue-grey", "lighten-2");
@@ -357,12 +349,7 @@ a.sidenav-trigger.top-nav {
   }
 }
 
-/**********************
-**********************/
-
-/*****************
-  Chrome Browser
-*****************/
+// Chrome Browser
 
 $bottomColor: #e2e2e1;
 $topColor: lighten($bottomColor, 2%);
@@ -428,9 +415,6 @@ $height: auto;
   clear: both;
 }
 
-/**********************
-**********************/
-
 // Color Wheel
 .dynamic-color {
   .red,
@@ -576,47 +560,9 @@ pre:has(code) {
 
 :not(pre) > code[class*="language-"] {
   padding: 0.1em 0.25em;
-  border: solid 1px $divider-color;
-}
-
-// Styles code blocks
-/*
-pre[class*="language-"] {
-  &:before {
-    position: absolute;
-    padding: 1px 5px;
-    background: var(--background-color-level-16dp-solid);
-    top: 0;
-    left: 0;
-    font-family: $font-stack;
-    -webkit-font-smoothing: antialiased;
-    color: $font-color-medium;
-    content: attr(class);
-    font-size: 0.9rem;
-    border: solid 1px $divider-color;
-    border-top: none;
-    border-left: none;
-  }
-  padding: 25px 12px 7px 12px;
-  border: solid 1px $divider-color;
-  background: var(--background-color-slight-emphasis);
-}
-*/
-
-.token.operator {
-  background: transparent;
+  border: solid 1px var(--md-sys-color-outline-variant);
 }
 
-/*
-pre[class*="language-"],
-code[class*="language-"] {
-  line-height: 1.3;
-}
-code[class*="language-"] {
-  color: $font-color-main;
-}
-*/
-
 // Styles one-liners
 :not(pre) > code[class*="language-"] {
   background: var(--background-color-slight-emphasis);
@@ -645,8 +591,6 @@ code[class*="language-"] {
   cursor: pointer;
 }
 
-/**********************************/
-
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -668,8 +612,6 @@ code[class*="language-"] {
   border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
 }
 
-/***************************************/
-
 .toc-wrapper {
   &.pin-bottom {
     margin-top: 84px;
@@ -892,3 +834,5 @@ body.parallax-demo footer {
     }
   }
 }
+
+*/