Fix accessibility issues for keyboard-only users, and fix some Safari bugs (#268)
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Also fixed a couple of Safari-specific bugs. Summary: - Added a secondary-accent ring around buttons on focus. (White didn't show up very well against the background.) We can always chat with design about this later if we want to change it. - Fixed the weirdness with tabbing over the headers on the Advice pages. I also made the header flex vertically on mobile screens - this fixes the issue of extra whitespace on the right side, and is also somewhat consistent with the menu-y thing at the top of the mobile Meet the Team page. - I was very tempted to do this on the Events term archive pages as well, but I figured I should get someone else's opinion on that first. - Removed the extra triangle symbol in the MiniEventCard on Safari. I had to use a vendor prefix, but if anyone else can come up with something better, then please do that, thank you. - Stopped the home page "Computer Science Club" from breaking into two lines on small desktop screens. - Added extra space to mobile footer. Closes #250 Closes #248 Closes #253 Closes #256 Closes #261 Co-authored-by: Amy <minds10@hotmail.com> Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca> Reviewed-on: #268 Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca> Co-authored-by: Amy <a258wang@csclub.uwaterloo.ca> Co-committed-by: Amy <a258wang@csclub.uwaterloo.ca>
This commit is contained in:
parent
a94dd374a5
commit
8d43bf260d
|
@ -17,6 +17,16 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button:focus,
|
||||||
|
.link:focus {
|
||||||
|
box-shadow: 0 0 0 calc(4rem / 16) var(--secondary-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.small.button:focus,
|
||||||
|
.small.link:focus {
|
||||||
|
box-shadow: 0 0 0 calc(3rem / 16) var(--secondary-accent);
|
||||||
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
.footer {
|
.footer {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: var(--primary-heading);
|
background: var(--primary-heading);
|
||||||
height: calc(66rem / 16);
|
padding: 1rem 0;
|
||||||
padding: calc(14rem / 16) 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30,12 +29,14 @@
|
||||||
|
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.footer {
|
.footer {
|
||||||
height: calc(120rem / 16);
|
padding: 2rem 0;
|
||||||
|
height: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
gap: 1rem;
|
||||||
padding: 0 calc(24rem / 16);
|
padding: 0 calc(24rem / 16);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,6 +45,14 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card > summary::marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card > summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.dropDownIcon {
|
.dropDownIcon {
|
||||||
fill: var(--primary-accent);
|
fill: var(--primary-accent);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
.main {
|
.main {
|
||||||
margin-top: calc(60rem / 16);
|
margin: calc(60rem / 16) 0;
|
||||||
margin-bottom: calc(60rem / 16);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main > h1, .main > section > h1 {
|
.main > h1,
|
||||||
|
.main > section > h1 {
|
||||||
padding-bottom: calc(16rem / 16);
|
padding-bottom: calc(16rem / 16);
|
||||||
border-bottom: calc(1rem / 16) solid var(--primary-heading);
|
border-bottom: calc(1rem / 16) solid var(--primary-heading);
|
||||||
}
|
}
|
||||||
|
@ -34,3 +34,19 @@
|
||||||
.main > .miniEventCards {
|
.main > .miniEventCards {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
|
.main {
|
||||||
|
margin: calc(30rem / 16) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header a {
|
||||||
|
margin: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -47,6 +47,7 @@
|
||||||
font-family: "Futura", "sans-serif";
|
font-family: "Futura", "sans-serif";
|
||||||
font-size: calc(33rem / 16);
|
font-size: calc(33rem / 16);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
color: var(--primary-heading);
|
color: var(--primary-heading);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -151,6 +152,7 @@
|
||||||
.clubTitle {
|
.clubTitle {
|
||||||
margin: calc(8rem / 16) 0;
|
margin: calc(8rem / 16) 0;
|
||||||
font-size: calc(20rem / 16);
|
font-size: calc(20rem / 16);
|
||||||
|
white-space: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clubDescription {
|
.clubDescription {
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.adviceBarContainer > a {
|
.adviceBarContainer > a {
|
||||||
padding-right: calc(48rem / 16);
|
margin-right: calc(48rem / 16);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,6 +46,16 @@ a.currentAdvice {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.adviceBarContainer {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adviceBarContainer > a {
|
||||||
|
margin: unset;
|
||||||
|
}
|
||||||
|
|
||||||
.codey {
|
.codey {
|
||||||
width: calc(140rem / 16);
|
width: calc(140rem / 16);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue