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

Add link icons #7

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

Add link icons #7

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b33284f
Add link icons
ky28059 Nov 10, 2020
3f5b935
Rudimentary 404 page
ky28059 Nov 11, 2020
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
18 changes: 13 additions & 5 deletions css/index.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/index.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

38 changes: 28 additions & 10 deletions css/partials/_member-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,37 @@
$h3-size: 1.1rem;

%vertical-align {
margin: 0;
display: flex;
align-items: center;
}

.member-list {
display: flex;
flex-wrap: wrap;

// The member cards
// Member cards
li {
@extend .card;
flex: 1 0 260px;
flex: 1 1 260px;
margin: 5px;
background-color: rgba(white, 0.6);
transition: background-color 400ms ease;
border-bottom: solid 5px $theme-primary;
box-shadow: 0 5px 0 $theme-primary;

&:hover {
background-color: white;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hover effect nonideal if the card doesn't do anything when clicked

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can keep the hover, and add a popover to each card where the person can have a bio. Sort of like when you click on a person in discord? Keep the hover, either way - it adds dimension. Example is here, I think it looks good?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, still seems to me that something should happen when clicked, but I guess we can add that in another PR

}

// Heading with person's name
h3 {
$font-size: 1.1rem;
margin: 0;
display: flex;
align-items: center;
font-size: $font-size;
@extend %vertical-align;
font-size: $h3-size;
font-family: Roboto Condensed, sans-serif;

// Thumbnail
// Header thumbnail
img {
$size: $font-size * 1.5; // Thumbnail is 1.5x larger than the h3
$size: $h3-size * 1.5; // Thumbnail is 1.5x larger than the h3
height: $size;
width: $size;
border-radius: $size / 2;
Expand All @@ -37,5 +43,17 @@
margin-top: 0;
border: 1px solid $bg-shadow;
}

// Link logos
a {
@extend %vertical-align;

img {
$size: 1.1rem;
height: $size;
width: $size;
margin: 5px 5px 5px 0;
}
}
}
}
14 changes: 14 additions & 0 deletions images/github.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 65 additions & 0 deletions images/youtube.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading