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