Init
This commit is contained in:
commit
80a3fbf16a
BIN
assets/favicon.ico
Normal file
BIN
assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 B |
26
assets/js/browser-size.js
Normal file
26
assets/js/browser-size.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
/*-----------------------------------------------------------------------------
|
||||||
|
-- // BROWSER SIZE
|
||||||
|
-----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
// get dimensions of browser window
|
||||||
|
function getBrowserSize() {
|
||||||
|
// check width of browser window
|
||||||
|
var width = window.innerWidth
|
||||||
|
|| document.documentElement.clientWidth
|
||||||
|
|| document.body.clientWidth
|
||||||
|
|
||||||
|
// check height of browser window
|
||||||
|
var height = window.innerHeight
|
||||||
|
|| document.documentElement.clientHeight
|
||||||
|
|| document.body.clientHeight
|
||||||
|
|
||||||
|
// display browser size
|
||||||
|
document.getElementById('browser-width').innerHTML = width
|
||||||
|
document.getElementById('browser-height').innerHTML = height
|
||||||
|
}
|
||||||
|
|
||||||
|
// update dimensions when page loads
|
||||||
|
window.onload = getBrowserSize
|
||||||
|
|
||||||
|
// update dimensions when resizing browser window
|
||||||
|
window.onresize = getBrowserSize
|
||||||
125
assets/js/particles-config.js
Normal file
125
assets/js/particles-config.js
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
/* -----------------------------------------------
|
||||||
|
/* How to use? : Check the GitHub README
|
||||||
|
/* ----------------------------------------------- */
|
||||||
|
|
||||||
|
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
|
||||||
|
/*
|
||||||
|
particlesJS.load('particles-js', 'particles.json', function() {
|
||||||
|
console.log('particles.js loaded - callback');
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Otherwise just put the config content (json): */
|
||||||
|
|
||||||
|
particlesJS('particles-js', {
|
||||||
|
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#99989d"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.2,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 2,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#5786a0",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 1.5,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"bounce": false,
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "grab"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 200,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 400,
|
||||||
|
"size": 40,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true
|
||||||
|
|
||||||
|
});
|
||||||
1541
assets/js/particles.js
Normal file
1541
assets/js/particles.js
Normal file
File diff suppressed because it is too large
Load Diff
9
assets/js/particles.min.js
vendored
Normal file
9
assets/js/particles.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
168
assets/style.css
Normal file
168
assets/style.css
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // RESETS
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, div, span,
|
||||||
|
header, nav, main, article, section, aside, footer,
|
||||||
|
h1, h2, h3, h4, h5, h6,
|
||||||
|
p. strong, em, b, i, u, a, ol, ul, li,
|
||||||
|
blockquote, pre, code, hr,
|
||||||
|
img, picture, audio, video,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
form, input {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font: inheirt;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.15;
|
||||||
|
vertical-align: baseline;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header, nav, main, article, section, aside, footer,
|
||||||
|
blockquote, pre, hr,
|
||||||
|
img, picture, audio, video,
|
||||||
|
table,
|
||||||
|
form {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // VARIABLES
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--spacing-unit: 16px;
|
||||||
|
|
||||||
|
--color-font-primary: #2c2c2c;
|
||||||
|
--color-font-secondary: #fff;
|
||||||
|
|
||||||
|
--color-background-primary: #272635;
|
||||||
|
--color-background-container: #e8e9f3;
|
||||||
|
--color-background-container-secondary: #e8e9f32c;
|
||||||
|
--color-border: #e8e9f3;
|
||||||
|
|
||||||
|
--color-accent: #f95959;
|
||||||
|
--color-link: #272635;
|
||||||
|
--color-link-border: #272635;
|
||||||
|
--color-link-hover: #272635;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // BASE
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: var(--color-background-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: var(--spacing-unit);
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: var(--spacing-unit);
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
li { margin-bottom: calc(var(--spacing-unit) / 4); }
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding-top: calc(var(--spacing-unit) / 8);
|
||||||
|
color: var(--color-link);
|
||||||
|
border-bottom: 1px solid var(--color-link-border);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: var(--color-link-hover);
|
||||||
|
border-bottom: 1px solid var(--color-accent);
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // LAYOUT
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
max-width: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-size {
|
||||||
|
padding: calc(var(--spacing-unit) * 4);
|
||||||
|
font-size: 6em;
|
||||||
|
color: var(--color-font-secondary);
|
||||||
|
text-align: center;
|
||||||
|
background-color: var(--color-background-container-secondary);
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
border-right: 1px solid var(--color-border);
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding-top: var(--spacing-unit);
|
||||||
|
padding-right: var(--spacing-unit);
|
||||||
|
padding-bottom: calc(var(--spacing-unit) / 2);
|
||||||
|
padding-left: var(--spacing-unit);
|
||||||
|
color: var(--color-font-primary);
|
||||||
|
background: var(--color-background-container);
|
||||||
|
border-right: 1px solid var(--color-border);
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // DIVIDER X
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.divider-x {
|
||||||
|
position: relative;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-x:before {
|
||||||
|
position: absolute;
|
||||||
|
left: 28px;
|
||||||
|
height: 60px;
|
||||||
|
content: '';
|
||||||
|
border-left: 8px solid var(--color-accent);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-x:after {
|
||||||
|
position: absolute;
|
||||||
|
left: 28px;
|
||||||
|
height: 60px;
|
||||||
|
content: '';
|
||||||
|
border-left: 8px solid var(--color-accent);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // PARTICLES
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
#particles-js {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -10;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
39
index.html
Normal file
39
index.html
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewpoint" content="weidth=device-width, intial-scale=1.0" />
|
||||||
|
|
||||||
|
<title>Pixel Perfect -- What is my browser size?</title>
|
||||||
|
|
||||||
|
<meta name="description" content="What is my browser size?" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="assets/style.css" />
|
||||||
|
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="browser-size">
|
||||||
|
<div id="browser-width">0</div>
|
||||||
|
<div class="divider-x"></div>
|
||||||
|
<div id="browser-height">0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="content">
|
||||||
|
<h1>Pixel Perfect</h1>
|
||||||
|
<ul>
|
||||||
|
<li>What is my current browser size?.</li>
|
||||||
|
<li>Displaying width by height in pixels.</li>
|
||||||
|
<li>Made by <a href="https://haothitran.com/">Hao Tran</a>.</li>
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="particles-js"></div>
|
||||||
|
|
||||||
|
<script src="assets/js/browser-size.js"></script>
|
||||||
|
<script src="assets/js/particles.js"></script>
|
||||||
|
<script src="assets/js/particles-config.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user