Add some basic styles

app/assets/stylesheets/_reset.scss

@@ -0,0 +1,13 @@
+html, body, h1, h2, h3, h4, h5, h6, p, pre, a, dl, dt, dd, ol, ul, li {
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+  box-sizing: border-box;
+  overflow: visible;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  line-height: 1;
+}

app/assets/stylesheets/fonts.scss

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'Raleway';
+  src: url('/fonts/raleway-light.woff') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+h1 {
+  font-family: Raleway, sans-serif;
+  font-weight: 300;
+  text-transform: uppercase;
+}

app/assets/stylesheets/layout.scss

@@ -0,0 +1,112 @@
+$content-width: 800px;
+$content-max-width: 100%;
+
+body {
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+}
+
+#wrapper {
+  width: 100%;
+  text-align: center;
+
+  > header {
+    margin: 0 auto;
+    padding: 4rem 0;
+    text-align: center;
+    background: #0d4f99;
+    background: linear-gradient(35deg, #8955a0 0, #0d4f99 100%);
+
+    h1 {
+      font-size: 1.8rem;
+      color: #fff;
+
+      span.project-name {
+        display: none;
+        // font-size: .5em;
+        // text-transform: none;
+        // vertical-align: super;
+      }
+
+      span.beta {
+        font-size: .5em;
+        font-style: italic;
+        text-transform: none;
+        vertical-align: super;
+      }
+
+      span.bolt {
+        color: #ffd000;
+      }
+    }
+
+    p.current-user {
+      margin-top: 2rem;
+      color: rgba(255,255,255,0.6);
+
+      strong {
+        font-weight: 400;
+        color: #fff;
+        // color: #ffd000;
+        // color: #ccff40;
+      }
+    }
+
+    a {
+      color: rgba(255,255,255,0.6);
+      transition: color 0.1s linear;
+
+      &:hover, &:active {
+        color: #fff;
+      }
+    }
+  }
+}
+
+.flash-msg {
+  width: 100%;
+  text-align: center;
+  padding: 2rem 0;
+
+  &.notice {
+    background: #efffc4;
+  }
+
+  &.alert {
+    background: #fff4c2;
+  }
+}
+
+main {
+  width: $content-width;
+  max-width: $content-max-width;
+  margin: 4rem auto;
+  text-align: left;
+
+  h2, h3 {
+    margin-bottom: 1.5em;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+  }
+
+  p {
+    line-height: 1.5rem;
+    margin-bottom: 1rem;
+
+    &.notice {
+      text-align: center;
+    }
+  }
+
+  section {
+    border-bottom: 1px dotted #ccc;
+    padding-bottom: 4rem;
+    margin-bottom: 4rem;
+  }
+}

app/assets/stylesheets/welcome.scss

@@ -1,3 +0,0 @@
-// Place all the styles related to the Welcome controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: https://sass-lang.com/

app/views/dashboard/index.html.erb

@@ -1,9 +1,16 @@
-<h2>Dashboard</h2>
+<section>
-<p>Ohai.</p>
+  <h2>Services</h2>
+  <p>
+    Your Kosmos account and password currently give you access to these
+    services:
+  </p>
+</section>
 
-<h3>Password change</h3>
+<section>
-<p>
+  <h3>Password change</h3>
-  <%= form_with(url: settings_reset_password_path, method: :post) do %>
+  <p>
-    <%= submit_tag("Send me a password reset link") %>
+    <%= form_with(url: settings_reset_password_path, method: :post) do %>
-  <% end %>
+      <%= submit_tag("Send me a password reset link") %>
-</p>
+    <% end %>
+  </p>
+</section>

app/views/devise/passwords/new.html.erb

@@ -6,14 +6,14 @@
   <div class="field">
     <p>
       <%= f.label :cn, 'User' %><br />
-      <%= f.text_field :cn, autofocus: true, autocomplete: "username" %> @ kosmos.org
+      <%= f.text_field :cn, autofocus: true, autocomplete: "username", required: true %> @ kosmos.org
     </p>
   </div>
 
   <div class="field">
     <p>
       <%= f.label :email, 'Email address' %><br />
-      <%= f.email_field :email, autocomplete: "email" %>
+      <%= f.email_field :email, autocomplete: "email", required: true %>
     </p>
   </div>
 

app/views/layouts/application.html.erb

@@ -5,25 +5,37 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 
   <body>
-    <h1>Kosmos Accounts</h1>
+    <div id="wrapper">
-    <% if user_signed_in? %>
+      <header>
-      <p>
+        <h1>
-        Signed in as <strong><%= current_user.cn %>@kosmos.org</strong>.
+          <span class ="project-name">Kosmos</span>
-        <%= link_to "Log out", destroy_user_session_path, method: :delete %>
+          <span class ="site-name">Akkounts</span>
-      </p>
+          <span class="beta"><span class="bolt">⚡</span> beta</span>
-    <% end %>
+        </h1>
+        <% if user_signed_in? %>
+          <p class="current-user">
+            Signed in as <strong><%= current_user.cn %>@kosmos.org</strong>.
+            <%= link_to "Log out", destroy_user_session_path, method: :delete %>
+          </p>
+        <% end %>
+      </header>
 
-    <% flash.each do |type, msg| %>
+      <% flash.each do |type, msg| %>
-      <div class="flash-msg-<%= type %>">
+        <div class="flash-msg <%= type %>">
-        <p><%= msg %></p>
+          <p><%= msg %></p>
-      </div>
+        </div>
-    <% end %>
+      <% end %>
 
-    <%= yield %>
+      <main>
+        <%= yield %>
+      </main>
+    </div>
   </body>
 </html>

app/views/welcome/check_your_email.html.erb

@@ -1,3 +1,3 @@
-<p>
+<p class="notice">
   You can close this window or tab now.
 </p>