Skip to content
Snippets Groups Projects
Commit 2744ae7e authored by Séamus O'Sullivan's avatar Séamus O'Sullivan
Browse files

Add back custom SCSS. 

Add back hero-unit CSS for flipcards on homepage.
Previously, this was mixed with JTD's SCSS.
parent cc20b27a
No related branches found
No related tags found
1 merge request!28Update Jekyll setup
Hide whitespace changes
Inline Side-by-side
_sass/custom/custom.scss 0 → 100644
+ 311
− 0
View file @ 2744ae7e
/* Hero Unit ----------------------*/
.hero-unit {
height: 640px;
// background: url(https://static.pexels.com/photos/2884/building-vintage-bike-monument.jpg) no-repeat center center;
background: url(https://git.fmrib.ox.ac.uk/open-science/community/Open-WIN-Community/-/blob/master/img/img-hero-unit-bg.png) no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.hero-unit h1,
.hero-unit h2,
.hero-unit h3,
.hero-unit h4,
.hero-unit h5,
.hero-unit h6 {
margin-top: -0.5rem;
margin-bottom: 0;
color: white;
}
.hero-unit h1 {
font-weight: bold;
}
.hero-unit hgroup {
margin: 3rem 0;
}
.hero-unit .card-icon { /* front of card */
display: block;
margin: 0.5rem auto 0;
font-size: 2rem;
color: white;
}
.hero-unit .clients {
margin: 2rem auto;
}
.hero-unit .clients a {
color: white;
}
.clients .fa-stack-2x {
color: gray;
}
.clients:hover .fa-stack-2x {
color: #333333;
}
/* Card design - front */
.button.large {
margin: 0;
padding: 3.25rem;
}
.button.large a {
color: white;
font-size: 1.75rem;
font-weight: 100;
margin-top: 2rem;
}
/* Card design - back */
.panel i {
font-size: 2rem;
display: block;
float: left;
width: 20%;
opacity: 0.5;
}
.panel a,
.panel p,
.panel small {
width: 80%;
float: right;
}
.panel a {
margin-bottom: 0.5rem;
}
.panel a:hover {
text-decoration: underline;
}
.panel small {
margin-top: -0.5rem;
font-style: italic;
}
/* Buttons Card Flipper
* Source: https://cssdeck.com/labs/rxcleo5w
*/
.flip-cards {
float: left;
width: 100%;
height: 100%;
padding-left: 1rem;
}
.flip-cards li {
float: left;
width: 33.3%;
height: 180px;
position: relative;
padding: 0;
}
.flip-cards li:hover {
cursor: pointer;
}
.flip-cards li:hover .card-front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform: perspective(1000) rotateY(180deg);
-moz-transform: perspective(1000) rotateY(180deg);
-ms-transform: perspective(1000) rotateY(180deg);
-o-transform: perspective(1000) rotateY(180deg);
transform: perspective(1000) rotateY(180deg);
}
.flip-cards li:hover .card-back {
z-index: 950;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: perspective(1000) rotateY(0deg);
-moz-transform: perspective(1000) rotateY(0deg);
-ms-transform: perspective(1000) rotateY(0deg);
-o-transform: perspective(1000) rotateY(0deg);
transform: perspective(1000) rotateY(0deg);
}
.flip-cards .card-front,
.flip-cards .card-back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.flip-cards .card-front {
-webkit-transform: perspective(1000) rotateY(0);
-moz-transform: perspective(1000) rotateY(0);
-ms-transform: perspective(1000) rotateY(0);
-o-transform: perspective(1000) rotateY(0);
transform: perspective(1000) rotateY(0);
z-index: 900;
}
.flip-cards .card-back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 800;
}
/* Button Card Colors */
.flip-cards .panel {
border: none;
}
.flip-cards .panel i,
.flip-cards .panel p,
.flip-cards .panel a,
.flip-cards .panel small {
color: white;
}
/* First button color */
.flip-cards li:first-child > .button {
background-color: rgba(121, 38, 44, 1);
}
.flip-cards li:first-child > .panel {
background-color: rgba(121, 38, 44, 0.8);
}
/* Second button color */
.flip-cards li:nth-child(2) > .button {
background-color: rgba(87, 65, 65, 1);
}
.flip-cards li:nth-child(2) > .panel {
background-color: rgba(87, 65, 65, 0.8);
}
/* Third button color */
.flip-cards li:nth-child(3) > .button {
background-color: rgba(191, 165, 164, 1);
}
.flip-cards li:nth-child(3) > .panel {
background-color: rgba(191, 165, 164, 0.8);
}
/* Fourth button color */
.flip-cards li:nth-child(4) > .button {
background-color: rgb(64, 109, 0);
}
.flip-cards li:nth-child(4) > .panel {
background-color: rgba(64, 109, 0, 0.8);
}
/* Fifth button color */
.flip-cards li:nth-child(5) > .button {
background-color: rgba(174, 118, 15);
}
.flip-cards li:nth-child(5) > .panel {
background-color: rgba(174, 118, 15, 0.8);
}
/* Sixth button color */
.flip-cards li:nth-child(6) > .button {
background-color: rgba(149, 147, 26);
}
.flip-cards li:nth-child(6) > .panel {
background-color: rgba(149, 147, 26, 0.8);
}
/* 7th button color */
.flip-cards li:nth-child(7) > .button {
background-color: rgb(60, 131, 213);
}
.flip-cards li:nth-child(7) > .panel {
background-color: rgba(60, 131, 213, 0.8);
}
/* 8th button color */
.flip-cards li:nth-child(8) > .button {
background-color: rgb(76, 81, 168);
}
.flip-cards li:nth-child(8) > .panel {
background-color: rgba(76, 81, 168, 0.8);
}
/* 9th (last) button color */
.flip-cards li:last-child > .button {
background-color: rgba(40, 57, 77, 1);
}
.flip-cards li:last-child > .panel {
background-color: rgba(40, 57, 77, 0.8);
color: white;
}
/*
* RESPONSIVENESS -------------------------------------------------
*/
@media only screen and ( max-width: 40em ) {
.hero-unit {
height: 800px;
}
.flip-cards li {
width: 50%;
/*height: 160px;*/
}
}
@media only screen and ( max-width: 30em ) {
.hero-unit h1 {
font-size: 1.75rem;
}
.hero-unit h3 {
font-size: 1.125rem;
}
}
@media only screen and ( max-width: 25em ) {
.hero-unit {
height: 920px;
}
.hero-unit hgroup {
margin: 2rem 0;
}
.hero-unit h1 {
font-size: 1.35rem;
padding-bottom: 0.25rem;
}
.hero-unit h3 {
font-size: 0.85rem;
}
.hero-unit .card-icon {
font-size: 1.35rem;
}
.hero-unit .card-back .card-icon {
font-size: 2rem;
margin: 0;
padding: 5px 0 20px 5px;
}
.flip-cards li {
width: 100%;
font-size: 1.35rem;
height: 120px;
}
.flip-cards .panel p {
display: none;
}
.flip-cards .panel small {
margin: 0;
}
.button.large {
padding: 2rem;
}
.button.large a {
font-size: 1.35rem;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment