Compare commits
No commits in common. "080ae6804a5453320a89730f7b01274572ee5c23" and "edcddcf8879a2de08ebe048d8619e4a0062b6af6" have entirely different histories.
080ae6804a
...
edcddcf887
9 changed files with 6 additions and 104 deletions
|
|
@ -38,7 +38,7 @@ module.exports = {
|
||||||
// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
|
// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
title: 'webpack Boilerplate',
|
title: 'webpack Boilerplate',
|
||||||
// favicon: paths.src + '/images/favicon.png',
|
favicon: paths.src + '/images/favicon.png',
|
||||||
template: paths.src + '/template.html', // template file
|
template: paths.src + '/template.html', // template file
|
||||||
filename: 'index.html', // output file
|
filename: 'index.html', // output file
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,6 @@
|
||||||
// Test import of a JavaScript module
|
// Test import of a JavaScript module
|
||||||
// import { example } from '@/js/example'
|
// import { example } from '@/js/example'
|
||||||
|
|
||||||
import { init } from '@/js/lens.js'
|
|
||||||
init();
|
|
||||||
|
|
||||||
// Test import of an asset
|
// Test import of an asset
|
||||||
// import webpackLogo from '@/images/webpack-logo.svg'
|
// import webpackLogo from '@/images/webpack-logo.svg'
|
||||||
|
|
||||||
|
|
@ -15,7 +12,7 @@ import '@/styles/index.scss'
|
||||||
// logo.src = webpackLogo
|
// logo.src = webpackLogo
|
||||||
|
|
||||||
const heading = document.createElement('h1')
|
const heading = document.createElement('h1')
|
||||||
// heading.textContent = example()
|
heading.textContent = example()
|
||||||
|
|
||||||
// Test a background image url in CSS
|
// Test a background image url in CSS
|
||||||
const imageBackground = document.createElement('div')
|
const imageBackground = document.createElement('div')
|
||||||
|
|
@ -26,4 +23,4 @@ imageBackground.classList.add('image')
|
||||||
// imagePublic.src = '/assets/example.png'
|
// imagePublic.src = '/assets/example.png'
|
||||||
|
|
||||||
const app = document.querySelector('#root')
|
const app = document.querySelector('#root')
|
||||||
// app.append(logo, heading, imageBackground, imagePublic)
|
app.append(logo, heading, imageBackground, imagePublic)
|
||||||
|
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
|
|
||||||
// OK so the next thing to do is make it so it's blurry when the screen is too
|
|
||||||
// big or too small, and thne prompt someone to make their screen bigger or smaller
|
|
||||||
// to be a lens and then you have to move the window around to be able to see the different
|
|
||||||
// links on the page
|
|
||||||
|
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
h1 {
|
|
||||||
font-size: 5rem;
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
$font-size: 1rem;
|
$font-size: 1rem;
|
||||||
$font-family: sans-serif;
|
$font-family: sans-serif;
|
||||||
$background-color: #fff;
|
$background-color: #121212;
|
||||||
$font-color: #000;
|
$font-color: #dae0e0;
|
||||||
$page-width: 650px;
|
$page-width: 650px;
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,3 @@
|
||||||
|
|
||||||
@import 'variables';
|
@import 'variables';
|
||||||
@import 'scaffolding';
|
@import 'scaffolding';
|
||||||
@import 'layout';
|
|
||||||
@import 'text';
|
|
||||||
|
|
||||||
@import 'pages/home';
|
|
||||||
|
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -9,24 +9,6 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="root" class="lens">
|
<div id="root"></div>
|
||||||
|
|
||||||
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue