Front-End Blogger

front-end-blogger.markdown

Front-End Blogger

Using Mavo (http://mavo.io) you can create a simple HTML blog that allows you to write posts, add widgets, and make changes right in your browser. No need for a clunky CMS or database. Fork it and try it today.

A Pen by Brian Haferkamp on CodePen.

License.

index.pug

//---------------------------------

// This blogging app is unique because it uses a front-end editing system and JSON file to act as the database for the content. It's made possible because of an editing system called, Mavo. You can learn more about it at http://mavo.io. You don't need to know about Mavo to use this blog, however. Just fork it, add your own Github URL, and then export the files. It's just a few HTML, CSS, and JS files so deployment is a breeze. 

//---------------------------------




// To make this blogging app yours, simply put your GitHub username in the URL below.
#app(mv-app="frontend-blogger", mv-storage="http://github.com/brianhaferkamp", mv-plugins="markdown clear", mv-bar="yes-clear")
  header#masthead
    .masthead-inner
      .title
        a.site-title(href="#0")
          h1(property="site-title") Front End Blogger
        .tagline
          h2(property="site-tagline") I write about things other people only dream about
      nav.editing.mv-bar.mv-ui
      
  main
    .post
      section.post-content
        .post-wrapper(property="new-post", mv-multiple)
          header.post-title
            h2(property="post-title", mv-default="New Post Title") Some Post Title
          .post-text
            article.markdown(property="post-text", mv-default="Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias eos qui incidunt magnam, nihil reprehenderit ipsa distinctio animi recusandae ad vel reiciendis quibusdam voluptas fugit! Mollitia ab placeat voluptates accusantium, quae praesentium natus eveniet? Minima velit, itaque eos praesentium sint quae debitis illum laudantium vitae ipsa pariatur, esse natus commodi!") Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias eos qui incidunt magnam, nihil reprehenderit ipsa distinctio animi recusandae ad vel reiciendis quibusdam voluptas fugit! Mollitia ab placeat voluptates accusantium, quae praesentium natus eveniet? Minima velit, itaque eos praesentium sint quae debitis illum laudantium vitae ipsa pariatur, esse natus commodi!
      aside.post-sidebar
        .post-widget
          section.post-widget-image
            img(property="widget-image")(src="https://fillmurray.com/600/600")
        .post-widget(property="new-widget", mv-multiple)
          header.post-widget-header
            h3(property="widget-header", mv-default="Widget Header") Widget Header
          .post-widget-text
            article.markdown(property="widget-text", mv-default="Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus rerum libero enim commodi expedita molestiae, modi veniam at vero est!") Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus rerum libero enim commodi expedita molestiae, modi veniam at vero est!
      
   
aside.to-top.hide
  a(href="#top")
    p <i class="zmdi zmdi-caret-up-circle"></i>

script.js

$(window).scroll(function() {
  if ($(window).scrollTop() > 100) {
    $('.to-top').removeClass('hide');
  } else {
    $('.to-top').addClass('hide');
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.sass

body
  font-family: 'Muli', sans-serif
  margin: 0
  
.hide
  display: none
  
.mv-add
  background:
    color: green
  color: white
  border: 0
  padding: 1rem
  text-transform: Capitalize

#masthead
  background: 
    color: black
  box-shadow: 0px 2px 15px 0px rgba(black, 0.3)
  text-align: center
    
  a
    color: white
    text-decoration: none
    
.masthead-inner
  text-align: center
  max-width: 1170px
  margin: auto
  
@media (min-width: 800px)
  .masthead-inner
    display: flex
    justify-content: space-between
    align-items: center
    
@media (min-width: 800px)
  .title
    display: flex
    align-items: center
  
.mv-bar.mv-ui
  margin-top: 2rem
  background:
    color: black
    image: url()
  justify-content: center
  align-items: center
  padding: 0 0 1rem
    
  .mv-status
    display: none

  button.mv-login
    margin-left: initial
    
  @media (min-width: 800px)
    button
      margin-right: 1rem
      padding: 0
  
@media (min-width: 800px)
  .mv-bar.mv-ui:not(.mv-fixed)
    margin: 0
    padding: 0
    
.mv-bar.mv-ui.mv-compact
  background:
    image: url()
    
.site-title
  
  h1
    display: inline-block
    margin: 0
    padding: 1rem
    font-weight: 400
    text-transform: uppercase
    width: auto
    
@media (min-width: 800px)
  .site-title

    h1

      &:after
        content: '//'
        margin-left: 1rem
    
.tagline
  padding: 0 1rem
  
  h2
    color: white
    font-weight: 300
    font-size: 1rem
    margin: 0
    
@media (min-width: 800px)
  .tagline
    padding: 0
    
.post
  max-width: 1000px
  margin: 3rem auto
  padding: 0 1rem
  
@media (min-width: 600px)
  .post
    display: flex
    margin: 6rem auto
    padding: 0 1rem

@media (min-width: 600px)
  .post-content
    order: 2
    padding-left: 3rem
    
@supports (display: grid)

  @media (min-width: 600px)
    .post
      display: grid
      grid-template-columns: 150px 1fr
      grid-gap: 3rem
      margin: 3rem auto
      padding: 0 1rem
    
  @media (min-width: 768px)
    .post
      grid-template-columns: 250px 1fr
      margin: 6rem auto

  @media (min-width: 600px)
    .post-content
      order: 2
      padding: 0
    
.post-sidebar
  border-top: 1px solid rgba(black, 0.3)
  padding-top: 2rem
  margin-top: 2rem
  
@media (min-width: 600px)
  .post-sidebar
    border: 0
    padding-top: 0
    margin-top: 0
  
.post-widget
  margin-bottom: 2rem
  
.post-widget-image
  
  img
    width: 50%
    
  @media (min-width: 600px)
    img
      width: 100%
  
.post-widget-header
  
  h3
    margin-top: .5rem
      
.post-widget-text
  p
    line-height: 1.5
    font-size: .9rem
      
.post-wrapper
  margin-bottom: 4rem
  
.post-title
  
  h2
    margin-top: 0
    
.post-text
  
  p
    line-height: 1.5
    
.to-top
  position: fixed
  bottom: 2rem
  right: 2rem
  z-index: 100
  
  p
    margin: 0
  
  a
    color: black
    font-size: 2rem
    
    &:hover
      color: rgba(black, 0.8)

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" />