geo-coop/web/themes/custom/geofresco/src/global/_layout.scss

@charset "UTF-8";
// Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout

@use "variables" as *;
@use "../../node_modules/bulma/sass/utilities/mixins" as *;
@use "../../node_modules/bulma/sass/utilities/initial-variables" as *;

// Center logo & sitename when they stack on tiny screens.
@include until($mini) {
  .sitename.column,
  .logo.column {
    width: 100%;
  }
}

.search-bar > .block,
.logo > .image {
  display: inline-block;
}


// Allow the primary page content to be flush with the bottom of the slogan.
.main-section {
  padding-top: 0;
  .group-header {
    padding-top: 0;
  }
}

// On certain node pages, drop the title over (where we want) the image (to be).
.page--content-item--article,
.page--content-item--blog,
.page--content-item--collection,
.page--content-item--people
  {
    .page-title {
    height: 0;
    position: relative;
    overflow: visible;
    z-index: 10;
  }
}

// Prevent a slight horizontal scroll.

/* On content listing pages (e.g. card view mode). */
.background-replacement-for-no-image {
  height: 10rem;
}
/* On full content pages. */
.featured-image .background-replacement-for-no-image {
  height: 12rem;
  @include from($desktop) {
    height: 14rem;
  }
  @include from($widescreen) {
    height: 16rem;
  }
}

/* Yes i know i should just give author bios their own class */
.node--type-people.node--view-mode-teaser {
  margin-bottom: 1rem;
}

// Main navigation, goes to code in page.html.twig
.hamburger-container {
  width: max-content;
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  transition: transform 0.5s ease;
}

/* We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down */
.hamburger-container .checkbox {
  opacity: 0;
  position: absolute;
}

/* Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here. */
.hamburger-container .checkbox:focus ~ .hamburger {
  /* Not all browsers support outline: auto, so set a sensible fallback outline. */
  outline: 2px solid white;
  outline: auto;
  outline-offset: 4px;
}

/* For newer browsers that do support :focus-visible, hide the outline when the checkbox isn't selected with the keyboard. */
@supports selector(:focus-visible) {
  .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
    outline: none;
  }
}

/* Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer. */
.hamburger-container .drawer a {
  visibility: hidden;
  transition: visibility 0.5s linear;
}

/* Make the focusable elements in the drawer visible when it is open. */
.hamburger-container .checkbox:checked ~ .drawer a {
  visibility: visible;
}

.hamburger-container .checkbox:checked ~ .drawer {
  transform: translateX(0%);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
  opacity: 0;
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.hamburger {
  width: 32px;
  height: 32px;
  position: relative;
  display: block;
  transition: transform 0.5s ease;
  z-index: 1;
  cursor: pointer;
  padding-top: 5px;
}

.hamburger .slice {
  display: block;
  width: 100%;
  height: 2px;
  background-color: white;
  transition: all 0.5s ease;
}

.hamburger .slice:not(:first-child) {
  margin-top: 10px;
}

.drawer {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: max-content;
  max-width: 100%;
  padding: 22px;
  background: black;
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.drawer .nav-list {
  padding: 0;
  list-style: none;
  margin-top: 30px;
  margin-left: 20px;
}

.drawer .nav-list .nav-list-item {
  padding-bottom: 10px;
}

/* Make the drawer full-width on mobile */
@media screen and (max-width: 768px) {
  .drawer {
    width: 100%;
  }
}