From a5349559d58353e6ec1f0911b2a3dee32df348d7 Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Sun, 13 Apr 2014 18:22:16 -0700 Subject: [PATCH] Demo page: add svg icon and fix position of header --- css/screen.css | 2 +- img/demopage/picture.svg | 36 +++++ index.html | 234 ++++++++++++++++--------------- sass/screen.sass | 293 +++++++++++++++++++++------------------ 4 files changed, 314 insertions(+), 251 deletions(-) create mode 100644 img/demopage/picture.svg diff --git a/css/screen.css b/css/screen.css index e933ea0b..fc1df4bf 100644 --- a/css/screen.css +++ b/css/screen.css @@ -1 +1 @@ -article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{background:#fff;color:#000;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type='button'],input[type='reset'],input[type='submit']{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0}input[type='search']{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html{font:87%/1.5 "Karla","lucida grande",sans-serif,sans-serif;font-weight:400}@media (min-width: 40rem){html{font-size:100%}}@media (min-width: 64rem){html{font-size:106%}}body{color:#777;background-color:#fff}h1,h2,h3,h4,h5{color:#222;line-height:1.2em;font-family:"Montserrat","Helvetica",sans-serif;font-weight:700}h1{font-size:4rem;margin:0 0 0.2em 0}@media (min-width: 40rem){h1{font-size:4.5rem}}@media (min-width: 64rem){h1{font-size:5rem}}h2{color:#e67e39;margin-top:0;margin-bottom:1.5rem;font-size:1.5rem;text-transform:uppercase}@media (min-width: 40rem){h2{font-size:2rem}}h3{font-size:1.2rem;margin-bottom:0.5rem}blockquote{margin:0}blockquote p{color:#bbb;font-style:italic;margin-bottom:1.5rem}cite{color:#bbb}p{margin:0 auto 2em auto;text-align:left}.lead{max-width:45rem;margin-bottom:1.25rem;font-size:1.25rem}ol{list-style-type:decimal}ul,ol{margin:0 0 1.25em 0}li{margin-bottom:2em}li.last-list-item{border-bottom:none}dt{font-weight:bold}dd{margin-bottom:1.625em}strong{font-weight:bold}i{font-style:italic}em{font-style:normal}a{color:#4ae;text-decoration:none}a:hover{text-decoration:underline}::-moz-selection,::selection{background:#e67e39;color:#fff}.sub-point{display:block;font-size:0.75rem}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{margin:0;padding:0;background:#fff}section{border-top:2px solid #f2f2f2;text-align:center;padding:2rem 0}section:first-of-type{border-top:none}@media (min-width: 40rem){section{padding:4rem 0}}.container{margin:0 auto;max-width:40rem;width:90%}.row{*zoom:1}.row:after{content:"";display:table;clear:both}header{padding:4rem 0 2rem 0;background-color:#f9f9f9;text-align:center}header p{text-align:center}@media (min-width: 40rem){header{padding:3rem 0}}.example-image-link{display:inline-block;padding:4px;margin:0 0.5rem 1rem 0.5rem;background-color:#fff;line-height:0;-webkit-transition:background-color 0.1s ease-out;-moz-transition:background-color 0.1s ease-out;-o-transition:background-color 0.1s ease-out;transition:background-color 0.1s ease-out;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}.example-image-link:hover{background-color:#4ae}.example-image{width:7rem;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.how-to-use-section p,.how-to-use-section ol,.how-to-use-section ul,.how-to-use-section pre{text-align:left}fieldset{border:none}.donate-button{width:100%}@media (min-width: 40rem){.donate-button{width:auto}}footer{padding:2rem 0;background-color:#f9f9f9;text-align:center}footer p{text-align:center}footer .button{margin-top:0.5rem}.sharing-section{position:fixed;z-index:10;top:20px;right:0}code{color:#777;background-color:#f2f2f2;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;font-family:Consolas,Courier,monospace;font-size:0.9rem;padding:0.1rem 0.3rem;position:relative;top:-1px}pre{background-color:#f2f2f2;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;padding:0 0.5rem 0.1rem 0.5rem}pre code{padding:0;font-size:0.8rem;border:none}.column{margin-bottom:1.5rem}@media (min-width: 40rem){.column{float:left;margin:0;padding-left:1rem;padding-right:1rem}.column.full{width:100%}.column.two-thirds{width:66.7%}.column.half{width:50%}.column.third{width:33.3%}.column.fourth{width:24.95%}.column.flow-opposite{float:right}}ul{margin:0;text-align:left}@media (min-width: 40rem){ul{display:inline-block}}.button{display:block;padding:0.7rem 2rem;margin-bottom:0.5rem;border:none;color:#fff;background-color:#4ae;font-size:1.1rem;font-weight:bold;text-transform:uppercase;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;vertical-align:middle;white-space:nowrap}.button:hover{background:#1595ea;text-decoration:none}@media (min-width: 40rem){.button{display:inline-block;margin:0 0.25rem}}.button-minor{padding:0.35rem 1rem;border:2px solid #4ae;color:#4ae;background-color:transparent;font-size:0.8rem}.button-minor:hover{color:#fff}hr{border:0;border-top:2px solid #f2f2f2;margin:1rem auto 1.5rem auto;width:3rem} +article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{background:#fff;color:#000;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type='button'],input[type='reset'],input[type='submit']{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0}input[type='search']{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html{font:87%/1.5 "Karla","lucida grande",sans-serif,sans-serif;font-weight:400}@media (min-width: 40rem){html{font-size:100%}}@media (min-width: 64rem){html{font-size:106%}}body{color:#666;background-color:#fff}h1,h2,h3,h4,h5{color:#222;line-height:1.2em;font-family:"Montserrat","Helvetica",sans-serif;font-weight:700}h1{font-size:3.5rem;margin:0 0 0.1em 0}@media (min-width: 40rem){h1{font-size:4.5rem}}@media (min-width: 64rem){h1{font-size:5rem}}h2{color:#e67e39;margin-top:0;margin-bottom:1.5rem;font-size:1.5rem;text-transform:uppercase}@media (min-width: 40rem){h2{font-size:2rem}}h3{font-size:1.2rem;margin-bottom:0.5rem}blockquote{margin:0}blockquote p{color:#bbb;font-style:italic;margin-bottom:1.5rem}cite{color:#bbb}p{margin:0 auto 2em auto;text-align:left}.lead{max-width:45rem;margin-bottom:1.1rem;font-size:1.25rem}ol{list-style-type:decimal}ul,ol{margin:0 0 1.25em 0}li{margin-bottom:2em}li.last-list-item{border-bottom:none}dt{font-weight:bold}dd{margin-bottom:1.625em}strong{font-weight:bold}i{font-style:italic}em{font-style:normal}a{color:#4ae;text-decoration:none}a:hover{text-decoration:underline}::-moz-selection,::selection{background:#e67e39;color:#fff}.sub-point{display:block;font-size:0.75rem}code{color:#666;background-color:#f5f5f5;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;font-family:Consolas,Courier,monospace;font-size:0.9rem;padding:0.1rem 0.3rem;position:relative;top:-1px}pre{background-color:#f5f5f5;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;padding:0 0.5rem 0.1rem 0.5rem}pre code{padding:0;font-size:0.8rem;border:none}ul{margin:0;text-align:left}@media (min-width: 40rem){ul{display:inline-block}}.button{display:block;padding:0.7rem 2rem;margin-bottom:0.5rem;border:none;color:#fff;background-color:#4ae;font-size:1.1rem;font-weight:bold;text-transform:uppercase;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;vertical-align:middle;white-space:nowrap}.button:hover{background:#1595ea;text-decoration:none}@media (min-width: 40rem){.button{display:inline-block;margin:0 0.25rem}}.button-minor{padding:0.3rem 1rem;border:2px solid #4ae;color:#4ae;background-color:transparent;font-size:0.8rem}.button-minor:hover{color:#fff;background:#4ae}hr{border:0;border-top:2px solid #f5f5f5;margin:1rem auto 1.5rem auto;width:3rem}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{margin:0;padding:0;background:#fff}section{border-top:2px solid #f5f5f5;text-align:center;padding:2rem 0}section:first-of-type{border-top:none}@media (min-width: 40rem){section{padding:4rem 0}}.container{margin:0 auto;max-width:40rem;width:90%}.row{*zoom:1}.row:after{content:"";display:table;clear:both}.backdrop{position:fixed;z-index:5;width:100%;height:100%;background-color:#f5f5f5}.picture-icon{width:2.7rem;height:2.7rem;margin-right:0.5rem;-webkit-transition:-webkit-transform 0.4s cubic-bezier(0.51, 1.285, 0.855, 1.185);-moz-transition:-moz-transform 0.4s cubic-bezier(0.51, 1.285, 0.855, 1.185);-o-transition:-o-transform 0.4s cubic-bezier(0.51, 1.285, 0.855, 1.185);transition:transform 0.4s cubic-bezier(0.51, 1.285, 0.855, 1.185)}.picture-icon:hover{-webkit-transform:scale(3, 3);-moz-transform:scale(3, 3);-ms-transform:scale(3, 3);-o-transform:scale(3, 3);transform:scale(3, 3)}@media (min-width: 40rem){.picture-icon{width:3.4rem;height:3.4rem}}@media (min-width: 64rem){.picture-icon{width:3.75rem;height:3.75rem}}header{padding-top:5rem;text-align:center;color:#666}header p{text-align:center}@media (min-width: 40rem){header{padding-top:6.5rem}}.primary-actions{margin-bottom:1.5rem}.credits p{text-align:center}.credits .button{margin-top:0.5rem}.content{position:absolute;z-index:10;top:28rem;width:100%;border-top:1px solid #e8e8e8;background-color:#fff}@media (min-width: 40rem){.content{top:34rem}}.example-image-link{display:inline-block;padding:4px;margin:0 0.5rem 1rem 0.5rem;background-color:#fff;line-height:0;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-transition:background-color 0.5s ease-out;-moz-transition:background-color 0.5s ease-out;-o-transition:background-color 0.5s ease-out;transition:background-color 0.5s ease-out}.example-image-link:hover{background-color:#4ae;-webkit-transition:background-color 0;-moz-transition:background-color 0;-o-transition:background-color 0;transition:background-color 0}.example-image{width:7rem;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.how-to-use-section p,.how-to-use-section ol,.how-to-use-section ul,.how-to-use-section pre{text-align:left}fieldset{border:none}.donate-button{width:100%}@media (min-width: 40rem){.donate-button{width:auto}}.sharing-section{position:fixed;z-index:20;top:20px;right:0} diff --git a/img/demopage/picture.svg b/img/demopage/picture.svg new file mode 100644 index 00000000..14a60b26 --- /dev/null +++ b/img/demopage/picture.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index db2d6f2f..ff83eb0f 100644 --- a/index.html +++ b/index.html @@ -16,126 +16,132 @@ -
-
-

Lightbox

-

- The original lightbox script.
Eight years later — still going strong! -

- - - Download - - - - View on Github - - -
-
- -
-
-

Examples

-

Two individual images

-
- image-1 - image-1 +
+ +
+
+

+ Lightbox +

+

+ The original lightbox script.
Eight years later — still going strong! +

+
+ + Download + + + View on Github + +
+
+

+ Created by Lokesh Dhakar
+ Follow me on Twitter +

+
+
+ +
+ +
+ +
+
+

Examples

+

Two individual images

+
+ image-1 + image-1 +
-
+
-

Four image set

+

Four image set

-
-
- - - - +
+
+ + + + +
-
-
- -
-
-

How to use

-

Step 1 - Load the Javascript and CSS

-
    -
  1. Download and unzip the latest version of Lightbox.
    2. -
  2. Look inside the js folder to find jquery-1.11.0.min.js and lightbox.min.js and load both of these files. Load jQuery first. -
    <script src="js/jquery-1.11.0.min.js"></script>
-<script src="js/lightbox.min.js"></script>
    -
    3. -
  3. Look inside the css folder to find lightbox.css and load it. - 
    <link href="css/lightbox.css" rel="stylesheet" />
    -
    4. -
  4. Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
    5. -
-

Step 2 - Turn it on

-
    -
  • Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example: - 
    <a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
    - Optional: Add a data-title attribute if you want to show a caption. -
    • -
  • If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example: - 
    <a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
-<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
-<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
    -
    • -
-
-
- - -
-
-

Help

- -

Have a feature request?

-

If you want a feature added, create an issue on Github. Someone else or I might be able to help out. No guarantees.

- -

Found a bug?

-

If you find a bug, create an issue on Github. Include your operating system and browser version along with detailed steps on how to reproduce the bug.

- -

Can't get Lightbox working?

-

If you followed the instructions, but still can't get Lightbox working, search Stackoverflow to see if other people have run into the same issue as you. If not, post a new question.

- -

Looking for older versions?

-

You can access older versions and see a changelog on the Github releases page.

-
-
- - - - +
+ +
+
+

How to use

+

Step 1 - Load the Javascript and CSS

+
    +
  1. Download and unzip the latest version of Lightbox.
    2. +
  2. Look inside the js folder to find jquery-1.11.0.min.js and lightbox.min.js and load both of these files. Load jQuery first. + 
    <script src="js/jquery-1.11.0.min.js"></script>
+	<script src="js/lightbox.min.js"></script>
    +
    3. +
  3. Look inside the css folder to find lightbox.css and load it. + 
    <link href="css/lightbox.css" rel="stylesheet" />
    +
    4. +
  4. Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
    5. +
+

Step 2 - Turn it on

+
    +
  • Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example: + 
    <a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
    + Optional: Add a data-title attribute if you want to show a caption. +
    • +
  • If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example: + 
    <a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
+	<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
+	<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
    +
    • +
+
+
+ + +
+
+

Help

+ +

Have a feature request?

+

If you want a feature added, create an issue on Github. Someone else or I might be able to help out. No guarantees.

+ +

Found a bug?

+

If you find a bug, create an issue on Github. Include your operating system and browser version along with detailed steps on how to reproduce the bug.

+ +

Can't get Lightbox working?

+

If you followed the instructions, but still can't get Lightbox working, search Stackoverflow to see if other people have run into the same issue as you. If not, post a new question.

+ +

Looking for older versions?

+

You can access older versions and see a changelog on the Github releases page.

+
+
+ + + +
diff --git a/sass/screen.sass b/sass/screen.sass index 4f18f8b4..83275b84 100644 --- a/sass/screen.sass +++ b/sass/screen.sass @@ -3,7 +3,10 @@ @import "normalize" -// COLORS & BACKGROUNDS -------------------------------------------------------- + +// VARIABLES ------------------------------------------------------------------- + +// == COLORS & BACKGROUNDS $yellow: #fdf485 $orange: #e67e39 @@ -14,30 +17,36 @@ $gray: #777 $light-gray: #f3f3f3 $dark-gray: #222 -$color: $gray +$color: #666 $bg-color: #fff -$border-color: darken($bg-color, 5%) -$header-bg-color: #f9f9f9 -$section-heading-color: $orange $heading-color: $dark-gray +$section-heading-color: $orange $link-color: $blue $code-color: $color -$code-bg-color: darken($bg-color, 5%) +$code-bg-color: darken($bg-color, 4%) +$border-color: darken($bg-color, 4%) -// TYPE -------------------------------------------------------- +$backdrop-bg-color: darken($bg-color, 4%) +$header-color: $color +$footer-color: $color + + +//== TYPE $body-font-family: "Karla", "lucida grande", sans-serif $heading-font-family: "Montserrat", "Helvetica", sans-serif $code-font-family: "Karla", "lucida grande", sans-serif -// LAYOUT -------------------------------------------------------- +//== LAYOUT $gutter: 30px $max-column-width: 600px -$sharing-section-z-index: 10 +$backdrop-z-index: 5 +$content-z-index: 10 +$sharing-z-index: 20 -// UI COMPONENTS -------------------------------------------------------- +//== UI COMPONENTS $radius: 6px @@ -68,8 +77,8 @@ h1, h2, h3, h4, h5 font-weight: 700 h1 - font-size: 4rem - margin: 0 0 0.2em 0 + font-size: 3.5rem + margin: 0 0 0.1em 0 @media (min-width: 40rem) h1 @@ -110,7 +119,7 @@ p .lead max-width: 45rem - margin-bottom: 1.25rem + margin-bottom: 1.1rem font-size: 1.25rem @@ -156,6 +165,87 @@ a font-size: 0.75rem + + +/* Code + * ========================================================================== */ + +code + color: $code-color + background-color: $code-bg-color + +border-radius($radius) + font-family: Consolas, Courier, monospace + font-size: 0.9rem + padding: 0.1rem 0.3rem + position: relative + top: -1px + +pre + background-color: $code-bg-color + +border-radius($radius) + padding: 0 0.5rem 0.1rem 0.5rem + code + padding: 0 + font-size: 0.8rem + border: none + + +/* Lists + * ========================================================================== */ + +ul + margin: 0 + text-align: left + +@media (min-width: 40rem) + ul + display: inline-block + + +/* Buttons + * ========================================================================== */ + +.button + display: block + padding: 0.7rem 2rem + margin-bottom: 0.5rem + border: none + color: #fff + background-color: $link-color + font-size: 1.1rem + font-weight: bold + text-transform: uppercase + +border-radius($radius) + vertical-align: middle + white-space: nowrap + &:hover + background: darken($link-color, 10%) + text-decoration: none + +@media (min-width: 40rem) + .button + display: inline-block + margin: 0 0.25rem + +.button-minor + padding: 0.3rem 1rem + border: 2px solid $link-color + color: $link-color + background-color: transparent + font-size: 0.8rem + &:hover + color: white + background: $link-color + + +/* Elements + * ========================================================================== */ + +hr + border: 0 + border-top: 2px solid $border-color + margin: 1rem auto 1.5rem auto + width: 3rem /* -- Layout ------------------------------------------------------------------ */ *, *:before, *:after @@ -186,19 +276,66 @@ section +pie-clearfix -/* -- Header -- */ +//== Header + +.backdrop + position: fixed + z-index: $backdrop-z-index + width: 100% + height: 100% + background-color: $backdrop-bg-color + +.picture-icon + width: 2.7rem + height: 2.7rem + margin-right: 0.5rem + +transition(transform .4s cubic-bezier(0.510, 1.285, 0.855, 1.185)) + &:hover + +scale(3) + +@media (min-width: 40rem) + .picture-icon + width: 3.4rem + height: 3.4rem + +@media (min-width: 64rem) + .picture-icon + width: 3.75rem + height: 3.75rem header - padding: 4rem 0 2rem 0 - background-color: $header-bg-color + padding-top: 5rem text-align: center + color: $header-color p text-align: center @media (min-width: 40rem) header - padding: 3rem 0 + padding-top: 6.5rem + +.primary-actions + margin-bottom: 1.5rem + +.credits + p + text-align: center + .button + margin-top: 0.5rem +//== Content + +.content + position: absolute + z-index: $content-z-index + top: 28rem + width: 100% + border-top: 1px solid darken($border-color, 5%) + background-color: $bg-color + +@media (min-width: 40rem) + .content + top: 34rem /* -- Examples -- */ @@ -208,10 +345,11 @@ header margin: 0 0.5rem 1rem 0.5rem background-color: $bg-color line-height: 0 - +transition(background-color .1s ease-out) +border-radius($radius) + +transition(background-color .5s ease-out) &:hover background-color: $link-color + +transition(background-color 0) .example-image width: 7rem @@ -239,129 +377,12 @@ fieldset .donate-button width: auto -/* -- Credits -- */ - -footer - padding: 2rem 0 - background-color: $header-bg-color - text-align: center - p - text-align: center - .button - margin-top: 0.5rem - /* -- Sharing -- */ .sharing-section position: fixed - z-index: $sharing-section-z-index + z-index: $sharing-z-index top: 20px right: 0 - -/* Code - * ========================================================================== */ - -code - color: $code-color - background-color: $code-bg-color - +border-radius($radius) - font-family: Consolas, Courier, monospace - font-size: 0.9rem - padding: 0.1rem 0.3rem - position: relative - top: -1px - -pre - background-color: $code-bg-color - +border-radius($radius) - padding: 0 0.5rem 0.1rem 0.5rem - code - padding: 0 - font-size: 0.8rem - border: none - - -/* Mobile First Grid - * ========================================================================== */ - -.column - margin-bottom: 1.5rem - -@media (min-width: 40rem) - .column - float: left - margin: 0 - padding-left: 1rem - padding-right: 1rem - &.full - width: 100% - &.two-thirds - width: 66.7% - &.half - width: 50% - &.third - width: 33.3% - &.fourth - width: 24.95% - &.flow-opposite - float: right - - - -/* Lists - * ========================================================================== */ - -ul - margin: 0 - text-align: left - -@media (min-width: 40rem) - ul - display: inline-block - - -/* Buttons - * ========================================================================== */ - -.button - display: block - padding: 0.7rem 2rem - margin-bottom: 0.5rem - border: none - color: #fff - background-color: $link-color - font-size: 1.1rem - font-weight: bold - text-transform: uppercase - +border-radius($radius) - vertical-align: middle - white-space: nowrap - &:hover - background: darken($link-color, 10%) - text-decoration: none - -@media (min-width: 40rem) - .button - display: inline-block - margin: 0 0.25rem - -.button-minor - padding: 0.35rem 1rem - border: 2px solid $link-color - color: $link-color - background-color: transparent - font-size: 0.8rem - &:hover - color: white - - -/* Elements - * ========================================================================== */ - -hr - border: 0 - border-top: 2px solid $border-color - margin: 1rem auto 1.5rem auto - width: 3rem