b168e1529f
* Move HexComparere to Hex::Comparer service * Create USER_COLORS constant and constant specs * Move formats to constants * Rename Hex::Comparer to Color::CompareHex
135 lines
3.5 KiB
Text
135 lines
3.5 KiB
Text
<% accent_color = Color::CompareHex.new([user_colors(@comment.user)[:bg], user_colors(@comment.user)[:text]]).biggest %>
|
|
<% dark_color = Color::CompareHex.new([user_colors(@comment.user)[:bg], user_colors(@comment.user)[:text]]).brightness(0.8) %>
|
|
<style>
|
|
body {
|
|
background: <%= accent_color %>;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-image: linear-gradient(to bottom, white -70%, <%= accent_color %>);
|
|
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Roboto", sans-serif;
|
|
}
|
|
|
|
.preview-div-wrapper {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.preview-div {
|
|
background: #fff;
|
|
border: 0.25vw solid<%= dark_color %>;
|
|
box-shadow: 0.8vw 1vw 0px <%= dark_color %>;
|
|
width: 94vw;
|
|
height: 45vw;
|
|
margin: 2.25vw auto 5vw;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border-radius: 0.3vw;
|
|
border-top-left-radius: 2.3vw;
|
|
border-top-right-radius: 2.3vw;
|
|
}
|
|
|
|
.preview-info-header {
|
|
color: black;
|
|
margin: 2vw 2.5vw 0vw;
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, "Roboto", monospace;
|
|
font-size: 3.5vw;
|
|
width: 92%;
|
|
border-bottom: 0.9vw solid <%= accent_color %>;
|
|
width: 40%;
|
|
}
|
|
|
|
.preview-info-header img {
|
|
height: 2.5vw;
|
|
vertical-align: -0.15vw;
|
|
margin-left: 1vw;
|
|
margin-right: 0.5vw;
|
|
}
|
|
.title-area {
|
|
position: absolute;
|
|
bottom: 12vw;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
h2 {
|
|
color: <%= dark_color %>;
|
|
width: 94%;
|
|
margin: 1.4vw auto;
|
|
font-size: 3.6vw;
|
|
}
|
|
h1 {
|
|
color: <%= dark_color %>;
|
|
width: 94%;
|
|
margin: 1vw auto;
|
|
position: absolute;
|
|
padding-left: 2.5%;
|
|
top: 50%;
|
|
-ms-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
line-height: 1.05em;
|
|
}
|
|
|
|
.preview-user {
|
|
font-size: 3vw;
|
|
position: absolute;
|
|
color: <%= dark_color %>;
|
|
left: 1.5vw;
|
|
bottom: 1.25vw;
|
|
padding: 0.8vw 2vw;
|
|
padding-left: 0.8vw;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.preview-user img {
|
|
border-radius: 100vw;
|
|
height: 4.5vw;
|
|
width: 4.5vw;
|
|
vertical-align: -1.3vw;
|
|
border: 0.25vw solid<%= dark_color %>;
|
|
}
|
|
|
|
.badge-images {
|
|
position: absolute;
|
|
bottom: 1.4vw;
|
|
right: 1.5vw;
|
|
text-align: right;
|
|
}
|
|
|
|
.badge-images img {
|
|
height: 6vw;
|
|
right: 6vw;
|
|
fill: <%= dark_color %>;
|
|
margin-left: 0.5vw;
|
|
transform: rotate(5deg);
|
|
}
|
|
</style>
|
|
|
|
<div class="preview-div-wrapper">
|
|
<div class="preview-div">
|
|
<% if @comment.title.size < 15 %>
|
|
<% font_size = 12 %>
|
|
<% elsif @comment.title.size < 30 %>
|
|
<% font_size = 9.2 %>
|
|
<% elsif @comment.title.size < 50 %>
|
|
<% font_size = 8.3 %>
|
|
<% else %>
|
|
<% font_size = 15 - (((@comment.title.size**0.92) + 85) / 16) %>
|
|
<% end %>
|
|
<div class="title-area">
|
|
<h2>re: <%= @comment.commentable&.title %></h2>
|
|
<h1 style="font-size:<%= font_size %>vw;"><%= @comment.title %></h1>
|
|
</div>
|
|
<div class="preview-user">
|
|
<img src="<%= Images::Profile.call(@comment.user.profile_image_url, length: 90) %>" />
|
|
<%= truncate @comment.user.name, length: 28 %>・<%= @comment.readable_publish_date %>
|
|
</div>
|
|
<div class="badge-images">
|
|
<% @tag_badges.each do |badge| %>
|
|
<%# Use a seed in Random so we don't break cache on every render %>
|
|
<% not_so_rand = Random.new(badge.id + @comment.id) %>
|
|
<img src="<%= badge.badge_image_url %>" style="transform: rotate(<%= not_so_rand.rand(-6..6) %>deg);" />
|
|
<% end %>
|
|
<img src="https://thepracticaldev.s3.amazonaws.com/i/bh2wmpcltaybu1xsnico.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|