From 2744ae7e5c09006bfa1f78c23d620abb8b9da2e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9amus=20O=27Sullivan?=
<seamus.osullivan@psych.ox.ac.uk>
Date: Mon, 13 Jan 2025 15:01:06 +0000
Subject: [PATCH] Add back custom SCSS.
Add back hero-unit CSS for flipcards on homepage.
Previously, this was mixed with JTD's SCSS.
---
_sass/custom/custom.scss | 311 +++++++++++++++++++++++++++++++++++++++
1 file changed, 311 insertions(+)
create mode 100644 _sass/custom/custom.scss
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
new file mode 100644
index 00000000..c3372fe3
--- /dev/null
+++ b/_sass/custom/custom.scss
@@ -0,0 +1,311 @@
+/* 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;
+ }
+}
--
GitLab