Skip to content

Commit

Permalink
Build examples page
Browse files Browse the repository at this point in the history
  • Loading branch information
David Cetinkaya committed Mar 29, 2019
1 parent 1aaea9c commit 6d19b57
Show file tree
Hide file tree
Showing 20 changed files with 625 additions and 61 deletions.
Binary file added docs/assets/facebook.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 16 additions & 17 deletions docs/assets/site.webmanifest
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
"name": "Embla Carousel",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
2 changes: 1 addition & 1 deletion docs/assets/style.css
View file

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

86 changes: 65 additions & 21 deletions docs/index.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.js
View file

Large diffs are not rendered by default.

112 changes: 112 additions & 0 deletions docs/scss/banner.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
.banner {
color: $color-lisbon;
position: relative;
overflow: hidden;

@include header-size('padding-top');
}

.banner__decoration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $color-london;
transform: skewY(-1.5deg);
transform-origin: top left;
}

.banner__content {
position: relative;
z-index: 1;
padding-top: 4rem;
padding-bottom: 5rem;

@media (min-width: $media-xs) {
padding-top: 6rem;
padding-bottom: 7rem;
}

@media (min-width: $media-sm) {
padding-top: 9rem;
padding-bottom: 10rem;
}
}

.banner__heading {
color: $color-brand;
font-size: 3rem;
font-weight: bold;
margin-bottom: 1rem;

@media (min-width: $media-sm) {
font-size: 5rem;
}
@media (min-width: $media-lg) {
font-size: 6rem;
}
}

.banner__subheading {
font-size: 1.6rem;
font-weight: 200;
margin-bottom: 3rem;

@media (min-width: $media-sm) {
font-size: 2.5rem;
margin-bottom: 4rem;
}
@media (min-width: $media-lg) {
font-size: 3rem;
margin-bottom: 5rem;
}
}

.banner__button {
background-color: $color-brand;
color: $color-london;
display: inline-block;
text-decoration: none;
padding: 0.8rem 2.5rem;
font-weight: 400;

@media (min-width: $media-sm) {
font-size: 1.8rem;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
@media (min-width: $media-lg) {
font-size: 2rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
transition: background-color 0.2s;

&:hover {
background-color: $color-lisbon;
}
}
}

.banner__link {
color: $color-brand;
text-decoration: none;
font-weight: 400;
margin-left: 1.5rem;

@media (min-width: $media-xs) {
margin-left: 2.5rem;
}
@media (min-width: $media-sm) {
font-size: 1.8rem;
}

@media (min-width: $media-lg) {
font-size: 2rem;
transition: color 0.2s;

&:hover {
color: $color-lisbon;
}
}
}
16 changes: 16 additions & 0 deletions docs/scss/base.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
html {
font-size: 62.5%;
}

body {
color: $color-london;
line-height: 1.5;
font-size: 1.6rem;
overflow-x: hidden;
overflow-y: scroll;
}

body:not(.user-is-tabbing) a,
body:not(.user-is-tabbing) button {
outline: 0;
}
5 changes: 5 additions & 0 deletions docs/scss/content-wrap.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.content-wrap {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
149 changes: 149 additions & 0 deletions docs/scss/embla.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
.embla {
position: relative;
margin-bottom: 2.7rem;
background-color: darken($color-prague, 1%);
}

.embla__viewport {
overflow: hidden;
position: relative;

&.draggable {
cursor: move;
cursor: grab;
}

&.is-dragging {
cursor: grabbing;
}
}

.embla__container {
backface-visibility: hidden;
display: flex;
margin-left: -0.8rem;

@media (min-width: $media-sm) {
display: flex;
margin-left: -1rem;
}
}

.embla__slide {
flex: 0 0 auto;
position: relative;
width: 80%;
padding-left: 0.8rem;
counter-increment: embla;

@media (min-width: $media-sm) {
padding-left: 1rem;
}
}

.embla__slide__inner {
background-color: $color-london;
position: relative;
border-radius: 0.5rem;
min-height: 170px;
padding-bottom: 45%;
font-size: 3rem;

@media (min-width: $media-sm) {
padding-bottom: 46%;
font-size: 4.2rem;
}
@media (min-width: $media-lg) {
padding-bottom: 50%;
font-size: 5rem;
}

&:before {
color: $color-lisbon;
font-weight: 300;
line-height: 1;
content: counter(embla);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}

.embla__nav {
background-color: transparent;
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
border: 0;
width: 3.5rem;
height: 3.5rem;
justify-content: center;
align-items: center;
cursor: pointer;
padding: 0;
display: none;

@media (min-width: $media-sm) {
display: flex;
}
}

.embla__nav__svg {
fill: $color-brand;
width: 3.5rem;
height: 3.5rem;
}

.embla__nav--prev {
left: 1.5rem;
}

.embla__nav--next {
right: 1.5rem;
}

.embla__dots {
position: absolute;
margin-top: 1rem;
margin-left: -1.5rem;
display: flex;
list-style: none;
padding-left: 0;
justify-content: center;
left: 0;
right: 0;
top: 100%;
margin-left: auto;
margin-right: auto;
}

.embla__dot {
display: flex;
margin-left: 1.5rem;
}

.embla__dot__button {
background-color: transparent;
cursor: pointer;
position: relative;
padding: 0;
width: 3rem;
height: 3rem;
border: 0;
display: flex;
align-items: center;

&:after {
background-color: #efefef;
width: 100%;
height: 0.4rem;
content: '';
}
}

.embla__dot--selected:after {
background-color: $color-brand;
opacity: 1;
}
44 changes: 44 additions & 0 deletions docs/scss/feature.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.feature__heading {
font-weight: bold;
font-size: 2rem;
margin-bottom: 1.5rem;
line-height: 1.2;

@media (min-width: $media-sm) {
font-size: 3rem;
}
@media (min-width: $media-lg) {
font-size: 4rem;
}
}

.feature__description {
@media (min-width: $media-sm) {
font-size: 1.7rem;
}
@media (min-width: $media-lg) {
font-size: 1.8rem;
}
}

.feature__badge {
padding-top: 4rem;
border-radius: 0.5rem;
margin-bottom: 2rem;
font-weight: bold;

@media (min-width: $media-sm) {
font-size: 1.7rem;
}
@media (min-width: $media-lg) {
font-size: 1.8rem;
}
}

.feature__badge__bracket {
color: $color-riga;
}

.feature__badge__value {
color: $color-brand;
}
16 changes: 16 additions & 0 deletions docs/scss/footer.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.footer {
padding-top: 2rem;
padding-bottom: 2rem;
text-align: center;
line-height: 1.7;

@media (min-width: $media-sm) {
font-size: 1.7rem;
padding-top: 3rem;
padding-bottom: 3rem;
}

@media (min-width: $media-lg) {
font-size: 1.8rem;
}
}
Loading

0 comments on commit 6d19b57

Please sign in to comment.