<h1>For the Dev</h1>

Because who else would care?

This site was created from scratch, no template.

Header layout > logo, nav, buttons. Navigation is set to link to different sections of the page. This is accomplished by following the below:

Open Pages

Click the + Symbol on Main Navigation

Choose the Link option at the bottom

Link Title is the “page” title - Link is an ID you will create ( I usually have it the same as the link title). Choose a name and enter it with a # symbol the name. So for me if the Link Title is Wedding Party my link will be #weddingParty. Remember the name you choose as you need it for the next part.

Find the section you want to have the navigation link to > edit > add the </>Code element. Inside the code element add <p id=”weddingParty”></p>

Note on adding code to sections. Not all sections allow you to add elements to them. For instance the People > template with the exclamation mark will not allow you to add more elements on top of this. The work around here is to add a fit section above it > add Code element there > make it as small as possible.

Make sure you save all of your changes!

The schedule of events is custom code. I found a responsive vertical timeline design on CodePen (https://codepen.io/web_designer_sanchit/details/eLjvyw) to use here. I copied the html and css > opened vscode and edited it to fit my needs.

I changed the color (font, background) to match my site by grabbing the hex codes from the squarespace Site Styles editor.

I added some classnames to the headings and paragraphs so they didn’t grab the default squarespace sizes (that was too big).

I added the css styles to those class names that I added.

I edited/added some bottom borders for the elements except for the last li element (li:nth-child(4)).

I edited the @media to remove the bottom borders on phones/small devices.

Code Used

<div class="timeline">
   <ul>
          <li>
            <div class="content">
              <h3 class="sectionText">Welcome Drink</h3>
              <p>Grab a few drink before it gets mushy. </p>
            </div>
            <div class="time">
              <h5>2:00PM</h5>
            </div>
          </li>
          
          <li>
            <div class="content">
              <h3 class="sectionText">Ceremony</h3>
              <p>We tie the knot! </p>
            </div>
            <div class="time">
              <h5>3:00PM</h5>
            </div>
          </li>
          
          <li>
            <div class="content">
              <h3 class="sectionText">Reception</h3>
              <p>Let's celebrate being announced husband & wife </p>
            </div>
            <div class="time">
              <h5>3:30PM</h5>
            </div>
          </li>
                <li>
            <div class="content">
              <h3 class="sectionText">First Dance</h3>
              <p>Speeches and awkward first dance! </p>
            </div>
            <div class="time">
              <h5>4:00PM</h5>
            </div>
          </li>
          <div style="clear:both;"></div>
        </ul>
    </div>
.timeline{
    position:relative;
    margin:50px auto;
    padding:40px 0;
    width:1000px;
    box-sizing:border-box;
  }
  .timeline:before{
    content:'';
    position:absolute;
    left:50%;
    width:2px;
    height:100%;
    background:#c5c5c5;
  }
  .timeline ul{
    padding:0;
    margin:0;
  }
  .timeline ul li{
    list-style:none;
    position:relative;
    width:50%;
    padding:20px 40px;
    box-sizing:border-box;
    border-bottom: solid 1px;
  }
  .timeline ul li:nth-child(4){
     border-bottom: none;
    }
  .timeline ul li:nth-child(odd){
    float:left;
    text-align:right;
    clear:both;
  }
  .timeline ul li:nth-child(even){
    float:right;
    text-align:left;
    clear:both;
  }
  .content{
    padding-bottom:20px;
  }
  .timeline ul li:nth-child(odd):before
  {
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    top:24px;
    right:-6px;
    background:#F4F4F4;
    border-radius:50%;
    box-shadow:0 0 0 3px #E7CFC7;
  }
  .sectionText {
      font-size: 40px;
  }
  .timeline ul li:nth-child(even):before
  {
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    top:24px;
    left:-4px;
    background:#F4F4F4;
    border-radius:50%;
    box-shadow:0 0 0 3px #E7CFC7;
  }
  .timeline ul li h5{
    padding:0;
    margin:0;
    color:#F4F4F4;
    font-weight:600;
  }
  .timeline ul li p{
    margin:10px 0 0;
    padding:0;
  }
  .timeline ul li .time h5{
    margin:0;
    padding:0;
    font-size:14px;
  }
  .timeline ul li:nth-child(odd) .time
  {
    position:absolute;
    top:12px;
    right:-165px;
    margin:0;
    padding:8px 16px;
    background:#595F34;
    color:#f4f4f4;
    border-radius:18px;
  }
  .timeline ul li:nth-child(even) .time
  {
    position:absolute;
    top:12px;
    left:-165px;
    margin:0;
    padding:8px 16px;
    background:#595F34;
    color:#f4f4f4;
    border-radius:18px;
  }
  @media(max-width:1000px)
  {
    .timeline{
      width:100%;
    }
  }
  @media(max-width:767px){
    .timeline{
      width:100%;
      padding-bottom:0;
    }
    h1{
      font-size:40px;
      text-align:center;
    }
    .timeline:before{
      left:20px;
      height:100%;
    }
    .timeline ul li {
    border-bottom: none;
    }
    .timeline ul li:nth-child(odd),
    .timeline ul li:nth-child(even)
    {
      width:100%;
      text-align:left;
      padding-left:50px;
      padding-bottom:50px;
    }
    .timeline ul li:nth-child(odd):before,
    .timeline ul li:nth-child(even):before
    {
      top:-18px;
      left:16px;
    }
    .timeline ul li:nth-child(odd) .time,
    .timeline ul li:nth-child(even) .time{
      top:-30px;
      left:50px;
      right:inherit;
    }
  }