Fix styling for more displays

_sass/draft.sass

@@ -4,18 +4,17 @@ html
 
 body
   font-size: 3em
-  font-weight: 400
   letter-spacing: 2px
   line-height: 1.7em
   margin: 0
-  text-align: left
+
 
 #app
-  margin: 5vh 1em
+  margin: 5vh .5em 5vh 1em !important
   bottom: 0
   transition: margin .25s ease
-  position: absolute
-  width: calc(100% - 2em)
+  position: relative
+  width: calc(100% - 1.5em)
 
 *
   transition: all .01s ease
@@ -31,26 +30,14 @@ h6
   line-height: 1em
 
 h1
-  font-size: 3em
+  display: inline
+  font-size: 1.5em
   letter-spacing: 20px
   text-transform: uppercase
-
-h2
-  font-size: 2em
-  font-weight: 600
-  letter-spacing: .5em
-  line-height: 1.5em
-  text-transform: uppercase
-
-h3
-  font-size: 1.75em
-  font-weight: 500
-
-h4
-  font-size: 1.5em
+  flex: 1 // Allows h1 to take available space
+  text-align: center // Centers the text within the h1
 
 article > span:not(.beer-name)
-  // margin-right: 15px
 a
   color: inherit
   text-decoration: none
@@ -59,24 +46,8 @@ p
   font-family: Lora, serif
   font-size: 1.2em
 
-body:not(.kiosk)
-  h1
-    display: none !important
-  a
-    display: inline-block
-    position: relative
-    text-decoration: underline
-    &:before
-      background-color: black
-      content: ""
-      height: 100%
-      position: absolute
-      right: -1px
-      width: 9px
-
 section
   margin-bottom: 3em
-  // .kiosk &
 hide
   display: none
 
@@ -100,8 +71,11 @@ article
   text-decoration-style: double
 
 header
-  text-align: center
-  text-transform: uppercase
+  display: flex
+  justify-content: space-between // Keeps logo on the left and centers h1
+  align-items: center // Vertically centers items
+  text-align: center // Centers text in h1
+
 aside
   display: inline-block
 img
@@ -122,34 +96,13 @@ img[src$=".svg"]
 
 .logo
   height: 102px
-  position: relative
-  width: 100px
-  top: 100px
-  .kiosk &
-    left: 80px
-    position: absolute
-    top: 40px
-  .kiosk.narrow &
-    left: 50px
-    right: auto
-#qr
-  position: absolute
-  right: 8em
-  top: calc(50vh - 200px)
-  padding-top: 0
-  image
-    filter: invert(1)
+  margin: 1em 0 0 1em
+  display: inline
 
 .beer-name
   font-weight: 600
   letter-spacing: .2em
   text-transform: uppercase
-  .narrow &
-    letter-spacing: .2em
-
-body:not(.narrow) .price
-  display: inline-block
-  width: 75px
 
 .beer-style,
 .percent,
@@ -160,9 +113,6 @@ body:not(.narrow) .price
   font-size: .5em
   padding: 10px 25px
   vertical-align: top
-  .invert &
-    // background: black
-    // color: white
 .option
   font-size: .5em
   letter-spacing: 1px
@@ -252,80 +202,10 @@ img[src$=".webp"]
   letter-spacing: 3px
   width: 70px
 
-@media screen and (max-width: 1250px)
-  body
-    font-size: 2.5em
-  article
-    margin: 1em 0
-  #qr
-    display: none
-
-.kiosk:not(.invert)
-  @media screen and (max-width:1100px)
-    .beer-name
-      display: block
-    .beer-info
-      display: none
-    .beer-style,
-    .percent
-      margin: 0
-      padding: .75em 1.5em
-    article
-      text-align: center
-    .logo
-      width: 18vw
-    .logo
-      margin: .5em auto 0
-      padding: 0
-
-header
-  h1,
-  img
-    display: inline
-  h1
-    font-size: 75px
-    position: absolute
-    top: 0
-    transform: translateX(-50%)
-
-// Beer list
 .multi-column
   display: flex
   flex-direction: row
-
-.shockwave .beer-name
-
-  animation: shockwaveJump 3s ease-out infinite
-  color: #ff1f1f
-  display: inline-block
-  position: relative
-  &:after,
-  &:before
-    content: ''
-    position: absolute
-    top: 0
-    left: 0
-    bottom: 0
-    right: 0
-    border-radius: 5px
-  &:after
-    animation: shockwave 3s .65s ease-out infinite
-  &:before
-    animation: shockwave 3s .5s ease-out infinite
-
-@keyframes shockwaveJump
-  0%
-    transform: scale(1)
-  80%
-    transform: scale(1.08)
-  85%
-     transform: scale(0.98)
-  90%
-    transform: scale(1.02)
-  95%
-    transform: scale(0.98)
-  100%
-    transform: scale(1)
+  flex-wrap: wrap // Allow wrapping for responsiveness
 
 @keyframes fadein
   from
@@ -334,24 +214,6 @@ header
   to
     opacity: 1
 
-
-.invert
-  article
-    font-size: .9em
-    margin: .5em
-    .description
-      // font-size: .2em
-      font-weight: bold
-  body
-    font-size: 14px
-  .description
-    // display: none
-  .logo
-    // filter: invert(0)
-    top: 80px
-    left: calc(50% - 100px)
-    width: 200px
-
 @media print
   @page
     size: 11in 8.5in