styling changes
This commit is contained in:
sairaj mote
parent
47d5b8c6ed
commit
ad7efc1fd8
34
css/main.css
34
css/main.css
@ -129,7 +129,7 @@ ol {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
.flex-direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -252,8 +252,9 @@ article > * {
|
||||
section {
|
||||
display: grid;
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
align-content: center;
|
||||
padding-bottom: 6rem;
|
||||
min-height: 40vmax;
|
||||
}
|
||||
section:nth-of-type(2) {
|
||||
overflow: hidden;
|
||||
@ -345,7 +346,7 @@ section:nth-of-type(2) {
|
||||
z-index: -1;
|
||||
}
|
||||
.milestone__title {
|
||||
margin-top: 3rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.carousel-control {
|
||||
@ -501,8 +502,10 @@ section:nth-of-type(2) {
|
||||
display: grid;
|
||||
max-width: 42rem;
|
||||
width: auto;
|
||||
gap: 1rem 2rem;
|
||||
grid-template-areas: "label title" "label description";
|
||||
align-items: center;
|
||||
padding-right: 0;
|
||||
}
|
||||
#methodology_wrapper .milestone:not(:last-child) {
|
||||
padding-bottom: 3rem;
|
||||
@ -519,11 +522,9 @@ section:nth-of-type(2) {
|
||||
#methodology_wrapper .milestone__title {
|
||||
grid-area: title;
|
||||
margin-top: 0;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
#methodology_wrapper .milestone__description {
|
||||
grid-area: description;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
#economic_framework h2 {
|
||||
@ -551,23 +552,27 @@ section:nth-of-type(2) {
|
||||
|
||||
#team_members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));
|
||||
gap: 3rem 1.5rem;
|
||||
gap: 1rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: min(10rem, 50vw) 1fr;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.team-member img {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
aspect-ratio: 3/3.5;
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 1.2rem;
|
||||
width: 100%;
|
||||
}
|
||||
.team-member .flex {
|
||||
padding: 1rem;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.team-member__name {
|
||||
font-weight: 700;
|
||||
@ -768,6 +773,9 @@ section:nth-of-type(2) {
|
||||
.project {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
#team_members {
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
}
|
||||
.hide-on-large {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -105,7 +105,7 @@ ol {
|
||||
.align-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
.flex-column {
|
||||
.flex-direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-1 {
|
||||
@ -213,8 +213,9 @@ article {
|
||||
section {
|
||||
display: grid;
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
align-content: center;
|
||||
padding-bottom: 6rem;
|
||||
min-height: 40vmax;
|
||||
&:nth-of-type(2) {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -302,7 +303,7 @@ section {
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
margin-top: 3rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.carousel-control {
|
||||
@ -451,8 +452,10 @@ section {
|
||||
display: grid;
|
||||
max-width: 42rem;
|
||||
width: auto;
|
||||
gap: 1rem 2rem;
|
||||
grid-template-areas: "label title" "label description";
|
||||
align-items: center;
|
||||
padding-right: 0;
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
@ -468,11 +471,9 @@ section {
|
||||
&__title {
|
||||
grid-area: title;
|
||||
margin-top: 0;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
&__description {
|
||||
grid-area: description;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -500,20 +501,24 @@ section {
|
||||
|
||||
#team_members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));
|
||||
gap: 3rem 1.5rem;
|
||||
gap: 1rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.team-member {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: min(10rem, 50vw) 1fr;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
aspect-ratio: 3/3.5;
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 1.2rem;
|
||||
width: 100%;
|
||||
}
|
||||
.flex {
|
||||
padding: 1rem;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
&__name {
|
||||
font-weight: 700;
|
||||
@ -708,6 +713,9 @@ section {
|
||||
.project {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
#team_members {
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
}
|
||||
.hide-on-large {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
100
index.html
100
index.html
@ -870,10 +870,6 @@
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<article id="news" class="page hidden">
|
||||
<h2>News</h2>
|
||||
<ul id="news_list"></ul>
|
||||
</article>
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
<script>
|
||||
const { html, render: renderElem } = uhtml;
|
||||
@ -950,15 +946,17 @@
|
||||
|
||||
const teamMembersList = document.getElementById('team_members')
|
||||
teamMembers.sort((a, b) => a.name.localeCompare(b.name))
|
||||
const renderedTeamMembers = teamMembers.map(member => {
|
||||
const { image, name, title } = member
|
||||
const renderedTeamMembers = teamMembers.map((member, index) => {
|
||||
const { image, name, title, bio } = member
|
||||
return html`
|
||||
<li class="team-member">
|
||||
<li data-index=${index} class="team-member">
|
||||
<img src="${image}" alt=${`${name} profile picture`} loading="lazy">
|
||||
<p class="team-member__name">${name},</p>
|
||||
<p class="team-member__title">${title}</p>
|
||||
</li>
|
||||
`
|
||||
<div class="flex flex-direction-column">
|
||||
<p class="team-member__name">${name},</p>
|
||||
<p class="team-member__title">${title}</p>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
renderElem(teamMembersList, html`${renderedTeamMembers}`)
|
||||
document.getElementById('team_members').addEventListener('click', e => {
|
||||
@ -1057,7 +1055,8 @@
|
||||
{
|
||||
name: 'Carlos Javier Castellanos Flores',
|
||||
title: 'Principal director and shareholder',
|
||||
image: 'assets/people/carlos.jpg'
|
||||
image: 'assets/people/carlos.jpg',
|
||||
bio: `Carlos Javier Castellanos Flores is a Blockchain Consultant experienced in Bitcoin infrastructure and asset tokenization. He currently works at RanchiMall, specializing in integrating companies into the Bitcoin Blockchain.\n Carlos is also the Founder and Product Designer at Garrobo Co., where he creates designs and manages production for Garrobo T-Shirts. With a background in customer support and technical services, he has worked for HP SmartFriend Tech Support, Boost Mobile, and Sitel Group. Carlos holds a degree from Universidad Nacional de Ingeniería and possesses skills in Blockchain, business development, and graphic design.`
|
||||
},
|
||||
{
|
||||
name: 'John Giannakos',
|
||||
@ -1080,83 +1079,6 @@
|
||||
image: 'assets/people/erika pérez cañas.jpg'
|
||||
},
|
||||
]
|
||||
|
||||
const news = [
|
||||
{
|
||||
headline: 'Pilot project launched at El Zonte, El Salvador',
|
||||
date: '24 Jun 2023',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
headline: 'Pilot project launched at El Zonte, El Salvador',
|
||||
date: '24 Jun 2023',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
headline: 'Pilot project launched at El Zonte, El Salvador',
|
||||
date: '24 Jun 2023',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
headline: 'Pilot project launched at El Zonte, El Salvador',
|
||||
date: '24 Jun 2023',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
headline: 'Pilot project launched at El Zonte, El Salvador',
|
||||
date: '24 Jun 2023',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
headline: 'Pilot project launched at El Zonte, El Salvador',
|
||||
date: '24 Jun 2023',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
headline: 'Pilot project launched at El Zonte, El Salvador',
|
||||
date: '24 Jun 2023',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
headline: 'Pilot project launched at El Zonte, El Salvador',
|
||||
date: '24 Jun 2023',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
headline: 'Pilot project launched at El Zonte, El Salvador',
|
||||
date: '24 Jun 2023',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
||||
link: '#'
|
||||
},
|
||||
]
|
||||
|
||||
router.addRoute('news', () => {
|
||||
const newsList = document.getElementById('news_list')
|
||||
const renderedNews = news.map((item, index) => {
|
||||
const { headline, date, content, link } = item
|
||||
return html`
|
||||
<li>
|
||||
<a class="news-item" href=${link} style=${`--delay: ${index * 0.1}s`}>
|
||||
<div class="news-item__icon">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M22,3l-1.67,1.67L18.67,3L17,4.67L15.33,3l-1.66,1.67L12,3l-1.67,1.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3v16 c0,1.1,0.9,2,2,2l16,0c1.1,0,2-0.9,2-2V3z M11,19H4v-6h7V19z M20,19h-7v-2h7V19z M20,15h-7v-2h7V15z M20,11H4V8h16V11z"/></g></svg>
|
||||
</div>
|
||||
<p class="news-item__date">${date}</p>
|
||||
<h4 class="news-item__headline">${headline}</h4>
|
||||
${content ? html`<p class="news-item__content">${content}</p>` : ''}
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
renderElem(newsList, html`${renderedNews}`)
|
||||
})
|
||||
router.addRoute('economic_framework', () => {
|
||||
})
|
||||
window.onload = () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user