Skip to content

Commit

Permalink
fix footer overlap
Browse files Browse the repository at this point in the history
  • Loading branch information
desujoy committed Oct 7, 2023
1 parent 7707fc6 commit 4b4c4af
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 116 deletions.
19 changes: 14 additions & 5 deletions views/footer.ejs
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
<footer>
<div class="copyright-box">
<p class="copyright">Copyright &copy; <strong>Sujoy De</strong>. All Rights Reserved</p>
<div class="credits">
Source <a href="https://github.com/desujoy/desujoy.github.io/" target="_blank">GitHub</a>
<% if(data==null) { %>
<div class="fixed-copyright-box">
<p class="copyright">Copyright &copy; <strong>Sujoy De</strong>. All Rights Reserved</p>
<div class="credits">
Source <a href="https://github.com/desujoy/desujoy.github.io/" target="_blank">GitHub</a>
</div>
</div>
</div>
<% } else { %>
<div class="relative-copyright-box">
<p class="copyright">Copyright &copy; <strong>Sujoy De</strong>. All Rights Reserved</p>
<div class="credits">
Source <a href="https://github.com/desujoy/desujoy.github.io/" target="_blank">GitHub</a>
</div>
</div>
<% } %>
</footer>

</html>
234 changes: 123 additions & 111 deletions views/header.ejs
Original file line number Diff line number Diff line change
@@ -1,130 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kushiro</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lobster&family=VT323&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Lobster", cursive;
margin: 0;
padding: 0;
background: #eff1f5;
}

.wrap {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.search form {
display: flex;
justify-content: center;
align-items: center;
}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kushiro</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=VT323&display=swap" rel="stylesheet" />
<style>
body {
font-family: "Lobster", cursive;
margin: 0;
padding: 0;
background: #eff1f5;
}
h1 {
font-size: 24px;
text-align: center;
}
.wrap {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
border: 5px solid #2e51a2;
border-radius: 12%;
}
.search form {
display: flex;
justify-content: center;
align-items: center;
}
.searchTerm {
width: 80%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px 0 0 5px;
outline: none;
color: #657789;
}
h1 {
font-size: 24px;
text-align: center;
}
.searchButton {
width: 20%;
height: 47.5px;
border: 1px solid #ccc;
border-radius: 0 5px 5px 0;
background: #2e51a2;
text-align: center;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
border: 5px solid #2e51a2;
border-radius: 12%;
}
.searchButton svg {
vertical-align: middle;
}
.searchTerm {
width: 80%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px 0 0 5px;
outline: none;
color: #657789;
}
.searchButton svg circle {
fill: #2e51a2;
}
.searchButton {
width: 20%;
height: 47.5px;
border: 1px solid #ccc;
border-radius: 0 5px 5px 0;
background: #2e51a2;
text-align: center;
cursor: pointer;
}
.anime-content {
width: 80%;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: "VT323", monospace;
font-size: 20px;
}
.searchButton svg {
vertical-align: middle;
}
.anime-info {
display: flex;
align-items: center;
}
.searchButton svg circle {
fill: #2e51a2;
}
.anime-cover img {
max-width: 300px;
height: auto;
margin-right: 10px;
}
.anime-content {
width: 80%;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: "VT323", monospace;
font-size: 20px;
}
.anime-details {
flex: 1;
padding-left: 100px;
margin-right: 100px;
}
.anime-info {
display: flex;
align-items: center;
}
.anime-details strong {
display: block;
margin-bottom: 5px;
padding-top: 4px;
}
.anime-cover img {
max-width: 300px;
height: auto;
margin-right: 10px;
}
@media screen and (max-width: 900px) {
.anime-info {
flex-direction: column;
}
.anime-details {
padding-left: 5%;
margin-right: 5%;
}
}
.anime-details {
flex: 1;
padding-left: 100px;
margin-right: 100px;
}
.anime-details strong {
display: block;
margin-bottom: 5px;
padding-top: 4px;
}
.error-message {
color: red;
@media screen and (max-width: 900px) {
.anime-info {
flex-direction: column;
}
.copyright-box {
font-family: cursive;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
padding: 0 0 10px 0;
background: #2e51a2;
color: #fff;
.anime-details {
padding-left: 5%;
margin-right: 5%;
}
</style>
</head>
}
.error-message {
color: red;
}
.relative-copyright-box {
font-family: cursive;
position: relative;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
padding: 0 0 10px 0;
background: #2e51a2;
color: #fff;
}
.fixed-copyright-box {
font-family: cursive;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
padding: 0 0 10px 0;
background: #2e51a2;
color: #fff;
}
</style>
</head>

0 comments on commit 4b4c4af

Please sign in to comment.