RanchiMall/projectb
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug fix

Browse Source
This commit is contained in:
sairaj mote 2023-06-15 01:18:34 +05:30
parent 360f0a8f5d
commit c4cbf398d3
4 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/main.css
View File

@ -168,6 +168,7 @@ article > * {
} }
#main_header ul a { #main_header ul a {
font-weight: 500; font-weight: 500;
font-size: 0.9rem;
} }
#main_header ul a::after { #main_header ul a::after {
content: ""; content: "";
@ -242,13 +243,13 @@ section:nth-of-type(4) p {
#poc_images { #poc_images {
display: grid; display: grid;
gap: 1vw; gap: 1vw;
grid-template-columns: repeat(4, 1fr); grid-template-columns: 1fr 1fr;
} }
#poc_images .span-2 { #poc_images .span-2 {
grid-column: span 2; grid-column: span 2;
} }
#poc_images img { #poc_images img {
height: 24vw; height: 24vmax;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -370,6 +371,9 @@ section:nth-of-type(4) p {
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
#poc_images img:nth-of-type(5) {
grid-area: 3/2/4/3;
}
.hide-on-small { .hide-on-small {
display: none !important; display: none !important;
} }
@ -382,6 +386,9 @@ section:nth-of-type(4) p {
opacity: 0.6; opacity: 0.6;
left: calc(100% - 50vw); left: calc(100% - 50vw);
} }
#poc_images {
grid-template-columns: repeat(4, 1fr);
}
.hide-on-large { .hide-on-large {
display: none !important; display: none !important;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

15
css/main.scss
View File

@ -139,6 +139,7 @@ article {
gap: 0.8rem; gap: 0.8rem;
a { a {
font-weight: 500; font-weight: 500;
font-size: 0.9rem;
&::after { &::after {
content: ""; content: "";
display: block; display: block;
@ -212,12 +213,12 @@ section {
#poc_images { #poc_images {
display: grid; display: grid;
gap: 1vw; gap: 1vw;
grid-template-columns: repeat(4, 1fr); grid-template-columns: 1fr 1fr;
.span-2 { .span-2 {
grid-column: span 2; grid-column: span 2;
} }
img { img {
height: 24vw; height: 24vmax;
object-fit: cover; object-fit: cover;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -322,6 +323,13 @@ section {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
#poc_images {
img {
&:nth-of-type(5) {
grid-area: 3/2/4/3;
}
}
}
.hide-on-small { .hide-on-small {
display: none !important; display: none !important;
} }
@ -334,6 +342,9 @@ section {
opacity: 0.6; opacity: 0.6;
left: calc(100% - 50vw); left: calc(100% - 50vw);
} }
#poc_images {
grid-template-columns: repeat(4, 1fr);
}
.hide-on-large { .hide-on-large {
display: none !important; display: none !important;
} }

16
index.html
View File

@ -206,17 +206,17 @@
router.addRoute('', () => { router.addRoute('', () => {
const teamMembersList = document.getElementById('team_members') const teamMembersList = document.getElementById('team_members')
teamMembers.sort((a, b) => a.name.localeCompare(b.name)) teamMembers.sort((a, b) => a.name.localeCompare(b.name))
teamMembers.forEach(member => { const renderedTeamMembers = teamMembers.map(member => {
const { image, name, title } = member const { image, name, title } = member
const memberItem = document.createElement('li') return html`
memberItem.classList.add('team-member') <li class="team-member">
memberItem.innerHTML = ` <img src="${image}" alt=${`${name} profile picture`} loading="lazy">
<img src="${image}" alt="${name} profile picture" loading="lazy"> <p class="team-member__name">${name},</p>
<p class="team-member__name">${name},</p> <p class="team-member__title">${title}</p>
<p class="team-member__title">${title}</p> </li>
` `
teamMembersList.appendChild(memberItem)
}) })
renderElem(teamMembersList, html`${renderedTeamMembers}`)
document.getElementById('team_members').addEventListener('click', e => { document.getElementById('team_members').addEventListener('click', e => {
}) })