That-One-Nerd/That-One-Nerd.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made stuff work when resized kinda

Browse Source
This commit is contained in:
That-One-Nerd 2022-01-15 12:37:44 -05:00
parent 909bebb485
commit cbcb0bcf7e
5 changed files with 122 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
404.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<link href = "global/globalStyles.css" rel = "stylesheet" type = "text/css">
<link href = "404/styles.css" rel = "stylesheet" type = "text/css">
<title>Webpage Not Found | That_One_Nerd</title>
</head>
<body>
<div class = "header">
<a href = "index.html">Home</a>
<a href = "games.html">Games</a>
<a href = "links.html">Links</a>
<a href = "news.html">News</a>
</div>
<div class = "formattable showtext">
<h1 class = "nomargin">Webpage Not Found</h1>
<h3 class = "nomargin">Maybe you misspelled the URL?</h3>
<p>Click <a href = "index.html">here</a> to return to the home page.</p>
</div>
</body>
</html>

21
404/styles.css Normal file
View File

@ -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;
}

71
global/globalStyles.css
View File

@ -25,8 +25,29 @@ body
background-color: white; background-color: white;
color: black; color: black;
font-family: 'Readex Pro', 'Roboto', 'sans-serif'; font-family: 'Readex Pro', 'Roboto', 'sans-serif';
font-size: 25px; font-size: 1.5vw;
margin: 0px; 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 i
@ -45,27 +66,6 @@ li
text-align: left; 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 .column
{ {
float: left; float: left;
@ -89,33 +89,33 @@ a:hover:after
color: #505050; color: #505050;
font-size: 1.75vw; font-size: 1.75vw;
margin: 0; margin: 0;
padding-bottom: 30px; padding-bottom: 2.5vh;
padding-top: 30px; padding-top: 2.5vh;
text-align: center; text-align: center;
} }
.formattable code .formattable code
{ {
background-color: #303030; background-color: #303030;
border-radius: 7.5px; border-radius: 0.4vw;
bottom: 2px; bottom: 0.2vh;
color: white; color: white;
font-family: 'Roboto Mono', 'Roboto', 'sans-serif'; font-family: 'Roboto Mono', 'Roboto', 'sans-serif';
font-size: 70%; font-size: 70%;
padding-left: 5px; padding-left: 0.25vw;
padding-right: 5px; padding-right: 0.25vw;
position: relative; position: relative;
} }
.formattable-codeblock .formattable-codeblock
{ {
background-color: #303030; background-color: #303030;
border-radius: 10px; border-radius: 0.5vw;
color: white; color: white;
font-family: 'Roboto Mono', 'Roboto', 'sans-serif'; font-family: 'Roboto Mono', 'Roboto', 'sans-serif';
font-size: 75%; font-size: 75%;
padding-bottom: 2.5px; padding-bottom: 0.25vh;
padding-top: 2.5px; padding-top: 0.25vh;
margin-left: 5%; margin-left: 5%;
margin-right: 5%; margin-right: 5%;
text-align: left; text-align: left;
@ -148,7 +148,7 @@ a:hover:after
.formattable td, .formattable th .formattable td, .formattable th
{ {
border-style: solid; border-style: solid;
border-width: 2.5px; border-width: 0.13vw;
} }
.formattable tr:nth-child(even) .formattable tr:nth-child(even)
@ -159,7 +159,8 @@ a:hover:after
.header .header
{ {
background-color: #303030; background-color: #303030;
padding: 20px; margin: 0;
padding: 1vw;
position: fixed; position: fixed;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -170,8 +171,10 @@ a:hover:after
.header a .header a
{ {
color: white; color: white;
font-size: 1.5vw;
margin-left: 2.5%; margin-left: 2.5%;
margin-right: 2.5%; margin-right: 2.5%;
margin-top: 0;
} }
.nomargin .nomargin

6
index.html
View File

@ -11,9 +11,9 @@
<body> <body>
<div class = "header whiteselection"> <div class = "header whiteselection">
<a href = "index.html">Home</a> <a href = "index.html">Home</a>
<a>Games</a> <a href = "games.html">Games</a>
<a>Links</a> <a href = "links.html">Links</a>
<a>News</a> <a href = "news.html">News</a>
</div> </div>
<div class = "formattable title whiteselection"> <div class = "formattable title whiteselection">

74
index/styles.css
View File

@ -2,11 +2,11 @@
{ {
background-color: #303030; background-color: #303030;
color: white; color: white;
font-size: 1.75vw; font-size: 1.4vw;
padding-bottom: 50px; padding-bottom: 5.4vh;
padding-left: 10%; padding-left: 10vw;
padding-right: 10%; padding-right: 10vw;
padding-top: 50px; padding-top: 5.4vh;
text-align: center; text-align: center;
} }
@ -19,47 +19,47 @@
{ {
float: right; float: right;
margin: 0; margin: 0;
height: 300px; height: 27.78vh;
width: 100%; 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 .title
{ {
background-color: #f91; background-color: #f91;
color: #000; color: #000;
text-align: center; text-align: center;
margin-top: 71px; margin-top: 0;
padding-bottom: 100px; padding-bottom: 10.8vh;
padding-left: 40px; padding-left: 2vw;
padding-right: 40px; padding-right: 2vw;
padding-top: 100px; padding-top: 17.3vh;
}
.thelatest
{
background-color: #f91;
font-size: 1.75vw;
margin: 0;
padding-bottom: 75px;
padding-right: 6.25%;
padding-top: 25px;
text-align: center;
} }
.title h1 .title h1
{ {
font-size: 300%; font-size: 4vw;
margin: 0px; margin: 0;
} }
.whatido .whatido
{ {
float: none; float: none;
font-size: 1.6vw; font-size: 1.4vw;
padding-bottom: 100px; padding-bottom: 10vh;
padding-left: 10%; padding-left: 10vw;
padding-right: 10%; padding-right: 10vw;
padding-top: 100px; padding-top: 10vh;
margin-top: 35vw; margin-top: 35vw;
} }
@ -70,19 +70,19 @@
#about-left img #about-left img
{ {
padding-bottom: 50px; padding-bottom: 5vh;
padding-left: 7.5%; padding-left: 7.5%;
padding-right: 7.5%; padding-right: 7.5%;
padding-top: 50px; padding-top: 5vh;
width: 85%; width: 85%;
} }
#about-right #about-right
{ {
font-size: 1.4vw; font-size: 1.4vw;
padding-bottom: 50px; padding-bottom: 5vh;
padding-right: 50px; padding-right: 2.6vw;
padding-top: 50px; padding-top: 2.6vw;
text-align: right; text-align: right;
width: 55%; width: 55%;
} }
@ -92,7 +92,7 @@
width: 0; width: 0;
height: 0; height: 0;
border-left: solid 100vw; border-left: solid 100vw;
border-top: solid 50px; border-top: solid 5vh;
border-color: #303030 #303030 #f91 #f91; border-color: #303030 #303030 #f91 #f91;
} }
@ -101,7 +101,7 @@
width: 0; width: 0;
height: 0; height: 0;
border-right: solid 100vw; border-right: solid 100vw;
border-bottom: solid 50px; border-bottom: solid 5vh;
border-color: transparent transparent #303030 #303030; border-color: transparent transparent #303030 #303030;
} }
@ -110,6 +110,6 @@
width: 0; width: 0;
height: 0; height: 0;
border-left: solid 100vw; border-left: solid 100vw;
border-top: solid 50px; border-top: solid 5vh;
border-color: #f91 #f91 transparent transparent; border-color: #f91 #f91 transparent transparent;
} }