-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
190 lines (155 loc) · 4.35 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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/* Reset some default styles for better consistency */
body, h1, h2, p, select {
margin: 0;
padding: 0;
}
body {
background-color: #F8F6F1;
margin-top: 20px; /* Adjust the margin-top value as needed */
padding-bottom: 20px;
}
@font-face {
font-family: 'Mona Sans';
src:
url('assets/fonts/Mona-Sans.woff2');
font-weight: 200 900;
font-stretch: 75% 125%;
}
html {
font-family: 'Mona Sans';
}
/* Center the title and subtitle at the top */
h1, .subtitle {
text-align: center;
margin-bottom: 10px; /* Add margin between title and subtitle */
}
/* Center the dropdown */
#judgeDropdown {
font-family: 'Mona Sans', sans-serif;
width: 70%; /* Adjust the width as needed */
padding: 10px;
margin: 10px auto; /* Add space below subtitle */
display: block;
text-align: left;
border-radius: 10px; /* Rounder borders */
border: 1px solid #ccc; /* Add a border */
background-color: #fff; /* Background color */
}
/* Style the dropdown options (values) */
#judgeDropdown option {
text-align: left;
}
a {
color: #e76a56;
text-decoration: none; /* Remove underlines from hyperlinks */
}
/* Apply a color change on hover */
a:hover {
color: #007bff; /* Change to the desired hover color */
}
/* Style the Font Awesome icons */
.header-links {
text-align: center;
margin-top: 20px;
margin-bottom: 20px; /* Add space below the icons */
}
.header-links a {
text-decoration: none;
font-size: 15px;
margin: 0 10px; /* Adjust the spacing between links */
transition: color 0.3s; /* Add transition for color change */
}
/* Center the "Explore a Judge's Profile" link */
#randomLink {
display: block;
text-align: center;
margin: 20px auto; /* Adjust the margin as needed */
}
/* Style the judge details sections */
.judgeSection {
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
margin: 20px auto;
max-width: 600px; /* Limit the width of the judge details for better readability */
}
/* Style the judge details sections with different background colors */
#personalDetails {
background-color: #fdd8e6; /* Pink */
}
#appointedToHighCourt {
background-color: #d6dbd1; /* Green */
}
#transfers {
background-color: #b3cfe6; /* Blue */
}
#supremeCourt {
background-color: #b8b3d1; /* Purple */
}
#experience {
background-color: #f3c291; /* Orange */
}
/* Style section headings */
.judgeSection h2 {
font-size: 20px;
margin-bottom: 15px;
border-bottom: 2px solid #333; /* Add a solid underline */
padding-bottom: 5px; /* Add spacing between text and underline */
text-transform: capitalize; /* Convert section titles to Title Case */
}
/* Style table-like layout for judge details */
.judgeSection p {
margin: 10px 0;
font-size: 16px;
line-height: 1.2;
}
.report-errors-container {
max-width: 600px; /* Set the desired max width for the container */
margin: 10px auto; /* Center the container horizontally */
text-align: center;
border-radius: 10px;
background-color: #fff; /* Background color */
padding: 20px; /* Add padding for spacing */
border: 1px solid #ccc; /* Add a border to separate from the footer */
font-size: 14px; /* Adjust the font size as needed */
}
/* Footer styles */
footer {
padding: 20px;
display: flex;
font-size: 14px;
justify-content: space-between;
align-items: center;
border-top: 1px solid #ccc; /* Add a top border to separate footer from the body */
}
/* Style each footer column */
.footer-column {
flex: 1;
margin: 0 10px;
text-align: center; /* Center the text horizontally */
}
/* Style the logos and images in the first and third columns */
.footer-column img {
max-width: 100%;
max-height: 60px; /* Adjust the maximum height as needed */
height: auto;
}
/* Ensure the judge details sections are responsive on smaller screens */
@media (max-width: 600px) {
.judgeSection {
padding: 10px;
border-radius: 10px; /* Add rounder corners on smaller screens */
margin: 10px; /* Add margin on smaller screens */
}
.judgeSection h2 {
font-size: 18px;
margin-bottom: 10px;
}
.judgeSection p {
font-size: 14px;
}
.report-errors-container{
margin: 10px;
}
/* Add any other responsive styles as needed */
}