feat(aio): about page styles
contributor fix contributor card styling updates button styling and container size fix remove button and add image border selection filter for buttons header only show when group selected and styles initial flip card funcitonality and data change selected buttons styling complete flip func and card style flip feature contributor group changes fixes
This commit is contained in:
Stefanie Fluin
Tobias Bosch
parent
f21ff904c2
commit
6e89f0bf8d
|
|
@ -1,14 +1,8 @@
|
|||
<div class="grid-fluid l-space-bottom-8">
|
||||
<h3 class="title center">Building For the Future</h3>
|
||||
<p>
|
||||
Angular is built by a team of engineers who share a passion for
|
||||
making web development feel effortless. We believe that writing
|
||||
beautiful apps should be joyful and fun. We're building a
|
||||
platform for the future.
|
||||
</p>
|
||||
</div>
|
||||
<h1 class="title center">Angular Contributors</h1>
|
||||
<h2>Building For the Future</h2>
|
||||
<p>Angular is built by a team of engineers who share a passion for
|
||||
making web development feel effortless. We believe that writing
|
||||
beautiful apps should be joyful and fun. We're building a
|
||||
platform for the future.</p>
|
||||
|
||||
<div class="grid-fluid l-space-bottom-6">
|
||||
<h3 class="title center">Current Contributors</h3>
|
||||
<aio-contributor-list></aio-contributor-list>
|
||||
</div>
|
||||
<aio-contributor-list></aio-contributor-list>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
"twitter": "mhevery",
|
||||
"website": "http://misko.hevery.com",
|
||||
"bio": "Miško Hevery is the creator of AngularJS framework. He has passion for making complex things simple. He currently works at Google, but has previously worked at Adobe, Sun Microsystems, Intel, and Xerox, where he became an expert in building web applications in web related technologies such as Java, JavaScript, Flex and ActionScript.",
|
||||
"group": "Lead"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"igor": {
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
"twitter": "IgorMinar",
|
||||
"website": "https://google.com/+IgorMinar",
|
||||
"bio": "Igor is a software engineer at Google. He is a lead on the Angular project, practitioner of test driven development, open source enthusiast, hacker. In his free time, Igor enjoys spending time with his wife and two kids, doing outdoor activities (including but not limited to sports, gardening and building retaining walls).",
|
||||
"group": "Lead"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"naomi": {
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
"twitter": "naomitraveller",
|
||||
"website": "http://google.com/+NaomiBlack",
|
||||
"bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She supports Angular's internal Google users and solves hard-to-define problems. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
|
||||
"group": "Lead"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"brad": {
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
"twitter": "bradlygreen",
|
||||
"website": "https://plus.google.com/+BradGreen",
|
||||
"bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad enjoys throwing dinner parties with his wife Heather and putting on plays with his children.",
|
||||
"group": "Lead"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"juleskremer": {
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
"twitter": "jules_kremer",
|
||||
"website": "https://plus.google.com/+JulesKremer",
|
||||
"bio": "Jules is Head of Angular Developer Relations at Google. When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
|
||||
"group": "Lead"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"jelbourn": {
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
"twitter": "jelbourn",
|
||||
"website": "https://plus.google.com/+JeremyElbourn/",
|
||||
"bio": "Angular Material Team Lead. FE Engineer @ Google specializing in AngularJS, component design, and the cleanest of code.",
|
||||
"group": "Lead"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"pete": {
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
"twitter": "petebd",
|
||||
"website": "http://www.bacondarwin.com",
|
||||
"bio": "AngularJS for JS Team Lead. Pete has been working on the core team since 2012 and became the team lead for the AngularJS for JS branch in November 2014. He has co-authored a book on AngularJS and regularly talks about and teaches Angular.",
|
||||
"group": "Lead"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"thomas": {
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
"twitter": "stephenfluin",
|
||||
"website": "https://plus.google.com/+stephenfluin",
|
||||
"bio": "Stephen is a Developer Advocate working on the Angular team. Before joining Google, he was a Google Expert. Stephen loves to help enterprises use technology more effectively.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
"robwormald": {
|
||||
"name": "Rob Wormald",
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
"twitter": "robwormald",
|
||||
"website": "http://github.com/robwormald",
|
||||
"bio": "Rob is a Developer Advocate on the Angular team at Google. He's the Angular team's resident reactive programming geek and founded the Reactive Extensions for Angular project, ngrx.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
"aaronzhang": {
|
||||
"name": "Aaron Zhang (章小飞)",
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
"twitter": "",
|
||||
"website": "http://github.com/damoqiongqiu",
|
||||
"bio": "Aaron is Angular's developer PM in China. He is the lead for angular.cn and social channels in China, and helps developers in China's enterprise and open source communities to be successful with Angular. One of the earliest Angular developers in China since Angular 2012, he translated the first books on Angular into Chinese. Aaron joined the Google team in 2016.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
"tobias": {
|
||||
"name": "Tobias Bosch",
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
"twitter": "tbosch1009",
|
||||
"website": "https://plus.google.com/+TobiasBosch",
|
||||
"bio": "Tobias Bosch is a software engineer at Google. He is part of the Angular core team and works on Angular.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"rado": {
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
"twitter": "radokirov",
|
||||
"website": "https://plus.sandbox.google.com/+RadoslavKirov",
|
||||
"bio": "Rado has been on the Angular Core team since Summer 2014. Before Angular, he worked on the Adsense serving stack, responsible for serving billions of ads daily. Being passionate about open source, he made contributions to Angular as a Google-20% project, before making the fulltime jump. He is a recovering academic; ask him about error-correcting codes from algebraic curves (or don't).",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"davideast": {
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
"twitter": "_davideast",
|
||||
"website":"https://github.com/davideast",
|
||||
"bio": "David East is a Developer Programs Engineer at Google. He works full-time on the Firebase team and part-time on the Angular core team.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
"alexeagle": {
|
||||
"name": "Alex Eagle",
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
"twitter": "jakeherringbone",
|
||||
"website": "http://google.com/+alexeagle",
|
||||
"bio": "Alex works on language tooling for JavaScript and TypeScript. Previously Alex spent five years in Google's developer testing tools. He has developed systems including Google's continuous integration service, capturing build&test failures, and explaining them to developers. Before Google, Alex worked at startups including Opower, and consulted for large government IT. In his 20% time, he created the Error-Prone static analysis tool, which detects common Java programming mistakes and reports them as compile errors.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"martinprobst": {
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
"twitter": "martin_probst",
|
||||
"website": "http://probst.io",
|
||||
"bio": "Martin is a software engineer at Google in the AngularJS team. He holds a MSc in Software Engineering from HPI in Potsdam, Germany. Before joining the AngularJS team at Google, he worked at a database startup in the Netherlands, at EMC, at SAP, and as a freelancer. In his free time, he likes to cook and sail, not necessarily at the same time.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"julieralph": {
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
"twitter": "SomeJulie",
|
||||
"website": "https://plus.google.com/+JulieRalph",
|
||||
"bio": "Julie Ralph works as a Software Engineer in Test at Google in Seattle and is the lead developer on the Angular end-to-end testing framework Protractor.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"alexrickabaugh": {
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
"twitter": "synalx",
|
||||
"website": "https://plus.google.com/+AlexRickabaugh/about",
|
||||
"bio": "Core team member working to optimize the Angular platform for the next generation of applications, including mobile. Before joining the Angular team, Alex worked in the Google sales organization where he helped build the first large Angular application within Google.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"berlinjohnson": {
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
"twitter": "berlinjohnson",
|
||||
"website": "http://www.berlinjohnson.com/",
|
||||
"bio": "I am a designer, illustrator, and biomedical engineer who loves combining creativity and science. Previously, I worked as a Cardiovascular Modeling and Simulation engineer where I built complex 3D and computational models of the human cardiovascular system based on patient-specific medical imaging data.",
|
||||
"group": "Google"
|
||||
"group": "Community"
|
||||
},
|
||||
|
||||
"matias": {
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
"twitter": "yearofmoo",
|
||||
"website": "http://yearofmoo.com",
|
||||
"bio": "Matias Niemela is a fullstack web developer who has been programming & building websites for over 10 years, and a core team member of AngularJS for two years. In the spring of 2015 Matias joined Angular full time at Google. In his free time Matias loves to build complex things and is always up for public speaking, travelling and tweaking his current Vim setup.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"hansl": {
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
"twitter": "hanslatwork",
|
||||
"website": "http://www.codingatwork.com/",
|
||||
"bio": "Hans is a software engineer at Google on the Angular team and was previously at Slack. He works everyday to help make it easier for everyone to create beautiful, consistent web applications using Angular, using Material Design components and the CLI tool.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"victorsavkin": {
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
"twitter": "victorsavkin",
|
||||
"website": "http://victorsavkin.com/",
|
||||
"bio": "Victor has been on the Angular team since the inception of Angular. While at Google, Victor developed dependency injection, change detection, forms, and the router. Today he is a co-founder at nrwl.io.",
|
||||
"group": "Community"
|
||||
"group": "Angular"
|
||||
},
|
||||
"jeffcross": {
|
||||
"name": "Jeff Cross",
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
"twitter": "lgalfaso",
|
||||
"website": "https://github.com/lgalfaso",
|
||||
"bio": "Lucas works as a Software Engineer at Google and is a core Angular contributor.",
|
||||
"group": "Google"
|
||||
"group": "Community"
|
||||
},
|
||||
|
||||
"kathy": {
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
"twitter": "kwalrath",
|
||||
"website": "https://plus.google.com/+KathyWalrath",
|
||||
"bio": "Kathy writes and edits docs about Dart and related technologies. Before Google, she worked at Sun, NeXT, and HP. Long ago, Kathy co-created and maintained The Java Tutorial.",
|
||||
"group": "Google"
|
||||
"group": "Community"
|
||||
},
|
||||
|
||||
"kara": {
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
"twitter": "karaforthewin",
|
||||
"website": "https://github.com/kara",
|
||||
"bio": "Kara is a software engineer on the Angular team at Google and a co-organizer of the Angular-SF Meetup. Prior to Google, she helped build UI components in Angular for guest management systems at OpenTable. She enjoys snacking indiscriminately and probably other things too.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"chuckj": {
|
||||
|
|
@ -259,14 +259,14 @@
|
|||
"twitter": "chuckjaz",
|
||||
"website": "http://removingalldoubt.com",
|
||||
"bio": "Chuck is a Software Engineer on the Angular team at Google. He is a programming language geek, UI framework and component library veteran, and has a passion for simplifying the task of programming. Before Google, he worked at Microsoft and Borland.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
"vikram": {
|
||||
"name": "Vikram Subramanian",
|
||||
"picture": "vikram.jpg",
|
||||
"twitter": "vikerman",
|
||||
"bio": "Vikram is a Software Engineer on the Angular team focused on Engineering Productivity. That means he makes sure people on the team can move fast and not break things. Vikram enjoys doing Yoga and going on walks with his daughter.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
"maxsills": {
|
||||
"name": "Max Sills",
|
||||
|
|
@ -274,13 +274,13 @@
|
|||
"twitter": "angularjs",
|
||||
"website": "http://google-opensource.blogspot.com/",
|
||||
"bio": "Max Sills is Angular's Open Source lawyer.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
"shannon": {
|
||||
"name": "Shannon Ayres",
|
||||
"picture": "shannon.jpg",
|
||||
"bio": "Shannon is a technical editor in Developer Relations at Google. She loves movies, especially Sunset Boulevard, and her favorite TV show is The Walking Dead. Her mission: Righting wrong writing!",
|
||||
"group": "Google"
|
||||
"group": "Community"
|
||||
},
|
||||
|
||||
"pawel": {
|
||||
|
|
@ -521,13 +521,13 @@
|
|||
"name": "Miles Malerba",
|
||||
"picture": "mmalerba.jpg",
|
||||
"bio": "Miles is a software engineer on the Angular Material team at Google. In addition to Javascripting he enjoys eating food and ogling cute puppies.",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"jasonaden": {
|
||||
"name": "Jason Aden",
|
||||
"picture": "jasonaden.jpg",
|
||||
"bio": "Jason is a software engineer at Google on the Angular Core team. He is enthusiastic about Angular and application development in the modern age. In his free time Jason enjoys spending time with his wife and four children and doing outdoor activities (hiking, fishing, snowboarding, etc.).",
|
||||
"group": "Google"
|
||||
"group": "Angular"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,8 +66,12 @@
|
|||
<div><img src="assets/images/home/loved-by-millions.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
<<<<<<< HEAD
|
||||
<div class="cta-bar"><a href="guide/quickstart" md-button="md-button"
|
||||
class="button button-large button-shield mat-raised mat-primary">Get
|
||||
Started</a></div>
|
||||
=======
|
||||
<div class="cta-bar"><a href="/guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a></div>
|
||||
>>>>>>> feat(aio): about page styles
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -5,32 +5,47 @@ import { Contributor } from './contributors.model';
|
|||
@Component({
|
||||
selector: 'aio-contributor',
|
||||
template: `
|
||||
<header>
|
||||
<img src="{{pictureBase}}{{person.picture || noPicture}}" alt="name" width="240" height="208">
|
||||
<h3>{{person.name}}</h3>
|
||||
<button *ngIf="person.bio" aria-label="View Bio" (click)="showBio=!showBio">View Bio</button>
|
||||
<div [ngClass]="{ 'flipped': person.isFlipped }" class="contributor-card">
|
||||
|
||||
<div class="card-front" (click)="flipCard(person)">
|
||||
<div *ngIf="person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+person.picture+')'">
|
||||
</div>
|
||||
|
||||
<!-- TODO: get the twitter/website icons and get rid of text -->
|
||||
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}">
|
||||
<span class="icon-twitter">twitter</span>
|
||||
</a>
|
||||
<a *ngIf="person.website" href="{{person.website}}">
|
||||
<span class="icon-publ">website</span>
|
||||
</a>
|
||||
<p>{{person.bio}}</p>
|
||||
<div *ngIf="!person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+noPicture+')'">
|
||||
</div>
|
||||
<h3>{{person.name}}</h3>
|
||||
<div class="contributor-info">
|
||||
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank">
|
||||
<span class="fa fa-twitter fa-2x"></span>
|
||||
</a>
|
||||
<a *ngIf="person.website" href="{{person.website}}" target="_blank">
|
||||
<span class="fa fa-link fa-2x"></span>
|
||||
</a>
|
||||
<div>
|
||||
<a *ngIf="person.bio" aria-label="View Bio" (click)="flipCard(person)">View Bio</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<!-- TODO: This should be modal and float over the width of page -->
|
||||
<article *ngIf="showBio">
|
||||
<h3>{{person.name}}</h3>
|
||||
<p>{{person.bio}}</p>
|
||||
<article>
|
||||
<div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)">
|
||||
<h3>{{person.name}}</h3>
|
||||
<p class="contributor-bio" >{{person.bio}}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ContributorComponent {
|
||||
@Input() person: Contributor;
|
||||
showBio = false;
|
||||
noPicture = '_no-one.png';
|
||||
pictureBase = 'content/images/bios/';
|
||||
@Input() person: Contributor;
|
||||
noPicture = '_no-one.png';
|
||||
pictureBase = 'content/images/bios/';
|
||||
|
||||
flipCard(person){
|
||||
if(person.isFlipped==true){
|
||||
person.isFlipped=false;
|
||||
}else{
|
||||
person.isFlipped=true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,4 +11,5 @@ export class Contributor {
|
|||
website?: string;
|
||||
twitter?: string;
|
||||
bio?: string;
|
||||
isFlipped?: boolean = false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet">
|
||||
|
||||
<link rel="manifest" href="pwa-manifest.json">
|
||||
<meta name="theme-color" content="#1976d2">
|
||||
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.30px;
|
||||
font-weight: 400;
|
||||
& > em {
|
||||
letter-spacing: 0.30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,4 +25,13 @@ l-relative {
|
|||
.l-flex-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -88,4 +88,19 @@ a.button.md-button {
|
|||
color: $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.filter-button {
|
||||
width: 140px;
|
||||
font-size: 14px;
|
||||
padding: 0px 16px;
|
||||
margin: 8px;
|
||||
line-height: 48px;
|
||||
border: 2px solid $blue;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: $blue;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,22 +6,14 @@
|
|||
}
|
||||
|
||||
.card {
|
||||
background: $white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
box-sizing: border-box;
|
||||
height: 194px;
|
||||
margin: 24px 8px;
|
||||
@include card(194px, 30%);
|
||||
max-width: 340px;
|
||||
min-width: 262px;
|
||||
margin: 24px 8px;
|
||||
padding-bottom: 48px;
|
||||
position: relative;
|
||||
transition: box-shadow .5s;
|
||||
width: 30%;
|
||||
|
||||
&:hover {
|
||||
// border: 2px solid $blue;
|
||||
box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
|
||||
text-decoration: none;
|
||||
|
||||
h2 {
|
||||
|
|
|
|||
|
|
@ -1,56 +1,10 @@
|
|||
$metal: #536E7A;
|
||||
$snow: #FFFFFF;
|
||||
$steel: #253238;
|
||||
|
||||
// .bio-card {
|
||||
// margin: 0 0 32px 0;
|
||||
// position: relative;
|
||||
// cursor: pointer;
|
||||
// box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
// background: $white;
|
||||
// transition: all .3s;
|
||||
|
||||
// &:hover {
|
||||
// transform: translate3d(0,-3px,0);
|
||||
// box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
|
||||
|
||||
// nav {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
aio-contributor-list {
|
||||
.grid-fluid {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 6 * 8px;
|
||||
*zoom: 1;
|
||||
}
|
||||
.grid-fluid aio-contributor {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-right: 1.04167%;
|
||||
margin-left: 1.04167%;
|
||||
width: 22.91667%;
|
||||
margin-bottom: 6 * 8px;
|
||||
}
|
||||
.grid-fluid:after, .grid-fluid:before {
|
||||
content: '.';
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
|
||||
/* line 6, ../scss/_responsive.scss */
|
||||
.grid-fluid{
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
|
||||
.grid-fluid{
|
||||
margin-left: 20px;
|
||||
|
|
@ -60,93 +14,132 @@ aio-contributor-list {
|
|||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-buttons {
|
||||
margin: 32px auto;
|
||||
|
||||
a {
|
||||
&.selected {
|
||||
background-color: $blue;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contributor-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
aio-contributor {
|
||||
margin: 0px 0px ($unit * 4) 0px;
|
||||
background: $white;
|
||||
margin: 8px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
background: $snow;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
|
||||
transition: all .3s;
|
||||
padding: 10px;
|
||||
perspective: 800px;
|
||||
|
||||
&:hover {
|
||||
transform: translate3d(0,-3px,0);
|
||||
box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);
|
||||
|
||||
nav {
|
||||
opacity: 1;
|
||||
.contributor-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.contributor-info {
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
padding: 16px 8px;
|
||||
background: $blue;
|
||||
|
||||
// HEADER
|
||||
a {
|
||||
color: $white;
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
|
||||
img {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
transition: opacity .5s;
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
padding: 8px;
|
||||
background: rgba($steel, .4);
|
||||
opacity: 0;
|
||||
|
||||
button {
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
opacity: .87;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
.fa-2x {
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
opacity: .87;
|
||||
margin-right: 8px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
color: rgba($white, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MAIN CONTENT
|
||||
div.contributor-card {
|
||||
width: 240px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
transform-style:preserve-3d;
|
||||
transition:transform ease 500ms;
|
||||
|
||||
.card-front, .card-back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-front {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-back {
|
||||
padding: 16px;
|
||||
transform:rotateY(180deg);
|
||||
}
|
||||
|
||||
&.flipped {
|
||||
transform:rotateY(180deg);
|
||||
.card-front {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contributor-image {
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
height: 130px;
|
||||
width: 130px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin: 16px auto 0px;
|
||||
border: 1px solid $lightgray;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
padding: 0 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $metal;
|
||||
text-transform: uppercase;
|
||||
font-size: 18px;
|
||||
margin-bottom: $unit;
|
||||
}
|
||||
|
||||
p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
line-height: 18px;
|
||||
margin: 8px 16px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: scroll;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
|
@ -56,4 +56,20 @@
|
|||
padding: 20px;
|
||||
margin: 0 auto; // was 24
|
||||
border: 0.5px solid $lightgray;
|
||||
}
|
||||
|
||||
|
||||
@mixin card($height, $width) {
|
||||
height: $height;
|
||||
width: $width;
|
||||
background-color: $white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
box-sizing: border-box;
|
||||
transition: box-shadow .5s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue