From f49dafcd0e823359ee05cb9263a7ad8f69db487e Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <JLSaunders987@gmail.com>
Date: Wed, 15 Mar 2023 02:04:46 -0700
Subject: [PATCH] lens page

---
 config/webpack.common.js   |  2 +-
 src/index.js               |  7 +++++--
 src/js/lens.js             | 41 ++++++++++++++++++++++++++++++++++++++
 src/styles/_layout.scss    |  4 ++++
 src/styles/_text.scss      |  3 +++
 src/styles/_variables.scss |  4 ++--
 src/styles/index.scss      |  4 ++++
 src/styles/pages/home.scss | 15 ++++++++++++++
 src/template.html          | 20 ++++++++++++++++++-
 9 files changed, 94 insertions(+), 6 deletions(-)
 create mode 100644 src/js/lens.js
 create mode 100644 src/styles/_layout.scss
 create mode 100644 src/styles/_text.scss
 create mode 100644 src/styles/pages/home.scss

diff --git a/config/webpack.common.js b/config/webpack.common.js
index ab02f62..46d1e61 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -38,7 +38,7 @@ module.exports = {
     // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
     new HtmlWebpackPlugin({
       title: 'webpack Boilerplate',
-      favicon: paths.src + '/images/favicon.png',
+      // favicon: paths.src + '/images/favicon.png',
       template: paths.src + '/template.html', // template file
       filename: 'index.html', // output file
     }),
diff --git a/src/index.js b/src/index.js
index ca53b3e..4f4ba23 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,9 @@
 // Test import of a JavaScript module
 // import { example } from '@/js/example'
 
+import { init } from '@/js/lens.js'
+init();
+
 // Test import of an asset
 // import webpackLogo from '@/images/webpack-logo.svg'
 
@@ -12,7 +15,7 @@ import '@/styles/index.scss'
 // logo.src = webpackLogo
 
 const heading = document.createElement('h1')
-heading.textContent = example()
+// heading.textContent = example()
 
 // Test a background image url in CSS
 const imageBackground = document.createElement('div')
@@ -23,4 +26,4 @@ imageBackground.classList.add('image')
 // imagePublic.src = '/assets/example.png'
 
 const app = document.querySelector('#root')
-app.append(logo, heading, imageBackground, imagePublic)
+// app.append(logo, heading, imageBackground, imagePublic)
diff --git a/src/js/lens.js b/src/js/lens.js
new file mode 100644
index 0000000..f63339d
--- /dev/null
+++ b/src/js/lens.js
@@ -0,0 +1,41 @@
+
+
+
+function _init(){
+  let lens = document.querySelector('.lens');
+
+  lens.style.setProperty(
+      '--screen-width',
+      `${window.screen.availWidth}px`
+  );
+  lens.style.setProperty(
+      '--screen-height',
+      `${window.screen.availHeight}px`
+  );
+  function set_position(){
+
+    lens.style.transform = `translate(-${window.screenX}px, -${window.screenY}px)`
+    // lens.style.setProperty(
+    // '--screen-left',
+    //
+    // )
+    // lens.style.setProperty(
+    //     '--screen-top',
+    //     `${window.screenY}px`
+    // )
+    // console.log('set vars')
+    setTimeout(set_position, 10);
+  }
+
+  set_position();
+  // setTimeout(set_size,100);
+  // set_size()
+}
+
+export function init(){
+
+  // document.addEventListener('load', () => {
+  //   _init();
+  // })
+  _init();
+}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
new file mode 100644
index 0000000..0b859c8
--- /dev/null
+++ b/src/styles/_layout.scss
@@ -0,0 +1,4 @@
+body {
+  width: 100%;
+  height: 100%
+}
diff --git a/src/styles/_text.scss b/src/styles/_text.scss
new file mode 100644
index 0000000..48d751e
--- /dev/null
+++ b/src/styles/_text.scss
@@ -0,0 +1,3 @@
+h1 {
+  font-size: 5rem;
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 54e9032..c054429 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,5 +1,5 @@
 $font-size: 1rem;
 $font-family: sans-serif;
-$background-color: #121212;
-$font-color: #dae0e0;
+$background-color: #fff;
+$font-color: #000;
 $page-width: 650px;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0382771..5834685 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,3 +2,7 @@
 
 @import 'variables';
 @import 'scaffolding';
+@import 'layout';
+@import 'text';
+
+@import 'pages/home';
diff --git a/src/styles/pages/home.scss b/src/styles/pages/home.scss
new file mode 100644
index 0000000..87746dc
--- /dev/null
+++ b/src/styles/pages/home.scss
@@ -0,0 +1,15 @@
+.lens {
+  --screen-width: 100vw;
+  --screen-height: 100vh;
+  //--screen-left: 0;
+  //--screen-top: 0;
+  position: absolute;
+  width: var(--screen-width);
+  height: var(--screen-height);
+  //top: var(--screen-top);
+  //left: var(--screen-left);
+  top: 0;
+  left: 0;
+
+  transition: transform ease 100ms;
+}
diff --git a/src/template.html b/src/template.html
index f1bc0a1..aaee7ed 100644
--- a/src/template.html
+++ b/src/template.html
@@ -9,6 +9,24 @@
   </head>
 
   <body>
-    <div id="root"></div>
+    <div id="root" class="lens">
+
+      <h1>Internet Website 2.0</h1>
+      <h2>~Welcome to the net~</h2>
+      <ul class="categories">
+        <li>
+          <h3>These are the Things I like</h3>
+          <p>And some reasons that I like them</p>
+        </li>
+        <li>
+          <h3>Some are known</h3>
+          <p>Others cannot be known, or are illegal to know</p>
+        </li>
+        <li>
+          <h3>All are good</h3>
+          <p>Because I am not bad</p>
+        </li>
+      </ul>
+    </div>
   </body>
 </html>