diff --git a/public/index.html b/public/index.html
index f10bf2d..eb0b157 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,14 +17,14 @@
@@ -41,7 +41,7 @@
- MIRURO | Watch Anime Online
+ Miruro | Watch The Best Quality Anime Online
diff --git a/src/components/Navigation/Nav.js b/src/components/Navigation/Nav.js
index ffcc362..902a486 100644
--- a/src/components/Navigation/Nav.js
+++ b/src/components/Navigation/Nav.js
@@ -67,7 +67,7 @@ function Nav() {
Popular
- Forum
+ Forum
Help
diff --git a/src/components/Navigation/Search.js b/src/components/Navigation/Search.js
index cf13258..72a3f7c 100644
--- a/src/components/Navigation/Search.js
+++ b/src/components/Navigation/Search.js
@@ -146,7 +146,7 @@ const Content = styled.div`
}
input {
- background: rgb( 28, 32, 33 );
+ background: rgba(0, 0, 0, 0.1);
color: #ccc;
outline: none;
border: none;
@@ -157,7 +157,7 @@ const Content = styled.div`
margin-right: 10px;
margin-left: 10px;
width: 80%;
- transition: .5s;
+ transition: 1s;
}
input:focus {
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 4c1acbf..98c0d51 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -14,7 +14,7 @@ function Home({ changeMetaArr }) {
const [loading, setLoading] = useState(true);
const [confirmRemove, setConfirmRemove] = useState([]);
const { width } = useWindowDimensions();
- const title = 'Miruro - Watch The Best Quality Anime Online';
+ const title = 'Miruro | Watch The Best Quality Anime Online';
const content = `Miruro. An ad-free anime streaming site. Catch your favourite shows and movies right here!
Help us by contributing to the project on github.`;
const image =
@@ -116,16 +116,16 @@ function Home({ changeMetaArr }) {
const Links = styled(Link)`
color: rgba(158,162,164,1);
background: rgb(19, 21, 22);
- padding: 0.5rem;
+ padding: 0.4rem 0.5rem 0.4rem 0.5rem;
border-radius: 5px;
- border: 0.5px solid rgba(48,52,54,1);
+ border: 1px solid rgba(48,52,54, 0.3);
font-size: 1.1rem;
font-family: 'Gilroy-Medium', sans-serif;
text-decoration: none;
transition: 0.2s;
:hover {
- transform: scale(1.08);
+ transform: scale(0.95);
}
@media screen and (max-width: 600px) {
color: #ffffff;
diff --git a/src/pages/PageNotFound.js b/src/pages/PageNotFound.js
index 3d58f02..945dc4b 100644
--- a/src/pages/PageNotFound.js
+++ b/src/pages/PageNotFound.js
@@ -7,16 +7,30 @@ function PageNotFound({ changeMetaArr }) {
React.useEffect(() => {
changeMetaArr('title', 'PageNotFound');
});
+ document.addEventListener("DOMContentLoaded", () => {
+ const log = console.log,
+ array = [
+ "https://cdn.discordapp.com/attachments/985501610455224389/1045194302680219678/14.png",
+ "https://cdn.discordapp.com/attachments/985501610455224389/1045194095443853322/5.png",
+ "https://cdn.discordapp.com/attachments/985501610455224389/1045197663454363658/24.png",
+ "https://cdn.discordapp.com/attachments/985501610455224389/1045197663156584468/23.png",
+ "https://cdn.discordapp.com/attachments/985501610455224389/1045194095007629372/4.png"],
+ random = Math.floor(Math.random() * array.length),
+ target = document.getElementById("target");
+ target.src = `${array[random]}`;
+ log(target);
+ });
return (
- Go to Home
+ {/*Go Home*/}
404
@@ -43,10 +57,19 @@ const NotFoundWrapper = styled.div`
`;
const ErrorCTA = styled.div`
- position: relative;
+position: relative;
margin-bottom: 3rem;
+ margin-top: 1rem;
width: 350px;
overflow: hidden;
+ border-radius: 10px;
+ opacity: 0.7;
+ transition: 0.5s;
+ :hover {
+ transform: scale(1.05);
+ color: rgba(255, 255, 255, 1);
+ opacity: 1;
+ }
.error-image {
width: 100%;
object-fit: cover;
@@ -58,29 +81,26 @@ const ErrorCTA = styled.div`
`;
const HomeLink = styled(Link)`
- background-color: #ddd;
- color: #23272a;
+ color: rgba(255, 255, 255, 0.7);
position: absolute;
bottom: 0;
left: 0;
right: 0;
- padding: 10px 0%;
+ padding-bottom: 210px;
border-radius: 10px;
- border-top-right-radius: 0;
- border-top-left-radius: 0;
text-decoration: none;
+ font-size: 32px;
+ font-family: 'Acme', sans-serif;
font-weight: bold;
- font-size: 22px;
- transition: 0.3s;
-
+ transition: 0.5s;
+ :hover {
+ transform: scale(1.05);
+ color: rgba(255, 255, 255, 1);
+ }
@media screen and (max-width: 380px) {
width: 100%;
font-size: 16px;
}
-
- :hover {
- background-color: #fff;
- }
`;
const ErrorDetails = styled.div`
@@ -91,13 +111,15 @@ const ErrorDetails = styled.div`
gap: 1rem;
white-space: pre-wrap;
.error-code {
- font-size: 120px;
- letter-spacing: 10px;
+ font-size: 100px;
+ font-family: 'Acme', sans-serif;
+ letter-spacing: 0px;
color: white;
}
.error-status {
- font-size: 75px;
- font-weight: bold;
+ font-size: 65px;
+ font-family: 'Acme', sans-serif;
+ letter-spacing: -5px;
color: #ccc;
}
.error-message {
@@ -122,7 +144,7 @@ const ErrorDetails = styled.div`
font-size: 40px;
}
.error-message {
- font-size: 20px;
+ font-size: 17px;
}
}
@media screen and (max-width: 380px) {
diff --git a/src/pages/Top100Anime.js b/src/pages/Top100Anime.js
index 853c292..3ce2950 100644
--- a/src/pages/Top100Anime.js
+++ b/src/pages/Top100Anime.js
@@ -8,7 +8,7 @@ function Top100Anime({ changeMetaArr }) {
const [animeDetails, setAnimeDetails] = useState([]);
const [loading, setLoading] = useState(true);
const title = 'Top 100 Anime';
- const content = 'Miruro - Watch The Best Quality Anime Online';
+ const content = 'Miruro | Watch The Best Quality Anime Online';
const image =
'https://cdn.discordapp.com/attachments/985501610455224389/1041832015105884241/logo512.png';