Skip to content

Commit

Permalink
Add media query to improve navbar at mobile width
Browse files Browse the repository at this point in the history
  • Loading branch information
@philipmjohnson
philipmjohnson committed Mar 6, 2024
1 parent 9ca7f7a commit 7b77512
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 0 deletions.
10 changes: 10 additions & 0 deletions css/techfolio-theme/bitter.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,16 @@ a {
text-decoration: none;
}

@media (max-width: 500px) {
.navbar-brand {
display: none;
}

.navbar-brand-mobile {
display: inline;
}
}

/* Simplify the styling of the bottom of Essay cards. */
.card-footer {
background-color: var(--bs-white);
Expand Down
10 changes: 10 additions & 0 deletions css/techfolio-theme/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,16 @@ a {
text-decoration: none;
}

@media (max-width: 500px) {
.navbar-brand {
display: none;
}

.navbar-brand-mobile {
display: inline;
}
}

/* Simplify the styling of the bottom of Essay cards. */
.card-footer {
background-color: var(--bs-white);
Expand Down
10 changes: 10 additions & 0 deletions css/techfolio-theme/lime.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,16 @@ a {
text-decoration: none;
}

@media (max-width: 500px) {
.navbar-brand {
display: none;
}

.navbar-brand-mobile {
display: inline;
}
}

/* Simplify the styling of the bottom of Essay cards. */
.card-footer {
background-color: var(--bs-white);
Expand Down
10 changes: 10 additions & 0 deletions css/techfolio-theme/rubik.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,16 @@ a {
text-decoration: none;
}

@media (max-width: 500px) {
.navbar-brand {
display: none;
}

.navbar-brand-mobile {
display: inline;
}
}

/* Simplify the styling of the bottom of Essay cards. */
.card-footer {
background-color: var(--bs-white);
Expand Down
10 changes: 10 additions & 0 deletions css/techfolio-theme/skyblue.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,16 @@ a {
text-decoration: none;
}

@media (max-width: 500px) {
.navbar-brand {
display: none;
}

.navbar-brand-mobile {
display: inline;
}
}

.rounded-circle {
border-color: var(--tf-blue1);
border-style: solid;
Expand Down

2 comments on commit 7b77512

@mdrxy
Copy link

@mdrxy mdrxy commented on 7b77512 Mar 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! It should be noted that in order for this to take effect, users will need to add <a class="navbar-brand-mobile" href="{{ '/' | prepend: site.baseurl }}">Mason D.</a> to header.html after navbar-brand. I hard coded my abbreviated name, but adding site.data.bio.basics.shortname would probably be a more elegant solution so that it is set when people are configuring their bio during setup.

@philipmjohnson
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good insight! I tried it out in my portfolio, and the current effect is that on a mobile device, my name disappears entirely from the navbar. That's probably better than the way it was before, but not as good as your approach.

Please sign in to comment.