Skip to content

Commit

Permalink
Merge pull request #20 from colmedev/colmedev/responsive
Browse files Browse the repository at this point in the history
feat: ✨ improve home page responsive
  • Loading branch information
felixicaza authored Sep 19, 2024
2 parents 02d609e + 5d9c6e2 commit fcadc6b
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 18 deletions.
3 changes: 1 addition & 2 deletions src/components/CardSample.astro
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,7 @@ const cssVars = {

<style>
.card {
--size: 346px;

--size: 280px;
--bgcolor: var(--card-bgcolor-1);
--border-color: var(--card-border-color);
--border-size: calc(var(--size) / 43);
Expand Down
7 changes: 7 additions & 0 deletions src/components/Footer/Footer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,13 @@ const BASE_URL = import.meta.env.BASE_URL;
align-items: center;
gap: 0.5rem;

@media (width <= 767.98px) {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-inline: 1rem;
}

& .heart {
display: inline-block;
animation: pulse 0.9s ease-out infinite;
Expand Down
5 changes: 5 additions & 0 deletions src/components/ScrollToTop.astro
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ const { alignment = 'right' } = Astro.props;
bottom: var(--placement);
transform: scale(0);

@media (width <= 767.98px) {
display: none;
content-visibility: hidden;
}

&.left {
left: var(--placement);
}
Expand Down
7 changes: 4 additions & 3 deletions src/sections/home/Hero.astro
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ const BASE_URL = import.meta.env.BASE_URL;
}

.card {
--width: 530px;
--height: 920px;
--width: 400px;
--height: 600px;

--border-size: 0.563rem;
--border-color: #282828;
Expand All @@ -34,8 +34,9 @@ const BASE_URL = import.meta.env.BASE_URL;

transition: all 0.6s;

@media (width >= 768px) {
@media (width >= 767.98px) {
--width: 600px;
--height: 920px;
}

& .card-back {
Expand Down
34 changes: 21 additions & 13 deletions src/sections/home/Information.astro
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,11 @@
border: 1px solid rgb(250 134 206 / 50%);
display: grid;
gap: 1rem;
margin-inline: 1rem;

@media (width >= 768px) {
@media (width >= 767.98px) {
padding: 2.25rem;
margin-inline: 0;
}

@media (width >= 1200px) {
Expand All @@ -47,18 +49,24 @@
position: relative;
background-position-x: center;

&::before,
&::after {
--rotate-card: 20deg;
--scale-card: 0.97;

content: '';
position: absolute;
width: 183px;
height: inherit;
background-image: inherit;
background-repeat: inherit;
z-index: -1;
@media (width <= 768px) {
width: 100%;
}

@media (width >= 768px) {
&::before,
&::after {
--rotate-card: 20deg;
--scale-card: 0.97;

content: '';
position: absolute;
width: 183px;
height: inherit;
background-image: inherit;
background-repeat: inherit;
z-index: -1;
}
}

&.show {
Expand Down

0 comments on commit fcadc6b

Please sign in to comment.