Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fixes: Enhance Hover Effects for Cravel Tools Sublinks #781 #783

Closed
wants to merge 3 commits into from
+115 −37
Closed

fixes: Enhance Hover Effects for Cravel Tools Sublinks #781 #783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4fcbc04
css hovering fixes - Update _header.scss
sagarbendale2004 Oct 2, 2024
fced137
link hovering fixes - Update _footer.scss
sagarbendale2004 Oct 2, 2024
a1db663
Update _base.scss
sagarbendale2004 Oct 2, 2024
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
83 changes: 53 additions & 30 deletions site/themes/carvel/assets/scss/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,16 @@ body {
font-size: 16px;
color: $grey;
}

.wrapper {
max-width: 980px;
//width: 100%;
margin: 0px auto;
padding: 20px;
@include breakpoint(small) {
max-width: 100%;
}
}

.clearfix {
*zoom: 1;
&:before, &:after {
Expand All @@ -30,59 +31,54 @@ body {
clear: both;
}
}

h1, h2, h3, h4, h5, h6 {
font-weight: 300;
line-height: 1.25;
color: $black;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
font-weight: 600;
}
h5 {
font-size: 16px;
font-weight: 600;
}
h6 {
font-size: 14px;
font-weight: 600;
}

h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; font-weight: 600; }
h5 { font-size: 16px; font-weight: 600; }
h6 { font-size: 14px; font-weight: 600; }

.strong {
font-family: $metropolis-medium;
}

a {
text-decoration: none;
color: $blue;
font-family: $metropolis-medium;
&:hover {
color: $brightblue;
text-decoration: underline;
}
}

summary {
text-decoration: underline;
color: $blue;
cursor: pointer;
&:hover {
color: $brightblue;
}
}

hr {
margin: 30px 0;
border-width: 1px 0 0;
border-color: $lightgrey;
}
a:hover {
text-decoration: underline;
}

button {
background-color: unset;
border: none;
}

.button {
color: $blue;
font-size: 12px;
Expand All @@ -92,30 +88,41 @@ button {
padding: 14px 40px;
text-transform: uppercase;
border: 1px solid $white;

&.secondary {
background-color: $blue;
color: $white;
}

&.tertiary {
background-color: unset;
color: $white;
}

&:hover {
color: $white;
background-color: $brightblue;
text-decoration: underline;
}
}
.button:hover {
color: $white;
background-color: $brightblue;
text-decoration: underline;
}

.section-link {
color: #bbb;
font-size: 20px;
&:hover {
color: $blue;
text-decoration: underline;
}
}

strong {
font-family: $metropolis-medium;
}

.bg-grey {
background-color: $lightgrey;
}

.green-text {
color: $green;
}
Expand All @@ -125,9 +132,11 @@ strong {
grid-template-columns: 1fr 1fr 1fr 1fr;
row-gap: 20px;
column-gap: 15px;

@include breakpoint(medium) {
grid-template-columns: 1fr 1fr;
}

@include breakpoint(small) {
grid-template-columns: 1fr;
}
Expand All @@ -138,6 +147,7 @@ strong {
grid-template-columns: 1fr 1fr 1fr;
row-gap: 20px;
column-gap: 20px;

@include breakpoint(small) {
grid-template-columns: 1fr;
}
Expand All @@ -146,6 +156,7 @@ strong {
.grid.two {
display: grid;
grid-template-columns: 1fr 1fr;

@include breakpoint(small) {
grid-template-columns: 1fr;
}
Expand All @@ -155,22 +166,34 @@ code {
background: #efefef;
padding: 2px 4px;
font-size: 85%;

&:hover {
background: #ddd;
}
}

pre {
code {
display: block;
padding: 15px;
margin-bottom: 30px;
overflow-x: auto;
background: #f6f8fa;

&:hover {
background: #e1e4e8;
}

&.language-bash, &.language-bash-plain {
background: #202020;
color: #d0d0d0;

// Cannot see dark letters on dark bg
span[style*="color:#000"] {
color: #d0d0d0 !important;
}
}

&.language-yaml {
// A bit harder to read italicized text
span[style*="font-style:italic"] {
Expand Down
38 changes: 36 additions & 2 deletions site/themes/carvel/assets/scss/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,21 @@ footer {
padding-right: 0px;
}
}

a {
color: $darkgrey;
font-weight: 300;
font-size: 12px;
font-family: $metropolis-light;
text-decoration: none;

&:hover {
color: darken($darkgrey, 15%); // Darken color on hover
font-weight: 400; // Adjust font weight on hover if needed
text-decoration: underline; // Add underline for hover state
}
}

.right-links {
padding: 0px;
li {
Expand All @@ -33,27 +48,42 @@ footer {
font-weight: 300;
font-size: 12px;
font-family: $metropolis-light;
text-decoration: none;

&:hover {
color: $blue; // Customize hover color for right-links
}
}
}
.mobile {
display: none;
}
}

.left-links {
p {
margin: 0px;
}
.copywrite {
font-size: 12px;
padding-right: 10px;
a {
a {
font-size: 12px;
color: $darkgrey;
font-family: $metropolis-light;

&:hover {
color: lighten($darkgrey, 10%); // Custom hover for copywrite links
text-decoration: underline;
}
}
}
a {
vertical-align: middle;

&:hover {
color: $blue; // Global hover style for left-links
}
}
img {
height: 46px;
Expand All @@ -74,6 +104,10 @@ footer {
font-size: 12px;
font-family: $metropolis-light;
vertical-align: middle;

&:hover {
color: $blue; // Customize hover effect for bottom links
}
}
img {
height: 30px;
Expand Down Expand Up @@ -112,4 +146,4 @@ footer {
}
}
}
}
}
31 changes: 26 additions & 5 deletions site/themes/carvel/assets/scss/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,23 +27,33 @@ header {
}
}
a {
color: $grey;
color: $grey; // Use a variable for color consistency
font-weight: 300;
font-size: 16px;
font-family: $metropolis-light;
transition: all 0.3s ease; // Smooth transition for hover effects

&.active {
font-family: $metropolis-medium;
}
}

// Updated hover effect for links
a:hover {
color: $grey;
font-weight: 300;
font-family: $metropolis-light;
color: lighten($grey, 15%); // Make the text color lighter on hover
font-weight: 400; // Slightly increase font weight on hover
text-decoration: none; // Remove underline for a cleaner look
transform: scale(1.1); // Pop-up effect by scaling the link
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); // Subtle shadow for pop-up effect
background-color: lighten($grey, 40%); // Background box on hover
padding: 5px 10px; // Add padding for a boxed feel
border-radius: 5px; // Rounded corners for the hover effect

&.active {
font-family: $metropolis-medium;
}
text-decoration: underline;
}

li {
list-style-type: none;
display: inline;
Expand Down Expand Up @@ -182,10 +192,12 @@ header {
}
}

// Hover effect for subproject links
.subprojects-in-primary-nav {
position: relative;
padding-top: 10px;
padding-bottom: 10px;

ul {
display: none;
position: absolute;
Expand All @@ -195,15 +207,24 @@ header {
z-index: 1;
padding: 0;
left: 0;

li {
display: block;
padding: 10px 15px;
width: 150px;
transition: all 0.3s ease; // Smooth transition for sublinks
}
}
}

.subprojects-in-primary-nav:hover {
ul {
display: block;
}

li:hover {
background-color: lighten($grey, 40%); // Background on hover
transform: scale(1.05); // Slight scale effect
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); // Subtle shadow
}
}
Loading