Fix layout code style

CHANGELOG.md

@@ -5,7 +5,6 @@
 ### BREAKING
 
 * `.is-text-*` renamed to `.has-text-*`
-* `.is-gapless` renamed to `.has-no-gap`
 * removed `.is-fullwidth` helper
 
 ### Added

bulma/base/content.sass

@@ -1,13 +1,15 @@
 .content
   @extend .block
-  &.is-medium
+  // Inline
-    font-size: $size-5
+  li + li
-    code
+    margin-top: 0.25em
-      font-size: $size-6
+  // Block
-  &.is-large
+  blockquote,
-    font-size: $size-4
+  p,
-    code
+  ol,
-      font-size: $size-5
+  ul
+    &:not(:last-child)
+      margin-bottom: 1em
   h1,
   h2,
   h3,
@@ -23,6 +25,10 @@
   h3
     &:not(:first-child)
       margin-top: 40px
+  blockquote
+    background: $background
+    border-left: 5px solid $border
+    padding: 1.5em
   h1
     font-size: 2em
   h2
@@ -35,24 +41,27 @@
     font-size: 1.125em
   h6
     font-size: 1em
-  p:not(:last-child)
-    margin-bottom: 1em
-  li + li
-    margin-top: 0.25em
   ol
     list-style: decimal outside
-    margin: 1em 2em
+    margin-left: 2em
+    margin-right: 2em
+    margin-top: 1em
   ul
     list-style: disc outside
-    margin: 1em 2em
+    margin-left: 2em
+    margin-right: 2em
+    margin-top: 1em
     ul
       list-style-type: circle
       margin-top: 0.5em
       ul
         list-style-type: square
-  blockquote
+  // Sizes
-    background: $background
+  &.is-medium
-    border-left: 5px solid $border
+    font-size: $size-5
-    padding: 1.5em
+    code
-    &:not(:last-child)
+      font-size: $size-6
-      margin-bottom: 1em
+  &.is-large
+    font-size: $size-4
+    code
+      font-size: $size-5

bulma/base/generic.sass

@@ -7,9 +7,19 @@ html
   overflow-x: hidden
   overflow-y: scroll
   text-rendering: optimizeLegibility
-  &.has-modal-open
+  // Modifiers
+  &.has-modal
     overflow: hidden
 
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section
+  display: block
+
 body,
 button,
 input,
@@ -21,7 +31,7 @@ code,
 pre
   -moz-osx-font-smoothing: auto
   -webkit-font-smoothing: auto
-  font-family: monospace
+  font-family: $family-code
   line-height: 1.25
 
 body
@@ -29,6 +39,8 @@ body
   font-size: 1rem
   line-height: 1.428571428571429
 
+// Inline
+
 a
   color: $link
   cursor: pointer
@@ -61,14 +73,7 @@ small
 strong
   color: $text-strong
 
-article,
+// Block
-aside,
-figure,
-footer,
-header,
-hgroup,
-section
-  display: block
 
 pre
   background: $pre-background
@@ -84,21 +89,25 @@ pre
 
 table
   width: 100%
-  th,
+  td,
-  td
+  th
     text-align: left
     vertical-align: top
   th
     color: $text-strong
 
-.block:not(:last-child)
+// Classes
-  margin-bottom: 20px
+
+.block
+  &:not(:last-child)
+    margin-bottom: 20px
 
 .container
   position: relative
   +desktop
     margin: 0 auto
     max-width: 960px
+    // Modifiers
     &.is-fluid
       margin: 0 20px
       max-width: none

bulma/components/card.sass

@@ -46,6 +46,7 @@
 .card
   background: white
   box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  color: $text
   max-width: 100%
   position: relative
   width: 300px

bulma/components/grid.sass

@@ -109,7 +109,7 @@
     justify-content: center
   &.is-mobile
     display: flex
-  &.has-no-gap
+  &.is-gapless
     margin-left: 0
     margin-right: 0
     &:not(:last-child)

bulma/config/generated-variables.sass

@@ -67,6 +67,7 @@ $control-active-border: $link
 // Typography
 
 $family-primary: $family-sans-serif
+$family-code: $family-monospace
 
 $size-small: $size-7
 $size-normal: $size-6

bulma/elements/buttons.sass

@@ -65,6 +65,8 @@
           color: $color-invert
           &:hover
             background: rgba(black, 0.05)
+            border-color: $color-invert
+            color: $color-invert
       &.is-loading
         &:after
           border-color: transparent transparent $color-invert $color-invert !important

bulma/layout/header.sass

@@ -10,8 +10,10 @@
     align-items: stretch
     display: flex
     width: 100%
