tsv
/
Soc
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 329 KiB

57
app/assets/stylesheets/_inter.css Normal file
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"); }

3
app/assets/stylesheets/blog_posts.css
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;

78
app/assets/stylesheets/main.css
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;
}

2
app/assets/stylesheets/microposts.css
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;

1
app/views/blog_posts/_blog_post.html.erb
View File

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

26
app/views/blog_posts/index.html.erb
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>

19
app/views/blog_posts/show.html.erb
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") %>

3
app/views/home_pages/index.html.erb
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>

6
app/views/layouts/application.html.erb
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" %>

1
app/views/microposts/_micropost.html.erb
View File

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

28
app/views/microposts/index.html.erb
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>

4
app/views/microposts/show.html.erb
View File

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

2
config/locales/views/blog_posts/en.yml
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:

2
config/locales/views/layouts/application.yml
View File

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

2
config/locales/views/microposts/en.yml
View File

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

BIN
public/fonts/Inter-Black.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-BlackItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-BoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-ExtraBold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-ExtraBoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-ExtraLight.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-ExtraLightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-Light.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-LightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-MediumItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-SemiBold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-SemiBoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-Thin.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/Inter-ThinItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-Black.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-BlackItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-BoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-ExtraBold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-ExtraBoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-ExtraLight.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-ExtraLightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-Light.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-LightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-MediumItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-SemiBold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-SemiBoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-Thin.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterDisplay-ThinItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterVariable-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/InterVariable.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/rogue.otf Normal file
View File

Binary file not shown.