From 72d40475411af87fba5a7b5ab88e08e940817f37 Mon Sep 17 00:00:00 2001 From: Simon Bruder Date: Sat, 21 Apr 2018 15:31:13 +0000 Subject: [PATCH] init --- .gitignore | 1 + Makefile | 2 + css/style.less | 161 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 137 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 301 insertions(+) create mode 100644 .gitignore create mode 100644 Makefile create mode 100644 css/style.less create mode 100644 index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..65de214 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +**.css diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..e45847e --- /dev/null +++ b/Makefile @@ -0,0 +1,2 @@ +css/style.css: css/style.less + lesscpy -x css/style.less css/style.css diff --git a/css/style.less b/css/style.less new file mode 100644 index 0000000..1d30cc9 --- /dev/null +++ b/css/style.less @@ -0,0 +1,161 @@ +@color-1: #047E7C; +@color-2: #0C6D74; +@color-3: #0C6D74; +@color-bg: #F1F2E3; +@color-grey: #787970; + +/* ======== MIXINS ======== */ + +.step-color(@color) { + background-color: @color; + .step-number:not(.done) { + color: @color; + } +} + +// shadow appilied to element under to shadow element +// (shadow is placed on the top) +.top-bottom-shadow { + box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5); +} + +/* ======== ======== */ + +body { + cursor: default; + background-color: @color-bg; + font-family: "Source Sans Pro", sans; + font-weight: 300; +} + +header { + background-color: @color-bg; + padding: 1rem; + + h1 { + //font-size: 50px; + padding: 0.5em 0; + font-weight: 300; + text-align: center; + } +} + +#steps { + color: @color-bg; + .step-heading { + .top-bottom-shadow; + + h2 { + font-weight: 300; + padding: 8px; + + .step-number { + display: inline-block; + margin: 0 0.5em; + text-align: center; + + width: 40px; + height: 40px; + + border: 0px; + border-radius: 50%; + } + + .step-number:not(.done) { + font-weight: 400; + background-color: @color-bg; + color: black; + .number { + display: inline; + } + .check { + display: none; + } + } + + .step-number.done { + background-color: #8ECA63; // green + color: @color-bg; + .number { + display: none; + } + .check { + display: inline; + } + } + } + } + + .step { + form { + .row { + margin-bottom: 0.7em; + .col { + padding: 0 0.5em; + } + } + input { + color: white; // (!) + background-color: rgba(255, 255, 255, 0.30); + border: 0px solid rgba(255, 255, 255, 0.30); + border-radius: 6px; + padding: 0.4em 0.6em; + width: 100%; + &::placeholder { + color: rgba(255, 255, 255, 0.5); + opacity: 1; + } + } + } + + .next-wrapper { + text-align: center; + height: 96px; + padding-top: 2em; + + a { + span { + display: block; + font-size: 24px; + } + + i { + font-size: 48px; + } + } + } + } + + .step-heading, .step { + padding: 2em 30vw; + &.step-heading { + padding-bottom: 1em; + } + &.step { + padding-top: 1em; + } + } + + #step-1, #step-1-heading { + .step-color(@color-1); + } + + #step-2, #step-2-heading { + .step-color(@color-2); + } + + #step-3, #step-3-heading { + .step-color(@color-3); + } +} + +footer { + .top-bottom-shadow; + background-color: @color-bg; + padding: 2em 30vw; + text-align: center; + a { + color: @color-grey; + border-bottom: dotted 1px rgba(0,0,0,0.25); + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..9d1b400 --- /dev/null +++ b/index.html @@ -0,0 +1,137 @@ + + + + + + Mitglied werden | FabLab Bad Windsheim + + + + + +
+

MITGLIED WERDEN

+
+ +
+ + + +
+

+
+ 1 + ✓ +
+ + Persönliche Daten + +

+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ + + +
+

+
+ 2 + ✓ +
+ + Persönliche Daten + +

+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+ + + + + + + + + + + + +