Updated to a prototype

2017-12-03 11:01:37 +01:00
parent aa87d13654
commit 45b2d6819d
6 changed files with 1990 additions and 345 deletions
--- a/style.sass
+++ b/style.sass
@@ -0,0 +1,161 @@
+//@import url(https://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic|Cutive+Mono)
+
+@import url('https://fonts.googleapis.com/css?family=Roboto')
+
+.fallback-message
+  font-family: sans-serif
+  line-height: 1.3
+
+  width: 780px
+  padding: 10px 10px 0
+  margin: 20px 0
+
+  border: 1px solid #E4C652
+  border-radius: 10px
+  background: #EEDC94
+
+.fallback-message p
+  margin-bottom: 10px
+
+.impress-supported .fallback-message
+  display: none
+
+body
+  font-family: Roboto, sans-serif
+  min-height: 740px
+
+  background: #aaccbb
+  color: #ff4466
+
+.step
+  position: relative
+  display: block
+
+  width: 900px
+  height: 700px
+  margin: 20px auto
+  padding: 40px 60px
+
+  text-shadow: 0 2px 2px rgba(0, 10, 0, 0.5)
+  font-size: 30px
+  letter-spacing: -1px
+
+.impress-enabled .step
+  margin: 0
+
+.notes
+  display: none
+
+h1, h2, h3
+  margin-bottom: 0.5em
+  margin-top: 0.5em
+  text-align: center
+
+p
+  text-align: center
+  margin: 0.7em
+
+li
+  margin: 0.2em
+
+a
+  color: inherit
+  text-decoration: none
+  padding: 0 0.1em
+  background: rgba(200, 200, 100, 0.9)
+  text-shadow: -1px 1px 2px rgba(100, 100, 100, 0.9)
+  border-radius: 0.2em
+  border-bottom: 1px solid rgba(100, 100, 100, 0.4)
+  border-left: 1px solid rgba(100, 100, 100, 0.4)
+
+  -webkit-transition: 0.5s
+  -moz-transition: 0.5s
+  -ms-transition: 0.5s
+  -o-transition: 0.5s
+  transition: 0.5s
+
+  &:hover, &:focus
+    background: rgba(200, 200, 2000, 1)
+    text-shadow: -1px px 2px rgba(100, 100, 100, 0.5)
+
+blockquote, q
+  font-style: italic
+  font-weight: 400
+
+em, q
+  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3)
+
+strong
+  text-shadow: -1px 1px 2px rgba(100, 100, 100, 0.5)
+
+strike
+  opacity: 0.7
+
+small
+  font-size: 0.4em
+
+img
+  width: 300px
+
+.impress-enabled
+  pointer-events: none
+  & #impress, #impress-toolbar
+    pointer-events: auto
+  & #impress-help
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5)
+    color: #EEEEEE
+    font-size: 80%
+    position: fixed
+    left: 2em
+    bottom: 2em
+    width: 24em
+    border-radius: 1em
+    padding: 1em
+    text-align: center
+    z-index: 100
+    font-family: Roboto, serif
+    & td
+      padding-left: 1em
+      padding-right: 1em
+
+  & div#impress-toolbar
+    position: fixed
+    right: 1px
+    bottom: 1px
+    opacity: 0.6
+    z-index: 10
+    & span
+      margin-right: 10px
+
+body.impress-mouse-timeout
+  cursor: none
+  & div#impress-toolbar
+    display: none
+
+.impress-progressbar
+  position: absolute
+  right: 118px
+  bottom: 1px
+  left: 118px
+  border-radius: 7px
+  border: 2px solid rgba(100, 100, 100, 0.2)
+  & DIV
+    width: 0
+    height: 2px
+    border-radius: 5px
+    background: rgba(75, 75, 75, 0.4)
+    -webkit-transition: width 1s linear
+    -moz-transition: width 1s linear
+    -ms-transition: width 1s linear
+    -o-transition: width 1s linear
+    transition: width 1s linear
+
+.impress-progress
+  position: absolute
+  left: 59px
+  bottom: 1px
+  text-align: left
+  font-size: 10px
+  opacity: 0.6
+
+