Adds design

Author: href

.gitignore

@@ -107,4 +107,7 @@ venv.bak/
 .mypy_cache/
 
 # Generated scss files
-**/assets/css/style.css
+**/assets/css/style.css
+
+# Build output
+sps20/build

.sass-lint.yml

@@ -0,0 +1,25 @@
+rules:
+  no-css-comments: 0
+  indentation:
+    - 2
+    -
+      size: 4
+  force-pseudo-nesting: 0
+  no-ids: 0
+  force-element-nesting: 0
+  class-name-format: 0
+  no-important: 0
+  no-qualifying-elements: 0
+  no-trailing-zero: 0
+  nesting-depth: 0
+  force-attribute-nesting: 0
+  quotes: 0
+  no-vendor-prefixes: 0
+  no-color-literals: 0
+  no-transition-all: 0
+
+files:
+  ignore:
+    - '**/font-awesome/scss/*.scss'
+    - '**/foundation/*/*.scss'
+    - '**/font-*.scss'

makefile

@@ -2,11 +2,14 @@ usage:
 	@echo "Make targets: install, serve"
 
 install: in_virtual_env
-	pip install lektor
+	pip install -r requirements.txt
 
 serve: in_virtual_env
 	cd sps20 && lektor server -f scss --browse
 
+build: in_virtual_env
+	cd sps20 && lektor build -f scss --output-path build
+
 in_virtual_env:
 	@if python -c 'import sys; (hasattr(sys, "real_prefix") or (hasattr(sys, "base_prefix") and sys.base_prefix != sys.prefix)) and sys.exit(1) or sys.exit(0)'; then \
 		echo "Error: An active virtual environment is required"; exit 1; \

requirements.txt

@@ -0,0 +1 @@
+lektor

runtime.txt

@@ -0,0 +1 @@
+3.7

sps20/assets/css/spectre-exp.css

@@ -0,0 +1,38 @@
+// Accordions
+.accordion {
+  input:checked ~,
+  &[open] {
+    & .accordion-header {
+      .icon {
+        transform: rotate(90deg);
+      }
+    }
+
+    & .accordion-body {
+      max-height: 50rem;
+    }
+  }
+
+  .accordion-header {
+    display: block;
+    padding: $unit-1 $unit-2;
+
+    .icon {
+      transition: transform .25s;
+    }
+  }
+
+  .accordion-body {
+    margin-bottom: $layout-spacing;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height .25s;
+  }
+}
+
+// Remove default details marker in Webkit
+summary.accordion-header {
+  &::-webkit-details-marker {
+    display: none;
+  }
+}

sps20/assets/css/spectre-icons.css

@@ -0,0 +1,20 @@
+// Animations
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-$unit-8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

sps20/assets/css/spectre.css

@@ -0,0 +1,43 @@
+// Optimized for East Asian CJK
+html:lang(zh),
+html:lang(zh-Hans),
+.lang-zh,
+.lang-zh-hans {
+  font-family: $cjk-zh-hans-font-family;
+}
+
+html:lang(zh-Hant),
+.lang-zh-hant {
+  font-family: $cjk-zh-hant-font-family;
+}
+
+html:lang(ja),
+.lang-ja {
+  font-family: $cjk-jp-font-family;
+}
+
+html:lang(ko),
+.lang-ko {
+  font-family: $cjk-ko-font-family;
+}
+
+:lang(zh),
+:lang(ja),
+.lang-cjk {
+  ins,
+  u {
+    border-bottom: $border-width solid;
+    text-decoration: none;
+  }
+
+  del + del,
+  del + s,
+  ins + ins,
+  ins + u,
+  s + del,
+  s + s,
+  u + ins,
+  u + u {
+    margin-left: .125em;
+  }
+}

sps20/assets/hero.jpg

@@ -0,0 +1,47 @@
+// Autocomplete
+.form-autocomplete {
+  position: relative;
+
+  .form-autocomplete-input {
+    align-content: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    min-height: $unit-8;
+    padding: $unit-h;
+
+    &.is-focused {
+      @include control-shadow();
+      border-color: $primary-color;
+    }
+
+    .form-input {
+      border-color: transparent;
+      box-shadow: none;
+      display: inline-block;
+      flex: 1 0 auto;
+      height: $unit-6;
+      line-height: $unit-4;
+      margin: $unit-h;
+      width: auto;
+    }
+  }
+
+  .menu {
+    left: 0;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+
+  &.autocomplete-oneline {
+    .form-autocomplete-input {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+
+    .chip {
+      flex: 1 0 auto;
+    }
+  }
+}