Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Team formatting #24

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Team formatting #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9bf4a2b
Add titles to team members
anthonyj33 Mar 8, 2023
2f2b5a1
Text sizing
anthonyj33 Mar 12, 2023
677d394
Wrap person-title properly
anthonyj33 Mar 12, 2023
c10e69b
improve spacing
Awesome-E Mar 12, 2023
08da8d4
update layout change threshold
Awesome-E Mar 12, 2023
4a8f1ad
Anthony please learn SCSS and respect formatting
Awesome-E Mar 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions views/index.html.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,19 +454,31 @@
<div class="row team-container">
<div class="team-founder">
<img src="/images/people/brandon-joe.jpg" alt="Brandon Joe" class="founder-img">
<p>Hi there, I&rsquo;m Brandon Joe, an undergraduate student at UCSD. My interest for Computer Science started with creating broken games and block programming projects, but evolved into proficiency in several coding languages and leadership in stem-based organizations.</p>
<div>
<h3 class="person-title"><p class="name">Brandon Joe</p><span>Chief Executive Officer</span></h3>
<p>Hi there, I&rsquo;m Brandon Joe, an undergraduate student at UCSD. My interest for Computer Science started with creating broken games and block programming projects, but evolved into proficiency in several coding languages and leadership in stem-based organizations.</p>
</div>
</div>
<div class="team-founder">
<img src="/images/people/ethan-kosaki.jpg" alt="Ethan Kosaki" class="founder-img">
<p>Hi, I&rsquo;m Ethan Kosaki. I enjoy using programming in creative ways to solve different problems. Through TreasureHacks, I want to create a community for computer science students around the world. Treasure Hacks is my way to spread a love of programming with other students.</p>
<div>
<h3 class="person-title"><p class="name">Ethan Kosaki</p><span>Chief Financial Officer</span></h3>
<p>Hi, I&rsquo;m Ethan Kosaki. I enjoy using programming in creative ways to solve different problems. Through TreasureHacks, I want to create a community for computer science students around the world. Treasure Hacks is my way to spread a love of programming with other students.</p>
</div>
</div>
<div class="team-founder">
<img src="/images/people/ethan-wang.jpg" alt="Ethan Wang" class="founder-img">
<p>Hello, I&rsquo;m Ethan Wang. I have always been intrigued about how things work, and I enjoy creating games. My passion for computer science has allowed me to win the sponsorship award at a local hackathon, as well as land an internship at Hopscotch Technologies.</p>
<div>
<h3 class="person-title"><p class="name">Ethan Wang</p><span>Chief Technical Officer</span></h3>
<p>Hello, I&rsquo;m Ethan Wang. I have always been intrigued about how things work, and I enjoy creating games. My passion for computer science has allowed me to win the sponsorship award at a local hackathon, as well as land an internship at Hopscotch Technologies.</p>
</div>
</div>
<div class="team-founder">
<img src="/images/people/anthony-jenanian.jpg" alt="Anthony Jenanian" class="founder-img">
<p>Hi, I'm Anthony Jenanian, a high school student and aspiring programmer. I've developed a passion for coding because it always presents a new and unique challenge. I'm the Chief Community Officer at Treasure Hacks and I'm looking forward to growing and strengthening our community!</p>
<div>
<h3 class="person-title"><p class="name">Anthony Jenanian</p><span>Chief Community Officer</span></h3>
<p>Hi, I'm Anthony Jenanian, a high school student and aspiring programmer. I've developed a passion for coding because it always presents a new and unique challenge. I'm the Chief Community Officer at Treasure Hacks and I'm looking forward to growing and strengthening our community!</p>
</div>
</div>
</div>

Expand Down
33 changes: 30 additions & 3 deletions views/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,11 +236,36 @@ hr {
height: 100%;
padding: 24px;
display: flex;
align-items: center;
align-items: stretch;
gap: 16px;
transition: opacity 0.2s;
background-color: #2C1C4B;
border-radius: 20px;
> div {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.person-title {
color: #ababab;
white-space: nowrap;
font-size: 1.3rem;
margin-bottom: 8px;
> p.name {
color: white;
display: inline;
font-size: 1.5rem;
font-weight: bold;
}
.name::after { content: ","; }
+ p { line-height: max(24px,1.2vw); }
}
@media only screen and (max-width: 1200px) {
.person-title .name::after {
content: "\a";
white-space: pre;
}
}
}
img.founder-img {
width: 200px;
Expand All @@ -250,15 +275,17 @@ hr {
border-radius: 16px;
z-index: 1;
flex-shrink: 0;
margin: auto;
}
.row.team-container {
position: relative;
justify-content: space-between;
margin-block: 20px 50px;
}
@media (max-width: 850px) {
@media (max-width: 950px) {
.team-founder {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 640px) {
Expand Down Expand Up @@ -1607,4 +1634,4 @@ div.names-container {
margin-top: 50px;
order: 3;
}
}
}