From 76713428565e0b1c8e01d293d74a4d8a59e323b2 Mon Sep 17 00:00:00 2001 From: Johnathon Weaver Date: Sat, 12 Jun 2021 02:05:49 +0800 Subject: [PATCH] Fixes for non Javascript users and some other tweaks. --- public/index.html | 453 ++++++++------------------------ public/style.css | 184 +++++++++++++ src/assets/{ => videos}/eye.mp4 | Bin src/pages/Home.js | 2 +- src/pages/News.js | 2 +- 5 files changed, 301 insertions(+), 340 deletions(-) create mode 100644 public/style.css rename src/assets/{ => videos}/eye.mp4 (100%) diff --git a/public/index.html b/public/index.html index d749397..befd4ad 100644 --- a/public/index.html +++ b/public/index.html @@ -1,338 +1,115 @@ - - - - - - - - - - - - - - - - -
- - + + + + + + + + + + + + Latest Privacy - Keep track of privacy easily. + + + + + +
+ + \ No newline at end of file diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..7ef2010 --- /dev/null +++ b/public/style.css @@ -0,0 +1,184 @@ +body{ + background-color: #1a1a1a; +} + +.wrap{ + font-family: 'Roboto', sans-serif; + color: white; + position: absolute; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow-x: hidden; +} + +nav{ + padding-top: 3.5rem; + padding-bottom: 1.5rem; + position: relative; +} + +nav .container{ + max-width: 1600px; + padding-left: 3rem; + padding-right: 3rem; + margin-left: auto; + margin-right: auto; + display: grid; + grid-column-gap: 1.5rem; + grid-template-columns: 3fr 9fr; +} + +nav .menuWrap{ + display: flex; + justify-content: flex-end; + align-items: center; +} + +nav .menuWrap .menu{ + padding: 0; + margin: 0; + list-style: none; + text-align: right; + font-size: .9375em; + opacity: 1; +} + +nav .menuWrap .menu ul{ + padding: 0; + margin: 0; + list-style: none; + text-align: right; + font-size: .9375em; + opacity: 1; +} + +nav .menuWrap .menu li{ + display: inline-block; + margin-right: 2rem; + position: relative; +} + +nav .menuWrap .menu li a{ + color: white; + text-decoration: none; + -webkit-transition: .3s; + transition: .3s; + opacity: .5; +} + +nav .menuWrap .menu li a:hover{ + opacity: 1; +} + +section{ + max-width: 734px; + margin-top: 6.5rem; + margin-right: auto; + margin-left: auto; +} + +.header{ + text-align: center; + margin-bottom: 5rem; +} + +.header h1{ + font-weight: 400; + font-size: 4.5rem; + text-transform: uppercase; + margin-top: 0; + margin-bottom: 0; +} + +.header h1 span{ + font-weight: 900; +} + +.header p{ + max-width: 650px; + margin-right: auto; + margin-left: auto; + margin-top: 2rem; + margin-bottom: 0; + font-size: 1.2em; + line-height: 1.5; + color: #909090; + opacity: 1; +} + +.header p strong{ + color: white; +} + +.why{ + margin-bottom: 13rem; +} + +.why div{ + padding-top: 5rem; +} + +.why div span{ + position: absolute; + font-size: 5.5rem; + font-weight: 900; + opacity: 0.05; +} + +.why div div{ + margin-top: -2.7rem; + margin-left: 2.3rem; +} + +.why div div h3{ + font-size: 1.625em; + font-weight: 400; +} + +.why div div p{ + font-size: 1.2em; + line-height: 1.5; + opacity: .5; +} + +.story{ + margin-bottom: 10rem; +} + +.story h1{ + font-weight: 400; + font-size: 3.5rem; + text-transform: uppercase; + margin-top: 0; + margin-bottom: 0; + padding-bottom: 2.5rem; +} + +.story p{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1.2em; + line-height: 1.5; + color: #909090; + opacity: 1; +} + +.story p strong{ + color: white; +} + +.story a{ + color: white; + opacity: 1; + text-decoration: none; + transition: 300ms; + font-size: 1.2em; + line-height: 1.5; +} + +.story a:hover{ + opacity: 0.5; +} \ No newline at end of file diff --git a/src/assets/eye.mp4 b/src/assets/videos/eye.mp4 similarity index 100% rename from src/assets/eye.mp4 rename to src/assets/videos/eye.mp4 diff --git a/src/pages/Home.js b/src/pages/Home.js index 0a736f8..6c7a861 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -12,7 +12,7 @@ import HomeDonate from '../components/HomeDonate'; import Style from './Home.module.scss'; -import eye from '../assets/eye.mp4'; +import eye from '../assets/videos/eye.mp4'; class Home extends Component { render() { diff --git a/src/pages/News.js b/src/pages/News.js index d089629..765883d 100644 --- a/src/pages/News.js +++ b/src/pages/News.js @@ -11,7 +11,7 @@ import { Parallax } from 'react-scroll-parallax'; import Style from './News.module.scss'; -import eye from '../assets/eye.mp4'; +import eye from '../assets/videos/eye.mp4'; const articleLimit = 64; const attemptLimit = 6;