b168e1529f
* Move HexComparere to Hex::Comparer service * Create USER_COLORS constant and constant specs * Move formats to constants * Rename Hex::Comparer to Color::CompareHex
128 lines
3.4 KiB
Text
128 lines
3.4 KiB
Text
<% accent_color = Color::CompareHex.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).biggest %>
|
|
<% dark_color = Color::CompareHex.new([user_colors(@user)[:bg], user_colors(@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%;
|
|
}
|
|
|
|
.title-area {
|
|
position: absolute;
|
|
bottom: 12vw;
|
|
left: 0;
|
|
right: 0;
|
|
top: 9vw;
|
|
}
|
|
h1 {
|
|
color: <%= dark_color %>;
|
|
width: 93%;
|
|
margin: 1vw auto;
|
|
position: absolute;
|
|
padding-left: 3.5%;
|
|
top: 50%;
|
|
-ms-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
line-height: 1.05em;
|
|
}
|
|
|
|
h1 img {
|
|
border-radius: 100vw;
|
|
height: 1.8em;
|
|
width: 1.8em;
|
|
vertical-align: -0.6em;
|
|
border: 0.05em solid <%= accent_color %>;
|
|
}
|
|
|
|
.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">
|
|
<div class="title-area">
|
|
<% if @user.name.size < 14 %>
|
|
<% font_size = 8.3 %>
|
|
<% elsif @user.name.size < 20 %>
|
|
<% font_size = 6.4 %>
|
|
<% else %>
|
|
<% font_size = 4.6 %>
|
|
<% end %>
|
|
<h1 style="font-size:<%= font_size %>vw;">
|
|
<img src="<%= Images::Profile.call(@user.profile_image_url, length: 640) %>" alt="<%= @user.name %> profile image">
|
|
<%= truncate @user.name, length: 32 %>
|
|
<br />
|
|
<span style="font-size: 0.4em;display: inline-block; margin-left: 5.4em; margin-top: -1.7em">@<%= @user.username %></span>
|
|
</h1>
|
|
</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 + @user.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>
|