Merge pull request #36 from nhsengland/content-carousel

Content carousel (with bonus fix of one page's title)
nhsengland · Jan 11, 2024 · 5342c62 · 5342c62
2 parents 1d324d2 + 00f1a41
commit 5342c62
Show file tree

Hide file tree

Showing 3 changed files with 360 additions and 331 deletions.
diff --git a/docs/our_work/parkinsons-detection.md b/docs/our_work/parkinsons-detection.md
@@ -1,9 +1,10 @@
 ---
-title: 'Parkinson''s Disease Pathology Prediction'
-summary: 'Automatic segmentation and detection of Parkinson’s disease pathology using synthetic staining and deep neural networks'
-category: 'Projects'
-origin: 'Skunkworks'
-tags: ['parkinson\'s disease','synthetic staining','classification','deep learning', 'pathology', 'neural networks']
+layout: base 
+title: Parkinson's Disease Pathology Prediction
+# summary: Automatic segmentation and detection of Parkinson’s disease pathology using synthetic staining and deep neural networks
+# category: Projects
+# origin: Skunkworks
+# tags: ['parkinson\'s disease','synthetic staining','classification','deep learning', 'pathology', 'neural networks']
 ---
 
 ![Parkinson's prediction diagram](../images/parkinsons-detection.png)
@@ -18,7 +19,4 @@ Output|Link
 ---|---
 Open Source Code & Documentation|[Github](https://github.com/nhsx/skunkworks-parkinsons-detection/)
 Technical report|[biorxiv.org](https://www.biorxiv.org/content/10.1101/2022.08.30.505459v1)
-Case Study|[Case Study](https://transform.england.nhs.uk/ai-lab/explore-all-resources/develop-ai/identifying-and-quantifying-parkinsons-disease-using-ai-on-brain-slices/)
-
-[comment]: <> (The below header stops the title from being rendered (as mkdocs adds it to the page from the "title" attribute) - this way we can add it in the main.html, along with the summary.)
-#
+Case Study|[Case Study](https://transform.england.nhs.uk/ai-lab/explore-all-resources/develop-ai/identifying-and-quantifying-parkinsons-disease-using-ai-on-brain-slices/)
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -91,3 +91,248 @@ table {
 html {
   scroll-behavior: smooth;
 }
+
+/* Carousel Start  */
+.carousel_wrapper {
+  position: relative;
+  width: 320px;
+  height: 300px;
+  margin: 100px auto 0 auto;
+  padding: 5px;
+  perspective: 1000px;
+}
+
+.carousel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transform: rotateY(-360deg) translateZ(-412px); /* add reverse transformation from the slides */
+  animation: swirl 80s steps(10000, end) infinite; /* run `swirl` animation (defined at end of CSS) infitely, with animation 
+ lasting 40 seconds, and 10,000 steps between the FROM and TO values in the animation for a smooth rotation */
+}
+
+.slide {
+  display:none;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 300px;
+  height: 187px;
+}
+
+.slide img {
+  width: 280px;
+  height: 175px;
+  border: 2px solid #005eb8;
+  border-radius: 10px;
+}
+
+.slide.one {
+  transform: rotateY(0deg) translateZ(412px);
+}
+.slide.two {
+  transform: rotateY(40deg) translateZ(412px);
+}
+.slide.three {
+  transform: rotateY(80deg) translateZ(412px);
+}
+.slide.four {
+  transform: rotateY(120deg) translateZ(412px);
+}
+.slide.five {
+  transform: rotateY(160deg) translateZ(412px);
+}
+.slide.six {
+  transform: rotateY(200deg) translateZ(412px);
+}
+.slide.seven {
+  transform: rotateY(240deg) translateZ(412px);
+}
+.slide.eight {
+  transform: rotateY(280deg) translateZ(412px);
+}
+.slide.nine {
+  transform: rotateY(320deg) translateZ(412px);
+}
+
+h1 {
+  text-align: center;
+}
+
+.md-main {
+  max-height: 0px;
+}
+
+.container {
+  background: #425563;
+}
+
+.hero {
+  display: flex;
+  align-items: center;
+
+  color: var(--md-primary-bg-color);
+}
+
+.hero-image {
+  flex: 3;
+  order: 1;
+}
+
+#hero-img {
+  float: right;
+  object-fit: cover;
+  min-height: 600px;
+}
+
+.hero-content {
+  flex: 2;
+  margin: 1.6rem 0.8rem;
+}
+
+.hero h1 {
+  margin-bottom: 1rem;
+
+  color: currentColor;
+  font-weight: 700;
+}
+
+.hero .md-button--primary {
+  background-color: var(--md-primary-fg-color);
+  border-color: var(--md-primary-fg-color);
+}
+
+.hero .md-button {
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+
+  color: var(--md-primary-bg-color);
+}
+
+.hero .md-button:focus,
+.hero .md-button:hover {
+  color: var(--md-default-bg-color);
+  background-color: var(--md-accent-fg-color);
+  border-color: var(--md-accent-fg-color);
+}
+
+.top-hr {
+  margin: 10px;
+  padding: 20px;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.feature-item {
+  flex: 1;
+  flex-basis: 0%;
+  min-width: 300px;
+
+  box-sizing: border-box;
+  margin: 10px;
+  padding: 0 15px;
+
+  background-color: var(--md-primary-fg-color);
+  border: 2px solid var(--md-primary-fg-color);
+  border-radius: 2px;
+
+  font-family: "Arial", sans-serif;
+  font-weight: 300;
+  word-break: break-word;
+}
+
+.feature-item:hover {
+  background-color: var(--md-accent-fg-color);
+  border-color: var(--md-accent-fg-color);
+  border-radius: 2px;
+}
+
+.feature-item h2 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+
+  color: var(--md-default-bg-color);
+  font-weight: 300;
+  font-size: 25px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: normal;
+  font-family: inherit;
+}
+
+.feature-item h2 svg {
+  float: left;
+  height: 30px;
+  margin-right: 10px;
+}
+
+.feature-item p {
+  margin: 0 0 10px;
+
+  font-size: 16px;
+  line-height: 1.8em;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  color: var(--md-default-bg-color);
+
+  display: block;
+}
+
+/* medium screen */
+@media screen and (max-width: 1360px) {
+  .feature-item {
+    flex-basis: 40%;
+  }
+
+  .hero-content {
+    flex: 1;
+  }
+
+  .hero-image {
+    flex: 2;
+  }
+
+  #hero-img {
+    min-height: 400px;
+  }
+}
+
+/* small screen */
+@media screen and (max-width: 800px) {
+  .hero {
+    flex-direction: column;
+  }
+
+  .hero h1 {
+    font-size: 1.4rem;
+  }
+
+  .hero-image {
+    flex: 1;
+    order: 0;
+  }
+
+  #hero-img {
+    min-height: 250px;
+  }
+}
+
+/*
+CSS3 ANIMATION
+-------------------
+Simply rotates the carousel around the Y axis by using rotateY and starting at initial value, -360º, and going to final value 0º, 
+then resetting.
+*/
+
+@keyframes swirl {   
+  from {
+    transform: rotateY(-360deg);
+  }
+  to {
+    transform: rotateY(0deg);
+  }
+} 
+/* Carousel Start */