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";
@mixin up-to-mobile {
@media (max-width: #{$mobile-width - 1px}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@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);
$mobile-width: 350px;
$tablet-width: 768px;
$desktop-width: 1024px;
@ -28,13 +29,14 @@ $main-background: $color-neutral-light;
$article-background: $color-neutral-light;
$article-offset-top: -$header-height + -$gap-sm;
$dropdown-padding: 12px 16px;
$dropdown-border-radius: $radius-md;
$dropdown-animation-timing: .4s;
$dropdown-label-padding: 12px 8px;
$dropdown-label-background-color: transparent;
$dropdown-arrow-size: 10px;
$dropdown-options-background-color: $color-neutral-light;
$dropdown-options-space-from-label: $gap-sm;
$dropdown-option-padding: 12px 16px;
$dropdown-option-border-bottom-color: rgba($color-neutral-dark, .04);
$banner-image-height: 300px;

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

@ -21,7 +21,6 @@
.dropdown {
position: relative;
min-width: 110px;
&__label {
display: block;
@ -34,7 +33,7 @@
text-decoration: inherit;
text-transform: inherit;
text-align: center;
padding: $dropdown-padding;
padding: $dropdown-label-padding;
background-color: $dropdown-label-background-color;
border-radius: $dropdown-border-radius;
&:after {
@ -51,7 +50,8 @@
&__options {
visibility: visible;
min-width: 100%;
z-index: 1;
min-width: 110px;
max-height: 50vh;
position: absolute;
top: 100%;
@ -64,6 +64,11 @@
box-shadow: $shadow-soft;
overflow: auto;
animation: hide math.div($dropdown-animation-timing, 2) ease forwards;
@include up-to-mobile {
top: 75%;
}
&:before {
content: '';
width: 0;
@ -81,7 +86,7 @@
&__option {
a {
display: block;
padding: $dropdown-padding;
padding: $dropdown-option-padding;
color: rgba(black, .6);
text-decoration: none;
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;
color: $color-neutral-light;
list-style: none;
margin-left: $gap-sm * 2;
}
&__menu-item {
margin-right: $gap-sm;
&:last-child {
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 {
font-size: 2.6em;
margin-bottom: $gap-sm;
@include up-to-mobile {
word-break: break-all;
}
@include desktop {
width: 85%;
font-size: 3.6em;