/* Set the font size to 100%, ensures rem scaling is correct */
:root {
font-size: 100%;
}
/*body style*/
body {
margin: 0;
width: fit-content;
height: fit-content;
}
/* entire page style, scroll on overflow */
html {
margin: 0;
width: fit-content;
height: fit-content;
overflow-x: scroll;
overflow-y: scroll;
}
/*Header style*/
header {
padding: 8px 8px;
background-color: #275d38;
margin-bottom: 10px;
height: 7vh;
min-height: 2vw;
min-width: 100vw;
}
/*Header link style */
.header a {
float: none;
display: block;
text-align: center;
text-decoration: none;
line-height: 1.5rem;
border-radius: 4px;
color: #f2cd00;
font-size: 100%;
font-family: inherit;
text-align: center;
}
.site-title {
margin: 1vh 1vw 1vh 13.5vw;
}
/*Title style*/
.header a.site-title {
width: fit-content;
min-width: 50vw;
font-size: 1.5rem;
color: #F2CD00;
}
/*Image style*/
.header img, .footer img {
width: 22vh;
min-width: 7.3vw;
height: 6vh;
min-height: 2vw;
margin-right: 0;
float: left;
}
/* Applies when screen width < 840px */
@media screen and (max-width: 840px) {
/* Adjust site title so it fits and is spaced nicely */
header .site-title {
margin: 1.5vh 1vw 1vh 7.5vw;
max-width: 55vw;
}
header .header a.site-title {
font-size: 75%;
}
/* Scaled by a ratio that matches original image dimensions */
header .header img, footer .footer img {
width: 12.8vh;
height: 3.5vh;
}
footer .footer img {
left: 20vw;
}
footer #copyright {
left: 30vw;
font-size: 55%;
}
/* Prevent text off page */
#introtext {
font-size: 75%;
width: 90vw;
left: 20vw;
}
/* Allow vertical wrapping */
#main .visualizerdeptscontainer, #main .timetabledeptscontainer {
flex-wrap: wrap;
width: 90vw;
}
#main .button, #main .depthead {
font-size: 120%;
}
}
/* this and next keep buttonsheader roughly in middle of screen */
@media screen and (max-width: 700px) {
#main .buttonsheader {
left: 25vw;
}
}
@media screen and (max-width: 850px) and (min-width: 700px) {
#main .buttonsheader {
left: 35vw;
}
}
/* Applies for narrow and short screens */
@media screen and (max-width: 1000px) and (max-height: 600px) {
body header .header a.site-title {
font-size: 50%;
}
body header .header .site-title {
margin: 0 1vw 0.5vh 25vw;
}
}
/* Applies for narrow and really short screens */
@media screen and (max-width: 1000px) and (max-height: 300px) {
html body header .header .site-title, html body header .header img {
margin-top: -8px;
}
}
/* Wrapper div for the term names and course boxes, the main content */
#main {
height: fit-content;
min-height: 100vh;
width: fit-content;
}
/* footer formatting */
footer {
padding: 0.5rem 0.5rem;
background-color: #275d38;
margin-top: 10px;
margin-bottom: 0;
height: 7vh;
position: relative;
bottom: 0;
min-width: 100vw;
}
/* U of A logo */
.footer img {
width: 22vh;
height: 6vh;
margin-right: 0;
position: relative;
left: 46vw;
}
/* copyright logo and text */
#copyright {
position: relative;
left: 60vw;
color: #FFFFFF;
font-family: 'Roboto',sans-serif;
font-size: 75%;
}
/* text at top of landing page */
#introtext {
text-align: center;
margin: 2px;
position: relative;
left: 22.5vw;
width: fit-content;
max-width: 70vw;
}
.buttonsheader {
width: fit-content;
position: relative;
left: 42vw;
}
/* Container for departments/disciplines */
.visualizerdeptscontainer, .timetabledeptscontainer {
display: flex;
flex-direction: row;
position: relative;
left: 7vw;
justify-content: center;
}
/* Bold title of department */
.depthead {
text-align: center;
height: fit-content;
font-size: 1.25rem;
}
/* Disciplines within a department */
.disciplines {
display: flex;
flex-direction: column;
width: fit-content;
height: fit-content;
margin-left: 5vw;
margin-right: 2vw;
margin-bottom: 5vh;
}
/* Discipline button */
.button {
border: none;
color: white;
padding: 2vh 3vw;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 0.75rem;
margin: 4px 2px;
transition-duration: 0.3s;
cursor: pointer;
}
/* Button colors change for diff department */
.chembutton {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.chembutton:hover {
background-color: #4CAF50;
color: white;
}
.civbutton {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.civbutton:hover {
background-color: #008CBA;
color: white;
}
.ecebutton {
background-color: white;
color: black;
border: 2px solid #f66a1f;
}
.ecebutton:hover {
background-color: #f66a1f;
color: white;
}
.mecbutton {
background-color: white;
color: black;
border: 2px solid #8f1cdc;
}
.mecbutton:hover {
background-color: #8f1cdc;
color: white;
}