visualization_day/styles.css at main · tylermcinnes/visualization_day · GitHub

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
/* General page styling */
body {
    background-color: #f7f9fc;  /* Very light blue background for a soft feel */
    color: #4a4a4a;  /* Dark gray text color for good readability */
    font-family: Arial, sans-serif;  /* Font family for a clean, modern look */
    line-height: 1.6;
    margin: 0;
    padding: 0;
  }

  /* Section styling for visual separation */
  section {
    border: 1px solid #e0e0e0;  /* Light gray border for separation */
    background-color: #ffffff;  /* White background for sections */
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);  /* Subtle shadow for depth */
  }

  /* Heading styles with background highlight */
  h1, h2, h3 {
    color: #3b5998;  /* Soft blue for headings */
    padding: 5px;
    background-color: #eaf1fb;  /* Very light blue background for heading highlights */
    border-radius: 5px;
  }

  /* Link styles */
  a {
    color: #3b5998;  /* Muted yellow color for links */
    text-decoration: none;
  }

  a:hover {
    color: #3b5998;  /* Darker blue on hover for a subtle effect */
    text-decoration: underline;
  }

  /* Button styles with gradient and shadow */
  button {
    background: linear-gradient(to bottom, #f4d03f, #e2be33);  /* Gradient yellow for buttons */
    color: #3b5998;  /* Soft blue text for contrast */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  /* Shadow for depth */
    transition: background 0.3s, transform 0.2s;
  }

  button:hover {
    background: linear-gradient(to bottom, #f5e26f, #d1a920);  /* Lighter yellow on hover */
    transform: translateY(-2px);  /* Slight lift effect on hover */
  }

  /* Callout block styles */
  .callout-note {
    background-color: #eaf1fb;  /* Very light blue for callout background */
    border-left: 5px solid #3b5998;  /* Soft blue border to highlight the callout */
    padding: 15px;
    margin: 20px 0;
  }

  /* Footer styling */
  footer {
    background-color: #3b5998;  /* Soft blue footer background */
    color: #ffffff;  /* White text color */
    padding: 10px;
    text-align: center;
    margin-top: 20px;
  }

  /* Table styles with improved visual interest */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);  /* Subtle shadow for the table */
  }

  table th, table td {
    border: 1px solid #3b5998;  /* Soft blue borders */
    padding: 10px;
    text-align: left;
  }

  table th {
    background-color: #f4d03f;  /* Muted yellow header background */
    color: #3b5998;  /* Soft blue text */
  }

  table tr:nth-child(even) {
    background-color: #f7f9fc;  /* Light blue for alternating rows */
  }

  /* Blockquote styles with subtle enhancement */
  blockquote {
    border-left: 5px solid #3b5998;  /* Soft blue border to emphasize blockquote */
    background: #eaf1fb;  /* Light blue background */
    padding: 15px;
    margin: 20px 0;
    color: #4a4a4a;
    font-style: italic;
  }

  /* Content box styling */
  .content-box {
    background-color: #ffffff;  /* White background for contrast */
    border: 1px solid #e0e0e0;  /* Light gray border */
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
  }

  /* Navigation button styling */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }

  .navigation-buttons a {
    text-decoration: none;
  }

  .nav-button {
    background: linear-gradient(to bottom, #f4d03f, #e2be33);  /* Gradient yellow for buttons */
    color: #3b5998;  /* Soft blue text for contrast */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  /* Shadow for depth */
    transition: background 0.3s, transform 0.2s;
  }

  .nav-button:hover {
    background: linear-gradient(to bottom, #f5e26f, #d1a920);  /* Lighter yellow on hover */
    transform: translateY(-2px);  /* Slight lift effect on hover */
  }

  .prev-button {
    margin-right: auto;  /* Aligns the Previous button to the left */
  }

  .next-button {
    margin-left: auto;  /* Aligns the Next button to the right */
  }