/ index.html
index.html
  1  <!-- Banner -->
  2  <section id="banner">
  3  	<div class="inner">
  4  		<!--<img src="images/credenso_light.svg" style="width: 100%; margin: auto; color: white;"/>-->
  5  		<h1><span>Spend time,</span> <span>save money</span></h1>
  6  		<div class="content">
  7              <p style="margin-right: 1em;">At <b>Credenso</b>, we build community
  8              by freely sharing the most valuable resource we have - our time.
  9              </p>
 10  			<ul class="actions special">
 11                  <li><a class="button large icon solid fa-calendar" href="bookings/">Events</a></li>
 12  				<li><a href="#more" class="button large next">More</a></li>
 13  			</ul>
 14  		</div>
 15  	</div>
 16  </section>
 17  
 18  <section id="main" class="wrapper style2">
 19  	<div class="inner">
 20          <div class="anchor" id="more"></div>
 21          <span class="image right"><img src="{{ static }}images/out_front.jpg"></span>
 22          <header>
 23              <h2>About Credenso</h2>
 24              <p>
 25              As a community, Credenso is focused on supporting the needs of our
 26              members and the surrounding neighborhood.
 27              </p>
 28  
 29              <p>
 30              We offer support by volunteering time towards hosting and participating in events and workshops across the city. Our goal is to build a support network for the area. Within this network we can encourage independent businesses, teach new skills, and learn more about our neighbours.
 31              </p>
 32  
 33          	<p>Our events focus on learning practical skills, picking up new hobbies, and building
 34              connections between people. Here's some of what we have coming up:</p>
 35          </header>
 36  
 37          <div style="clear: both">
 38          <h3>Featured Events</h3>
 39          {{#features}}
 40          <section class="box">
 41              <header>
 42              {{# first_media }}
 43              <span class="image rightfit"><img src="{{ preview_url }}"></span>
 44              {{/ first_media }}
 45                  <h4>{{ meta.title }}</h4>
 46                  <span class="icon solid fa-clock">{{ start }}</span>
 47              </header>
 48  
 49              <article class="clamp">
 50              {{# meta.summary }}
 51                  <p class="summary"><i>{{ . }}</i></p>
 52              {{/ meta.summary }}
 53              {{& html }}
 54              </article>
 55              <ul class="actions stacked">
 56                  <li><a class="button solid icon fa-link" href="{{ url }}" hx-boost="false">Learn More</a></li>
 57              </ul>
 58              <span style="display: block; clear: both; width: 100%"></span>
 59          </section>
 60          {{/features}}
 61          {{^features}}
 62          <section class="box">
 63              <p>Nothing right now.</p>
 64          </section>
 65          {{/features}}
 66  
 67          <!--
 68  
 69  
 70          <section class="box">
 71              <header>
 72                  <h4>Weekly Bread</h4>
 73                  <p><i>Using leaven to uplift communities.</i></p>
 74              </header>
 75              <span class="image right"><img src="{{ static }}images/sourdough.jpg"></span>
 76              <p>
 77              What better way to build connection than breaking bread with your
 78              neighbours? Every Sunday afternoon, we bake fresh loaves of
 79              sourdough bread and offer them to the neighbourhood in a
 80              pay-what-you-can format.
 81              </p> 
 82              <p>
 83              If you would like to participate,
 84              we offer a subscription service to sign up on a month-to-month
 85              basis.
 86              </p>
 87              <ul class="actions stacked">
 88                  <li><a class="button solid icon fa-bread-slice" href="bread/">Let's get this bread</a></li>
 89              </ul>
 90              <ul class="actions" style="clear: right"></ul>
 91          </section>
 92  
 93          <section class="box">
 94          <header>
 95              <h4>True North Coffee</h4>
 96              <p><i>Strong, and free.</i></p>
 97          </header>
 98          <span class="image right"><img src="{{ static }}images/latte.jpg"></span>
 99          <p>Need a recharge? We won't charge you for it. Stop in any time our doors are open for coffee and a snack, any way you like it.</p>
100          <p>In addition to our standard café operations, Credenso offers whole bean coffee in refillable containers. We source our coffee beans 
101          from local roasters such as <a href="https://monigram.ca/pages/our-coffee">Monigram</a> so that we can be sure that we're
102          only offering you the best.</p>
103          <ul class="actions stacked">
104          <li><a class="button icon solid fa-coffee" href="details/">Did you say free coffee?</a></li>
105          </ul>
106          <ul class="actions" style="clear: right"></ul>
107          </section>
108  
109          <section class="box">
110          <header>
111              <h4>Community Connections</h4>
112              <p><i>By everyone, for anyone.</i></p>
113          </header>
114          <span class="image right"><img src="{{ static }}images/community.jpg"></span>
115          <p>
116              At Credenso, we don't subscribe to the 'grab and go' lifestyle. We operate our cafés as a space to sit down and (re)connect
117              with the people around you. The reason we are donation-based is to prioritize people over profits, always and forever.
118          </p>
119          <p>
120              We plan on offering a wide variety of free community events out of the space, from open mic nights to web development workshops. 
121              Our space is open to any member who would like to run an event, so check our events calendar to see who's hosting in the near future.
122          </p>
123          <ul class="actions stacked">
124              <li><a class="icon button solid fa-calendar" href="bookings/">Check the schedule</a></li>
125          </ul>
126  
127          <span style="clear: both; width: 100%"></span>
128          </section>
129          </div>
130          -->
131      </div>
132  </section>
133  
134  <style>
135  header h4 {
136      margin-bottom: 0.5em;
137  }
138  
139  .box {
140      position: relative;
141  }
142  
143  .box ul.actions {
144      bottom: 0;
145  }
146  
147  .summary {
148      font-size: 1.2em;
149  }
150  
151  .clamp {
152      display: -webkit-box;
153      -webkit-line-clamp: 4;
154      -webkit-box-orient: vertical;
155      overflow: hidden;
156  }
157  </style>