Skip to content

Commit 0accd10

Browse files
Daniel WDaniel W
Daniel W
authored and
Daniel W
committed
refactor: clean variables
1 parent 0d49e72 commit 0accd10

9 files changed

Lines changed: 60 additions & 157 deletions

File tree

‎demo-page.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ <h1>Test</h1>
3030
asperiores nihil similique minima voluptas.
3131
</p>
3232
<button onclick="toggleTheme()">Toggle Theme</button>
33-
<br />
3433
<p class="error-text">This is an Error</p>
3534

3635
<p>

‎getting-started.html‎

Lines changed: 35 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ <h5>Materialize</h5>
2828
are unfamiliar with Sass.
2929
</p>
3030
<a
31+
tabindex="0"
3132
id="download-source"
32-
class="btn waves-effect waves-light icon-right"
33+
class="btn filled waves-effect waves-light icon-right"
3334
href="https://github.com/materializecss/materialize/releases/download/2.0.3-alpha/materialize-v2.0.3-alpha.zip"
3435
>
3536
Materialize<i class="material-icons">file_download</i>
@@ -42,8 +43,9 @@ <h5>Sass</h5>
4243
you choose this option.
4344
</p>
4445
<a
46+
tabindex="0"
4547
id="download-sass"
46-
class="btn waves-effect waves-light icon-right"
48+
class="btn outlined waves-effect waves-light icon-right"
4749
href="https://github.com/materializecss/materialize/releases/download/2.0.3-alpha/materialize-src-v2.0.3-alpha.zip"
4850
>
4951
Source<i class="material-icons right">file_download</i>
@@ -79,32 +81,23 @@ <h5>CDN</h5>
7981
<a href="https://www.jsdelivr.com/package/npm/@materializecss/materialize">jsDelivr</a>.
8082
</p>
8183
<pre style="padding-top: 0px">
82-
<span class="copyMessage">Copied!</span>
83-
<i class="material-icons copyButton">content_copy</i>
84-
<code class="language-markup copiedText"><xmp>
85-
<!-- Compiled and minified CSS -->
86-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/css/materialize.min.css">
87-
<!-- Compiled and minified JavaScript -->
88-
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script>
89-
</xmp></code></pre>
84+
<span class="copyMessage">Copied!</span>
85+
<i class="material-icons copyButton">content_copy</i>
86+
<code class="language-markup copiedText"><xmp><!-- Compiled and minified CSS -->
87+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/css/materialize.min.css">
88+
<!-- Compiled and minified JavaScript -->
89+
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script>
90+
</xmp></code></pre>
9091
</div>
9192
<div class="col s12">
9293
<h5>NPM</h5>
9394
<p>You can also get the latest release using NPM. This release contains source files as well as the compiled CSS and JavaScript files.</p>
94-
<pre><code class="language-bash">
95-
npm install @materializecss/materialize
96-
</code></pre>
95+
<pre><code class="language-bash">npm install @materializecss/materialize</code></pre>
9796
</div>
9897
<div class="col s12">
9998
<h5>Yarn</h5>
100-
<p>
101-
Since
102-
<strong><a href="https://bower.io/blog/2017/how-to-migrate-away-from-bower/">Bower is deprecated</a></strong
103-
>, you can get the latest release using yarn as your favorite package manager.
104-
</p>
105-
<pre><code class="language-bash">
106-
yarn add @materializecss/materialize
107-
</code></pre>
99+
<p>Or you can get the latest release using yarn as your favorite package manager.</p>
100+
<pre><code class="language-bash">yarn add @materializecss/materialize</code></pre>
108101
</div>
109102
</div>
110103
</div>
@@ -142,25 +135,22 @@ <h5>HTML Setup</h5>
142135
<pre style="padding-top: 0px">
143136
<span class="copyMessage">Copied!</span>
144137
<i class="material-icons copyButton">content_copy</i>
145-
<code class="language-markup copiedText"><xmp>
146-
<!DOCTYPE html>
147-
<html>
148-
<head>
149-
<!--Import Google Icon Font-->
150-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
151-
<!--Import materialize.css-->
152-
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
153-
<!--Let browser know website is optimized for mobile-->
154-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
155-
</head>
156-
<body>
157-
<!--JavaScript at end of body for optimized loading-->
158-
<script type="text/javascript" src="js/materialize.min.js"></script>
159-
</body>
160-
</html>
161-
</xmp>
162-
</code>
163-
</pre>
138+
<code class="language-markup copiedText"><xmp><!DOCTYPE html>
139+
<html>
140+
<head>
141+
<!--Import Google Icon Font-->
142+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
143+
<!--Import materialize.css-->
144+
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
145+
<!--Let browser know website is optimized for mobile-->
146+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
147+
</head>
148+
<body>
149+
<!--JavaScript at end of body for optimized loading-->
150+
<script type="text/javascript" src="js/materialize.min.js"></script>
151+
</body>
152+
</html>
153+
</xmp></code></pre>
164154
</div>
165155
</div>
166156

