From cbcb0bcf7ec0f5b1bd3e75c5468903090b853942 Mon Sep 17 00:00:00 2001 From: That-One-Nerd Date: Sat, 15 Jan 2022 12:37:44 -0500 Subject: [PATCH] made stuff work when resized kinda --- 404.html | 24 +++++++++++++ 404/styles.css | 21 ++++++++++++ global/globalStyles.css | 71 ++++++++++++++++++++------------------- index.html | 6 ++-- index/styles.css | 74 ++++++++++++++++++++--------------------- 5 files changed, 122 insertions(+), 74 deletions(-) create mode 100644 404.html create mode 100644 404/styles.css diff --git a/404.html b/404.html new file mode 100644 index 0000000..6ee2562 --- /dev/null +++ b/404.html @@ -0,0 +1,24 @@ + + + + + + + + Webpage Not Found | That_One_Nerd + + +
+ Home + Games + Links + News +
+ +
+

Webpage Not Found

+

Maybe you misspelled the URL?

+

Click here to return to the home page.

+
+ + diff --git a/404/styles.css b/404/styles.css new file mode 100644 index 0000000..d388485 --- /dev/null +++ b/404/styles.css @@ -0,0 +1,21 @@ +body +{ + background-color: #f91; + color: white; + text-align: center; +} + +.showtext +{ + background-color: white; + border-radius: 2.5vw; + color: black; + font-size: 2.5vh; + margin-left: 10%; + margin-right: 10%; + margin-top: 37.5vh; + padding-bottom: 5vh; + padding-left: 5%; + padding-right: 5%; + padding-top: 5vh; +} diff --git a/global/globalStyles.css b/global/globalStyles.css index 79f3693..e24b28e 100644 --- a/global/globalStyles.css +++ b/global/globalStyles.css @@ -25,8 +25,29 @@ body background-color: white; color: black; font-family: 'Readex Pro', 'Roboto', 'sans-serif'; - font-size: 25px; - margin: 0px; + font-size: 1.5vw; + margin: 0; +} + +a:after +{ + background-color: #f91; + bottom: 0; + content: ''; + height: 0.1vw; + left: 0; + position: absolute; + transform: scale(0, 1); + transform-origin: bottom right; + width: 100%; + + transition: transform 0.25s; +} + +a:hover:after +{ + transform: scale(1, 1); + transform-origin: bottom left; } i @@ -45,27 +66,6 @@ li text-align: left; } -a:after -{ - background-color: #f91; - bottom: 0; - content: ''; - height: 2px; - left: 0; - position: absolute; - transform: scale(0, 1); - transform-origin: bottom right; - width: 100%; - - transition: transform 0.25s; -} - -a:hover:after -{ - transform: scale(1, 1); - transform-origin: bottom left; -} - .column { float: left; @@ -89,33 +89,33 @@ a:hover:after color: #505050; font-size: 1.75vw; margin: 0; - padding-bottom: 30px; - padding-top: 30px; + padding-bottom: 2.5vh; + padding-top: 2.5vh; text-align: center; } .formattable code { background-color: #303030; - border-radius: 7.5px; - bottom: 2px; + border-radius: 0.4vw; + bottom: 0.2vh; color: white; font-family: 'Roboto Mono', 'Roboto', 'sans-serif'; font-size: 70%; - padding-left: 5px; - padding-right: 5px; + padding-left: 0.25vw; + padding-right: 0.25vw; position: relative; } .formattable-codeblock { background-color: #303030; - border-radius: 10px; + border-radius: 0.5vw; color: white; font-family: 'Roboto Mono', 'Roboto', 'sans-serif'; font-size: 75%; - padding-bottom: 2.5px; - padding-top: 2.5px; + padding-bottom: 0.25vh; + padding-top: 0.25vh; margin-left: 5%; margin-right: 5%; text-align: left; @@ -148,7 +148,7 @@ a:hover:after .formattable td, .formattable th { border-style: solid; - border-width: 2.5px; + border-width: 0.13vw; } .formattable tr:nth-child(even) @@ -159,7 +159,8 @@ a:hover:after .header { background-color: #303030; - padding: 20px; + margin: 0; + padding: 1vw; position: fixed; width: 100%; text-align: center; @@ -170,8 +171,10 @@ a:hover:after .header a { color: white; + font-size: 1.5vw; margin-left: 2.5%; margin-right: 2.5%; + margin-top: 0; } .nomargin diff --git a/index.html b/index.html index 6ad97df..0411edb 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,9 @@
Home - Games - Links - News + Games + Links + News
diff --git a/index/styles.css b/index/styles.css index d6c57d2..193c873 100644 --- a/index/styles.css +++ b/index/styles.css @@ -2,11 +2,11 @@ { background-color: #303030; color: white; - font-size: 1.75vw; - padding-bottom: 50px; - padding-left: 10%; - padding-right: 10%; - padding-top: 50px; + font-size: 1.4vw; + padding-bottom: 5.4vh; + padding-left: 10vw; + padding-right: 10vw; + padding-top: 5.4vh; text-align: center; } @@ -19,47 +19,47 @@ { float: right; margin: 0; - height: 300px; + height: 27.78vh; width: 100%; } +.thelatest +{ + background-color: #f91; + font-size: 1.4vw; + margin: 0; + padding-bottom: 7vh; + padding-right: 6.25vw; + padding-top: 2.25vh; + text-align: center; +} + .title { background-color: #f91; color: #000; text-align: center; - margin-top: 71px; - padding-bottom: 100px; - padding-left: 40px; - padding-right: 40px; - padding-top: 100px; -} - -.thelatest -{ - background-color: #f91; - font-size: 1.75vw; - margin: 0; - padding-bottom: 75px; - padding-right: 6.25%; - padding-top: 25px; - text-align: center; + margin-top: 0; + padding-bottom: 10.8vh; + padding-left: 2vw; + padding-right: 2vw; + padding-top: 17.3vh; } .title h1 { - font-size: 300%; - margin: 0px; + font-size: 4vw; + margin: 0; } .whatido { float: none; - font-size: 1.6vw; - padding-bottom: 100px; - padding-left: 10%; - padding-right: 10%; - padding-top: 100px; + font-size: 1.4vw; + padding-bottom: 10vh; + padding-left: 10vw; + padding-right: 10vw; + padding-top: 10vh; margin-top: 35vw; } @@ -70,19 +70,19 @@ #about-left img { - padding-bottom: 50px; + padding-bottom: 5vh; padding-left: 7.5%; padding-right: 7.5%; - padding-top: 50px; + padding-top: 5vh; width: 85%; } #about-right { font-size: 1.4vw; - padding-bottom: 50px; - padding-right: 50px; - padding-top: 50px; + padding-bottom: 5vh; + padding-right: 2.6vw; + padding-top: 2.6vw; text-align: right; width: 55%; } @@ -92,7 +92,7 @@ width: 0; height: 0; border-left: solid 100vw; - border-top: solid 50px; + border-top: solid 5vh; border-color: #303030 #303030 #f91 #f91; } @@ -101,7 +101,7 @@ width: 0; height: 0; border-right: solid 100vw; - border-bottom: solid 50px; + border-bottom: solid 5vh; border-color: transparent transparent #303030 #303030; } @@ -110,6 +110,6 @@ width: 0; height: 0; border-left: solid 100vw; - border-top: solid 50px; + border-top: solid 5vh; border-color: #f91 #f91 transparent transparent; }