From fb1ad3aab252a3f2f06b8012ce3817ed0b1ff284 Mon Sep 17 00:00:00 2001 From: Squirrel-314 Date: Wed, 13 Jan 2021 17:02:16 -0500 Subject: [PATCH] Changes Major! --- download-gold-rush.html | 1 + index.html | 58 +++++++++--- main.js | 1 + styles.css | 197 +++++++++++++++++++++++++++++++++------- 4 files changed, 214 insertions(+), 43 deletions(-) diff --git a/download-gold-rush.html b/download-gold-rush.html index 32c0d5a..9fe6bf7 100644 --- a/download-gold-rush.html +++ b/download-gold-rush.html @@ -10,6 +10,7 @@ Home

Like the game? Download our app!

+

These downloads are still in offical version 0.9.0. To get the full version use the broswer game here.

Download for Linux
v0.1 Download for Windows
v0.1 diff --git a/index.html b/index.html index bc8a0fe..5cd3018 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + @@ -9,22 +10,46 @@ Meet Squirrel - -


-
-

Hi! I'm Squirrel!

-

I am a web developer and an extremely unimportant person in general. I use Linux, and that is about the most intresting thing about me. But I have made some stuff! You can see my GitHub account here, and check out all the organizations I am in alone. Like my repositories? Please put up issues for any mistakes, and if you have a suggestion, also make an issue. No, I didn't mean it that way, it's just eaisier for me to see.

+
+
+
+

+ Hi! I'm Squirrel! +

+

+

I am not a web developer, but I do spend a lot time programming. I like CSS transitions and I think everyone should use them. I know HTML, CSS, JavaScript, and Electron, and am currently in the process of learing React and Node. Linux is my faviorite OS (I use Kubuntu, looking into Deepin). You can see my GitHub account here, and check out all the organizations I am in alone. Like my repositories? Please put up issues for any mistakes, and if you have a suggestion, also make an issue. No, I didn't mean it that way, it's just eaisier for me to see.

+
+ +
+
+ +
+ + + + + diff --git a/main.js b/main.js index e69de29..ed13a62 100644 --- a/main.js +++ b/main.js @@ -0,0 +1 @@ +document.getElementById( 'bottom' ).scrollIntoView(); diff --git a/styles.css b/styles.css index da1070b..d96b429 100644 --- a/styles.css +++ b/styles.css @@ -2,57 +2,192 @@ Main ==================================================*/ -html { - overflow: scroll; - scroll-snap-type: y mandatory; -} - -body { - font-family: Helvetica; - background-color: whitesmoke; +* { padding: 0; margin: 0; } +html, body { + margin: 0; + padding: 0; + overlanding: hidden; +} + ::-webkit-scrollbar { display: none; } /*================================================== -Navigation Bar +Common Classes ==================================================*/ -nav { +.block { + height: 100vh; +} + +.next { + height: 80px; + width: 80px; + background-color: #fff; + color: aquamarine; position: absolute; - top: 0; - left: 0; - right: 0; - background-color: #262626; + bottom: 50px; + right: 50px; + box-shadow: 0 0 8px #262626; display: flex; justify-content: center; align-items: center; - padding: 8px; - overflow: scroll; - scroll-snap-align: start; - box-shadow: 0 8px 15px #262626; + font-size: 250%; + border-radius: 50%; + transition: 0.8s; + font-weight: 900; } -nav a { - color: #fff; - text-decoration: none; - margin: 8px; +.next:hover { + transform: rotate(720deg); +} + +.arrow { + animation: nudge 5s linear infinite; + transition: .2s; +} + +@keyframes nudge { + 0% { + margin-right: 0px; + transform: scale(1); + } + 0% { + margin-right: -8px; + transform: scale(1.2); + } + 0% { + margin-right: 0px; + transform: scale(1); + } } /*================================================== -Main Sectors +Landing ==================================================*/ +.landing { + height: 100vh; + background-color: #f5f5f5; +} + +.text { + text-align: center; + font-family: Nunito; +} + +/* Hi Animation */ + +.hi { + padding: 50px; + font-size: 250%; + display: inline-block; + transition: all .3s; + transition-delay: .3s; +} + +.landing:hover .hi { + color: #f9f9f9; + font-size: 280%; + background-color: #262626; + border-radius: 2%; +} + +.hi:before, .hi:after { + content: ""; + position: absolute; + height: 50px; + width: 50px; + background-color: #262626; + border-radius: 50%; + transition: all 0.3s; + opacity: 0; +} + +.hi:before { + left: -50px; +} + +.hi:after { + right: -50px; +} + +.landing:hover .hi:before { + left: 50%; + transform: scale(1.5); + animation: hi-opacity .6s 1 forwards; +} + +.landing:hover .hi:after { + right: 50%; + transform: scale(1.5); + animation: hi-opacity .6s 1 forwards; +} + +@keyframes hi-opacity { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +/* About Me */ + +.about-me { + margin: 0 80px; + font-size: 120%; + transform: translateY(-50px); + opacity: 0; + transition: all 1.5s; + transition-delay: .6s; +} + +.landing:hover .about-me { + transform: translateY(2px); + opacity: 1; +} + + + + + + + + +/*================================================== +Main Sectors +================================================== + .project { height: 100vh; overflow: scroll; scroll-snap-align: start; } +#vegetable-dash { + height: 100vh; + width: 100%; + background-color: #272727; + position: relative; +} + +#glish-translate { + height: 100vh; + width: 100%; + background-color: #f5f5f5; + position: relative; +} + #gold-rush { height: 100vh; width: 100%; @@ -63,7 +198,7 @@ Main Sectors #incremental { height: 100vh; width: 100%; - background-color: whitesmoke; + background-color: #f5f5f5; position: relative; } @@ -77,7 +212,7 @@ Main Sectors #hillside { height: 100vh; width: 100%; - background-color: whitesmoke; + background-color: #f5f5f5; position: relative; } @@ -91,7 +226,7 @@ Main Sectors #squirrel { height: 100vh; width: 100%; - background-color: whitesmoke; + background-color: #f5f5f5; position: relative; scroll-snap-align: start; } @@ -99,7 +234,7 @@ Main Sectors #personal { height: auto; width: 100%; - background-color: whitesmoke; + background-color: #f5f5f5; position: relative; overflow: scroll; scroll-snap-align: start; @@ -109,7 +244,7 @@ Main Sectors /*================================================== Project Contents -==================================================*/ +================================================== .project h2, .project h4, .project p { margin: 25px 25px; @@ -117,7 +252,7 @@ Project Contents /*================================================== Other -==================================================*/ +================================================== @keyframes heavenly-glow { 0% { @@ -189,7 +324,7 @@ Other /*================================================== Display Images -==================================================*/ +================================================== .display-image-dark { width: 150px; @@ -241,7 +376,7 @@ Display Images /*================================================== End Section -==================================================*/ +================================================== .find-me { display: flex;