+  // Modifiers
   &.has-shadow
     box-shadow: 0 1px 2px rgba(black, 0.1)
+  // Responsiveness
   +mobile
     .container
       flex-direction: column
@@ -23,6 +25,7 @@
   position: absolute
   right: 0
   top: 0
+  // Responsiveness
   +tablet
     display: none
 
@@ -32,20 +35,21 @@
   align-items: center
   display: flex
   padding: 10px
-  img
-    max-height: 24px
   a
     flex-grow: 1
+  img
+    max-height: 24px
+  .button + .button
+    margin-left: 10px
   .fa
     font-size: 21px
     line-height: 24px
-  .button + .button
-    margin-left: 10px
   .tag
     &:first-child
       margin-right: 5px
     &:last-child
       margin-left: 5px
+  // Responsiveness
   +mobile
     text-align: left
 
@@ -54,6 +58,7 @@ a.header-item
   color: $text
   &:hover
     color: $link-hover
+  // Modifiers
   &.is-active
     color: $link-active
 
@@ -74,6 +79,7 @@ a.header-item
   padding: 13px 15px
   &:hover
     border-bottom: 1px solid $link
+  // Modifiers
   &.is-active
     border-bottom: 3px solid $link
     color: $link
@@ -87,19 +93,19 @@ a.header-item
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
+  // Responsiveness
   +mobile
     height: $header-height
   +desktop
-    .header-item:first-child
+    margin-left: -10px
-      padding-left: 0
 
 .header-right
   align-items: stretch
+  // Responsiveness
   +tablet
     display: flex
   +desktop
-    .header-item:last-child
+    margin-right: -10px
-      padding-right: 0
 
 .header-full
   align-items: stretch
@@ -120,12 +126,14 @@ a.header-item
       width: 100%
 
 .header-menu
+  // Responsiveness
   +mobile
     box-shadow: 0 4px 7px rgba(black, 0.1)
     display: none
     .header-item
       border-top: 1px solid rgba($border, 0.5)
       padding: 10px
+    // Modifiers
     &.is-active
       display: block
 

bulma/layout/hero.sass

@@ -1,8 +1,6 @@
 .hero-video
   +overlay
   overflow: hidden
-  &.is-transparent
-    opacity: 0.3
   video
     left: 50%
     min-height: 100%
@@ -10,16 +8,22 @@
     position: absolute
     top: 50%
     transform: translate3d(-50%, -50%, 0)
+  // Modifiers
+  &.is-transparent
+    opacity: 0.3
+  // Responsiveness
   +mobile
     display: none
 
 .hero-content
   padding: 40px 20px
+  // Responsiveness
   +desktop
     padding: 40px 0
 
 .hero-buttons
   margin-top: 20px
+  // Responsiveness
   +mobile
     .button
       display: block
@@ -42,9 +46,11 @@
       border: none
     ul
       border-bottom: none
+    // Modifiers
     &.is-boxed
       a
         padding: 8px 15px
+  // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
@@ -88,10 +94,12 @@
             &:hover
               background: $color-invert
               color: $color
+      // Modifiers
       &.is-bold
         $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
         $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
         background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+      // Responsiveness
       +mobile
         .header-toggle
           span
@@ -104,28 +112,21 @@
         .header-menu
           .header-item
             border-top-color: rgba($color-invert, 0.2)
+  // Sizes
   &.is-fullheight,
   &.is-large
+    // Responsiveness
     +tablet
       .tabs
         font-size: $size-medium
   &.is-medium
+    // Responsiveness
     +tablet
       .hero-content
         padding: 120px 20px
     +desktop
       .hero-content
         padding: 120px 0
-  &.is-large
-    .tabs
-      a
-        padding: 10px 15px
-    +tablet
-      .hero-content
-        padding: 240px 20px
-    +desktop
-      .hero-content
-        padding: 240px 0
   &.is-fullheight
     align-items: stretch
     display: flex
@@ -140,3 +141,14 @@
       flex: 1
       flex-direction: column
       justify-content: center
+  &.is-large
+    .tabs
+      a
+        padding: 10px 15px
+    // Responsiveness
+    +tablet
+      .hero-content
+        padding: 240px 20px
+    +desktop
+      .hero-content
+        padding: 240px 0

bulma/layout/section.sass

@@ -3,8 +3,10 @@
   padding: 40px 20px
   & + .section
     border-top: 1px solid rgba($border, 0.5)
+  // Responsiveness
   +desktop
     padding: 40px 0
+    // Sizes
     &.is-medium
       padding: 120px 0
     &.is-large