Skip to content

Commit

Permalink
css for project landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
HackAfro committed Jan 13, 2018
1 parent 62f134c commit 6d5dc11
Show file tree
Hide file tree
Showing 7 changed files with 254 additions and 41 deletions.
2 changes: 1 addition & 1 deletion .angular-cli.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
}
},
"defaults": {
"styleExt": "css",
"styleExt": "scss",
"component": {}
}
}
18 changes: 0 additions & 18 deletions src/app/app.component.css

This file was deleted.

151 changes: 131 additions & 20 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,21 @@
<!--The content below is only a placeholder and can be replaced.-->
<div style="display: flex; flex-wrap: wrap; height: 100%; background: #030810; padding: 20px">
<div class="main-container">
<div class="title-holder">
<h1 class="header">Angular Epic Spinners</h1>
<h5 class="sub-header">Angular Implementation of <a class="link" href="http://epic-spinners.epicmax.co/" target="_blank">Epic
Spinners</a></h5>

<div class="get-started">
<div class="get-started__docs">
<h4>Get started</h4>
<a href="https://github.com/hackafro/angular-epic-spinners" target="_blank" class="docs">Docs</a>
</div>
<div class="get-started-code">
<p>npm install angular-epic-spinners</p>
<p>yarn add angular-epic-spinners</p>
</div>
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-atom-spinner></app-atom-spinner>
Expand All @@ -9,69 +25,164 @@
</div>
</div>
<div class="spinner-holder">
<app-breeding-rhombus-spinner></app-breeding-rhombus-spinner>
<div class="spinner-element">
<app-breeding-rhombus-spinner></app-breeding-rhombus-spinner>
</div>
<div class="name">
Breeding Rhombus
</div>
</div>
<div class="spinner-holder">
<app-circles-to-rhumbuses-spinner></app-circles-to-rhumbuses-spinner>
<div class="spinner-element">
<app-circles-to-rhumbuses-spinner></app-circles-to-rhumbuses-spinner>
</div>
<div class="name">
Circles to rhumbuses
</div>
</div>
<div class="spinner-holder">
<app-fingerprint-spinner></app-fingerprint-spinner>
<div class="spinner-element">
<app-fingerprint-spinner></app-fingerprint-spinner>
</div>
<div class="name">
Fingerprint Spinner
</div>
</div>
<div class="spinner-holder">
<app-flower-spinner></app-flower-spinner>
<div class="spinner-element">
<app-flower-spinner></app-flower-spinner>
</div>
<div class="name">
Flower Spinner
</div>
</div>
<div class="spinner-holder">
<app-fulfilling-bouncing-circle-spinner></app-fulfilling-bouncing-circle-spinner>
<div class="spinner-element">
<app-fulfilling-bouncing-circle-spinner></app-fulfilling-bouncing-circle-spinner>
</div>
<div class="name">
Fulfilling Bouncing Circle
</div>
</div>
<div class="spinner-holder">
<app-fulfilling-square-spinner></app-fulfilling-square-spinner>
<div class="spinner-element">
<app-fulfilling-square-spinner></app-fulfilling-square-spinner>
</div>
<div class="name">
Fulfilling Square
</div>
</div>
<div class="spinner-holder">
<app-half-circle-spinner></app-half-circle-spinner>
<div class="spinner-element">
<app-half-circle-spinner></app-half-circle-spinner>
</div>
<div class="name">
Half Circle Spinner
</div>
</div>
<div class="spinner-holder">
<app-hollow-dots-spinner></app-hollow-dots-spinner>
<div class="spinner-element">
<app-hollow-dots-spinner></app-hollow-dots-spinner>
</div>
<div class="name">
Hollow Dots Spinner
</div>
</div>
<div class="spinner-holder">
<app-intersecting-circles-spinner></app-intersecting-circles-spinner>
<div class="spinner-element">
<app-intersecting-circles-spinner></app-intersecting-circles-spinner>
</div>
<div class="name">
Intersecting Circles
</div>
</div>
<div class="spinner-holder">
<app-looping-rhombuses-spinner></app-looping-rhombuses-spinner>
<div class="spinner-element">
<app-looping-rhombuses-spinner></app-looping-rhombuses-spinner>
</div>
<div class="name">
Looping Rhombuses
</div>
</div>
<div class="spinner-holder">
<app-orbit-spinner></app-orbit-spinner>
<div class="spinner-element">
<app-orbit-spinner></app-orbit-spinner>
</div>
<div class="name">
Orbit Spinner
</div>
</div>

<div class="spinner-holder">
<app-pixel-spinner></app-pixel-spinner>
<div class="spinner-element">
<app-pixel-spinner></app-pixel-spinner>
</div>
<div class="name">
Pixel Spinner
</div>
</div>

<div class="spinner-holder">
<app-radar-spinner></app-radar-spinner>
<div class="spinner-element">
<app-radar-spinner></app-radar-spinner>
</div>
<div class="name">
Radar Spinner
</div>
</div>

<div class="spinner-holder">
<app-scaling-squares-spinner></app-scaling-squares-spinner>
<div class="spinner-element">
<app-scaling-squares-spinner></app-scaling-squares-spinner>
</div>
<div class="name">
Scaling Squares Spinner
</div>
</div>

<div class="spinner-holder">
<app-self-building-square-spinner></app-self-building-square-spinner>
<div class="spinner-element">
<app-self-building-square-spinner></app-self-building-square-spinner>
</div>
<div class="name">
Self Building Square
</div>
</div>

<div class="spinner-holder">
<app-semipolar-spinner></app-semipolar-spinner>
<div class="spinner-element">
<app-semipolar-spinner></app-semipolar-spinner>
</div>
<div class="name">
SemiPolar Spinner
</div>
</div>

<div class="spinner-holder">
<app-spring-spinner></app-spring-spinner>
<div class="spinner-element">
<app-spring-spinner></app-spring-spinner>
</div>
<div class="name">
Spring Spinner
</div>
</div>

<div class="spinner-holder">
<app-swapping-squares-spinner></app-swapping-squares-spinner>
<div class="spinner-element">
<app-swapping-squares-spinner></app-swapping-squares-spinner>
</div>
<div class="name">
Swapping Squares Spinner
</div>
</div>

<div class="spinner-holder">
<app-trinity-rings-spinner></app-trinity-rings-spinner>
<div class="spinner-element">
<app-trinity-rings-spinner></app-trinity-rings-spinner>
</div>
<div class="name">
Trinity Rings Spinner
</div>
</div>
</div>

113 changes: 113 additions & 0 deletions src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
// I changed this file to scss to enable me display the name on hover.
// The implementation was easier and more readable with scss

.main-container {
display: flex;
flex-wrap: wrap;
padding: 20px;
width: 90%;
margin: 0 auto;
padding-left: 5%;

.title-holder {
width: 100%;
margin: 30px 0;
.header {
color: whitesmoke;
opacity: .80;
text-transform: uppercase;
font-size: 25px;
margin-bottom: 3px;
text-align: center;
}

.sub-header {
color: whitesmoke;
opacity: .60;
font-size: 18px;
text-align: center;
margin: 5px 0;

.link {
color: #ff1d5e;
text-decoration: none;
text-transform: uppercase;

&:hover {
text-decoration: underline;
}
}
}
}
}

.get-started {
margin-top: 70px;

.get-started__docs {
display: flex;
justify-content: center;

h4 {
color: #9e3050;
margin: 20px 10px;
text-align: center;
display: inline-block;
}

.docs {
@extend h4;
margin-left: 10px;
text-transform: uppercase;
}
}

.get-started-code {
background: #030810 + 40;
color: whitesmoke;
padding: 10px 40px;
text-align: center;
width: fit-content;
display: flex;
flex-direction: column;
margin: auto;
border-radius: 3px;

p {
margin: 10px 0;
font-size: 13px;
}
}
}

.spinner-holder {
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 25px 10px;
margin: 30px 0;
min-height: 150px;

&:hover {
.name {
display: block;
}
background: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 4px 5px 0 #9e3050;
}
}

.name {
display: none;
padding: 10px 0;
font-size: 12px;
color: rgba(0, 0, 0, 0.3);
font-weight: bold;
text-transform: uppercase;
margin: 15px 0 0;
}
4 changes: 2 additions & 2 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
title = 'apps';
}
1 change: 1 addition & 0 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
</head>
<body>
<app-root></app-root>
Expand Down
6 changes: 6 additions & 0 deletions src/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,10 @@
body, main, html{
margin: 0;
height: 100%;
font-family: 'Roboto Mono', monospace;
}

body{
background: #030810;
;
}

0 comments on commit 6d5dc11

Please sign in to comment.