ols-theme 0.1.0

data/assets/css/custom.scss

@@ -0,0 +1,422 @@
+---
+---
+
+@charset "utf-8";
+
+$black: #000;
+$white: #fff;
+$dark-green: #48b87d;
+
+$bg-image: #333;
+$hero-text-color: $white;
+$text-shadow: $black;
+
+$link: $dark-green;
+$link-visited: $link;
+$link-hover: $dark-green;
+$link-focus: $link-hover;
+$link-active: $link-hover;
+
+@import 'bulma/bulma.sass';
+
+@mixin reset-links() {
+  a {
+    border-bottom: 0;
+    color: $link;
+    font-weight: 500;
+  
+    &:active,
+    &:focus,
+    &:hover {
+      background: none;
+      color: $link-hover;
+    }
+  }
+}
+
+.navbar {
+  .navbar-dropdown {
+    border-top: none;
+  }
+
+  .navbar-item {
+    img {
+      max-height: 3.5rem;
+      margin-top: -5px;
+      margin-bottom: -5px;
+    }
+  }
+
+  .navbar-previous-title {
+    font-weight: bold;
+  }
+}
+
+.hero {
+  background-clip: border-box;
+  background-color: $bg-image;
+  background-origin: padding-box;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: auto;
+  width: 100%;
+
+  &.no-image {
+    height: auto;
+    background-color: $bg-image;
+  }
+
+  @include tablet() {
+    background-attachment: fixed;
+    height: 50vh;
+    min-height: 300px;
+
+    &.no-image {
+      min-height: 40vh;
+    }
+  }
+}
+
+.hero-body {
+  padding-top: 160px;
+  text-align: center;
+  text-shadow: 2px 2px 5px $text-shadow;
+
+  h1,
+  p {
+    color: $hero-text-color;
+  }
+
+  .no-image & {
+    padding-top: 80px;
+    text-shadow: none;
+
+    p {
+      color: #464646;
+    }
+  }
+
+  @include tablet() {
+    padding-top: 20vh;
+  }
+}
+
+.hero-foot {
+  color: $hero-text-color;
+
+  .credit {
+    text-align: right;
+    font-size: 0.6em;
+    text-shadow: 1px 1px 1px $text-shadow;
+  }
+}
+
+.content {
+  a {
+    border-bottom: 2px solid $link;
+    color: inherit;
+    font-weight: 500;
+    padding: 2px;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: $link;
+      border-radius: 2px;
+      color: $white;
+    }
+  }
+}
+
+.people {
+  margin-bottom: 1em;
+
+  .media {
+    height: 230px;
+  }
+  .people-description {
+    height: 150px;
+  }
+
+  #people-bio {
+    height: auto;
+  }
+
+  @include mobile() {
+    .people-card {
+      margin-bottom: 1em;
+    }
+
+    .people-card-meta {
+      overflow-x: initial;
+    }
+
+    .people-card-avatar {
+      display: none;
+    }
+
+    .media, .people-description {
+      height: auto;
+    }
+  }
+
+  @include tablet() {
+    display: grid;
+    grid-gap: 2em;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+
+  .title.is-4 {
+    margin-bottom: 0.5em;
+  }
+
+  .people-card-meta {
+    @include reset-links();
+  }
+
+  .people-card-meta-twitter {
+    font-weight: 600;
+  }
+
+  .people-description {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .people-description-question {
+    font-style: italic;
+  }
+
+  .image {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+
+.people-badge {
+  height: 2em;
+  border-radius: 50%;
+  margin-left: 0.25em;
+  margin-right: 0.25em;
+  vertical-align: middle;
+}
+
+.entities {
+  @include mobile() {
+    .card {
+      margin-bottom: 1em;
+    }
+  }
+
+  @include tablet() {
+    display: grid;
+    grid-gap: 1em;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+
+  .is-3by1 {
+    margin-top: 2em;
+  }
+
+  .entity-logo {
+    max-height: 100%;
+    max-width: 100%;
+    width: auto !important;
+    height: auto !important;
+    position: absolute !important;
+  }
+
+  .entity-description-question {
+    font-style: italic;
+  }
+
+  .entity-card-meta {
+    @include reset-links();
+  }
+}
+
+.post {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .card {
+    background-color: #fff;
+    box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.28);
+    height: 100%;
+    width: fit-content;
+  }
+
+  .image {
+    height: 300px;
+    width: auto;
+    overflow: hidden;
+
+    img {
+       max-height: 100%;
+       object-fit: cover;
+    }
+  }
+  
+
+  .card-content {
+    padding: 2rem;
+    
+    .content .title {
+       height: 250px;
+    }
+  }
+
+  @include mobile() {
+    .card {
+      margin-bottom: 1em;
+
+      .media-content {
+        overflow-x: initial;
+      }
+
+      .media-left {
+        display: none;
+      }
+    }
+
+    .image {
+      height: auto;
+    }
+    .card-content .content .title {
+      height: auto;
+    }
+  }
+
+  @include tablet() {
+    display: grid;
+    grid-gap: 2em;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  }
+
+  .subtitle {
+    font-size: 1.1rem;
+    color: #464646;
+  }
+
+  .title {
+    a {
+      border-bottom: none;
+      color: inherit;
+      padding: 2px;
+
+      &:active,
+      &:focus,
+      &:hover {
+        color: $black;
+        background: none;
+      }
+    }
+  }
+
+  figure {
+    margin-top: 2em;
+  }
+}
+
+.calendar {
+  border: 0;
+  width: 100%;
+  height: 350px;
+}
+
+.twitter-tweet {
+  margin: 0 auto;
+  max-width: 550px;
+  text-align: center;
+}
+
+.community {
+  margin-bottom: 1em;
+
+  .card {
+    box-shadow: none;
+  }
+
+  .card-content {
+    padding-top: 1em;
+    padding-left: 0em;
+    padding-right: 0em;
+    padding-bottom: 0em;
+  }
+
+  @include mobile() {
+    .people-card {
+      margin-bottom: 1em;
+    }
+
+    .people-card-meta {
+      overflow-x: initial;
+    }
+
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  }
+
+  @include tablet() {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  }
+
+  .image {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
+  a {
+    border-bottom: none;
+    color: inherit;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background: none;
+    }
+  }
+}
+
+.peoples {
+  margin-top: 1em;
+}
+
+code {
+  background-color: #DBDBDB;
+  color:  #85001B;
+  font-weight: bold;
+}
+
+.schedule-overview{
+  width: 80%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 25px;
+  margin-bottom: 20px;
+}
+
+
+// table responsiveness (mobile)
+@media screen and (max-width: 768px) and (min-width: 320px) {
+  table {
+    font-size: 1em;
+    line-height: 1.5;
+    display: block;
+    overflow-x: auto;
+    padding-bottom: 20px;
+  }
+}
+
+.field {
+  padding: 30px;
+}
+
+.is-hidden {
+  display: none;
+}

data/assets/js/posts.js

@@ -0,0 +1,21 @@
+// Searchbar functionality
+
+function searchPosts() {
+  // Find the cards
+  let cards = document.querySelectorAll('.card')
+  // Locate search input
+  let search_query = document.getElementById('searchbar').value;
+  // Loop through the cards
+  for (var i = 0; i < cards.length; i++) {
+    // If text is in the card:
+    if (cards[i].innerHTML.toLowerCase()
+    // AND if the text matches the search query:
+      .includes(search_query.toLowerCase())) {
+        // THEN remove the '.is-hidden' class
+        cards[i].classList.remove('is-hidden');
+      } else {
+        // Otherwise, add the class:
+        cards[i].classList.add('is-hidden');
+      }
+  }
+};

data/assets/js/scripts.js

@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Check if there are any navbar burgers
+  if ($navbarBurgers.length > 0) {
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+      el.addEventListener('click', () => {
+
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+
+      });
+    });
+  }
+
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+	let cardToggles = document.getElementsByClassName('card-toggle');
+	for (let i = 0; i < cardToggles.length; i++) {
+		cardToggles[i].addEventListener('click', e => {
+			e.currentTarget.parentElement.parentElement.childNodes[3].classList.toggle('is-hidden');
+		});
+	}
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+	let cardToggles = document.getElementsByClassName('expertise-toggle');
+	for (let i = 0; i < cardToggles.length; i++) {
+		cardToggles[i].addEventListener('click', e => {
+			e.currentTarget.parentElement.querySelector(".peoples").classList.toggle('is-hidden');
+		});
+	}
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+	let cardToggles = document.getElementsByClassName('expertise-detail-toggle');
+	for (let i = 0; i < cardToggles.length; i++) {
+		cardToggles[i].addEventListener('click', e => {
+			e.currentTarget.parentElement.parentElement.querySelector(".expertise-detail").classList.toggle('is-hidden');
+		});
+	}
+});