Skip to content

Commit 6de78b7

Browse files
rufilbossrufilboss
committed
update
1 parent 1a1ed00 commit 6de78b7

1 file changed

Lines changed: 197 additions & 196 deletions

File tree

‎src/App.css‎

Lines changed: 197 additions & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -1,196 +1,197 @@
1-
2-
body {
3-
margin: 0;
4-
padding: 0;
5-
font-family: sans-serif;
6-
color: #333;
7-
}
8-
9-
.header {
10-
display: flex;
11-
justify-content: flex-end;
12-
align-items: center;
13-
border-bottom: 1px solid #ccc;
14-
padding: 1px 50px;
15-
}
16-
17-
.header li {
18-
list-style: none;
19-
display: inline-block;
20-
padding: 0 15px;
21-
}
22-
23-
.logo {
24-
margin-right: auto;
25-
color: #333;
26-
font-size: 1.8rem;
27-
}
28-
29-
.logo.dark {
30-
color: #fff;
31-
}
32-
33-
.App.dark {
34-
background-color: #222222;
35-
height: 100vh;
36-
color: #fff;
37-
}
38-
39-
h1 {
40-
font-size: 2rem;
41-
margin-bottom: 2rem;
42-
}
43-
44-
form {
45-
margin-top: 1%;
46-
text-align: center;
47-
}
48-
49-
label {
50-
font-size: 1.2rem;
51-
margin-bottom: 1rem;
52-
}
53-
54-
input {
55-
width: 60%;
56-
margin-right: 15px;
57-
padding: 1rem;
58-
font-size: 1rem;
59-
border: 1px solid #333;
60-
border-radius: 5px;
61-
outline: none;
62-
}
63-
64-
input:focus {
65-
border: 2px solid #333;
66-
}
67-
68-
.error {
69-
color: #cc0000;
70-
text-align: center;
71-
}
72-
73-
.button {
74-
padding: 1rem 2rem;
75-
font-size: 1rem;
76-
margin-top: 2%;
77-
background-color: #333;
78-
color: #fff;
79-
border: none;
80-
border-radius: 5px;
81-
cursor: pointer;
82-
}
83-
84-
.button:hover {
85-
background-color: #4d4d4d;
86-
}
87-
88-
.button.dark {
89-
background-color: #fff;
90-
color: #333;
91-
}
92-
93-
.status {
94-
margin-top: 2rem;
95-
padding: 1rem;
96-
border-radius: 0.5rem;
97-
font-size: 1.2rem;
98-
}
99-
100-
.status.up {
101-
background-color: green;
102-
color: #fff;
103-
}
104-
105-
.status.down {
106-
background-color: #ED2B2A;
107-
color: #fff;
108-
}
109-
110-
.toggle-theme {
111-
position: absolute;
112-
top: 1.5rem;
113-
right: 1rem;
114-
font-size: 2rem;
115-
cursor: pointer;
116-
}
117-
118-
/* Mobile view */
119-
120-
@media (min-width: 320px) and (max-width: 480px) {
121-
122-
.header {
123-
padding: 1px 20px;
124-
}
125-
126-
form {
127-
margin-top: 8%;
128-
}
129-
130-
input {
131-
margin: auto;
132-
padding: 1.2rem;
133-
width: 80%;
134-
}
135-
136-
button {
137-
padding: 1.2rem 8rem;
138-
margin: 5% auto;
139-
}
140-
}
141-
142-
/* Footer Styles */
143-
.footer {
144-
position: relative; /* Remove fixed positioning */
145-
width: 100%; /* Full-width footer */
146-
background-color: #333; /* Background color for the footer */
147-
color: #fff; /* Text color for the footer */
148-
padding: 15px 0; /* Add spacing to top and bottom */
149-
text-align: center; /* Center the text and links within the footer */
150-
border-top-left-radius: 20px; /* Curved top-left corner */
151-
border-top-right-radius: 20px; /* Curved top-right corner */
152-
margin-top: auto; /* Push footer to the bottom when content is short */
153-
}
154-
155-
.footer-content {
156-
display: flex;
157-
flex-direction: column;
158-
align-items: center;
159-
}
160-
161-
/* Style the links in the footer */
162-
.social-links {
163-
list-style: none; /* Remove bullet points */
164-
padding: 0;
165-
margin: 10px 0 0; /* Add spacing above the links */
166-
}
167-
168-
.social-links li {
169-
display: inline;
170-
margin: 0 10px; /* Add spacing between links */
171-
}
172-
173-
/* Style the links as white text with a subtle hover effect */
174-
.social-links a {
175-
text-decoration: none;
176-
color: #fff;
177-
transition: color 0.3s;
178-
}
179-
180-
.social-links a:hover {
181-
color: #DAAA3F; /* Change color on hover */
182-
}
183-
184-
/* Ensure footer stays at the bottom when content is short */
185-
body {
186-
display: flex;
187-
flex-direction: column;
188-
min-height: 100vh; /* Make the body span the full viewport height */
189-
margin: 0; /* Remove default margin */
190-
}
191-
192-
.App {
193-
flex: 1; /* Allow the main content to grow and push the footer down */
194-
display: flex;
195-
flex-direction: column;
196-
}
1+
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
font-family: sans-serif;
6+
color: #333;
7+
}
8+
9+
.header {
10+
display: flex;
11+
justify-content: flex-end;
12+
align-items: center;
13+
border-bottom: 1px solid #ccc;
14+
padding: 1px 50px;
15+
}
16+
17+
.header li {
18+
list-style: none;
19+
display: inline-block;
20+
padding: 0 15px;
21+
}
22+
23+
.logo {
24+
margin-right: auto;
25+
color: #333;
26+
font-size: 1.8rem;
27+
}
28+
29+
.logo.dark {
30+
color: #fff;
31+
}
32+
33+
.App.dark {
34+
background-color: #222222;
35+
height: 100vh;
36+
color: #fff;
37+
}
38+
39+
h1 {
40+
font-size: 2rem;
41+
margin-bottom: 2rem;
42+
}
43+
44+
form {
45+
margin-top: 1%;
46+
text-align: center;
47+
}
48+
49+
label {
50+
font-size: 1.2rem;
51+
margin-bottom: 1rem;
52+
}
53+
54+
input {
55+
width: 60%;
56+
margin-right: 15px;
57+
padding: 1rem;
58+
font-size: 1rem;
59+
border: 1px solid #333;
60+
border-radius: 5px;
61+
outline: none;
62+
}
63+
64+
input:focus {
65+
border: 2px solid #333;
66+
}
67+
68+
.error {
69+
color: #cc0000;
70+
text-align: center;
71+
}
72+
73+
.button {
74+
padding: 1rem 2rem;
75+
font-size: 1rem;
76+
margin-top: 2%;
77+
background-color: #333;
78+
color: #fff;
79+
border: none;
80+
border-radius: 5px;
81+
cursor: pointer;
82+
}
83+
84+
.button:hover {
85+
background-color: #4d4d4d;
86+
}
87+
88+
.button.dark {
89+
background-color: #fff;
90+
color: #333;
91+
}
92+
93+
.status {
94+
margin-top: 2rem;
95+
padding: 1rem;
96+
border-radius: 0.5rem;
97+
font-size: 1.2rem;
98+
}
99+
100+
.status.up {
101+
background-color: green;
102+
color: #fff;
103+
}
104+
105+
.status.down {
106+
background-color: #ED2B2A;
107+
color: #fff;
108+
}
109+
110+
.toggle-theme {
111+
position: absolute;
112+
top: 1.5rem;
113+
right: 1rem;
114+
font-size: 2rem;
115+
cursor: pointer;
116+
}
117+
118+
/* Mobile view */
119+
120+
@media (min-width: 320px) and (max-width: 480px) {
121+
122+
.header {
123+
padding: 1px 20px;
124+
}
125+
126+
form {
127+
margin-top: 8%;
128+
}
129+
130+
input {
131+
margin: auto;
132+
padding: 1.2rem;
133+
width: 80%;
134+
}
135+
136+
button {
137+
padding: 1.2rem 8rem;
138+
margin: 5% auto;
139+
}
140+
}
141+
142+
/* Footer Styles */
143+
.footer {
144+
position: relative; /* Remove fixed positioning */
145+
width: 100%; /* Full-width footer */
146+
background-color: #333; /* Background color for the footer */
147+
color: #fff; /* Text color for the footer */
148+
padding: 15px 0; /* Add spacing to top and bottom */
149+
text-align: center; /* Center the text and links within the footer */
150+
border-top-left-radius: 20px; /* Curved top-left corner */
151+
border-top-right-radius: 20px; /* Curved top-right corner */
152+
margin-top: auto; /* Push footer to the bottom when content is short */
153+
}
154+
155+
.footer-content {
156+
display: flex;
157+
flex-direction: column;
158+
align-items: center;
159+
}
160+
161+
/* Style the links in the footer */
162+
.social-links {
163+
list-style: none; /* Remove bullet points */
164+
padding: 0;
165+
margin: 10px 0 0; /* Add spacing above the links */
166+
}
167+
168+
.social-links li {
169+
display: inline;
170+
margin: 0 10px; /* Add spacing between links */
171+
}
172+
173+
/* Style the links as white text with a subtle hover effect */
174+
.social-links a {
175+
text-decoration: none;
176+
color: #fff;
177+
transition: color 0.3s;
178+
}
179+
180+
.social-links a:hover {
181+
color: #DAAA3F; /* Change color on hover */
182+
}
183+
184+
/* Ensure footer stays at the bottom when content is short */
185+
body {
186+
display: flex;
187+
flex-direction: column;
188+
min-height: 100vh; /* Make the body span the full viewport height */
189+
margin: 0; /* Remove default margin */
190+
}
191+
192+
.App {
193+
flex: 1; /* Allow the main content to grow and push the footer down */
194+
display: flex;
195+
flex-direction: column;
196+
}
197+

0 commit comments

Comments
 (0)