From e70c6d6ae11b271a2999ac2b55e24c95238bdef4 Mon Sep 17 00:00:00 2001 From: VictorIJnr Date: Mon, 6 Nov 2017 02:14:24 +0000 Subject: [PATCH] Well you made a lot of changes (I think) since it's 2:13am and you have a 10am tomorrow (today). Anyway I think it looks better. It's cleaner. Plus changes were made to .narci so it's positioned better and not completely awful. --- index.html | 159 ++++++++++++++++++----------------------- src/css/indexify.css | 16 ++--- src/css/navigation.css | 116 ++++++++++++++++++++++-------- 3 files changed, 162 insertions(+), 129 deletions(-) diff --git a/index.html b/index.html index e1e7b88..8869640 100644 --- a/index.html +++ b/index.html @@ -1,95 +1,76 @@ - - - - - - - Victor Igodifo - - - - - - - - - - - - - - - - -
-
-
-
- - -
- -
- - + + + + Victor Igodifo + + + + + + + + + + + + + + +
+
+ + + +

VictorIJnr

+ +
+ +
+
+
-
- -

VictorIJnr

- -
-
- +
+
+ +
+
+
- -
- + +
+ Background + + + +
-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- -
- -
- Background - - - - -
-
- - + + + + \ No newline at end of file diff --git a/src/css/indexify.css b/src/css/indexify.css index 5b8cced..445e0c5 100644 --- a/src/css/indexify.css +++ b/src/css/indexify.css @@ -27,13 +27,14 @@ box-sizing: border-box; font-family: 'Gabriola', sans-serif; - color: #333; } html, body { height: 100vh; width: 100vw; + color: #ddd; + font-size: 25px; text-align: center; vertical-align: middle; @@ -99,6 +100,8 @@ section.active { } .splash-screen { + display: flex; + align-items: center; position: relative; color: #ddd; @@ -149,18 +152,11 @@ section.active { .narci { display: inline-block; - position: relative; - margin: 0%; + margin-left: 2.5vw; - height: 34vh; - - font-size: 600%; + font-size: 350%; color: #ddd; - text-align: center; - vertical-align: middle; - - line-height: 34vh; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; diff --git a/src/css/navigation.css b/src/css/navigation.css index daa14f6..7054cfa 100644 --- a/src/css/navigation.css +++ b/src/css/navigation.css @@ -1,69 +1,125 @@ .navigation { - position: absolute; + position: fixed; display: flex; flex-direction: column; + justify-content: center; + align-items: center; margin: 0px; + padding: 0px; - top: -10vh; - left: -7vw; + top: -5vh; + left: -3vw; color: inherit; - background-color: #fff; - width: 35%; + width: 30vw; list-style: none; - font-size: 200%; + font-size: 100%; + + z-index: 1000; +} + +.bottom { + top: 90vh; +} + +.right { + right: 2.5vw; + left: initial; +} - z-index: 100; +.row-nav { + flex-direction: row; + width: initial; } .navigation:first-child { padding-top: 10vh; } +.bottom.navigation:first-child { + padding-top: 0vh; +} + +.navigation a { + position: relative; + line-height: 125%; + padding-bottom: -5px; +} + .navigation a:link, .navigation a:visited { - display: block; + display: inline-block; - color: #555; - background-color: #fff; + color: inherit; text-decoration: none; - - -webkit-transition: background-color 0.5s ease, - color 0.5s ease; - -moz-transition: background-color 0.5s ease, - color 0.5s ease; - transition: background-color 0.5s ease, - color 0.5s ease; } -.navigation a:hover { +/* .navigation a:hover, +.navigation a.active { text-decoration: none; color: #fff; - background-color: #555; + background-color: #e5a952; +} */ + +.navigation a::after { + border-bottom: 1px solid transparent; + width: 0%; + height: 0%; + content: ''; + + box-sizing: inherit; + position: absolute; + + bottom: 0%; + left: 0%; + + -webkit-transition: border-color 0.5s ease-out, + width 0.25s ease-out, + height 0.25s ease-out 0.25s; + transition: border-color 0.5s ease-out, + width 0.25s ease-out, + height 0.25s ease-out 0.25s; +} + +.navigation a:hover::after { + width: 100%; + /* height: 90%; */ + + border-color: #fff; +} + +.row-nav.navigation a:link, +.row-nav.navigation a:visited { + display: inline-block; +} + +.navigation.row-nav a { + margin-left: 5vw; } .navigation-container { text-align: center; - color: #333; + color: inherit; background-color: #fff; font-size: inherit; } -.top-left { - right: -7vw; - left: initial; -} - .tilt { - transform-origin: 0 0; - transform: rotateZ(-40deg) translate(-14vw, 14vh); + transform-origin: 0% 0%; + /* transform: rotateZ(-45deg) translate(-29.4vw, -55vh); */ + transform: rotateZ(-45deg) translate(-51vw, 10.705vh); + /* transform: translate(-40.4vw, 9.956vh) rotateZ(-45deg); */ + /*I used trig to get the translation values, mathematically, ideal values would be approx (-42.4vw, 2.65vw) + after using trig to calculate the distance to top corner is 15(root 2)*/ + width: 100%; } -.top-left.tilt { - transform-origin: 0 100%; - transform: rotateZ(40deg) translate(-2vw, -25vh); +.right.tilt { + transform-origin: 100% 0%; + /* transform: rotateZ(45deg) translate(26.5vw, -55vh); */ + transform: rotateZ(45deg) translate(51.5vw, 10.705vh); } \ No newline at end of file