Compare commits
2 commits
edcddcf887
...
080ae6804a
| Author | SHA1 | Date | |
|---|---|---|---|
| 080ae6804a | |||
| f49dafcd0e |
9 changed files with 104 additions and 6 deletions
|
|
@ -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
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
45
src/js/lens.js
Normal file
45
src/js/lens.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
// 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();
|
||||
}
|
||||
4
src/styles/_layout.scss
Normal file
4
src/styles/_layout.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
body {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
3
src/styles/_text.scss
Normal file
3
src/styles/_text.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -2,3 +2,7 @@
|
|||
|
||||
@import 'variables';
|
||||
@import 'scaffolding';
|
||||
@import 'layout';
|
||||
@import 'text';
|
||||
|
||||
@import 'pages/home';
|
||||
|
|
|
|||
21
src/styles/pages/home.scss
Normal file
21
src/styles/pages/home.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
|
||||
.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,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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue