Skip to content

Dev #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rufilboss merged 2 commits into from
Jan 18, 2025
Merged

Dev #45

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6de78b7
update
rufilboss Jan 18, 2025
889e04e
update
rufilboss Jan 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
392 changes: 196 additions & 196 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,196 +1,196 @@

body {
margin: 0;
padding: 0;
font-family: sans-serif;
color: #333;
}

.header {
display: flex;
justify-content: flex-end;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 1px 50px;
}

.header li {
list-style: none;
display: inline-block;
padding: 0 15px;
}

.logo {
margin-right: auto;
color: #333;
font-size: 1.8rem;
}

.logo.dark {
color: #fff;
}

.App.dark {
background-color: #222222;
height: 100vh;
color: #fff;
}

h1 {
font-size: 2rem;
margin-bottom: 2rem;
}

form {
margin-top: 1%;
text-align: center;
}

label {
font-size: 1.2rem;
margin-bottom: 1rem;
}

input {
width: 60%;
margin-right: 15px;
padding: 1rem;
font-size: 1rem;
border: 1px solid #333;
border-radius: 5px;
outline: none;
}

input:focus {
border: 2px solid #333;
}

.error {
color: #cc0000;
text-align: center;
}

.button {
padding: 1rem 2rem;
font-size: 1rem;
margin-top: 2%;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

.button:hover {
background-color: #4d4d4d;
}

.button.dark {
background-color: #fff;
color: #333;
}

.status {
margin-top: 2rem;
padding: 1rem;
border-radius: 0.5rem;
font-size: 1.2rem;
}

.status.up {
background-color: green;
color: #fff;
}

.status.down {
background-color: #ED2B2A;
color: #fff;
}

.toggle-theme {
position: absolute;
top: 1.5rem;
right: 1rem;
font-size: 2rem;
cursor: pointer;
}

/* Mobile view */

@media (min-width: 320px) and (max-width: 480px) {

.header {
padding: 1px 20px;
}

form {
margin-top: 8%;
}

input {
margin: auto;
padding: 1.2rem;
width: 80%;
}

button {
padding: 1.2rem 8rem;
margin: 5% auto;
}
}

/* Footer Styles */
.footer {
position: relative; /* Remove fixed positioning */
width: 100%; /* Full-width footer */
background-color: #333; /* Background color for the footer */
color: #fff; /* Text color for the footer */
padding: 15px 0; /* Add spacing to top and bottom */
text-align: center; /* Center the text and links within the footer */
border-top-left-radius: 20px; /* Curved top-left corner */
border-top-right-radius: 20px; /* Curved top-right corner */
margin-top: auto; /* Push footer to the bottom when content is short */
}

.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}

/* Style the links in the footer */
.social-links {
list-style: none; /* Remove bullet points */
padding: 0;
margin: 10px 0 0; /* Add spacing above the links */
}

.social-links li {
display: inline;
margin: 0 10px; /* Add spacing between links */
}

/* Style the links as white text with a subtle hover effect */
.social-links a {
text-decoration: none;
color: #fff;
transition: color 0.3s;
}

.social-links a:hover {
color: #DAAA3F; /* Change color on hover */
}

/* Ensure footer stays at the bottom when content is short */
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Make the body span the full viewport height */
margin: 0; /* Remove default margin */
}

.App {
flex: 1; /* Allow the main content to grow and push the footer down */
display: flex;
flex-direction: column;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
color: #333;
}
.header {
display: flex;
justify-content: flex-end;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 1px 50px;
}
.header li {
list-style: none;
display: inline-block;
padding: 0 15px;
}
.logo {
margin-right: auto;
color: #333;
font-size: 1.8rem;
}
.logo.dark {
color: #fff;
}
.App.dark {
background-color: #222222;
height: 100vh;
color: #fff;
}
h1 {
font-size: 2rem;
margin-bottom: 2rem;
}
form {
margin-top: 1%;
text-align: center;
}
label {
font-size: 1.2rem;
margin-bottom: 1rem;
}
input {
width: 60%;
margin-right: 15px;
padding: 1rem;
font-size: 1rem;
border: 1px solid #333;
border-radius: 5px;
outline: none;
}
input:focus {
border: 2px solid #333;
}
.error {
color: #cc0000;
text-align: center;
}
.button {
padding: 1rem 2rem;
font-size: 1rem;
margin-top: 2%;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #4d4d4d;
}
.button.dark {
background-color: #fff;
color: #333;
}
.status {
margin-top: 2rem;
padding: 1rem;
border-radius: 0.5rem;
font-size: 1.2rem;
}
.status.up {
background-color: green;
color: #fff;
}
.status.down {
background-color: #ED2B2A;
color: #fff;
}
.toggle-theme {
position: absolute;
top: 1.5rem;
right: 1rem;
font-size: 2rem;
cursor: pointer;
}
/* Mobile view */
@media (min-width: 320px) and (max-width: 480px) {
.header {
padding: 1px 20px;
}
form {
margin-top: 8%;
}
input {
margin: auto;
padding: 1.2rem;
width: 80%;
}
button {
padding: 1.2rem 8rem;
margin: 5% auto;
}
}
/* Footer Styles */
.footer {
position: relative; /* Remove fixed positioning */
width: 100%; /* Full-width footer */
background-color: #333; /* Background color for the footer */
color: #fff; /* Text color for the footer */
padding: 15px 0; /* Add spacing to top and bottom */
text-align: center; /* Center the text and links within the footer */
border-top-left-radius: 20px; /* Curved top-left corner */
border-top-right-radius: 20px; /* Curved top-right corner */
margin-top: auto; /* Push footer to the bottom when content is short */
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}
/* Style the links in the footer */
.social-links {
list-style: none; /* Remove bullet points */
padding: 0;
margin: 10px 0 0; /* Add spacing above the links */
}
.social-links li {
display: inline;
margin: 0 10px; /* Add spacing between links */
}
/* Style the links as white text with a subtle hover effect */
.social-links a {
text-decoration: none;
color: #fff;
transition: color 0.3s;
}
.social-links a:hover {
color: #DAAA3F; /* Change color on hover */
}
/* Ensure footer stays at the bottom when content is short */
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Make the body span the full viewport height */
margin: 0; /* Remove default margin */
}
.App {
flex: 1; /* Allow the main content to grow and push the footer down */
display: flex;
flex-direction: column;
}