cs5356-hw3/style.css at main · Stephen0512/cs5356-hw3 · 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
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
/* styles.css */
/* Basic body styles - sets up the main container for the entire page */
body {
    margin: 0;
    font-family: 'Segoe UI';
    line-height: 1.5;
    color: black;
    background-color: lightblue;
}

header, main, footer {
    padding: 2rem;
    max-width: 1512px;  /* Maximum width provided in the homework instructions */
    margin: 0 auto;  /* Center the content horizontally with no top and bottom margin */
}

header {
    text-align: center;
    padding: 0.5rem 1rem;  /* 0.5rem top and bottom, 1rem left and right */
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.subtitle {
    color: gray;
    font-size: 1.25rem;
    font-weight: 300;
    text-transform: uppercase;
    opacity: 0.75;
}

main {
    padding: 1rem;  /* 1rem gap at the top, bottom and both sides of the main content */
    display: flex;
    flex-direction: column;
    gap: 1rem;  /* Needs to be consistent with the gap in the profile section */
}

section, article {
    padding: 1rem;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.profile-section {
    align-items: center;
    /* Use flexbox for the profile section */
    display: flex;
    flex-direction: row;
    gap: 1rem;  /* Needs to be consistent with the gap between sections */
    /* Wrap the profile image and content on smaller screens */
    flex-wrap: wrap;
    justify-content: center;  /* Center items when wrapped */
}

.profile-image {
    /* Make the profile image square and smaller */
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.about-content {
    flex-grow: 1;
    min-width: 280px;
}

.education-section table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem auto;
}

.education-section th,
.education-section td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid gray;
    /* Add minimum width to prevent cells from becoming too narrow */
    min-width: 90px;
    /* Add word wrapping for long content */
    word-wrap: break-word;
}

.education-section th {
    background-color: lightgray;
    font-weight: bold;
}

.education-section tr {
    transition: background-color 0.25s ease;  /* Smooth transition for hover effect */
}

.education-section tr:hover {
    background-color: lightcyan;
}

.education-section code {
    background-color: lightgray;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
}

.interests-section ul {
    padding-left: 1.5rem;
}

.quote-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem;
    align-items: center;
}

.quote-section h2 {
    margin: 0;
    flex: 0 1 auto;
    min-width: 200px;
}

#quote {
    width: 100%;
    order: 3;
    font-style: italic;
    line-height: 1.5;
    padding: 1rem;
    border-radius: 16px;
    color: gray;
    background-color: white;
    word-wrap: break-word;
    box-sizing: border-box;
    height: fit-content;
}

#quote-btn {
    order: 2;
    padding: 0.75rem 1.5rem;
    color: white;
    background-color: #4a90e2;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    align-self: center;
}

footer {
    text-align: center;
    background-color: white;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}

/* Media query for larger screens */
@media screen and (min-width: 768px) {
    main {
        padding: 2rem 4rem;
        gap: 2rem;
    }

    section, article {
        padding: 2rem 4rem;
    }

    .profile-image {
        width: 200px;
        height: 200px;
    }

    .profile-section {
        gap: 2rem;
    }

    .about-content {
        min-width: 300px;
    }
}