diff --git a/assets/style.css b/assets/style.css index 464c68d..e14bb57 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,5 +1,10 @@ +* { + box-sizing: border-box; +} + p { - margin: 0; + margin: 0px; + margin-block: 0px; } .main { @@ -36,3 +41,22 @@ p { width: 120px; height: 120px; } + +.author { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 2.5rem; + color: #bdb0cc; +} + +.author .username { + font-size: 1.75rem; + color: #776d83; +} + +.repo .repo-name { + font-weight: 800; + font-size: 4.5rem; + line-height: 1.2em; +} diff --git a/views/repo.eta b/views/repo.eta index 0f88fb4..ff12675 100644 --- a/views/repo.eta +++ b/views/repo.eta @@ -1,9 +1,9 @@ <% layout('layout') %> <div class="main"> <div class="contents"> - <div class="info"> - <p style="font-size: 36px; color: #9A8FA7;"><%= it.repo.owner.full_name %> @<%= it.repo.owner.login %></p> - <p style="font-weight: 800; font-size: 4.5rem; line-height: 1.2em;"><%= it.repo.name %></p> + <div class="info repo"> + <p class="author"><span><%= it.repo.owner.full_name %></span><span class="username">@<%= it.repo.owner.login %></span></p> + <p class="repo-name"><%= it.repo.name %></p> <% if (it.repo.description) { %> <p style="font-size: 42px; font-weight: 500; color: #9A8FA7;"><%= it.repo.description %></p> <% } %>