update base index sample page styles and content
This commit is contained in:
Asif Bacchus
parent
e6ab47bfdd
commit
db11078881
30
index.html
30
index.html
@ -4,15 +4,39 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>animated particles</title>
|
<title>animated particles</title>
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
|
||||||
|
crossorigin="anonymous">
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="css/index.min.css"
|
href="css/index.min.css"
|
||||||
crossorigin="anonymous"/>
|
crossorigin="anonymous"/>
|
||||||
</head>
|
</head>
|
||||||
<body onload='particles(avoidMouse=false, speed=15)'>
|
<body onload='particles(avoidMouse=false, speed=15)'>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<h1>Lorem ipsum dolor sit amet.</h1>
|
<div class="spacer"></div>
|
||||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
|
<header>
|
||||||
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
|
<h1>ab-particles</h1>
|
||||||
|
<h2>simple, lightweight vanilla-javascript particle animation</h2>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
|
||||||
|
<p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
|
||||||
|
<p>Thanks for checking it out!</p>
|
||||||
|
</main>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
<footer>
|
||||||
|
<p>Design, code and content appearing on this site is developed by
|
||||||
|
<a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
|
||||||
|
may be freely used and redistributed in accordance with the <a
|
||||||
|
href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
|
||||||
|
appearing in the <a
|
||||||
|
href="https://git.asifbacchus.app/asif/ab-particles.git">content
|
||||||
|
repo</a>. Author provides no warranties, guarantees or implications
|
||||||
|
of suitability and disclaims any and all responsibility arising from
|
||||||
|
the usage of anything appearing on or linked to this page for any
|
||||||
|
purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
|
||||||
|
Reserved.</p>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<canvas id="particles"></canvas>
|
<canvas id="particles"></canvas>
|
||||||
<!-- javascript -->
|
<!-- javascript -->
|
||||||
|
|||||||
@ -1,8 +1,10 @@
|
|||||||
// colours used thoughout site
|
// colours used thoughout site
|
||||||
:root {
|
:root {
|
||||||
--col-bg: #212121;
|
--col-bg: #212121;
|
||||||
--col-particle: #536878;
|
--col-link: #bbdefb;
|
||||||
--col-particle-stroke: #035096;
|
|
||||||
--col-particle-stroke-hover: #0892d0;
|
|
||||||
--col-text: #ebe7c5;
|
--col-text: #ebe7c5;
|
||||||
|
|
||||||
|
--col-particle-stroke-hover: #0892d0;
|
||||||
|
--col-particle-stroke: #035096;
|
||||||
|
--col-particle: #536878;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,12 +9,37 @@ import partials
|
|||||||
body {
|
body {
|
||||||
background-color: var(--col-bg);
|
background-color: var(--col-bg);
|
||||||
color: var(--col-text);
|
color: var(--col-text);
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.85rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
line-height: 5rem;
|
line-height: 5rem;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 3rem;
|
||||||
|
line-height: 3rem;
|
||||||
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@ -23,19 +48,16 @@ p {
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline;
|
||||||
|
transition: all 0.5s ease;
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
color: red;
|
color: var(--col-link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#particles {
|
#particles {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -44,3 +66,14 @@ a {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: -999;
|
z-index: -999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100%;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user