Design refresh

app/assets/stylesheets/_inter.css

@@ -0,0 +1,57 @@
+/* Variable fonts usage:
+:root { font-family: "Inter", sans-serif; }
+@supports (font-variation-settings: normal) {
+  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
+} */
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: InterVariable;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+
+/* static fonts */
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("/fonts/Inter-Thin.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("/fonts/Inter-ThinItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/Inter-ExtraLight.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("/fonts/Inter-ExtraLightItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/Inter-Light.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/Inter-LightItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Italic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Inter-Medium.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/Inter-MediumItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Inter-Bold.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/Inter-BoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/Inter-ExtraBold.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/Inter-Black.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/Inter-BlackItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("/fonts/InterDisplay-Thin.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("/fonts/InterDisplay-ThinItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/InterDisplay-ExtraLight.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("/fonts/InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/InterDisplay-Light.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/InterDisplay-LightItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/InterDisplay-Regular.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/InterDisplay-Italic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/InterDisplay-Medium.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/InterDisplay-MediumItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/InterDisplay-SemiBold.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/InterDisplay-Bold.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/InterDisplay-BoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/InterDisplay-ExtraBold.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/InterDisplay-Black.woff2") format("woff2"); }
+@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/InterDisplay-BlackItalic.woff2") format("woff2"); }

app/assets/stylesheets/blog_posts.css

@@ -31,7 +31,8 @@ form#blog_post_form {
   margin: 1em auto;
   padding: .5em;
   background-color: var(--inset-background-color);
-  border: 1px solid var(--border-color);
+  grid-column: 2;
+  grid-row: 1;
 
   > .created_at {
     text-align: right;

app/assets/stylesheets/main.css

@@ -1,9 +1,14 @@
+@font-face {
+  font-family: "Rogue";
+  src: url("/fonts/rogue.otf");
+}
+
 :root {
   --border-color: #282828;
   --highlight-color: #d65d0e;
   --background-color: #928374;
   --dark-background-color: #1d2021;
-  --inset-background-color: #fbf1c7;
+  --inset-background-color: #fffffa;
   --alert-border-color: #98971a;
   --form-error-color: #cc241d;
 }
@@ -12,10 +17,15 @@
   box-sizing: border-box;
 }
 
+:root { font-family: 'Inter', sans-serif; }
+@supports (font-variation-settings: normal) {
+  :root { font-family: 'InterVariable', sans-serif; }
+}
+
 body {
   font-size: 1.2em;
-  font-family: sans-serif;
+  background-color: var(--dark-background-color);
-  background-color: var(--background-color);
+  position: relative;
 }
 
 strong {
@@ -35,6 +45,7 @@ ul {
 }
 
 h1, h2, h3, h4, h5, h6, h7 {
+  font-family: "Rogue", sans-serif;
   font-weight: bold;
   padding: .5em 0;
 }
@@ -44,10 +55,12 @@ h3, h4, h5, h6, h7 {
 }
 
 h1 {
-  font-size: 4em;
+  background-color: var(--dark-background-color);
+  font-size: 5em;
   text-align: center;
   color: var(--highlight-color);
   -webkit-text-stroke: 1px var(--background-color);
+  padding: .25em 0;
 }
 
 h2 {
@@ -55,13 +68,20 @@ h2 {
 }
 
 header {
-  background-color: var(--dark-background-color);
+  display: contents;
 }
 
 nav {
+  background-color: var(--dark-background-color);
   padding: 1em;
+  font-family: "Rogue", sans-serif;
+  position: sticky;
+  top: 0;
   > ul {
     text-align: center;
+    animation-name: move-menu;
+    animation-duration: 3s;
+    animation-timeline: scroll(root block);
     > li {
       display: inline;
       padding: 0 2em;
@@ -77,9 +97,8 @@ nav {
   }
 }
 
-main {
+#flash_wrapper {
-  max-width: 60em;
+  display: contents;
-  margin: 0 auto;
 }
 
 p {
@@ -98,16 +117,6 @@ a:link:has(h1), a:visited:has(h1) {
   text-decoration: none;
 }
 
-section.content, aside {
-  margin: 1em auto;
-  padding: .5em;
-  background-color: var(--inset-background-color);
-  border: 1px solid var(--border-color);
-}
-
-aside {
-  float: left;
-}
 
 dl {
   line-height: 1.3em;
@@ -122,6 +131,26 @@ dd {
 }
 
 main {
+  background-color: var(--inset-background-color);
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: 1fr;
+}
+ @media (max-width: 800px) {
+  main {
+    display: flex;
+    flex-direction: column;
+  }
+}
+section.content {
+  grid-column: 2;
+  padding: 1em;
+}
+
+aside {
+  font-size: .8em;
+  grid-column: 1;
+  grid-row: 1;
   padding: 1em;
 }
 
@@ -195,3 +224,16 @@ div.notice {
 div.alert {
   border-color: var(--alert-border-color);
 }
+
+.avatar {
+  border: 2px solid var(--dark-background-color);
+  border-radius: 50%;
+  box-shadow: 6px 5px 5px rgba(0, 0, 0, 0.5);
+  margin: 0 auto;
+}
+
+.bordered-aside {
+  border: 2px solid var(--dark-background-color);
+  border-radius: .5em;
+  margin: 1em 0;
+}

app/assets/stylesheets/microposts.css

@@ -31,8 +31,6 @@ ul#microposts {
   margin: 1em auto;
   padding: .5em;
   background-color: var(--inset-background-color);
-  border: 1px solid var(--border-color);
-
   > .created_at {
     text-align: right;
     font-size: .8em;

app/views/blog_posts/_blog_post.html.erb

@@ -6,3 +6,4 @@
     <%= link_to blog_post.created_at.strftime("%Y-%m-%d %H:%M"), blog_post %>
   </div>
 </div>
+<hr>

app/views/blog_posts/index.html.erb

@@ -1,14 +1,16 @@
-<h2><%= t(".blog_posts") %></h2>
+<section class="content">
+  <h2><%= t(".blog_posts") %></h2>
 
-<%= link_to t(".new"), new_blog_post_path if logged_in? %>
+  <%= link_to t(".new"), new_blog_post_path if logged_in? %>
 
-<% if @blog_posts.empty? %>
+  <% if @blog_posts.empty? %>
-  <p><%= t(".empty") %></p>
+    <p><%= t(".empty") %></p>
-<% else %>
+  <% else %>
-  <ul id="blog_posts">
+    <ul id="blog_posts">
-    <% @blog_posts.each do |blog_post| %>
+      <% @blog_posts.each do |blog_post| %>
-      <li><%= render blog_post %></li>
+        <li><%= render blog_post %></li>
-    <% end %>
+      <% end %>
-  </ul>
+    </ul>
-  <%= paginate @blog_posts %>
+    <%= paginate @blog_posts %>
-<% end %>
+  <% end %>
+</section>

app/views/blog_posts/show.html.erb

@@ -1,11 +1,12 @@
-<div id="blog_post_<%= @blog_post.id %>" class="blog_post">
+<section class="content">
-  <h2><%= @blog_post.title %></h2>
+  <div id="blog_post_<%= @blog_post.id %>" class="blog_post">
-  <p><%= @blog_post.content %></p>
+    <h2><%= @blog_post.title %></h2>
-  <div class="created_at">
+    <p><%= @blog_post.content %></p>
-    <%= link_to "Edit", edit_blog_post_path(@blog_post) if @blog_post.user == current_user %>
+    <div class="created_at">
-    <%= "Updated at #{updated_at(@blog_post)} | " %>
+      <%= link_to "Edit", edit_blog_post_path(@blog_post) if @blog_post.user == current_user %>
-    <%= link_to @blog_post.created_at.strftime("%Y-%m-%d %H:%M"), @blog_post %>
+      <%= "Updated at #{updated_at(@blog_post)} | " %>
+      <%= link_to @blog_post.created_at.strftime("%Y-%m-%d %H:%M"), @blog_post %>
+    </div>
   </div>
-</div>
+</section>
-
 <%= t(".discuss_post_html") %>

app/views/home_pages/index.html.erb

@@ -8,6 +8,9 @@
 </section>
 
 <aside>
+  <%= image_tag "avatar.png", alt: "T S Vallender", width: 200, height: 200, class: "avatar" %>
+
+<aside class="bordered-aside">
   <h3>Find me:</h3>
   <dl>
     <dt>Mastodon</dt>

app/views/layouts/application.html.erb

@@ -12,9 +12,6 @@
 
   <body>
     <header>
-      <%= link_to root_path do %>
-        <h1><%= t(".site_title") %></h1>
-      <% end %>
       <nav>
         <ul>
           <li><%= link_to t(".home"), root_path %></li>
@@ -27,6 +24,9 @@
           <% end %>
         </ul>
       </nav>
+      <%= link_to root_path do %>
+        <h1><%= t(".site_title") %></h1>
+      <% end %>
     </header>
     <main>
       <%= render "shared/flash" %>

app/views/microposts/_micropost.html.erb

@@ -13,3 +13,4 @@
     <%= link_to micropost.created_at.strftime("%Y-%m-%d %H:%M"), micropost %>
   </div>
 </div>
+<hr>

app/views/microposts/index.html.erb

@@ -1,16 +1,18 @@
-<h2><%= t(".microposts") %></h2>
+<section class="content">
+  <h2><%= t(".microposts") %></h2>
 
-<%= link_to t(".new"), new_micropost_path if logged_in? %>
+  <%= link_to t(".new"), new_micropost_path if logged_in? %>
 
-<%= t(".intro_html") %>
+  <%= t(".intro_html") %>
 
-<% if @microposts.empty? %>
+  <% if @microposts.empty? %>
-  <p><%= t(".empty") %></p>
+    <p><%= t(".empty") %></p>
-<% else %>
+  <% else %>
-  <ul id="microposts">
+    <ul id="microposts">
-    <% @microposts.each do |micropost| %>
+      <% @microposts.each do |micropost| %>
-      <li><%= render micropost %></li>
+        <li><%= render micropost %></li>
-    <% end %>
+      <% end %>
-  </ul>
+    </ul>
-  <%= paginate @microposts %>
+    <%= paginate @microposts %>
-<% end %>
+  <% end %>
+</section>

app/views/microposts/show.html.erb

@@ -1 +1,3 @@
-<%= render @micropost %>
+<section class="content">
+  <%= render @micropost %>
+</section>

config/locales/views/blog_posts/en.yml

@@ -1,7 +1,7 @@
 en:
   blog_posts:
     index:
-      blog_posts: blog posts
+      blog_posts: Blog posts
       empty: You have no blog posts yet.
       new: New blog post
     new:

config/locales/views/layouts/application.yml

@@ -8,5 +8,5 @@ en:
       profile: Profile
       register: Register
       blog_posts: Blog
-      microposts: μposts
+      microposts: Microposts
       diary_entries: Diary

config/locales/views/microposts/en.yml

@@ -1,7 +1,7 @@
 en:
   microposts:
     index:
-      microposts: μposts
+      microposts: Microposts
       empty: You have no μposts yet.
       new: New μpost
       intro_html: >