Quick ```content``` & ```title``` Update

This commit is contained in:
biskwt 2022-11-24 06:56:47 +01:00
parent 4d9277c08a
commit 1fc96f3362
6 changed files with 53 additions and 31 deletions

View File

@ -17,14 +17,14 @@
<meta property="og:type" content="website" />
<meta
property="og:description"
content="MIRURO | Watch Anime Online"
content="Miruro | Watch The Best Quality Anime Online"
/>
<meta property="og:url" content="https://miruro.vercel.app" />
<meta property="og:image" content="./logo512.png" />
<meta property="og:site_name" content="Miruro.vercel.app" />
<meta
property="og:image:alt"
content="Miruro - Watch The Best Quality Anime Online Hue Hue"
content="Miruro | Watch The Best Quality Anime Online"
/>
<!------------------------------- Google tag (gtag.js) ------------------------------------>
@ -41,7 +41,7 @@
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://fonts.cdnfonts.com/css/gilroy-bold" rel="stylesheet" />
<title>MIRURO | Watch Anime Online</title>
<title>Miruro | Watch The Best Quality Anime Online</title>
<base href="/" />
</head>
<body>

View File

@ -67,7 +67,7 @@ function Nav() {
<div className="nav-links">
<Links to="/popular">Popular</Links>
<Links to="/#">Forum</Links>
<Links to="/forum">Forum</Links>
<Links to="/help">Help</Links>
</div>

View File

@ -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 {

View File

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

View File

@ -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 (
<NotFoundWrapper>
<ErrorCTA>
<img
src="https://cdn.discordapp.com/attachments/985501610455224389/1041882683166445699/logo2.png"
id="target"
src="https://cdn.discordapp.com/attachments/985501610455224389/1045194302680219678/14.png"
width="320"
alt="AkioNotFound"
className="error-image"
/>
<HomeLink to="/">Go to Home</HomeLink>
<HomeLink to="/">{/*Go Home*/}</HomeLink>
</ErrorCTA>
<ErrorDetails>
<h2 className="error-code">404</h2>
@ -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) {

View File

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