@@ -181,10 +171,10 @@ <h5>Starter Template</h5>
181171
<img class="z-depth-1" style="width: 100%" src="images/starter-template.gif" />
182172
</a>
183173
<p>This is the simplest starter page with a Header, Call-to-Action, and Icon Features.</p>
184-
<a class="btn waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/starter-template/preview.html">
174+
<a tabindex="0" class="btn filled waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/starter-template/preview.html">
185175
Demo <i class="material-icons">search</i>
186176
</a>
187-
<a class="btn waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/starter-template.zip">
177+
<a tabindex="0" class="btn outlined waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/starter-template.zip">
188178
Download<i class="material-icons">file_download</i>
189179
</a>
190180
</div>
@@ -195,35 +185,16 @@ <h5>Parallax Template</h5>
195185
<img class="z-depth-1" style="width: 100%" src="images/parallax-template.jpg" />
196186
</a>
197187
<p>This is the simplest starter page with a Header, Call-to-Action, and Icon Features.</p>
198-
<a class="btn waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/parallax-template/preview.html">
188+
<a tabindex="0" class="btn filled waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/parallax-template/preview.html">
199189
Demo<i class="material-icons">search</i>
200190
</a>
201-
<a class="btn waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/parallax-template.zip">
191+
<a tabindex="0" class="btn outlined waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/parallax-template.zip">
202192
Download<i class="material-icons">file_download</i>
203193
</a>
204194
</div>
205195
</div>
206196
</div>
207197

208-
<!-- Third Party Options -->
209-
<div id="third-party-options" class="row scrollspy">
210-
<div class="col s12">
211-
<h3 class="header">Third-party Options</h3>
212-
<p class="caption">
213-
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.
214-
</p>
215-
<h5>Ruby Gem</h5>
216-
<p>
217-
See
218-
<a href="https://github.com/mkhairi/materialize-sass">here</a>
219-
for documentation on this gem.
220-
</p>
221-
<pre><code class="language-bash">
222-
gem 'materialize-sass'
223-
</code></pre>
224-
</div>
225-
</div>
226-
227198
<div id="sass" class="row scrollspy">
228199
<div class="col s12">
229200
<h3 class="header">Sass Setup</h3>
@@ -234,10 +205,8 @@ <h5>Compiling Sass</h5>
234205
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
235206
can link this newly outputted file in your HTML page.
236207
</p>
237-
238208
<pre><code class="language-markup directory-markup">
239-
<xmp>
240-
MyWebsite/
209+
<xmp>MyWebsite/
241210
|--css/
242211
| |--materialize.css <-- compiled from scss/materialize.scss
243212
|
@@ -262,9 +231,6 @@ <h5>Compiling Sass</h5>
262231
<li><a href="#download">Download</a></li>
263232
<li><a href="#setup">Setup</a></li>
264233
<li><a href="#templates">Templates</a></li>
265-
<li>
266-
<a href="#third-party-options">Third-party Options</a>
267-
</li>
268234
<li><a href="#sass">Sass</a></li>
269235
</ul>
270236
</div>

‎index.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<body>
77
{{> navbar }}
88
<main>
9-
<div id="index-banner" style="position: relative; background-color: color-mix(in srgb, var(--primary-color) 30%, var(--background-color))">
9+
<div id="index-banner" style="position: relative; background-color: color-mix(in srgb, var(--primary-color) 30%, var(--md-sys-color-background))">
1010
<!-- Background -->
1111
<div style="position: absolute; top: 0; height: 100%; overflow: hidden; width: 100%; z-index: 0">
1212
<div class="gradient"></div>
@@ -22,14 +22,16 @@ <h1 class="header mb-0">Materialize</h1>
2222
</div>
2323
<!-- Call to Action -->
2424
<div style="justify-content: center; display: flex; gap: 0.5rem; flex-wrap: wrap">
25-
<a class="btn filled rounded btn-large z-depth-1 waves-effect waves-light" href="getting-started.html" id="download-button">Get started</a>
26-
<a class="btn outlined rounded btn-large waves-effect waves-light" href="https://github.com/materializecss/materialize" target="_blank"> View on GitHub</a>
25+
<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>
26+
<a tabindex="0" class="btn outlined rounded btn-large waves-effect waves-light" href="https://github.com/materializecss/materialize" target="_blank">
27+
View on GitHub</a
28+
>
2729
</div>
2830
</div>
2931
</div>
3032
</div>
3133

