xsteadfastx/conventionalcommits.org
1
0
Fork 0
mirror of https://github.com/conventional-commits/conventionalcommits.org.git synced 2024-11-15 02:45:15 +01:00
Code Issues Projects Releases Wiki Activity

fix: menu overflow in small screens

Browse Source
This commit is contained in:
Lorenzo D'Ianni 2022-10-27 21:17:37 +02:00 committed by GitHub
parent 4b65a376a3
commit 2666508143
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
themes/conventional-commits/static/css/scss/abstracts/_mixins.scss
View File

@ -1,5 +1,12 @@
@import "variables"; @import "variables";
@mixin up-to-mobile {
@media (max-width: #{$mobile-width - 1px}) {
@content;
}
}
@mixin tablet { @mixin tablet {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) { @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@content; @content;

4
themes/conventional-commits/static/css/scss/abstracts/_variables.scss
View File

@ -14,6 +14,7 @@ $radius-lg: 8px;
$shadow-soft: 0 2px 10px 0 rgba(0, 0, 0, .03), 0 2px 20px 10px rgba(0, 0, 0, 0.02); $shadow-soft: 0 2px 10px 0 rgba(0, 0, 0, .03), 0 2px 20px 10px rgba(0, 0, 0, 0.02);
$mobile-width: 350px;
$tablet-width: 768px; $tablet-width: 768px;
$desktop-width: 1024px; $desktop-width: 1024px;
@ -28,13 +29,14 @@ $main-background: $color-neutral-light;
$article-background: $color-neutral-light; $article-background: $color-neutral-light;
$article-offset-top: -$header-height + -$gap-sm; $article-offset-top: -$header-height + -$gap-sm;
$dropdown-padding: 12px 16px;
$dropdown-border-radius: $radius-md; $dropdown-border-radius: $radius-md;
$dropdown-animation-timing: .4s; $dropdown-animation-timing: .4s;
$dropdown-label-padding: 12px 8px;
$dropdown-label-background-color: transparent; $dropdown-label-background-color: transparent;
$dropdown-arrow-size: 10px; $dropdown-arrow-size: 10px;
$dropdown-options-background-color: $color-neutral-light; $dropdown-options-background-color: $color-neutral-light;
$dropdown-options-space-from-label: $gap-sm; $dropdown-options-space-from-label: $gap-sm;
$dropdown-option-padding: 12px 16px;
$dropdown-option-border-bottom-color: rgba($color-neutral-dark, .04); $dropdown-option-border-bottom-color: rgba($color-neutral-dark, .04);
$banner-image-height: 300px; $banner-image-height: 300px;

13
themes/conventional-commits/static/css/scss/components/_dropdown.scss
View File

@ -21,7 +21,6 @@
.dropdown { .dropdown {
position: relative; position: relative;
min-width: 110px;
&__label { &__label {
display: block; display: block;
@ -34,7 +33,7 @@
text-decoration: inherit; text-decoration: inherit;
text-transform: inherit; text-transform: inherit;
text-align: center; text-align: center;
padding: $dropdown-padding; padding: $dropdown-label-padding;
background-color: $dropdown-label-background-color; background-color: $dropdown-label-background-color;
border-radius: $dropdown-border-radius; border-radius: $dropdown-border-radius;
&:after { &:after {
@ -51,7 +50,8 @@
&__options { &__options {
visibility: visible; visibility: visible;
min-width: 100%; z-index: 1;
min-width: 110px;
max-height: 50vh; max-height: 50vh;
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -64,6 +64,11 @@
box-shadow: $shadow-soft; box-shadow: $shadow-soft;
overflow: auto; overflow: auto;
animation: hide math.div($dropdown-animation-timing, 2) ease forwards; animation: hide math.div($dropdown-animation-timing, 2) ease forwards;
@include up-to-mobile {
top: 75%;
}
&:before { &:before {
content: ''; content: '';
width: 0; width: 0;
@ -81,7 +86,7 @@
&__option { &__option {
a { a {
display: block; display: block;
padding: $dropdown-padding; padding: $dropdown-option-padding;
color: rgba(black, .6); color: rgba(black, .6);
text-decoration: none; text-decoration: none;
border-bottom: 1px solid $dropdown-option-border-bottom-color; border-bottom: 1px solid $dropdown-option-border-bottom-color;

24
themes/conventional-commits/static/css/scss/layout/_header.scss
View File

@ -29,12 +29,36 @@
display: flex; display: flex;
color: $color-neutral-light; color: $color-neutral-light;
list-style: none; list-style: none;
margin-left: $gap-sm * 2;
} }
&__menu-item { &__menu-item {
margin-right: $gap-sm; margin-right: $gap-sm;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
} }
@include up-to-mobile {
.header {
.container {
align-items: flex-start;
height: auto;
margin-top: $gap-sm;
}
&__menu {
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
margin-top: $gap-sm * -1;
}
&__menu-item {
margin-right: 0;
}
}
}

5
themes/conventional-commits/static/css/scss/layout/_welcome.scss
View File

@ -37,6 +37,11 @@
&__title { &__title {
font-size: 2.6em; font-size: 2.6em;
margin-bottom: $gap-sm; margin-bottom: $gap-sm;
@include up-to-mobile {
word-break: break-all;
}
@include desktop { @include desktop {
width: 85%; width: 85%;
font-size: 3.6em; font-size: 3.6em;