-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.css
166 lines (146 loc) · 3.63 KB
/
styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
/* Global Styles */
html, body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */
flex-direction: column;
background-color: #f0f0f0;
overflow-y: auto; /* Enable vertical scrolling */
}
body {
min-height: 100vh;
font-family: 'Helvetica', sans-serif;
box-sizing: border-box;
}
.container {
text-align: center;
width: 100%;
max-width: 600px;
padding: 20px;
box-sizing: border-box; /* Include padding in width */
}
/* Title Styles */
.title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px; /* Space below the title */
}
/* Genre Title Styles */
.genre {
font-size: clamp(0.8rem, 5vw, 3rem); /* Responsive font size */
font-weight: bold;
margin-bottom: 20px;
overflow-wrap: break-word; /* Break long words */
hyphens: auto; /* Add hyphens where appropriate */
text-align: center;
}
/* Spotify Button Styles */
.spotify-button {
display: inline-block;
padding: 15px 25px;
font-size: 1rem;
color: white;
background-color: #1DB954;
border: none;
border-radius: 30px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
margin-bottom: 20px; /* Space below the button */
}
.spotify-button:hover {
background-color: #1ed760;
}
/* Spotify Link Text Styles */
.spotify-link-text {
font-size: 0.9rem;
color: #1DB954;
text-decoration: none;
overflow-wrap: break-word;
}
#spotify-link-text {
display: none;
}
/* Description Container Styles */
.description-container {
margin: 0 auto 30px auto; /* Added extra bottom margin (30px) */
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: left;
max-width: 95%; /* Ensure container fits within screen */
width: 100%; /* Fill available space */
box-sizing: border-box;
overflow-wrap: break-word; /* Wrap long words */
}
.description-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 10px;
}
.description-text {
font-size: 1rem;
line-height: 1.5;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
}
/* Fetch Container Styles */
.fetch-container {
margin-top: 20px;
}
#searchTerm {
padding: 10px;
font-size: 1rem;
width: calc(100% - 22px); /* Full width minus padding */
margin-bottom: 10px;
}
.fetch-button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
margin-bottom: 20px; /* Space below the button */
}
.fetch-button:hover {
background-color: #0056b3;
}
#wiki-description {
font-size: 1rem;
color: #333;
text-align: left;
}
/* Location Button Styles */
.location-button {
display: inline-block;
padding: 15px 25px;
font-size: 1rem;
color: black;
background-color: #b3b3b3;
border-radius: 30px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
margin-bottom: 30px; /* Increased bottom margin from 20px to 30px */
}
.location-button:hover {
background-color: rgb(255, 255, 255);
color: black;
}
/* Responsive Adjustments */
@media (max-width: 600px) {
/* Allow clamp to handle genre font size */
/* Adjust description container */
.description-container {
padding: 10px; /* Reduce padding */
font-size: 0.9rem; /* Slightly reduce font size */
}
}