Fix black-on-black etc. buttons and update social preview cards (#4954)
* Fix black-on-black etc. buttons and update social preview cards * Change up font family details * Fix org badges * Adjust fonts for user name * Add roboto to font stack * Adjust gradiant
This commit is contained in:
Ben Halpern
GitHub
parent
845b07aae3
commit
5bcdeb5162
6 changed files with 222 additions and 198 deletions
|
|
@ -6,6 +6,7 @@ class SocialPreviewsController < ApplicationController
|
|||
|
||||
def article
|
||||
@article = Article.find(params[:id])
|
||||
@tag_badges = Badge.where(id: Tag.where(name: @article.decorate.cached_tag_list_array).pluck(:badge_id))
|
||||
not_found unless @article.published
|
||||
|
||||
template = (@article.decorate.cached_tag_list_array & SHE_CODED_TAGS).any? ? "shecoded" : "article"
|
||||
|
|
@ -15,6 +16,7 @@ class SocialPreviewsController < ApplicationController
|
|||
|
||||
def user
|
||||
@user = User.find(params[:id])
|
||||
@tag_badges = Badge.where(id: @user.badge_achievements.pluck(:badge_id))
|
||||
set_respond
|
||||
end
|
||||
|
||||
|
|
@ -26,7 +28,7 @@ class SocialPreviewsController < ApplicationController
|
|||
|
||||
def organization
|
||||
@user = Organization.find(params[:id])
|
||||
|
||||
@tag_badges = [] # Orgs don't have badges, but they could!
|
||||
set_respond "user"
|
||||
end
|
||||
|
||||
|
|
@ -38,6 +40,7 @@ class SocialPreviewsController < ApplicationController
|
|||
|
||||
def comment
|
||||
@comment = Comment.find(params[:id])
|
||||
@tag_badges = Badge.where(id: Tag.where(name: @comment.commentable.decorate.cached_tag_list_array).pluck(:badge_id))
|
||||
|
||||
set_respond
|
||||
end
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ class UserDecorator < ApplicationDecorator
|
|||
end
|
||||
|
||||
def enriched_colors
|
||||
if bg_color_hex.blank?
|
||||
if bg_color_hex.blank? || text_color_hex.blank?
|
||||
{
|
||||
bg: assigned_color[:bg],
|
||||
text: assigned_color[:text]
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="color-select-fields">
|
||||
<div class="field">
|
||||
<% account.bg_color_hex = user_colors(account)[:bg] if account.bg_color_hex.blank? %>
|
||||
<% account.text_color_hex = user_colors(account)[:text] if account.text_color_hex.blank? %>
|
||||
<%= f.label :bg_color_hex, "background color" %><br>
|
||||
<div class="select-field-wrapper">
|
||||
<%= f.text_field :bg_color_hex, placeholder: "#000000", class: "color-select-textbox", id: "bg-color-textfield" %>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<% accent_color = HexComparer.new([user_colors(@article.user)[:bg], user_colors(@article.user)[:text]]).biggest %>
|
||||
<% color = HexComparer.new([user_colors(@article.user)[:bg], user_colors(@article.user)[:text]]).brightness(1.4) %>
|
||||
<% dark_color = HexComparer.new([user_colors(@article.user)[:bg], user_colors(@article.user)[:text]]).brightness(0.7) %>
|
||||
<% not_so_rand = Random.new(@article.id) # Using ID as seed ensures we get the same "random" numbers on each page load, Improves caching %>
|
||||
<% dark_color = HexComparer.new([user_colors(@article.user)[:bg], user_colors(@article.user)[:text]]).brightness(0.8) %>
|
||||
<style>
|
||||
body {
|
||||
background: white;
|
||||
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 {
|
||||
|
|
@ -14,50 +14,28 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 1000px;
|
||||
background: <%= accent_color %>;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
height: 40vw;
|
||||
width: 40vw;
|
||||
right: -<%= not_so_rand.rand(2..15) %>vw;
|
||||
bottom: -<%= not_so_rand.rand(2..15) %>vw;
|
||||
}
|
||||
|
||||
.circle2 {
|
||||
height: 30vw;
|
||||
width: 30vw;
|
||||
left: <%= not_so_rand.rand(2..16) %>vw;
|
||||
bottom: -<%= not_so_rand.rand(2..15) %>vw;
|
||||
}
|
||||
|
||||
.circle3 {
|
||||
height: 24vw;
|
||||
width: 24vw;
|
||||
left: -8vw;
|
||||
top: -<%= not_so_rand.rand(2..6) %>vw;
|
||||
}
|
||||
|
||||
.preview-div {
|
||||
background: #fff;
|
||||
border: 0.25vw solid<%= dark_color %>;
|
||||
box-shadow: 0.8vw 1vw 0px<%= dark_color %>;
|
||||
width: 88vw;
|
||||
height: 44vw;
|
||||
margin: 2.5vw auto 5vw;
|
||||
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 auto 0vw;
|
||||
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 {
|
||||
|
|
@ -66,54 +44,77 @@
|
|||
margin-left: 1vw;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
position: absolute;
|
||||
bottom: 12vw;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
h1 {
|
||||
color: <%= dark_color %>;
|
||||
width: 92%;
|
||||
width: 94%;
|
||||
margin: 1vw auto;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Roboto", sans-serif;
|
||||
position: absolute;
|
||||
padding-left: 2.5%;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
line-height: 1.05em;
|
||||
}
|
||||
|
||||
.preview-user {
|
||||
font-size: 3.5vw;
|
||||
font-size: 3vw;
|
||||
position: absolute;
|
||||
background: <%= accent_color %>;
|
||||
color: <%= dark_color %>;
|
||||
left: 1.5vw;
|
||||
bottom: 1.5vw;
|
||||
padding: 1vw 3vw;
|
||||
padding-left: 1.2vw;
|
||||
bottom: 1.25vw;
|
||||
padding: 0.8vw 2vw;
|
||||
padding-left: 0.8vw;
|
||||
font-weight: 500;
|
||||
border-radius: 100vw;
|
||||
}
|
||||
|
||||
.preview-user img {
|
||||
border-radius: 100vw;
|
||||
height: 5vw;
|
||||
width: 5vw;
|
||||
height: 4.5vw;
|
||||
width: 4.5vw;
|
||||
vertical-align: -1.3vw;
|
||||
border: 0.25vw solid<%= dark_color %>;
|
||||
}
|
||||
|
||||
.preview-dev-logo {
|
||||
.badge-images {
|
||||
position: absolute;
|
||||
bottom: 2.1vw;
|
||||
right: 2.1vw;
|
||||
bottom: 1.4vw;
|
||||
right: 1.5vw;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.logo {
|
||||
.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="circle circle1"></div>
|
||||
<div class="circle circle2"></div>
|
||||
<div class="circle circle3"></div>
|
||||
<div class="preview-div">
|
||||
<% font_size = 15 - (((@article.title.size**0.89) + 85) / 16) %>
|
||||
<% 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") %>
|
||||
<% font_size = 13.5 - (((@article.title.size**0.89) + 85) / 16) %>
|
||||
<style>
|
||||
.title-area {
|
||||
top: 4.5vw;
|
||||
}
|
||||
</style>
|
||||
<% font_size = font_size * 0.9 %>
|
||||
<div class="preview-info-header">
|
||||
<% if @article.comments_count > 0 %>
|
||||
#discuss <img src="<%= asset_path "comments-bubble.png" %>" /><%= @article.comments_count %>
|
||||
|
|
@ -122,13 +123,18 @@
|
|||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<h1 style="font-size:<%= font_size %>vw;"><%= @article.title %></h1>
|
||||
<div class="title-area">
|
||||
<h1 style="font-size:<%= font_size %>vw;"><%= @article.title %></h1>
|
||||
</div>
|
||||
<div class="preview-user">
|
||||
<img src="<%= ProfileImage.new(@article.user).get(90) %>" />
|
||||
<%= truncate @article.user.name, length: 25 %>・<%= @article.readable_publish_date %>
|
||||
<%= truncate @article.user.name, length: 28 %>・<%= @article.readable_publish_date %>
|
||||
</div>
|
||||
<div class="preview-dev-logo">
|
||||
<%= inline_svg_tag("devplain.svg", class: "logo", size: "9vw * 9vw", aria: false, title: "DEV logo") %>
|
||||
<div class="badge-images">
|
||||
<% @tag_badges.each do |badge| %>
|
||||
<img src="<%= badge.badge_image_url %>" style="transform: rotate(<%= rand(-6..6) %>deg);" />
|
||||
<% end %>
|
||||
<img src="https://thepracticaldev.s3.amazonaws.com/i/bh2wmpcltaybu1xsnico.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<% accent_color = HexComparer.new([user_colors(@comment.user)[:bg], user_colors(@comment.user)[:text]]).biggest %>
|
||||
<% color = HexComparer.new([user_colors(@comment.user)[:bg], user_colors(@comment.user)[:text]]).brightness(1.4) %>
|
||||
<% dark_color = HexComparer.new([user_colors(@comment.user)[:bg], user_colors(@comment.user)[:text]]).brightness(0.7) %>
|
||||
<% not_so_rand = Random.new(@comment.id) # Using ID as seed ensures we get the same "random" numbers on each page load, Improves caching %>
|
||||
<% dark_color = HexComparer.new([user_colors(@comment.user)[:bg], user_colors(@comment.user)[:text]]).brightness(0.8) %>
|
||||
<style>
|
||||
body {
|
||||
background: white;
|
||||
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 {
|
||||
|
|
@ -14,50 +14,28 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 1000px;
|
||||
background: <%= accent_color %>;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
height: 40vw;
|
||||
width: 40vw;
|
||||
right: -<%= not_so_rand.rand(2..15) %>vw;
|
||||
bottom: -<%= not_so_rand.rand(2..15) %>vw;
|
||||
}
|
||||
|
||||
.circle2 {
|
||||
height: 30vw;
|
||||
width: 30vw;
|
||||
left: <%= not_so_rand.rand(2..16) %>vw;
|
||||
bottom: -<%= not_so_rand.rand(2..15) %>vw;
|
||||
}
|
||||
|
||||
.circle3 {
|
||||
height: 24vw;
|
||||
width: 24vw;
|
||||
left: -8vw;
|
||||
top: -<%= not_so_rand.rand(2..6) %>vw;
|
||||
}
|
||||
|
||||
.preview-div {
|
||||
background: #fff;
|
||||
border: 0.25vw solid<%= dark_color %>;
|
||||
box-shadow: 0.8vw 1vw 0px<%= dark_color %>;
|
||||
width: 88vw;
|
||||
height: 44vw;
|
||||
margin: 2.5vw auto 5vw;
|
||||
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 auto 0vw;
|
||||
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 {
|
||||
|
|
@ -66,84 +44,90 @@
|
|||
margin-left: 1vw;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.preview-comment {
|
||||
margin: 3vw auto;
|
||||
.title-area {
|
||||
position: absolute;
|
||||
bottom: 12vw;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.preview-comment h1 {
|
||||
color: <%= dark_color %>;
|
||||
width: 92%;
|
||||
margin: 1vw auto;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: <%= dark_color %>;
|
||||
width: 92%;
|
||||
width: 94%;
|
||||
margin: 1.4vw auto;
|
||||
font-size: 3.6vw;
|
||||
}
|
||||
h1 {
|
||||
color: <%= dark_color %>;
|
||||
width: 94%;
|
||||
margin: 1vw auto;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Roboto", sans-serif;
|
||||
font-size: 3vw;
|
||||
position: absolute;
|
||||
padding-left: 2.5%;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
line-height: 1.05em;
|
||||
}
|
||||
|
||||
.preview-user {
|
||||
font-size: 3.5vw;
|
||||
font-size: 3vw;
|
||||
position: absolute;
|
||||
background: <%= accent_color %>;
|
||||
color: <%= dark_color %>;
|
||||
left: 1.5vw;
|
||||
bottom: 1.5vw;
|
||||
padding: 1vw 3vw;
|
||||
padding-left: 1.2vw;
|
||||
bottom: 1.25vw;
|
||||
padding: 0.8vw 2vw;
|
||||
padding-left: 0.8vw;
|
||||
font-weight: 500;
|
||||
border-radius: 100vw;
|
||||
}
|
||||
|
||||
.preview-user img {
|
||||
border-radius: 100vw;
|
||||
height: 5vw;
|
||||
width: 5vw;
|
||||
height: 4.5vw;
|
||||
width: 4.5vw;
|
||||
vertical-align: -1.3vw;
|
||||
border: 0.25vw solid<%= dark_color %>;
|
||||
}
|
||||
|
||||
.preview-dev-logo {
|
||||
.badge-images {
|
||||
position: absolute;
|
||||
bottom: 2.1vw;
|
||||
right: 2.1vw;
|
||||
bottom: 1.4vw;
|
||||
right: 1.5vw;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.logo {
|
||||
.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="circle circle1"></div>
|
||||
<div class="circle circle2"></div>
|
||||
<div class="circle circle3"></div>
|
||||
<div class="preview-div">
|
||||
<% font_size = 12 - (((@comment.commentable.title.size**0.89) + 85) / 16) %>
|
||||
<% if @comment.commentable.tag_list.include?("discuss") %>
|
||||
<% font_size = 10.5 - (((@comment.commentable.title.size**0.89) + 85) / 16) %>
|
||||
<div class="preview-info-header">
|
||||
<% if @comment.commentable.comments_count > 0 %>
|
||||
#discuss <img src="<%= asset_path "comments-bubble.png" %>" /><%= @comment.commentable.comments_count %>
|
||||
<% else %>
|
||||
New Discussion!
|
||||
<% end %>
|
||||
</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 %>
|
||||
<h2>re: <%= @comment.commentable.title %></h2>
|
||||
<div class="preview-comment">
|
||||
<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="<%= ProfileImage.new(@comment.user).get(90) %>" />
|
||||
<%= truncate @comment.user.name, length: 25 %>・<%= @comment.readable_publish_date %>
|
||||
<%= truncate @comment.user.name, length: 28 %>・<%= @comment.readable_publish_date %>
|
||||
</div>
|
||||
<div class="preview-dev-logo">
|
||||
<%= inline_svg_tag("devplain.svg", class: "logo", size: "9vw * 9vw", aria: false, title: "DEV logo") %>
|
||||
<div class="badge-images">
|
||||
<% @tag_badges.each do |badge| %>
|
||||
<img src="<%= badge.badge_image_url %>" style="transform: rotate(<%= rand(-6..6) %>deg);" />
|
||||
<% end %>
|
||||
<img src="https://thepracticaldev.s3.amazonaws.com/i/bh2wmpcltaybu1xsnico.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<% accent_color = HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).biggest %>
|
||||
<% color = HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(1.4) %>
|
||||
<% dark_color = HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.7) %>
|
||||
<% not_so_rand = Random.new(@user.id) # Using ID as seed ensures we get the same "random" numbers on each page load, Improves caching %>
|
||||
<% dark_color = HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.8) %>
|
||||
<style>
|
||||
body {
|
||||
background: white;
|
||||
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 {
|
||||
|
|
@ -14,83 +14,113 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 1000px;
|
||||
background: <%= accent_color %>;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
height: 40vw;
|
||||
width: 40vw;
|
||||
right: -<%= not_so_rand.rand(2..15) %>vw;
|
||||
bottom: -<%= not_so_rand.rand(2..15) %>vw;
|
||||
}
|
||||
|
||||
.circle2 {
|
||||
height: 30vw;
|
||||
width: 30vw;
|
||||
left: <%= not_so_rand.rand(2..16) %>vw;
|
||||
bottom: -<%= not_so_rand.rand(2..15) %>vw;
|
||||
}
|
||||
|
||||
.circle3 {
|
||||
height: 24vw;
|
||||
width: 24vw;
|
||||
left: -8vw;
|
||||
top: -<%= not_so_rand.rand(2..6) %>vw;
|
||||
}
|
||||
|
||||
.preview-div {
|
||||
background: #fff;
|
||||
border: 0.25vw solid<%= dark_color %>;
|
||||
box-shadow: 0.8vw 1vw 0px<%= dark_color %>;
|
||||
width: 88vw;
|
||||
height: 44vw;
|
||||
margin: 2.5vw auto 5vw;
|
||||
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: 92%;
|
||||
margin: 10vw auto 1vw;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Roboto", sans-serif;
|
||||
font-size: 8vw;
|
||||
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: 15vw;
|
||||
width: 15vw;
|
||||
vertical-align: -4.3vw;
|
||||
border: 0.55vw solid<%= dark_color %>;
|
||||
height: 1.8em;
|
||||
width: 1.8em;
|
||||
vertical-align: -0.6em;
|
||||
border: 0.05em solid <%= accent_color %>;
|
||||
}
|
||||
|
||||
.preview-dev-logo {
|
||||
.preview-user {
|
||||
font-size: 3vw;
|
||||
position: absolute;
|
||||
bottom: 2.1vw;
|
||||
right: 2.1vw;
|
||||
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;
|
||||
}
|
||||
|
||||
.logo {
|
||||
.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="circle circle1"></div>
|
||||
<div class="circle circle2"></div>
|
||||
<div class="circle circle3"></div>
|
||||
<div class="preview-div">
|
||||
<h1>
|
||||
<img src="<%= ProfileImage.new(@user).get(640) %>" alt="<%= @user.name %> profile image">
|
||||
<%= @user.name %>
|
||||
</h1>
|
||||
<div class="preview-dev-logo">
|
||||
<%= inline_svg_tag("devplain.svg", class: "logo", size: "9vw * 9vw", aria: false, title: "DEV logo") %>
|
||||
<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="<%= ProfileImage.new(@user).get(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| %>
|
||||
<img src="<%= badge.badge_image_url %>" style="transform: rotate(<%= rand(-6..6) %>deg);" />
|
||||
<% end %>
|
||||
<img src="https://thepracticaldev.s3.amazonaws.com/i/bh2wmpcltaybu1xsnico.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue