Skip to content

Commit 0e4e646

Browse files
dvXcodedvXcode
committed
Refactor under construction page styles for improved aesthetics and responsiveness
1 parent 46acc62 commit 0e4e646

File tree

2 files changed

+76
-100
lines changed

2 files changed

+76
-100
lines changed

‎index.md‎

Lines changed: 38 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -17,88 +17,79 @@ permalink: /
1717
}
1818
1919
body {
20-
font-family: 'Arial', sans-serif;
21-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
21+
background: #1a1a2e;
2222
height: 100vh;
2323
display: flex;
2424
justify-content: center;
2525
align-items: center;
2626
color: white;
27+
margin: 0;
28+
overflow: hidden;
2729
}
2830
2931
.container {
3032
text-align: center;
31-
max-width: 600px;
32-
padding: 40px 20px;
33-
background: rgba(255, 255, 255, 0.1);
34-
border-radius: 20px;
35-
backdrop-filter: blur(10px);
36-
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
33+
max-width: 500px;
34+
padding: 60px 40px;
35+
background: rgba(255, 255, 255, 0.05);
36+
border-radius: 16px;
37+
backdrop-filter: blur(20px);
38+
border: 1px solid rgba(255, 255, 255, 0.1);
39+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
3740
}
3841
3942
.logo {
40-
font-size: 3rem;
41-
font-weight: bold;
42-
margin-bottom: 20px;
43+
font-size: 2.2rem;
44+
font-weight: 600;
45+
margin-bottom: 24px;
4346
color: #fff;
47+
letter-spacing: 2px;
4448
}
4549
4650
.title {
47-
font-size: 2.5rem;
48-
margin-bottom: 20px;
51+
font-size: 2rem;
52+
margin-bottom: 16px;
4953
color: #fff;
54+
font-weight: 300;
5055
}
5156
5257
.subtitle {
53-
font-size: 1.2rem;
54-
margin-bottom: 30px;
55-
opacity: 0.9;
56-
line-height: 1.6;
58+
font-size: 1rem;
59+
margin-bottom: 40px;
60+
opacity: 0.8;
61+
line-height: 1.5;
62+
color: #e0e0e0;
5763
}
5864
5965
.spinner {
60-
border: 4px solid rgba(255, 255, 255, 0.3);
66+
border: 3px solid rgba(255, 255, 255, 0.2);
6167
border-radius: 50%;
62-
border-top: 4px solid #fff;
63-
width: 60px;
64-
height: 60px;
65-
animation: spin 2s linear infinite;
66-
margin: 30px auto;
68+
border-top: 3px solid #fff;
69+
width: 40px;
70+
height: 40px;
71+
animation: spin 1.5s linear infinite;
72+
margin: 0 auto;
6773
}
6874
6975
@keyframes spin {
7076
0% { transform: rotate(0deg); }
7177
100% { transform: rotate(360deg); }
7278
}
7379
74-
.contact {
75-
margin-top: 30px;
76-
font-size: 1rem;
77-
opacity: 0.8;
78-
}
79-
80-
.contact a {
81-
color: #fff;
82-
text-decoration: none;
83-
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
84-
transition: all 0.3s ease;
85-
}
86-
87-
.contact a:hover {
88-
border-bottom-color: #fff;
89-
opacity: 1;
90-
}
91-
9280
@media (max-width: 768px) {
81+
.container {
82+
margin: 20px;
83+
padding: 40px 20px;
84+
}
85+
.logo {
86+
font-size: 1.8rem;
87+
}
9388
.title {
94-
font-size: 2rem;
89+
font-size: 1.6rem;
9590
}
9691
.subtitle {
97-
font-size: 1rem;
98-
}
99-
.container {
100-
margin: 20px;
101-
padding: 30px 15px;
92+
font-size: 0.9rem;
10293
}
10394
}
10495
</style>
@@ -112,9 +103,6 @@ permalink: /
112103
Our new website will be ready soon.
113104
</p>
114105
<div class="spinner"></div>
115-
<div class="contact">
116-
Need to reach us? Contact: <a href="mailto:info@volovyk.com">info@volovyk.com</a>
117-
</div>
118106
</div>
119107
</body>
120108
</html>

