Browse Source

ref: refactor homepage styles

master
Inhji Y. 10 months ago
parent
commit
8a75bb8836
  1. 66
      apps/tomie_web/assets/css/home.css
  2. 5
      apps/tomie_web/assets/css/home/header.css
  3. 7
      apps/tomie_web/assets/css/home/helpers.css
  4. 2
      apps/tomie_web/assets/css/home/navigation.css
  5. 61
      apps/tomie_web/lib/tomie_web/templates/home/index.html.eex

66
apps/tomie_web/assets/css/home.css

@ -10,6 +10,7 @@
:root {
--primary-color: #d34;
--main-bg-color: #fefefe;
--divider-color: #ccc;
}
body {
@ -37,6 +38,54 @@ main#wrapper a:hover {
background: #333;
}
section.articles {
border-bottom: 1px solid var(--divider-color);
padding: 0 1rem 0.75rem 1rem;
margin-bottom: 4rem;
}
section.articles article {
margin-bottom: 2rem;
}
section.articles article header .title {
font-weight: 500;
}
section.articles article header .date {
background: var(--primary-color);
padding: 0.35rem 0.75rem;
border-radius: 10rem;
color: var(--main-bg-color);
margin-right: 0.5rem;
}
.feed-container {
display: flex;
margin-bottom: 2rem;
}
.feed-container div {
flex: 1;
}
.feed-container .spacer {
flex-grow: 0;
flex-basis: auto;
width: 1rem;
}
.feed h3 {
font-weight: 500;
font-size: 1.3rem;
margin-bottom: 1.5rem;
}
.feed h3::after {
color: var(--primary-color);
content: ' !';
font-weight: 800;
}
p, ul, dl {
font-family: 'Open Sans', serif;
@ -55,15 +104,11 @@ dl > dt {
color: #444;
}
dl > dt > small {
font-weight: normal;
}
h1, h2, h3 {
color: #333;
}
h1 {
/*h1 {
font-size: 1.8em;
font-weight: 800;
margin: 3rem 0 2rem;
@ -71,16 +116,11 @@ h1 {
h2 {
font-size: 1.4rem;
font-weight: 600;
font-weight: 800;
}
h3 {
font-size: 1.3rem;
font-weight: 600;
font-weight: 800;
margin: 3rem 0 1rem;
}
h3::after {
color: var(--primary-color);
content: '.';
}
}*/

5
apps/tomie_web/assets/css/home/header.css

@ -1,11 +1,16 @@
header.site-header {
margin: 3rem 0;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--divider-color);
}
header.site-header h1 {
text-align: center;
border: none;
margin: 2rem 0 1.5rem;
font-size: 1.8rem;
font-weight: 700;
}
header.site-header h1 span {

7
apps/tomie_web/assets/css/home/helpers.css

@ -1,7 +0,0 @@
.flex-container {
display: flex;
}
.flex-container div {
flex: 1;
}

2
apps/tomie_web/assets/css/home/navigation.css

@ -10,7 +10,7 @@ nav#main-navigation {
margin-top: 1rem;
padding: 0 1rem 1rem;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid var(--divider-color);
}
nav#main-navigation span {}

61
apps/tomie_web/lib/tomie_web/templates/home/index.html.eex

@ -10,34 +10,49 @@
<h2 class="p-note"><%= @user.tagline %></h2>
</header>
<div>
<h3>Bookmarks</h3>
<%= if not Enum.empty?(@articles) do %>
<section class="articles">
<%= for a <- @articles do %>
<article>
<header>
<h3>
<span class="date"><%= Timex.format!(a.inserted_at, "{D}") %></span>
<span class="title"><%= a.title %></span>
</h3>
</header>
</article>
<% end %>
</section>
<% end %>
<dl>
<%= for b <- @bookmarks do %>
<dt><%= link b.title, to: Routes.home_path(@conn, :bookmark, b) %> <small class="brackets"></small></dt>
<dd><%= Timex.from_now(b.inserted_at) %> • <%= tag_string(b.tags) %></dd>
<% end %>
</dl>
</div>
<div>
<h3>Posts</h3>
<div class="feed-container">
<div class="feed bookmarks">
<h3>Bookmarks</h3>
<dl>
<%= for p <- @posts do %>
<%= if Blog.Post.subtype(p) == :article do %>
<dt><%= p.title %></dt>
<% else %>
<dt><%= raw p.content_html %></dt>
<dl>
<%= for b <- @bookmarks do %>
<dt><%= link b.title, to: Routes.home_path(@conn, :bookmark, b) %> <small class="brackets"></small></dt>
<dd><%= Timex.from_now(b.inserted_at) %> • <%= tag_string(b.tags) %></dd>
<% end %>
</dl>
</div>
<div class="spacer"></div>
<div class="feed notes">
<h3>Notes</h3>
<dl>
<%= for p <- @posts do %>
<dt><%= raw p.content_html %></dt>
<dd><%= Timex.from_now(p.inserted_at) %></dd>
<% end %>
</dl>
<% end %>
</dl>
</div>
</div>
<div class="flex-container">
<div>
<div class="feed-container">
<div class="feed listens">
<h3>Listens</h3>
<dl>
@ -48,7 +63,7 @@
</dl>
</div>
<div>
<div class="feed projects">
<h3>Projects</h3>
<dl>

Loading…
Cancel
Save