jonny/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

lens page

Browse source
This commit is contained in:
sneakers-the-rat 2023-03-15 02:04:46 -07:00
parent edcddcf887
commit f49dafcd0e
9 changed files with 94 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/webpack.common.js
View file

@ -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
}),

7
src/index.js
View 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)

41
src/js/lens.js Normal file
View 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
View file

@ -0,0 +1,4 @@
body {
width: 100%;
height: 100%
}

3
src/styles/_text.scss Normal file
View file

@ -0,0 +1,3 @@
h1 {
font-size: 5rem;
}

4
src/styles/_variables.scss
View file

@ -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;

4
src/styles/index.scss
View file

@ -2,3 +2,7 @@
@import 'variables';
@import 'scaffolding';
@import 'layout';
@import 'text';
@import 'pages/home';

15
src/styles/pages/home.scss Normal file
View 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;
}

20
src/template.html
View file

@ -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>