Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                - dayOfWeek = [ 'sun', 'mon', 'tue', 'wed', 'thr', 'fri', 'sat']

.bg

#calendar
  header
    i.icons.icon-arrow-left
    p.month May 2016
    i.icons.icon-arrow-right
  | <div class="dayOfWeeks">
  - for (i=0; i<7; i++)
    span(class='#{dayOfWeek[i]}')=dayOfWeek[i]
  | </div>  
  .weeks
    | <div class="week">
    - for (i=1; i<=31;)
      - for (j=0; j<7; j++)
        - if(i <= 31)
          - if (i === 1)
            - j = 5
          - if( j === 0)
            | <div class="week">
          div(id='d#{i}' class='day')
            .date
              span.day=i
              span(class='#{dayOfWeek[j]} dayOfWeek')=dayOfWeek[j]
            .events
              - if(i%3===0 || i%8===0)
                .event
                  .logo
                    i.icon-music-tone-alt
                  .title
                    p Music Event Title
              - else
                .event
                  .logo
                    i.icon-game-controller
                  .title
                    p Game Event Title

              - if(i%4===0)
                .event
                  .logo
                    i.icon-camera
                  .title
                    p Photo Event Title
              - if(i%7==0)
                .event
                  .logo
                    i.icon-film
                  .title
                    p Movie Event Title
          - if (j === 6)
            | </div>
          - i++;
              
            
!

CSS

              
                // just styling///////////////////////////////
@import 'nib';
global-reset()

black = #575757
gray = #F7F7F7
red = #F78686
blue = #86BBF7

.sun
  color red
.sat
  color blue
  
*
  box-sizing border-box
:root
  font-size 16px
  font-family 'Roboto'
  font-weight 300
html
  display block
  height auto
  color black
.bg,
.border
  position fixed
  top 0
  left 0
  width 100%
  height 100%
.bg
  background linear-gradient(bottom, red, #BBFCFC)
  z-index -1
.border
  border 15px solid white
  z-index 10
.border
    15px solid white
    position fixed
    top 0
    left 0
    
#calendar
  margin 0 auto
  display block
  background rgba(white, .4)    

header
  display flex
  justify-content space-between
  padding 1.5rem 0
  border-bottom 1px solid red
  p.month 
    text-align center
    font-size 1.5rem
    font-size 1.5rem 
  i.icons
    padding 0.4rem 
    



// begin calendar css//////////////////////////
#calendar
  .dayOfWeeks 
    display none
  .week
    display block
    > .day
      display flex
      border-bottom 1px solid lightness(gray,90%)
      padding 1rem .5rem
      // background rgba(#fff, .4)
      min-height 80px
      &#d12 //today
        border-bottom 1px solid red
      .date
        flex 0 0 80px
        display flex
        justify-content space-between
        align-items baseline
        padding 0 2rem 0 0
        text-align right
        span
          &.day
            font-size 1.2rem
            flex 0 0 30px
          &.dayOfWeek
            font-size 0.8rem
            margin 0 0 0 0.2em
            text-transform uppercase
      .events
        width 100%
        .event
          display flex
          margin 0 0 0.5rem 0 
          &:last-child
            margin 0
          .logo
            flex 0 0 20px
            margin 0 0.5rem 0 0
            font-size 1.0rem
          .title
            font-size 1.0rem
          

@media only screen and (min-width : 700px)
  #calendar
    margin-top 5vh
    max-width 1000px
    padding 5rem
    header
      margin-bottom 4rem
      border none
      width 90%
      margin-left auto
      margin-right auto
    .dayOfWeeks
      display flex
      justify-content space-between
      text-transform uppercase
      margin 0 0 2rem 0
      span
        text-align center
        flex 0 0 calc(100% / 7)
    .week
      display flex
      &:first-child
        justify-content flex-end
      > .day
        flex 0 0 calc(100% / 7)
        margin 0
        padding 0.5rem
        height auto
        display block
        height 110px 
        border none
        &#d12 //today
          border none
          .date
            .day
              &:after
                content ''
                position absolute
                bottom -0.2rem
                left 0
                width 100%
                border-bottom 1px solid red
        .date
          justify-content center
          text-align center
          margin 0 0 1.5rem 0
          padding 0
          .dayOfWeek
            display none
          .day
            position relative
        .events
          display flex
          justify-content center
          .event
            margin 0 .5rem 0 0
            &:last-child
              margin 0
            .logo
              margin 0
        .title
          margin 0.5rem
          display none

              
            
!

JS

              
                
              
            
!
999px

Console