Skip to content
This repository has been archived by the owner on Mar 29, 2022. It is now read-only.

Added CTA slim banner for updates page above navigation header #617

Merged
merged 1 commit into from
Oct 6, 2020
Merged

Added CTA slim banner for updates page above navigation header #617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 63 additions & 5 deletions app/assets/stylesheets/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,75 @@
// Place all the styles related to the Users controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
$break-xxsmall: 352px;
$break-xsmall: 481px;
$break-small: 1024px;
$break-med: 1288px;
$grey-darker: hsl(222, 45%, 21%); // box dark blue
$black-bis: hsl(223.2, 54.35%, 18.04%); // background color

$light-cta-banner-hover: #542247;
$dark-cta-banner-hover: #2E4C5E;
header {
padding: 30px 55px 0;
padding: 75px 55px 30px;
margin: 0;

@media screen and (max-width: $break-med) {
padding: 30px 85px 30px 85px;
padding: 75px 85px 30px 85px;
}

@media screen and (max-width: $break-small) {
padding: 50px 85px 30px 85px;
}

@media screen and (max-width: $break-xsmall) {
padding-top: 100px;
}

@media screen and (max-width: $break-xxsmall) {
padding-top: 150px;
}
}

.cta-slim-banner {
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
width: 100%;
display: flex;
align-items: center;
padding: 10px 55px;
color: $grey-darker;
background-color: $pink;
font-family: "Inter Bold", "Helvetica", "Arial", san-serif;
font-size: 0.875rem;

span{
padding: 0.4em 0.6em;
}

span:first-child {
text-transform: uppercase;
margin: 0em 0.5em;
background: white;
border-radius: 0.3em;
font-family: "Inter Black", "Helvetica", "Arial", san-serif;
height: fit-content;
}

@media screen and (max-width: $break-small) {
padding-inline-start: 30px 30px 30px 30px;
padding: 10px 20px;
}
}

a.cta-slim-banner:hover{
color: $light-cta-banner-hover;

span:last-child{
text-decoration: underline;
}
}

$navColor: rgba(0, 0, 0, 0);

// survey block styling
Expand Down Expand Up @@ -291,7 +342,7 @@ $navColor: rgba(0, 0, 0, 0);
width: 32px;
left: 0;
bottom: 0px;
background-color: white;
background-color: $white;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 50%;
Expand All @@ -305,4 +356,11 @@ body.dark {
color: $dark-highlightColor !important;
}
}
.cta-slim-banner {
background-color: $diamondColor;
color: $tableHeaderColor;
}
a.cta-slim-banner:hover{
color: $dark-cta-banner-hover;
}
}
11 changes: 8 additions & 3 deletions app/assets/stylesheets/homepage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ main.home {
justify-content: space-between;
align-items: center;
text-align: left;
margin-top: -140px;
margin-top: -160px;
padding-top: 140px;

@media screen and (max-width: $break-med) {
Expand All @@ -56,13 +56,18 @@ main.home {
@media screen and (max-width: $break-small) {
height: 100%;
top: 0;
margin-top: -600px;
margin-top: -625px;
margin-bottom: 160px;
padding-top: 600px;
padding-top: 625px;
padding-bottom: 64px;
flex-direction: column;
}

@media screen and (max-width: $break-xxsmall) {
margin-top: -650px;
padding-top: 650px;
}

.hero-content {
margin-left: 160px;

Expand Down
9 changes: 7 additions & 2 deletions app/views/shared/_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
<header>
<%= link_to hacktoberfest_update_path, :class => "cta-slim-banner" do %>
<span>Updated</span>
<span>Hacktoberfest is now officially opt-in only for projects and maintainers.</span>
<% end %>
<nav class="navbar" id="navbar">
<div class="navbar-primary">
<a href="/" class="logo">
Expand All @@ -23,6 +27,7 @@
</div>
</li>
<li><%= link_to "faq", faq_path, :class => active_path_class?(faq_path, '') + " navLink" %></li>
<li><%= link_to "updates", hacktoberfest_update_path, :class => active_path_class?(hacktoberfest_update_path, '') + " navLink" %></li>
<li>
<% if @current_user %>
<%= link_to "profile", profile_path, :class => active_path_class?(profile_path, '') + " navLink" %>
Expand All @@ -39,9 +44,9 @@
id="toggle-checkbox"
type="checkbox"
onclick="
localStorage.setItem('mode', (localStorage.getItem('mode') || 'light') === 'light' ? 'dark' : 'light');
localStorage.setItem('mode', (localStorage.getItem('mode') || 'light') === 'light' ? 'dark' : 'light');
localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark');
"
"
title="Dark/light"
/>
<span class="toggle-slider"></span>
Expand Down