lens page
This commit is contained in:
parent
edcddcf887
commit
f49dafcd0e
9 changed files with 94 additions and 6 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,6 +1,9 @@
|
||||||
// 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'
|
||||||
|
|
||||||
|
|
@ -12,7 +15,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')
|
||||||
|
|
@ -23,4 +26,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)
|
||||||
|
|
|
||||||
41
src/js/lens.js
Normal file
41
src/js/lens.js
Normal file
|
|
@ -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();
|
||||||
|
}
|
||||||
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-size: 1rem;
|
||||||
$font-family: sans-serif;
|
$font-family: sans-serif;
|
||||||
$background-color: #121212;
|
$background-color: #fff;
|
||||||
$font-color: #dae0e0;
|
$font-color: #000;
|
||||||
$page-width: 650px;
|
$page-width: 650px;
|
||||||
|
|
|
||||||
|
|
@ -2,3 +2,7 @@
|
||||||
|
|
||||||
@import 'variables';
|
@import 'variables';
|
||||||
@import 'scaffolding';
|
@import 'scaffolding';
|
||||||
|
@import 'layout';
|
||||||
|
@import 'text';
|
||||||
|
|
||||||
|
@import 'pages/home';
|
||||||
|
|
|
||||||
15
src/styles/pages/home.scss
Normal file
15
src/styles/pages/home.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -9,6 +9,24 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue