cptluke76/Simple_Portfolio
1
0
Fork 0
mirror of https://github.com/its-michaelroy/Simple_Portfolio.git synced 2026-06-03 23:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Resolved spacing for Download CV Buttons & 6 icons in footer

Browse Source
This commit is contained in:
its-michaelroy
2025-04-04 18:20:06 -03:00
parent ee8a0b29d9
commit 0d1c3a4043
2 changed files with 71 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
assets/css/main.css
View File

@@ -116,8 +116,25 @@ body {
.CVButtons {
display: flex;
justify-content: space-between;
justify-content: center; /* Center the buttons horizontally */
gap: 1em; /* Add a 1em space between the buttons */
margin-bottom: 1em;
flex-wrap: wrap; /* Allow buttons to wrap if needed */
}
.CVButtons .button {
flex: 1; /* Make buttons take equal space */
min-width: 200px; /* Ensure buttons don't get too small */
max-width: 250px; /* Optional: limit the maximum width */
}
#icons {
display: flex;
flex-wrap: nowrap; /* Prevent icons from wrapping */
justify-content: center; /* Center the icons horizontally */
margin: 0 auto;
width: 100%;
overflow-x: auto; /* Allow horizontal scrolling if needed */
}
ol,
@@ -2837,6 +2854,16 @@ input[type="button"]:disabled,
#footer .icons {
margin: 1em 0 0 0;
text-align: center;
display: flex; /* Ensure flexbox is applied */
flex-wrap: nowrap; /* Prevent wrapping to multiple lines */
justify-content: center; /* Center the icons horizontally */
overflow-x: auto; /* Allow horizontal scrolling if needed */
white-space: nowrap; /* Keep items on one line */
}
#footer .icons li {
display: inline-block; /* Ensure inline behavior within flex */
padding: 0 1em 0 0; /* Maintain spacing between icons */
}
#footer .icons a {
@@ -3315,6 +3342,13 @@ body.is-touch .poptrox-popup .closer {
@media screen and (max-width: 736px) {
/* Basic */
#footer .icons a {
font-size: 1em; /* Reduce icon size */
}
#footer .icons li {
padding: 0 0.75em 0 0; /* Reduce padding between icons */
}
h1 {
font-size: 1.5em;
}
@@ -3385,6 +3419,17 @@ body.is-touch .poptrox-popup .closer {
.poptrox-popup .nav-previous:before {
margin-top: -1em;
}
.CVButtons {
flex-direction: column; /* Stack buttons vertically */
align-items: center; /* Center buttons horizontally when stacked */
gap: 0.5em; /* Reduce the space between stacked buttons to 0.5em */
}
.CVButtons .button {
width: 100%; /* Make buttons full-width on mobile */
max-width: 300px; /* Optional: limit the maximum width on mobile */
}
}
/* XSmall */

25
assets/sass/main.scss
View File

@@ -1508,6 +1508,31 @@ $size-header-pad: 4em;
/* Small */
.CVButtons {
display: flex;
justify-content: center;
gap: 1em;
margin-bottom: 1em;
flex-wrap: wrap;
.button {
flex: 1;
min-width: 200px;
max-width: 250px;
}
@include breakpoint('<=small') {
flex-direction: column;
align-items: center;
gap: 0.5em;
.button {
width: 100%;
max-width: 300px;
}
}
}
@include breakpoint('<=small') {
$size-header-pad: 1.5em;