From db11078881124ff0fe333e990e48ca7062bc7859 Mon Sep 17 00:00:00 2001 From: Asif Bacchus Date: Fri, 10 Apr 2020 15:51:57 -0600 Subject: [PATCH] update base index sample page styles and content --- index.html | 30 +++++++++++++++++++++++++--- scss/_palette.scss | 8 +++++--- scss/index.scss | 49 ++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 73 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index bc62ead..fc6a86e 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,39 @@ animated particles +
-

Lorem ipsum dolor sit amet.

-

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!

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, perspiciatis nobis ipsum nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.

+
+
+

ab-particles

+

simple, lightweight vanilla-javascript particle animation

+
+
+

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.

+

Configuration details, download and source at my git repo.

+

Thanks for checking it out!

+
+
+
+

Design, code and content appearing on this site is developed by + Asif Bacchus ('author') and + may be freely used and redistributed in accordance with the license + appearing in the content + repo. 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.

+
diff --git a/scss/_palette.scss b/scss/_palette.scss index b27fd06..a917e42 100644 --- a/scss/_palette.scss +++ b/scss/_palette.scss @@ -1,8 +1,10 @@ // colours used thoughout site :root { --col-bg: #212121; - --col-particle: #536878; - --col-particle-stroke: #035096; - --col-particle-stroke-hover: #0892d0; + --col-link: #bbdefb; --col-text: #ebe7c5; + + --col-particle-stroke-hover: #0892d0; + --col-particle-stroke: #035096; + --col-particle: #536878; } diff --git a/scss/index.scss b/scss/index.scss index fd14ea1..5edb30c 100644 --- a/scss/index.scss +++ b/scss/index.scss @@ -9,12 +9,37 @@ import partials body { background-color: var(--col-bg); 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 { font-size: 5rem; line-height: 5rem; - margin-bottom: 3rem; + margin-bottom: 1rem; +} + +h2 { + font-size: 3rem; + line-height: 3rem; + margin-bottom: 5rem; } p { @@ -23,19 +48,16 @@ p { a { color: inherit; + font-weight: bold; + text-decoration: underline; + transition: all 0.5s ease; &:hover, &:focus, &:active { - color: red; + color: var(--col-link); } } -.wrapper { - display: flex; - flex-direction: column; - padding: 2rem; -} - #particles { height: 100%; left: 0; @@ -44,3 +66,14 @@ a { width: 100%; z-index: -999; } + +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + min-height: 100%; + padding: 2rem; +} + .spacer { + flex: 1; + }