151 lines
2.4 KiB
CSS
151 lines
2.4 KiB
CSS
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.main > * {
|
|
margin-bottom: calc(65rem / 16);
|
|
}
|
|
|
|
.title {
|
|
position: relative;
|
|
width: 80vw;
|
|
height: 90vh;
|
|
}
|
|
|
|
.titleImage {
|
|
position: absolute;
|
|
top: 10vh;
|
|
margin: auto;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.titleImage img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.blurb {
|
|
position: absolute;
|
|
bottom: 10vh;
|
|
right: 10vw;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
padding: calc(30rem / 16);
|
|
background-color: var(--translucent-accent);
|
|
border: calc(2rem / 16) solid var(--primary-text);
|
|
box-shadow: 0 calc(1rem / 16) calc(10rem / 16) var(--primary-accent);
|
|
border-radius: calc(50rem / 16);
|
|
z-index: 1;
|
|
}
|
|
|
|
.blurb h1 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.classYear {
|
|
color: var(--primary-text);
|
|
}
|
|
|
|
.classProfile {
|
|
color: var(--primary-heading)
|
|
}
|
|
|
|
.blurb h3 {
|
|
color: var(--primary-accent-light);
|
|
}
|
|
|
|
.decoratorSolid {
|
|
position: absolute;
|
|
top: 2vh;
|
|
right: 13vw;
|
|
width: 16vw;
|
|
height: 24vh;
|
|
background-color: var(--primary-accent-lighter);
|
|
opacity: 50%;
|
|
border-radius: calc(50rem / 16);
|
|
}
|
|
|
|
.decoratorDots {
|
|
position: absolute;
|
|
top: 40vh;
|
|
right: 0.8vw;
|
|
width: 11vw;
|
|
height: 36vh;
|
|
background-image: radial-gradient(var(--link) 35%, transparent 35%);
|
|
background-position: 0 0;
|
|
background-size: calc(25rem / 16) calc(25rem / 16);
|
|
z-index: -1;
|
|
}
|
|
|
|
.viewButton {
|
|
background: none;
|
|
display: flex;
|
|
border: none;
|
|
font-size: calc(30rem / 16);
|
|
color: var(--primary-accent-light);
|
|
font-weight: 700;
|
|
font-family: 'Inconsolata';
|
|
position: relative;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: color 0.5s ease-out;
|
|
}
|
|
|
|
.viewButton:hover {
|
|
color: var(--label);
|
|
}
|
|
|
|
.viewButton:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: calc(2rem / 16);
|
|
bottom: 0px;
|
|
background-color: var(--primary-accent-lighter);
|
|
cursor: pointer;
|
|
transition: background-color 0.5s ease-out;
|
|
}
|
|
|
|
.viewButton:hover:after {
|
|
background-color: var(--primary-accent-light);
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.decoratorDots {
|
|
display: none;
|
|
}
|
|
|
|
.decoratorSolid {
|
|
display: none;
|
|
}
|
|
|
|
.titleImage {
|
|
top: 2vh;
|
|
}
|
|
|
|
.blurb {
|
|
right: 0;
|
|
top: 30vh;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.blurb h1 {
|
|
font-size: calc(38rem / 16);
|
|
}
|
|
|
|
.blurb h3 {
|
|
font-size: calc(25rem / 16);
|
|
}
|
|
|
|
.viewButton {
|
|
font-size: calc(25rem / 16);
|
|
}
|
|
}
|
|
|
|
.homeSectionsStyles {
|
|
width: 70vw;
|
|
max-width: 1000px;
|
|
} |