general skeleton and linking

2020-04-08 02:56:45 -06:00 · 2020-04-08 02:56:45 -06:00 · b410e55915
commit b410e55915
parent bcfe64f427
4 changed files with 118 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>animated particles</title>
+    <link rel="stylesheet"
+        href="css/index.min.css"
+        crossorigin="anonymous"/>
+</head>
+<body>
+    <canvas id="canvas1"></canvas>
+<!-- javascript -->
+<script
+    src="js/particles.js"
+    crossorigin="anonymous"
+    async>
+</script>
+<!-- end javascript -->
+</body>
+</html>
--- a/js/particles.js
+++ b/js/particles.js
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@ -0,0 +1,82 @@
+/* based on Eric Meyer's CSS Reset 2.0 (http://meyerweb/eric/tools/css/reset/)
+   modified for easier implementation of REM font-sizing with default set to
+   62.5% or 10px on most browsers by default.  Media-queries adjusts this base conversion.
+*/
+
+@media only screen and (max-width: 640px) {
+	:root {
+		font-size: 42.5%;
+	}
+}
+
+@media only screen and (min-width: 641px) and (max-width: 1024px) {
+	:root {
+		font-size: 50%;
+	}
+}
+
+@media only screen and (min-width: 1025px) {
+	:root {
+		font-size: 62.5%;
+	}
+}
+
+
+:root {
+	height: 100%;
+	scroll-behavior: smooth;
+	width: 100%;
+    body {
+		font-size: 2.2rem;
+		height: 100%;
+		line-height: 2.2rem * 1.25;
+		width: 100%;
+    }
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	border: 0;
+	box-sizing: border-box;
+	font-size: inherit;
+	font: inherit;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+
+ol, ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
--- a/scss/index.scss
+++ b/scss/index.scss
@ -0,0 +1,15 @@
+/* styles of index */
+
+/*
+import partials
+*/
+@import 'reset';
+
+#canvas1 {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(#ffc38c, #ff9b40);
+}