Skip to content

Commit

Permalink
For phone, the menu items are at the top
Browse files Browse the repository at this point in the history
  • Loading branch information
@CosmeValera
CosmeValera committed Oct 19, 2024
1 parent d0e7a28 commit d4dd914
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 125 deletions.
66 changes: 21 additions & 45 deletions sass/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,69 +57,45 @@ h1.page-title {
///////////////////////
.lateral-menu {
display: flex;
align-items: flex-end;
position: fixed;
top: 50%;
right: 20px; /* Keep the menu on the right */
transform: translateY(-50%);
flex-direction: column;
z-index: 1000;
flex-direction: column; // Stack items vertically for phones if needed
justify-content: flex-start;
width: 100%; /* Stretch the menu across the screen */
padding: 5px 0;
top: 0; /* Pin it to the top */
background-color: $color-bg;
z-index: 999; /* Ensure it stays above other content */

.menu-item-container {
margin: 10px 0;
margin: 0;
flex-grow: 1; /* Make each menu item take up equal space */
text-align: center;

margin-bottom: 10px; // Add some space between items when stacked

.menu-item {
display: flex;
align-items: center;
justify-content: flex-end; /* Align the icon to the right */
justify-content: center;
background-color: black;
color: white;
padding: 10px;
border-radius: 50%;
padding: 8px 10px;
border-radius: 20px;
transition: all 0.3s ease;
overflow: hidden;
white-space: nowrap;
width: 50px;
height: 50px;
position: relative;

&:hover {
width: 150px; /* Expand width to the left */
border-radius: 30px;
width: 100%;
height: 40px;

.menu-label {
opacity: 1;
transform: translateX(0);
}

.menu-icon {
opacity: 1;
transform: scale(1.15);
}
}

.menu-icon {
opacity: 0.9;
font-size: 24px;
display: block;
transition: transform 0.3s ease;
margin: 0 2px 0 10px;
font-size: 18px; // Slightly smaller for mobile
margin-right: 5px;
}

.menu-label {
display: inline-block;
font-size: 14px;
margin-right: 10px; /* Place the text on the left */
opacity: 0; /* Initially hide the text */
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateX(+50px); /* Move the text off-screen */
font-family: Andika;
font-weight: 700;
font-size: 12px; // Slightly smaller text for mobile
font-weight: 600;
}
}
}
}

///////////////////////
// END: LATERAL-MENU //
///////////////////////
223 changes: 143 additions & 80 deletions sass/_responsive.scss
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,165 @@
main {
@media screen and (min-width: $break-small) {
.filter-buttons {
.filter-button {
&:hover {
color: $color-fg-secondary; /* Computer: filters have a hover blue */
body {
.lateral-menu {
@media screen and (min-width: $break-medium) {
display: flex;
align-items: flex-end;
position: fixed;
top: 50%;
right: 20px; /* Keep the menu on the right */
transform: translateY(-50%);
flex-direction: column;
z-index: 1000;
width: unset;
background-color: transparent;

.menu-item-container {
margin: 10px 0;
text-align: center;

.menu-item {
display: flex;
align-items: center;
justify-content: flex-end; /* Align the icon to the right */
background-color: black;
color: white;
padding: 10px;
border-radius: 50%;
transition: all 0.3s ease;
overflow: hidden;
white-space: nowrap;
width: 50px;
height: 50px;
position: relative;

&:hover {
width: 150px; /* Expand width to the left */
border-radius: 30px;

.menu-label {
opacity: 1;
transform: translateX(0);
}

.menu-icon {
opacity: 1;
transform: scale(1.15);
}
}

.menu-icon {
opacity: 0.9;
font-size: 24px;
display: block;
transition: transform 0.3s ease;
margin: 0 2px 0 10px;
}

.menu-label {
display: inline-block;
font-size: 14px;
margin-right: 10px; /* Place the text on the left */
opacity: 0; /* Initially hide the text */
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateX(+50px); /* Move the text off-screen */
font-family: Andika;
font-weight: 700;
}
}
}
}
}
}

/* Phone & tablets: column left goes on top of column right */
@media screen and (max-width: $break-large) {
flex-direction: column;
margin-top: 0;

.column.left {
display: flex;
flex-direction: column;
align-items: center;

nav.nav-index {
margin-bottom: 30px;
ul {
padding: 0px;
margin: 0px 0px 16px 0px;
li {
a.menu-item {
margin: auto;
}

main {
@media screen and (min-width: $break-small) {
.filter-buttons {
.filter-button {
&:hover {
color: black; /* Computer: filters have a hover blue */
}
}
}

img.portrait-index {
margin: 0;
}
}

.column.right {
h1 {
margin-top: 0;
}
}
}
@media screen and (max-width: $break-medium) {
.column.right {
img.portrait-menu-item {
max-width: 60px;
max-height: 60px;
}
}
}

@media screen and (max-width: $break-medium) {
.filter-buttons {
overflow: auto; /* Phone: scrollbar for filter buttons*/
/* Phone & tablets: column left goes on top of column right */
@media screen and (max-width: $break-large) {
flex-direction: column;
gap: 0.4rem;
margin: 2vw 4vw;
button.filter-button {
border-radius: 5px;
margin-top: 0;

.column.left {
display: flex;
flex-direction: column;
align-items: center;

nav.nav-index {
margin-bottom: 30px;
ul {
padding: 0px;
margin: 0px 0px 16px 0px;
li {
a.menu-item {
margin: auto;
}
}
}
}

img.portrait-index {
margin: 0;
}
}

.column.right {
h1 {
margin-top: 0;
}
}
}
.column.right {
img.portrait-menu-item {
max-width: clamp(40px, calc(11vw + 4px), 55px);
max-height: clamp(40px, calc(11vw + 4px), 55px);
@media screen and (max-width: $break-medium) {
.filter-buttons {
overflow: auto; /* Phone: scrollbar for filter buttons*/
flex-direction: column;
gap: 0.4rem;
margin: 2vw 4vw;
button.filter-button {
border-radius: 5px;
}
}
.column.right {
img.portrait-menu-item {
max-width: clamp(40px, calc(11vw + 4px), 55px);
max-height: clamp(40px, calc(11vw + 4px), 55px);
}
}
}
}

@media (min-width: $break-extra-large) {
#sponsor #section-tiers .tier-cards {
flex-direction: row;
.tier-card {
.tier-card-header {
h1 {
font-size: 1.0rem;
margin-bottom: 0.65rem;
}
small {
font-size: 0.75rem;
}
.tier-card-content {
p {
font-size: 1.35rem;
@media (min-width: $break-extra-large) {
#sponsor #section-tiers .tier-cards {
flex-direction: row;
.tier-card {
.tier-card-header {
h1 {
font-size: 1.0rem;
margin-bottom: 0.65rem;
}
li {
font-size: 0.85rem;
small {
font-size: 0.75rem;
}
.tier-card-content {
p {
font-size: 1.35rem;
}
li {
font-size: 0.85rem;
}
}
}
}
}
}
#sponsor #section-contribution .contribution {
.donation-options {
flex-direction: row;
gap: 10px;
#sponsor #section-contribution .contribution {
.donation-options {
flex-direction: row;
gap: 10px;
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% if page.title %}{{ page.title }}{% else %}{{ config.title }}{% endif %}{% endblock title %}</title>

<link rel="stylesheet" href="{{ get_url(path="main.css") | safe }}">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Expand Down

0 comments on commit d4dd914

Please sign in to comment.