-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoutliers.css
131 lines (116 loc) · 2.96 KB
/
outliers.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
/* General Styles */
body {
font-family: 'Avenir', sans-serif;
color: rgba(0, 31, 63, 0.85);
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f9f9f9;
font-size: 17px;
}
/* Header Styling */
header {
text-align: center;
padding: 40px 20px 20px 20px; /* Controls the spacing inside the header */
color: #001f3f; /* Header text color */
background-color: transparent; /* Header background color */
}
h1 {
font-size: 2.5em; /* Header font size */
margin: 0; /* Controls spacing outside the header */
font-weight: 400; /* Header font weight (thickness) */
}
h2 {
font-size: 2em;
margin: 0;
font-weight: 400;
}
/* Content Wrapper */
.content-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
/* Paragraph Styling */
p {
font-size: 17px;
color: rgba(0, 31, 63, 0.85);
margin-bottom: 20px;
text-align: justify;
}
/* Highlight important text */
p strong {
color: #1e90ff;
font-weight: bold;
}
/* Tableau Visualization Container */
.tableau-container {
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.tableauPlaceholder {
width: 100%;
max-width: 900px;
height: 800px;
}
.tableauViz {
width: 100%;
height: 100%;
}
/* Footer Styling */
footer {
position: center;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: #001f3f;
font-size: 0.3em;
}
footer p {
margin: 0;
}
/* Link Styling */
a {
color: rgba(0, 31, 63, 0.85);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #1e90ff;
}
.navigation-buttons {
text-align: center;
margin: 30px 0; /* Adjust spacing around the button container */
}
/* Style for all buttons */
.navigation-buttons button,
.navigation-buttons a button {
background-color: transparent; /* Transparent background */
color: #001f3f; /* Navy text */
border: 2px solid #001f3f; /* Navy border with crisp lines */
border-radius: 50%; /* Makes buttons circular */
padding: 0; /* Remove default padding */
width: 70px; /* Set width for circle */
height: 70px; /* Set height for circle */
font-size: 16px; /* Adjust font size */
font-family: 'Avenir', sans-serif; /* Keep the Avenir font */
cursor: pointer;
text-align: center; /* Center the text horizontally */
line-height: 70px; /* Perfectly vertically center the text */
transition: all 0.3s ease; /* Smooth transition for hover */
margin: 0 15px; /* Add horizontal spacing between buttons */
}
/* Hover state for buttons */
.navigation-buttons button:hover,
.navigation-buttons a button:hover {
background-color: #1e90ff; /* Light blue background on hover */
color: white; /* White text on hover */
border-color: #1e90ff; /* Change border to match background */
}