Design refresh
/ test (push) Waiting to run Details

This commit is contained in:
Trevor Vallender 2024-03-06 20:31:14 +00:00
parent 7b9f27815b
commit 65a14e9f19
55 changed files with 172 additions and 62 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 329 KiB

View File

@ -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"); }

View File

@ -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;

View File

@ -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(--background-color);
background-color: var(--dark-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 {
max-width: 60em;
margin: 0 auto;
#flash_wrapper {
display: contents;
}
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;
}

View File

@ -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;

View File

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

View File

@ -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? %>
<p><%= t(".empty") %></p>
<% else %>
<ul id="blog_posts">
<% @blog_posts.each do |blog_post| %>
<li><%= render blog_post %></li>
<% end %>
</ul>
<%= paginate @blog_posts %>
<% end %>
<% if @blog_posts.empty? %>
<p><%= t(".empty") %></p>
<% else %>
<ul id="blog_posts">
<% @blog_posts.each do |blog_post| %>
<li><%= render blog_post %></li>
<% end %>
</ul>
<%= paginate @blog_posts %>
<% end %>
</section>

View File

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

View File

@ -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>

View File

@ -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" %>

View File

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

View File

@ -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? %>
<p><%= t(".empty") %></p>
<% else %>
<ul id="microposts">
<% @microposts.each do |micropost| %>
<li><%= render micropost %></li>
<% end %>
</ul>
<%= paginate @microposts %>
<% end %>
<% if @microposts.empty? %>
<p><%= t(".empty") %></p>
<% else %>
<ul id="microposts">
<% @microposts.each do |micropost| %>
<li><%= render micropost %></li>
<% end %>
</ul>
<%= paginate @microposts %>
<% end %>
</section>

View File

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

View File

@ -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:

View File

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

View File

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

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
public/fonts/rogue.otf Normal file

Binary file not shown.