32-
<div class="container" style="background-color: var(--background-color)">
34+
<div class="container" style="background-color: var(--md-sys-color-background)">
3335
<!-- Ads -->
3436
<div class="row center">
3537
<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
136138
</div>
137139
</div>
138140
<div class="center">
139-
<a class="btn" target="_blank" href="https://opencollective.com/materialize">Become a sponsor</a>
141+
<a tabindex="0" class="btn tonal" target="_blank" href="https://opencollective.com/materialize">Become a sponsor</a>
140142
</div>
141143
<p class="center">Materialize development is provided by an international team. Thanks for supporting us! ❤️</p>
142144
</div>

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"glob": "^10.3.3",
1515
"highlight.js": "^11.9.0",
1616
"material-icons": "^1.13.8",
17-
"prismjs": "^1.29.0",
1817
"vite-plugin-handlebars": "^1.6.0"
1918
},
2019
"devDependencies": {

‎partials/footer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h5>Help Materialize Grow</h5>
99
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
1010
on GitHub.
1111
</p>
12-
<a class="btn waves-effect waves-light" target="_blank" href="https://github.com/materializecss/materialize">Contribute</a>
12+
<a tabindex="0" class="btn text waves-effect waves-light" target="_blank" href="https://github.com/materializecss/materialize">Contribute</a>
1313
</div>
1414

1515
<div class="s12 m6 l4">
@@ -18,7 +18,7 @@ <h5>Join the Discussion</h5>
1818
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
1919
you can think of.
2020
</p>
21-
<a class="btn waves-effect waves-light" href="https://gitter.im/materializecss/materialize" target="_blank">Chat</a>
21+
<a tabindex="0" class="btn text waves-effect waves-light" href="https://gitter.im/materializecss/materialize" target="_blank">Chat</a>
2222
</div>
2323

2424
<div class="s12 m6 l4" style="overflow: hidden">

‎partials/navbar.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
</li>
6868
</ul>
6969
</header>
70+
7071
<div id="palette-selector" class="modal">
7172
<div class="modal-content">
7273
<h4>Color Scheme</h4>

‎pnpm-lock.yaml‎

Lines changed: 0 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/main.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { config } from "../config.materialize";
22
import { M } from "@materializecss/materialize";
33
import "./style.scss";
4-
//import Prism from "prismjs";
5-
//import "prismjs/themes/prism.min.css";
64
import { argbFromHex, themeFromSourceColor } from "@material/material-color-utilities";
7-
import { Themes } from "./themes";
5+
//import { Themes } from "./themes";
86
import { autocompleteDemoData } from "./data-autocomplete";
97
import hljs from "highlight.js";
108

@@ -36,7 +34,7 @@ function is_touch_device() {
3634
globalThis.M = M;
3735

3836
document.addEventListener("DOMContentLoaded", async function () {
39-
const themes = new Themes(document);
37+
//const themes = new Themes(document);
4038

4139
// CSS > Colors
4240
document.querySelectorAll(".dynamic-color .col > div").forEach((el) => {
@@ -165,6 +163,7 @@ document.addEventListener("DOMContentLoaded", async function () {
165163
(document.querySelector("#nav-mobile") as HTMLElement).style.overflow = "auto";
166164
}
167165

166+
/*
168167
themes.applyThemeProperties();
169168
const themeSwitch = document.querySelector("#theme-switch");
170169
@@ -193,6 +192,7 @@ document.addEventListener("DOMContentLoaded", async function () {
193192
toggleColorsButton?.addEventListener("change", () => {
194193
themes.setThemePrimaryColor(toggleColorsButton.value);
195194
});
195+
*/
196196

197197
// Copy Button
198198
const copyBtn = Array.prototype.slice.call(document.querySelectorAll(".copyButton"));

0 commit comments

Comments
 (0)