alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

feat(Style): Apply responsive design

Browse source 
BREAKING CHANGE:
This commit is contained in:
Alexander Navarro 2024-03-13 11:37:54 -03:00
parent a950d4b2fa
commit d52de9bc59
3 changed files with 78 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/assets/style/global.css
View file

@ -70,22 +70,22 @@ p:last-child {
@media screen and (min-width: 640px) {
body {
min-width: 640px;
max-width: 640px;
}
}
@media screen and (min-width: 768px) {
body {
min-width: 768px;
max-width: 768px;
}
}
@media screen and (min-width: 1024px) {
body {
min-width: 1024px;
max-width: 1024px;
}
}
@media screen and (min-width: 1280px) {
body {
min-width: 1280px;
max-width: 1280px;
}
}
@media screen and (min-width: 1536px) {

84
src/assets/style/utils.css
View file

@ -48,6 +48,65 @@
flex-grow: 1;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
@media screen and (min-width: 640px) {
.flex-sm-wrap {
flex-wrap: wrap;
}
}
@media screen and (min-width: 768px) {
.flex-md-wrap {
flex-wrap: wrap;
}
}
@media screen and (min-width: 1024px) {
.flex-lg-wrap {
flex-wrap: wrap;
}
}
@media screen and (min-width: 1280px) {
.flex-xl-wrap {
flex-wrap: wrap;
}
}
@media screen and (min-width: 1536px) {
.flex-2xl-wrap {
flex-wrap: wrap;
}
}
@media screen and (min-width: 640px) {
.flex-sm-nowrap {
flex-wrap: nowrap;
}
}
@media screen and (min-width: 768px) {
.flex-md-nowrap {
flex-wrap: nowrap;
}
}
@media screen and (min-width: 1024px) {
.flex-lg-nowrap {
flex-wrap: nowrap;
}
}
@media screen and (min-width: 1280px) {
.flex-xl-nowrap {
flex-wrap: nowrap;
}
}
@media screen and (min-width: 1536px) {
.flex-2xl-nowrap {
flex-wrap: nowrap;
}
}
.flex-center {
display: flex;
justify-content: center;
@ -61,57 +120,58 @@
.grid {
--prj-gap: var(--prj-spacing-3);
--prj-columns: repeat(3, 1fr);
--prj-min-col-width: 150px;
display: grid;
grid-template-columns: var(--prj-columns);
gap: var(--prj-gap);
}
.grid-cols-1 {
--prj-columns: repeat(1, 1fr);
--prj-columns: repeat(1, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-2 {
--prj-columns: repeat(2, 1fr);
--prj-columns: repeat(2, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-3 {
--prj-columns: repeat(3, 1fr);
--prj-columns: repeat(3, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-4 {
--prj-columns: repeat(4, 1fr);
--prj-columns: repeat(4, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-5 {
--prj-columns: repeat(5, 1fr);
--prj-columns: repeat(5, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-6 {
--prj-columns: repeat(6, 1fr);
--prj-columns: repeat(6, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-7 {
--prj-columns: repeat(7, 1fr);
--prj-columns: repeat(7, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-8 {
--prj-columns: repeat(8, 1fr);
--prj-columns: repeat(8, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-9 {
--prj-columns: repeat(9, 1fr);
--prj-columns: repeat(9, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-10 {
--prj-columns: repeat(10, 1fr);
--prj-columns: repeat(10, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-11 {
--prj-columns: repeat(11, 1fr);
--prj-columns: repeat(11, minmax(var(--prj-min-col-width), 1fr));
}
.grid-cols-12 {
--prj-columns: repeat(12, 1fr);
--prj-columns: repeat(12, minmax(var(--prj-min-col-width), 1fr));
}
.gap-0 {

4
src/pages/index.astro
View file

@ -106,7 +106,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
<h2 class="mb-4">What I've been up to...</h2>
<div class="hstack flex-eq">
<div class="hstack flex-eq flex-wrap flex-md-nowrap">
<div class="vstack justify-content-center">
<h4 class="text-center">Blog</h4>
<ol class="list-unstyle mt-0 fs-5">
@ -144,7 +144,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
</div>
</div>
<div class="mt-5 hstack-reverse flex-eq">
<div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
<div class="vstack justify-content-center">
<h4 class="text-center">Games</h4>
<ol class="list-unstyle mt-0 fs-5">