Alter link behaviour of OG previews
This commit is contained in:
parent
3f5838a75f
commit
1dfde65556
3 changed files with 44 additions and 35 deletions
|
|
@ -1127,23 +1127,25 @@ select#aspect_ids_ {
|
||||||
|
|
||||||
.opengraph {
|
.opengraph {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 5px 0px 5px 0px;
|
||||||
|
border-top: solid 1px $border-grey;
|
||||||
|
border-bottom: solid 1px $border-grey;
|
||||||
|
padding: 5px 0px 2px 0px;
|
||||||
|
overflow: hidden;
|
||||||
a {
|
a {
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #000;
|
color: #000;
|
||||||
margin: 5px 0px 5px 0px;
|
}
|
||||||
border-top: solid 1px $border-grey;
|
img {
|
||||||
border-bottom: solid 1px $border-grey;
|
margin: 3px 3px 3px 0px;
|
||||||
padding: 5px 0px 2px 0px;
|
float: left;
|
||||||
overflow: hidden;
|
max-width: 80px;
|
||||||
img {
|
padding-right: 5px;
|
||||||
margin: 0px 3px 3px 0px;
|
}
|
||||||
float: left;
|
.og-title {
|
||||||
max-width: 80px;
|
margin-bottom: 3px;
|
||||||
}
|
font-weight: bold;
|
||||||
.og-title {
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,30 @@
|
||||||
.opengraph {
|
.opengraph-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
font-style: normal;
|
||||||
|
margin: 10px 0px 10px 0px;
|
||||||
|
border-top: solid 1px $border-grey;
|
||||||
|
border-bottom: solid 1px $border-grey;
|
||||||
|
padding: 10px 0px 5px 0px;
|
||||||
|
overflow: hidden;
|
||||||
a {
|
a {
|
||||||
display: block;
|
|
||||||
text-decoration: none;;
|
|
||||||
color: #000;
|
color: #000;
|
||||||
margin: 10px 0px 10px 0px;
|
|
||||||
border-top: solid 1px $border-grey;
|
|
||||||
border-bottom: solid 1px $border-grey;
|
|
||||||
padding: 10px 0px 5px 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin: 0px 5px 5px 0px;
|
margin: 5px 5px 5px 0px;
|
||||||
float: left;
|
float: left;
|
||||||
max-width: 155px;
|
max-width: 150px;
|
||||||
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.og-title {
|
.og-title {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
a:hover {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
.og-description {
|
||||||
|
color: $text-grey;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
{{#unless o_embed_cache}}
|
{{#unless o_embed_cache}}
|
||||||
{{#if open_graph_cache}}
|
{{#if open_graph_cache}}
|
||||||
<a href="{{open_graph_cache.url}}" target="_blank">
|
<div class="opengraph-container">
|
||||||
<div>
|
<a href="{{open_graph_cache.url}}" target="_blank">
|
||||||
<img src="{{open_graph_cache.image}}" />
|
<img src="{{open_graph_cache.image}}" />
|
||||||
<strong>{{open_graph_cache.title}}</strong>
|
<p class="og-title">{{open_graph_cache.title}}</p>
|
||||||
<p>{{open_graph_cache.description}}</p>
|
</a>
|
||||||
</div>
|
<p class="og-description">{{open_graph_cache.description}}</p>
|
||||||
</a>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/unless}}
|
{{/unless}}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue