Browse Source

fix: separate homepage styles from general styles

master
Inhji Y. 10 months ago
parent
commit
4c0585aac9
  1. 97
      apps/tomie_web/assets/css/home.css
  2. 0
      apps/tomie_web/assets/css/home/helpers.css
  3. 66
      apps/tomie_web/assets/css/home/homepage.css
  4. 109
      apps/tomie_web/lib/tomie_web/templates/home/index.html.eex

97
apps/tomie_web/assets/css/home.css

@ -5,22 +5,26 @@
@import "home/navigation";
@import "home/article";
@import "home/footer";
@import "home/helpers";
@import "home/homepage";
:root {
--primary-color: #d34;
--main-bg-color: #fefefe;
--divider-color: #ccc;
--body-family: 'Manrope', sans-serif;
}
body {
color: #555;
background: var(--main-bg-color);
font-family: 'Manrope', sans-serif;
font-family: var(--body-family);
font-size: 17px;
}
h1, h2, h3 {
color: #333;
}
main#wrapper {
padding: 0 2rem;
line-height: 1.3em;
@ -38,89 +42,8 @@ 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;
}
ul > li, dl > dd {
margin-bottom: 1rem;
}
ul > li::before {
content: "• ";
}
dl > dt {
font-weight: bold;
color: #444;
}
h1, h2, h3 {
color: #333;
}
/*h1 {
article h1 {
font-size: 1.8em;
font-weight: 800;
margin: 3rem 0 2rem;
}
h2 {
font-size: 1.4rem;
font-weight: 800;
}
h3 {
font-size: 1.3rem;
font-weight: 800;
margin: 3rem 0 1rem;
}*/
margin: 2rem 0 2rem;
}

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

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

@ -0,0 +1,66 @@
.home-wrapper section.articles {
border-bottom: 1px solid var(--divider-color);
padding: 0 1rem 0.75rem 1rem;
margin-bottom: 4rem;
}
.home-wrapper section.articles article {
margin-bottom: 2rem;
}
.home-wrapper section.articles article header .title {
font-weight: 500;
}
.home-wrapper 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;
}
.home-wrapper .feed-container {
display: flex;
margin-bottom: 2rem;
}
.home-wrapper .feed-container div {
flex: 1;
}
.home-wrapper .feed-container .spacer {
flex-grow: 0;
flex-basis: auto;
width: 1rem;
}
.home-wrapper .feed h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
font-weight: 500;
}
.home-wrapper .feed h3::after {
color: var(--primary-color);
content: ' !';
font-weight: bold;
}
.home-wrapper dl {
font-family: 'Open Sans', serif;
}
.home-wrapper dl > dd {
margin-bottom: 1rem;
}
.home-wrapper dl > dt {
color: #444;
}
.home-wrapper .feed.bookmarks dl dt,
.home-wrapper .feed.projects dl dt,
.home-wrapper .feed.listens dl dt{
font-weight: 700;
}

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

@ -10,70 +10,75 @@
<h2 class="p-note"><%= @user.tagline %></h2>
</header>
<%= 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>
<div class="home-wrapper">
<%= 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 %>
</section>
<% end %>
<div class="feed-container">
<div class="feed bookmarks">
<h3>Bookmarks</h3>
<div class="feed-container">
<div class="feed bookmarks">
<h3>Bookmarks</h3>
<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>
<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="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>
<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>
</div>
</div>
</div>
<div class="feed-container">
<div class="feed listens">
<h3>Listens</h3>
<div class="feed-container">
<div class="feed listens">
<h3>Listens</h3>
<dl>
<%= for l <- @listens do %>
<dt><%= l.track.name %> <small class="brackets"></small></dt>
<dd>by <%= l.artist.name %> • <%= Timex.from_now(l.listened_at) %></dd>
<% end %>
</dl>
</div>
<dl>
<%= for l <- @listens do %>
<dt><%= l.track.name %> <small class="brackets"></small></dt>
<dd>by <%= l.artist.name %> • <%= Timex.from_now(l.listened_at) %></dd>
<% end %>
</dl>
</div>
<div class="feed projects">
<h3>Projects</h3>
<div class="feed projects">
<h3>Projects</h3>
<dl>
<dt><%= link "Tomie", to: Routes.home_path(@conn, :project, :tomie) %> <small class="brackets">2013 - 2020</small></dt>
<dd>Tomie is one of many attempts to build a selfhosted, universal platform for my content.</dd>
<dl>
<dt><%= link "Tomie", to: Routes.home_path(@conn, :project, :tomie) %> <small class="brackets">2013 - 2020</small></dt>
<dd>Tomie is one of many attempts to build a selfhosted, universal platform for my content.</dd>
<dt><%= link "Eurorack", to: Routes.home_path(@conn, :project, :eurorack) %> <small class="brackets">2018 - 2020</small></dt>
<dd>My Eurorack system aims to be a lifelong experiment on music-making as a process, not a goal.</dd>
</dl>
<dt><%= link "Eurorack", to: Routes.home_path(@conn, :project, :eurorack) %> <small class="brackets">2018 - 2020</small></dt>
<dd>My Eurorack system aims to be a lifelong experiment on music-making as a process, not a goal.</dd>
</dl>
</div>
</div>
</div>
Loading…
Cancel
Save