Difference between revisions of "Team:Cornell/grids"
(Add grid.css) |
|||
| Line 1: | Line 1: | ||
| − | |||
| − | |||
/******************** HOME PAGE START ********************/ | /******************** HOME PAGE START ********************/ | ||
| Line 159: | Line 157: | ||
/******************** STANDARD PAGE END ********************/ | /******************** STANDARD PAGE END ********************/ | ||
| − | |||
| − | |||
Latest revision as of 12:05, 11 October 2019
/******************** HOME PAGE START ********************/
.home-page-wrapper {
display: grid; grid-template-columns: auto; grid-template-rows: 100px auto auto 100px auto 100px 100px; grid-template-areas: 'navbar' 'banner' 'homedescription' '.' 'tiles' '.' 'footer';
}
.home-banner-wrapper {
display: grid; grid-area: banner;
}
nav {
grid-area: navbar;
}
.nav-bar-main-menu .dropdown:nth-child(5) .dropdown-contentx {
display: grid; grid-template-columns: auto auto auto;
}
.nav-first-col {
display: inline-grid;
}
.nav-second-col {
display: inline-grid;
}
.nav-third-col {
display: inline-grid;
}
.home-description-wrapper {
display: grid; grid-area: homedescription; grid-template-columns: 150px auto 150px; grid-template-areas: '. homedescriptionlogo .' '. homedescription .';
}
.home-description-logo-wrapper {
grid-area: homedescriptionlogo;
}
.home-description {
grid-area: homedescription;
}
footer {
grid-area: footer;
}
.tiles-wrapper {
display: grid; grid-area: tiles; grid-template-columns: 150px repeat(3, 1fr) 150px; grid-gap: 10px;
}
.wet-lab-tile {
grid-column: 2; grid-row: 1;
}
.pd-tile {
grid-column: 3; grid-row: 1;
}
.pp-tile {
grid-column: 4; grid-row: 1;
}
.outreach-tile {
grid-column: 2; grid-row: 2;
}
.bus-tile {
grid-column: 3; grid-row: 2;
}
.team-tile {
grid-column: 4; grid-row: 2;
}
@media only screen and (max-width: 1100px) {
.tiles-wrapper {
display: grid;
grid-area: tiles;
grid-template-columns: 150px auto 150px;
grid-gap: 10px;
}
.wet-lab-tile {
grid-column: 2;
grid-row: 1;
}
.pd-tile {
grid-column: 2;
grid-row: 2;
}
.pp-tile {
grid-column: 2;
grid-row: 3;
}
.outreach-tile {
grid-column: 2;
grid-row: 4;
}
.bus-tile {
grid-column: 2;
grid-row: 5;
}
.team-tile {
grid-column: 2;
grid-row: 6;
}
}
/******************** HOME PAGE END ********************/
/******************** STANDARD PAGE START ********************/
.standard-page-wrapper {
display: grid; grid-template-columns: auto; grid-template-rows: 100px 550px auto 100px; grid-template-areas: "navbar" "standardpagebanner" "standardpagesidebarcontent" "footer";
}
.standard-page-banner {
grid-area: standardpagebanner;
}
.standard-page-side-bar-content-wrapper {
display: inline-grid; grid-area: standardpagesidebarcontent; grid-template-columns: 7.5% 20% 65% 7.5%; grid-template-areas: ". standardpagesidebar standardpagecontent .";
}
.standard-page-side-bar-wrapper {
grid-area: standardpagesidebar;
}
.standard-page-content-wrapper {
grid-area: standardpagecontent;
}
/******************** STANDARD PAGE END ********************/