home.html

---
profile: false
title: "Welcome to Code and Coffee, Long Beach"
---

<!-- load our fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>

<style>

/**
 * HERO styles
 * -------------
 * These styles govern the hero of the page, which,
 * at least at the moment, contains a video, logo,
 * title, and description.
 */

#hero {
  position: relative;
  top:0;
  left:0;
  width:100%;
  height:calc(100%);
  z-index:0;
  -webkit-box-shadow: 10px 5px 81px -5px rgba(122,115,122,1);
  -moz-box-shadow: 10px 5px 81px -5px rgba(122,115,122,1);
  box-shadow: 10px 5px 81px -5px rgba(122,115,122,1);
}

/* thin layer of darkened opacity on top of the video */
#hero > .backdrop {
  z-index:2;
  top:0;
  left:0;
  width:100%;
  height:100%;
  position:absolute;
}

/* the container surrounding the video (necessary to maintain a full-screen stretch) */
#hero .videoContainer
{
  position:absolute;
  height:100%;
  width:100%;
  overflow: hidden;
}

/* the actual video player */
#hero .videoContainer video {
  min-width: 100%;
  min-height: 100%;
}

/* the wrapper around our logo, title, and description */
#hero .header-content {
  position: absolute;
  top: calc(50% - 117px);
  width: 100%;
  text-align: center;
  color: white;
  z-index:3;
}

/* logo container */
#hero .hero-logo {
  background: transparent;
  z-index: 1;
  font-size: 10px;
  display:inline-block;
}

/* logo */
#hero .hero-logo pre {
  background: transparent;
  font-size: 2px;
}

/**
 * Framework mods
 * -------------
 * These are modifications to the existing framework
 * we are using.
 */

/* hide the current logo (replacing it in the hero) */
#floatinglogo {
  display: none;
}

/* make adjustments to the header */
nav.main-nav {
  top: 0;
  width: 100%;
  position:absolute;
  background:transparent;
}

/* the wrapper contains all content on our page. By default,
this element is compounded with margins and width-limitations
that need to be overriden to accomplish a full-screen model.  */
#wrapper {
  height: 100%;
  width: 100%;
  max-width: none;
  padding: 0;
}

/* To maintain the dimensions that govern the wrapper outside of our hero,
I have replicated the wrapper's original behavior within the post-body-wrapper,
which containes all elements beneath the hero. */
#post-body-wrapper {
  max-width: 600px;
  margin: 0 auto;
  padding: 60px 40px 100px 40px;
}

/* At tablet size, i decided to move the header off of the hero and into the post body.*/
#tablet-header {
  display:none;
  text-align:center;
  margin-top:50px;
  margin-bottom:100px;
}

/* title */
#tablet-header h1 {
  color:#584E4E;
  font-size:40px;
  font-family: Raleway;
}

/* description */
#tablet-header p {
  color:#B3B3B3;
}

/**
 * Responsive styles
 * -----------------
 * These styles govern what elements need to change at different screen restraints.
**/

@media screen and (max-width: 540px) {

  /* Shrink the hero down in height */
  #hero {
    height:50%;
  }

  /* hide everything in the hero content except the logo */
  #hero .header-content h1, #hero .header-content p {
    display:none;
  }

  /* show the tablet header */
  #tablet-header {
    display:block;
  }
}
</style>

<div id='hero' class="background--yellow">
  <div class='backdrop'></div>

  <div class='header-content'>
    <div class='hero-logo'>
      <img class="logo--code-and-coffee"src="assets/images/code-and-coffee-logo.svg" alt="Code and Coffee Logo">
    </div>
    <h1 class="heading heading--black">code + coffee / long beach</h1>
    <p class="text text--black">
      weekly meetups online, from 10:30am to 2:30pm (US Pacific time)
      <br>
      <a class="text--orange" href="https://www.meetup.com/code-and-coffee-long-beach/">RSVP on Meetup</a>
    </p>
  </div>
</div>

<div id='post-body-wrapper'>
  {% include follow.html %}
</div>