‎under-construction.html‎

Lines changed: 38 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -13,88 +13,79 @@
1313
}
1414

1515
body {
16-
font-family: 'Arial', sans-serif;
17-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
17+
background: #1a1a2e;
1818
height: 100vh;
1919
display: flex;
2020
justify-content: center;
2121
align-items: center;
2222
color: white;
23+
margin: 0;
24+
overflow: hidden;
2325
}
2426

2527
.container {
2628
text-align: center;
27-
max-width: 600px;
28-
padding: 40px 20px;
29-
background: rgba(255, 255, 255, 0.1);
30-
border-radius: 20px;
31-
backdrop-filter: blur(10px);
32-
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
29+
max-width: 500px;
30+
padding: 60px 40px;
31+
background: rgba(255, 255, 255, 0.05);
32+
border-radius: 16px;
33+
backdrop-filter: blur(20px);
34+
border: 1px solid rgba(255, 255, 255, 0.1);
35+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
3336
}
3437

3538
.logo {
36-
font-size: 3rem;
37-
font-weight: bold;
38-
margin-bottom: 20px;
39+
font-size: 2.2rem;
40+
font-weight: 600;
41+
margin-bottom: 24px;
3942
color: #fff;
43+
letter-spacing: 2px;
4044
}
4145

4246
.title {
43-
font-size: 2.5rem;
44-
margin-bottom: 20px;
47+
font-size: 2rem;
48+
margin-bottom: 16px;
4549
color: #fff;
50+
font-weight: 300;
4651
}
4752

4853
.subtitle {
49-
font-size: 1.2rem;
50-
margin-bottom: 30px;
51-
opacity: 0.9;
52-
line-height: 1.6;
54+
font-size: 1rem;
55+
margin-bottom: 40px;
56+
opacity: 0.8;
57+
line-height: 1.5;
58+
color: #e0e0e0;
5359
}
5460

5561
.spinner {
56-
border: 4px solid rgba(255, 255, 255, 0.3);
62+
border: 3px solid rgba(255, 255, 255, 0.2);
5763
border-radius: 50%;
58-
border-top: 4px solid #fff;
59-
width: 60px;
60-
height: 60px;
61-
animation: spin 2s linear infinite;
62-
margin: 30px auto;
64+
border-top: 3px solid #fff;
65+
width: 40px;
66+
height: 40px;
67+
animation: spin 1.5s linear infinite;
68+
margin: 0 auto;
6369
}
6470

6571
@keyframes spin {
6672
0% { transform: rotate(0deg); }
6773
100% { transform: rotate(360deg); }
6874
}
6975

70-
.contact {
71-
margin-top: 30px;
72-
font-size: 1rem;
73-
opacity: 0.8;
74-
}
75-
76-
.contact a {
77-
color: #fff;
78-
text-decoration: none;
79-
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
80-
transition: all 0.3s ease;
81-
}
82-
83-
.contact a:hover {
84-
border-bottom-color: #fff;
85-
opacity: 1;
86-
}
87-
8876
@media (max-width: 768px) {
77+
.container {
78+
margin: 20px;
79+
padding: 40px 20px;
80+
}
81+
.logo {
82+
font-size: 1.8rem;
83+
}
8984
.title {
90-
font-size: 2rem;
85+
font-size: 1.6rem;
9186
}
9287
.subtitle {
93-
font-size: 1rem;
94-
}
95-
.container {
96-
margin: 20px;
97-
padding: 30px 15px;
88+
font-size: 0.9rem;
9889
}
9990
}
10091
</style>
@@ -108,9 +99,6 @@ <h1 class="title">Under Construction</h1>
10899
Our new website will be ready soon.
109100
</p>
110101
<div class="spinner"></div>
111-
<div class="contact">
112-
Need to reach us? Contact: <a href="mailto:info@volovyk.com">info@volovyk.com</a>
113-
</div>
114102
</div>
115103
</body>
116104
</html>

0 commit comments

Comments
 (0)