Browse Source

feat: improve note styling

main
Inhji Y. 9 months ago
parent
commit
880961488b
  1. 24
      assets/css/app.scss
  2. 30
      lib/mirage_web/templates/note/index.html.eex

24
assets/css/app.scss

@ -203,7 +203,7 @@ kbd {
.tags {
.tag {
font-size:75%;
background: $bg-content;
background: transparent;
padding: 0 0.3rem;
border-radius: 5px;
border: 1px solid $border-base;
@ -250,8 +250,21 @@ form {
article {
margin-bottom: 4rem;
.title {
font-family: $font-heading;
&>a {
text-decoration: none;
}
header {
border-bottom: 1px solid $border-base;
.title {
font-family: $font-heading;
margin-bottom: 0;
}
}
footer {
border-top: 1px solid $border-base;
}
&:last-child {
@ -280,6 +293,10 @@ article {
p {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
}
dl {
@ -328,6 +345,7 @@ article {
blockquote, pre {
padding: 1rem;
background: rgba(0,0,0,0.1);
margin-bottom: 1rem;
}
blockquote {

30
lib/mirage_web/templates/note/index.html.eex

@ -4,18 +4,30 @@
<section class="notes">
<%= for note <- @notes do %>
<article class="width-full bg-content">
<h2 class="title">
<%= link note.title, to: Routes.note_path(@conn, :show, note) %>
</h2>
<article>
<%= link to: Routes.note_path(@conn, :show, note) do %>
<header class="width-full bg-content">
<h2 class="title">
<%= note.title %>
</h2>
</header>
<% end %>
<div class="content html">
<%= Earmark.as_html!(note.content) |> raw %>
</div>
<section>
<div class="content html width-full bg-content">
<%= Earmark.as_html!(note.content) |> raw %>
</div>
</section>
<aside>
<footer class="width-full bg-content">
<time datetime="<%= note.inserted_at %>"><%= Timex.from_now(note.inserted_at) %></time>
</aside>
<span class="tags">
<%= for topic <- note.topics do %>
<span class="tag"><%= topic.text %></span>
<% end %>
</span>
</footer class="width-full bg-content">
</article>
<% end %>
</section>

Loading…
Cancel
Save