refactor
This commit is contained in:
parent
bf3fd74108
commit
e327883e2e
3 changed files with 40 additions and 35 deletions
|
@ -15,7 +15,7 @@ p {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: 2rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 1050px;
|
width: 1050px;
|
||||||
|
@ -35,15 +35,15 @@ p {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 80%;
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphics {
|
.graphics {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
width: 240px;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphics > img {
|
.graphics > img {
|
||||||
|
@ -52,6 +52,16 @@ p {
|
||||||
height: 120px;
|
height: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.issue .title {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 4.5rem;
|
||||||
|
line-height: 1.2em;
|
||||||
|
display: flex;
|
||||||
|
column-gap: 0.25em;
|
||||||
|
line-height: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
.repo .author {
|
.repo .author {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -13,26 +13,21 @@
|
||||||
%>
|
%>
|
||||||
<div class="main issue">
|
<div class="main issue">
|
||||||
<div class="contents">
|
<div class="contents">
|
||||||
<div class="info">
|
<div class="info"
|
||||||
<p style="font-size: 36px; color: #9A8FA7;">@<%= it.issue.repository?.full_name || it.issue.base.repo.full_name %></p>
|
><p style="font-size: 36px; color: #9A8FA7;">@<%= it.issue.repository?.full_name || it.issue.base.repo.full_name %></p
|
||||||
<p
|
><p class="title"><span style="font-weight: 400; color: #9A8FA7">#<%= it.issue.number %></span><%~ include('spanwords', {text: title})
|
||||||
style="font-weight: 800;
|
%></p
|
||||||
font-size: 4.5rem;
|
><% if (it.issue.body) { %><p style="font-size: 42px; font-weight: 500; flex-wrap: wrap; color: #9A8FA7; display: flex; column-gap: 0.25em;"
|
||||||
line-height: 1.2em;
|
><%~ include('spanwords', {text: body})%></p
|
||||||
display: flex;
|
><% }
|
||||||
column-gap: 0.25em;
|
%></div
|
||||||
flex-wrap: wrap;"
|
><div class="graphics"
|
||||||
><span style="font-weight: 400; color: #9A8FA7">#<%= it.issue.number %></span><%~ include('spanwords', {text: title})
|
><img width="120" height="120" src="<%= it.issue.user.avatar_url %>?size=120"></img
|
||||||
%></p>
|
></div>
|
||||||
<% if (it.issue.body) { %>
|
</div
|
||||||
<p style="font-size: 42px; font-weight: 500; flex-wrap: wrap; color: #9A8FA7; display: flex; column-gap: 0.25em;"><%~ include('spanwords', {text: body})%></p>
|
><div class="info-line"
|
||||||
<% } %>
|
><img class="avatar" width="48" height="48" src="<%= it.issue.user.avatar_url %>?size=48"></img
|
||||||
</div>
|
><p class="author"><%= it.issue.user.full_name || it.issue.user.login %></p
|
||||||
<div class="graphics">
|
><p>opened on <%= new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(it.issue.created_at)) %></p
|
||||||
<img width="120" height="120" src="<%= it.issue.user.avatar_url %>"></img>
|
></div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-line">
|
|
||||||
<img class="avatar" width="48" height="48" src="<%= it.issue.user.avatar_url %>"></img><p class="author"><%= it.issue.user.full_name %></p><p>opened on <%= new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(it.issue.created_at)) %></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
|
@ -1,15 +1,15 @@
|
||||||
<% layout('layout') %>
|
<% layout('layout') %>
|
||||||
<div class="main repo">
|
<div class="main repo">
|
||||||
<div class="contents">
|
<div class="contents">
|
||||||
<div class="info">
|
<div class="info"
|
||||||
<p class="author"><span><%= it.repo.owner.full_name %></span><span class="username">@<%= it.repo.owner.login %></span></p>
|
><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>
|
><p class="repo-name"><%= it.repo.name %></p
|
||||||
<% if (it.repo.description) { %>
|
><% if (it.repo.description) {
|
||||||
<p style="font-size: 42px; font-weight: 500; color: #9A8FA7;"><%= it.repo.description %></p>
|
%><p style="font-size: 42px; font-weight: 500; color: #9A8FA7;"><%= it.repo.description %></p>
|
||||||
<% } %>
|
<% }
|
||||||
</div>
|
%></div
|
||||||
<div class="graphics">
|
><div class="graphics"
|
||||||
<img width="120" height="120" src="<%= it.repo.avatar_url || it.repo.owner.avatar_url %>"></img>
|
><img width="120" height="120" src="<%= it.repo.avatar_url || it.repo.owner.avatar_url %>"></img
|
||||||
</div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
Loading…
Reference in a new issue