Update README

README.md

@@ -1,28 +1,46 @@
-# README
+# Akkounts
 
-This README would normally document whatever steps are necessary to get the
-application up and running.
+This app allows Kosmos/LDAP users to manage their accounts, including
+credentials, invites, donations, etc..
 
-Things you may want to cover:
+## Development
 
-* Ruby version
+### Rails app
 
-* System dependencies
+Installing dependencies:
 
-* Configuration
+    bundle install
+    yarn install
 
-* Database creation
+Setting up local database (SQLite):
 
-* Database initialization
+    bundle exec rails db:create
+    bundle exec rails db:migrate
 
-* How to run the test suite
+Running the dev server:
 
-* Services (job queues, cache servers, search engines, etc.)
+    bundle exec rails server
 
-* Deployment instructions
+Running all specs:
 
-* ...
+    bundle exec rspec
+
+### LDAP server
+
+TODO make it easy to run a local Kosmos LDAP server for development, without
+manual LDIF imports etc. (or provide a staging instance)
 
 ## Documentation
 
+* [Ruby on Rails](https://guides.rubyonrails.org/)
+* [Sass](https://sass-lang.com/documentation)
+
+### Testing
+
+* [RSpec](https://rspec.info/documentation/)
+* [Capybara](https://rubydoc.info/github/teamcapybara/capybara/master)
+
+### LDAP / Auth
+
+* [devise_ldap_authenticatable](https://github.com/cschiewek/devise_ldap_authenticatable)
 * [net/ldap](https://www.rubydoc.info/gems/net-ldap/Net/LDAP)

app/assets/stylesheets/_mediaqueries.scss

@@ -0,0 +1,33 @@
+$breakpoints-max: (
+  small: 600px,
+  medium: 960px,
+  large: 1280px
+);
+
+$breakpoints-min: (
+  small: 601px,
+  medium: 961px,
+  large: 1281px
+);
+
+@mixin media-max($screen-size) {
+  @if map-has-key($breakpoints-max, $screen-size) {
+    @media (max-width: map-get($breakpoints-max, $screen-size)) {
+      @content;
+    }
+  } @else {
+    // Debugging
+    @warn "'#{$screen-size}' has not been declared as a breakpoint."
+  }
+}
+
+@mixin media-min($screen-size) {
+  @if map-has-key($breakpoints-min, $screen-size) {
+    @media (min-width: map-get($breakpoints-min, $screen-size)) {
+      @content;
+    }
+  } @else {
+    // Debugging
+    @warn "'#{$screen-size}' has not been declared as a breakpoint."
+  }
+}

app/assets/stylesheets/layout.scss

@@ -1,3 +1,5 @@
+@import "mediaqueries";
+
 $content-width: 800px;
 $content-max-width: 100%;
 
@@ -15,6 +17,10 @@ body {
     background: #0d4f99;
     background: linear-gradient(35deg, #8955a0 0, #0d4f99 100%);
 
+    @include media-max(small) {
+      padding: 3rem 0;
+    }
+
     h1 {
       font-size: 1.8rem;
       color: #fff;
@@ -42,6 +48,10 @@ body {
       margin-top: 2rem;
       color: rgba(255,255,255,0.6);
 
+      @include media-max(small) {
+        font-size: 0.85rem;
+      }
+
       strong {
         font-weight: 400;
         color: #fff;
@@ -81,6 +91,14 @@ main {
   margin: 4rem auto;
   text-align: left;
 
+  @include media-max(medium) {
+    max-width: 90%;
+  }
+
+  @include media-max(small) {
+    margin: 3rem auto;
+  }
+
   h2, h3 {
     margin-bottom: 1.5em;
   }
@@ -119,6 +137,11 @@ main {
     border-bottom: 1px dotted #ccc;
     padding-bottom: 4rem;
     margin-bottom: 4rem;
+
+    @include media-max(small) {
+      padding-bottom: 3rem;
+      margin-bottom: 3rem;
+    }
   }
 }
 
@@ -130,6 +153,10 @@ main {
     grid-row-gap: 1rem;
     grid-column-gap: 2rem;
 
+    @include media-max(small) {
+      grid-template-columns: 1fr;
+    }
+
     margin-top: 3rem;
 
     h3 {