140 lines
3.8 KiB
Text
140 lines
3.8 KiB
Text
<% accent_color = Color::CompareHex.new([user_colors(@article.user)[:bg], user_colors(@article.user)[:text]]).biggest %>
|
|
<% dark_color = Color::CompareHex.new([user_colors(@article.user)[:bg], user_colors(@article.user)[:text]]).brightness(0.8). %>
|
|
<% then { |color| Color::Accessibility.new(color).low_contrast? ? "black" : color } %>
|
|
|
|
<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;
|
|
}
|
|
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 @article.title.size < 15 %>
|
|
<% font_size = 12 %>
|
|
<% elsif @article.title.size < 30 %>
|
|
<% font_size = 9.2 %>
|
|
<% elsif @article.title.size < 50 %>
|
|
<% font_size = 8.3 %>
|
|
<% else %>
|
|
<% font_size = 15 - (((@article.title.size**0.92) + 85) / 16) %>
|
|
<% end %>
|
|
<% if @article.tag_list.include?("discuss") %>
|
|
<style>
|
|
.title-area {
|
|
top: 4.5vw;
|
|
}
|
|
</style>
|
|
<% font_size *= 0.9 %>
|
|
<div class="preview-info-header">
|
|
<%= t("views.articles.preview_discuss_html", image: asset_path("comments-bubble.png"), count: @article.comments_count) %>
|
|
</div>
|
|
<% end %>
|
|
<div class="title-area">
|
|
<h1 style="font-size:<%= font_size %>vw;"><%= @article.title %></h1>
|
|
</div>
|
|
<div class="preview-user">
|
|
<img src="<%= @article.user.profile_image_url_for(length: 90) %>" />
|
|
<%= truncate @article.user.name, length: 28 %>・<%= @article.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 + @article.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>
|