Skip to content
Snippets Groups Projects
Commit 5004ec89 authored by Olivier Goulet's avatar Olivier Goulet
Browse files

Merge branch 'oliviergoulet/main/32' into 'main'

feat: add linkedin and mastodon

Closes #32

See merge request !36
parents b5b8e006 e2402f8a
No related branches found
No related tags found
1 merge request!36feat: add linkedin and mastodon
Pipeline #45073 passed with stage
in 0 seconds
......@@ -48,9 +48,24 @@
</div>
</div>
<div class="col-sm-8 col-sm-offset-16 featured-twitter-share">
<a target="_blank" href="https://twitter.com/Oniro_Project"><i class="fa fa-twitter" aria-hidden="true"></i> Follow us @Oniro_Project</a>
<div class="row">
<div class="col-sm-5 col-sm-offset-18 text-left">
<div class="social-media-stack">
<a target="_blank" href="https://www.linkedin.com/showcase/oniro-project/">
<i class="fa fa-linkedin text-linkedin-primary" aria-hidden="true"></i>
<span class="social-media-stack-text hidden-xs">Follow us on Linkedin</span>
</a>
<a target="_blank" href="https://mastodon.social/@OniroProject">
<img src="/images/mastodon.png" alt="">
<span class="social-media-stack-text hidden-xs">Follow us on Mastodon</span>
</a>
<a target="_blank" href="https://twitter.com/Oniro_Project">
<img src="/images/twitter-x.png" alt="">
<span class="social-media-stack-text hidden-xs">Follow us @Oniro_Project</span>
</a>
</div>
</div>
</div>
</div>
</div>
{{ end }}
\ No newline at end of file
{{ end }}
......@@ -15,6 +15,11 @@
@brand-secondary: #0F0026; // Dark purple
@off-white: #f8f3ff;
// Social Media Branding
@twitter-primary: #1da1f2;
@mastodon-primary: #6364ff;
@linkedin-primary: #0077b5;
@featured-jumbotron-home-bg-img:none;
//== Typography
......@@ -37,4 +42,4 @@
@logo-eclipse-default-margin: 0 0 10px;
@btn-primary-color: @text-color;
\ No newline at end of file
@btn-primary-color: @text-color;
......@@ -87,6 +87,8 @@
top: 0;
right: 0;
z-index: 2;
pointer-events: none;
@media (min-width: @screen-sm-min) {
width: 500px;
height: 500px;
......@@ -105,7 +107,7 @@
z-index: 3;
color: #4c4d4e;
font-size: 26px;
margin-bottom: 0;
margin-bottom: -10rem;
&:after {
display: none;
}
......@@ -248,18 +250,64 @@
}
}
.featured-twitter-share {
padding: 0px 0 15px;
text-align: right;
font-size: 12px;
.text-twitter-primary {
color: @twitter-primary;
}
.text-mastodon-primary {
color: @mastodon-primary;
}
.text-linkedin-primary {
color: @linkedin-primary;
}
.social-media-stack {
display: flex;
flex-direction: column;
width: fit-content;
padding: 1rem;
margin-left: -15px;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
background-color: fade(@brand-secondary, 90%);
font-size: 1.2rem;
& > * {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
&:hover {
color: darken(white, 15%);
}
}
&-text {
width: 100%;
}
// Make fontawesome and image icons the same approximate size.
.fa {
font-size: 30px;
color: #1DA1F2;
top: 4px;
position: relative;
min-width: 3rem;
font-size: 3rem;
}
img {
min-width: 3rem;
max-height: 2.5rem;
object-fit: contain;
}
a:hover {
color: darken(white, 15%);
@media (min-width: 500px) {
background-color: unset;
}
@media (min-width: @screen-sm-min) {
& > * {
align-items: center;
}
}
}
......
static/images/mastodon.png

3.67 KiB

static/images/twitter-x.png

2.35 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment