From ccc4db6cd462a9a9c2c768ce43bce25c05f4c968 Mon Sep 17 00:00:00 2001 From: Joe Date: Sun, 11 Feb 2018 12:46:34 +0000 Subject: [PATCH] feat(docs) move docs to base repo --- docs/css/main.css | 1 + docs/gulpfile.js | 27 ++++ docs/images/favicon.png | Bin 0 -> 3042 bytes docs/index.html | 122 ++++++++++++++++ docs/js/main.js | 6 + docs/package.json | 34 +++++ docs/prism/prism.css | 133 ++++++++++++++++++ docs/prism/prism.js | 4 + docs/sass/base/_styles.scss | 37 +++++ docs/sass/blocks/_comments.scss | 10 ++ docs/sass/blocks/_lemonade.scss | 93 +++++++++++++ docs/sass/blocks/_site-content.scss | 80 +++++++++++ docs/sass/blocks/_site-footer.scss | 68 +++++++++ docs/sass/blocks/_site-header.scss | 209 ++++++++++++++++++++++++++++ docs/sass/config/_config.scss | 24 ++++ docs/sass/main.scss | 20 +++ docs/sass/mixins/_mixins.scss | 33 +++++ 17 files changed, 901 insertions(+) create mode 100644 docs/css/main.css create mode 100644 docs/gulpfile.js create mode 100644 docs/images/favicon.png create mode 100644 docs/index.html create mode 100644 docs/js/main.js create mode 100644 docs/package.json create mode 100644 docs/prism/prism.css create mode 100644 docs/prism/prism.js create mode 100644 docs/sass/base/_styles.scss create mode 100644 docs/sass/blocks/_comments.scss create mode 100644 docs/sass/blocks/_lemonade.scss create mode 100644 docs/sass/blocks/_site-content.scss create mode 100644 docs/sass/blocks/_site-footer.scss create mode 100644 docs/sass/blocks/_site-header.scss create mode 100644 docs/sass/config/_config.scss create mode 100644 docs/sass/main.scss create mode 100644 docs/sass/mixins/_mixins.scss diff --git a/docs/css/main.css b/docs/css/main.css new file mode 100644 index 0000000..c4eb322 --- /dev/null +++ b/docs/css/main.css @@ -0,0 +1 @@ +*{margin:0;padding:0;box-sizing:border-box}html{font-size:100%}body{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.4}input,textarea{outline:0;border:0;box-shadow:none;border-radius:0;appearance:none}ul li{list-style-type:none}a{text-decoration:none}a:hover{text-decoration:none}*{margin:0;padding:0;box-sizing:border-box}.frame{margin:0 auto;max-width:100%}.frame:after{content:"";display:table;clear:both}[class*='bit-']{float:left;padding:.3em}.bit-1{width:100%}.bit-2{width:50%}.bit-3{width:33.33333%}.bit-4{width:25%}.bit-5{width:20%}.bit-6{width:16.66667%}.bit-7{width:14.28571%}.bit-8{width:12.5%}.bit-9{width:11.11111%}.bit-10{width:10%}.bit-11{width:9.09091%}.bit-12{width:8.33333%}.bit-25{width:25%}.bit-40{width:40%}.bit-60{width:60%}.bit-75{width:75%}.box{border:2px solid #e6e6e6;padding:15px 0}.content{max-width:1200px;margin:40px auto}.content h2{font-size:2.5em;text-align:center;margin-bottom:10px}.site-header{position:relative;background:linear-gradient(45deg, #F7CA18 10%, #D2527F 90%);overflow:hidden;background-size:200% 100% !important;-webkit-animation:move 10s ease infinite;animation:move 10s ease infinite}.site-header__mobile{opacity:0;cursor:pointer;z-index:10;position:absolute;top:27px;right:25px;width:25px;height:15px;border-top:1px solid #fff;border-bottom:1px solid #fff}@media (max-width: 30em){.site-header__mobile{opacity:1}}.site-header__mobile:after{position:absolute;content:"";height:1px;width:70%;top:0;bottom:0;right:0;left:0;background:#fff;margin:auto}.site-header__nav{position:relative;background:rgba(0,0,0,0.1);padding:25px}.site-header__logo{width:25%;display:inline-block;transition:.3s;vertical-align:middle;text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:600;color:#fff;text-align:center}@media (max-width: 30em){.site-header__logo{display:block}}.site-header__list{display:inline-block;text-align:right;width:74%;display:none}@media (max-width: 30em){.site-header__list--show{display:block;width:100%;line-height:2;margin-top:30px}}@media (min-width: 30em) and (max-width: 50em){.site-header__list{display:inline-block !important}}@media (min-width: 50em){.site-header__list{display:inline-block !important}}.site-header__link{color:#fff;text-transform:uppercase;letter-spacing:1px;font-size:11px;margin-right:20px}@media (max-width: 30em){.site-header__link{width:100%;display:block}}@media (min-width: 30em) and (max-width: 50em){.site-header__link{margin-right:10px}}.site-header__link:hover{border-bottom:2px solid #fff}@media (max-width: 30em){.site-header__link:hover{border:0}}.site-header__link--download{border:2px solid #fff;color:#fff;letter-spacing:1px;font-size:11px;text-transform:uppercase;border-radius:100px;padding:10px 20px;transition:.3s ease-in}@media (max-width: 30em){.site-header__link--download{display:none}}@media (min-width: 30em) and (max-width: 50em){.site-header__link--download{display:none}}.site-header__link--download:hover{background:#fff;color:#000}.site-header__content{padding:130px 0 190px 0;text-align:center}@media (max-width: 30em){.site-header__content{padding:60px 0 60px 0}}.site-header__content>*{position:relative}.site-header__title{font-size:5em;color:#fff}@media (max-width: 30em){.site-header__title{font-size:3em}}.site-header__subtitle{font-size:1.5em;max-width:400px;width:90%;margin:0 auto;color:rgba(0,0,0,0.4);margin-top:-15px}@media (max-width: 30em){.site-header__subtitle{font-size:1.3em;margin-top:0}}.site-header__btn{display:block;max-width:200px;margin:0px auto;background:#fff;margin-top:40px;padding:15px 0px;font-size:1.3em;color:#000;text-decoration:none;border-radius:100px;transition:.3s;border:2px solid #fff}.site-header__btn:hover{color:#fff;background:transparent}.site-header__btn span{font-size:0.7em;color:rgba(0,0,0,0.4)}@-webkit-keyframes move{0%{background-position:0 0}50%{background-position:100% 0}100%{background-position:0 0}}.site-content{max-width:1000px;margin:40px auto}.site-content__install{border:1px solid #f2f2f2;padding:20px 0}.site-content__install p{margin-bottom:0 !important}.site-content__install h5,.site-content__install h3,.site-content__install p,.site-content__install a{padding:0 20px}.site-content__copy{padding:10px;padding-left:40px}@media (max-width: 30em){.site-content__copy{padding-left:0}}@media (min-width: 30em) and (max-width: 50em){.site-content__copy{padding-left:0}}.site-content__title{font-size:1.4em}.site-content h5{font-size:0.7em;font-weight:300;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.site-content a{color:#000}.site-content a:hover{color:#D2527F;text-decoration:underline}.site-content p{margin-top:10px;line-height:1.6;margin-bottom:30px}.site-content hr{height:0px;border:0;border-top:1px solid #f2f2f2;margin:20px 0}@media (max-width: 30em){.bit-75,.bit-25{width:100%;padding:20px}}@media (min-width: 30em) and (max-width: 50em){.bit-75,.bit-25{width:100%;padding:20px}}.comments{max-width:1000px;width:90%;margin:0 auto;padding:50px 0}.comments a{color:#D2527F}.site-footer{max-width:1000px;margin:0 auto;width:90%;padding:5em 0;color:#000;font-size:11px;text-transform:uppercase;letter-spacing:1px;border-top:1px solid #f2f2f2}.site-footer a{color:#000;border-bottom:1px solid transparent;transition:.3s}.site-footer a:hover{color:#F7CA18;border-color:#F7CA18}@media (max-width: 30em){.site-footer__copyright{display:block}}@media (min-width: 30em) and (max-width: 50em){.site-footer__copyright{display:block;text-align:center}}.site-footer__info{float:right}@media (max-width: 30em){.site-footer__info{float:left;margin-top:20px}}@media (min-width: 30em) and (max-width: 50em){.site-footer__info{float:left;width:100%;margin-top:10px;display:block;text-align:center}}.site-footer__info a{margin-right:20px}@media (max-width: 30em){.site-footer__info a{display:block;margin-bottom:5px}}@media (min-width: 30em) and (max-width: 50em){.site-footer__info a{margin-right:5px}}.site-footer__info a:last-of-type{margin-right:0} diff --git a/docs/gulpfile.js b/docs/gulpfile.js new file mode 100644 index 0000000..bd58ff6 --- /dev/null +++ b/docs/gulpfile.js @@ -0,0 +1,27 @@ +// requirements +var gulp = require('gulp'); +var sass = require('gulp-sass'); +var browserSync = require('browser-sync'); +var prefix = require('gulp-autoprefixer'); + +// create sass tasks +gulp.task('sass', function () { + gulp.src('sass/**/*.scss') + .pipe(sass({outputStyle: 'compressed', includePaths: ['sass']})) + .pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR")) + .pipe(gulp.dest('css')) +}); + +// create browser sync task +gulp.task('browser-sync', function() { + browserSync.init(["css/*.css"], { + server: { + baseDir: "./" + } + }); +}); + +// default task (just run gulp) +gulp.task('default', ['sass', 'browser-sync'], function () { + gulp.watch("sass/**/*.scss", ['sass']); +}); \ No newline at end of file diff --git a/docs/images/favicon.png b/docs/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..b39a5121288b3502a6377776a04864c9831db355 GIT binary patch literal 3042 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 literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..f5b1126 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,122 @@ + + + + + + + Lemonade — Freshly squeezed. + + + + + + +
+ +
+

Lemonade

+ +
+
+

Lemonade

+

A customizable grid made with Sass.

+ Download .zip +
+
+ +
+
+
+

Quick setup

+

If you just want to get setup quickly then please see below for installation methods.

+
+
Download
+ lemonade-2.5.zip +
+
Install with Bower
+

bower install lemonade

+
+
Install with npm
+

npm i --save lemonade-grid

+
+
+
+
+

Getting Started

+

Once you have Lemonade installed you will want to add the lemonade.min.css to your HTML file. To achieve this just simply do this:

+ 
<link rel="stylesheet" href="css/lemonade.min.css">
+

Alternatively you can use the pre-made HTML file which is downloaded in the v2.5.zip folder.

+ +

Basic Usage

+

Lemonade currently has two ways to use it. You can either use the pre-made 12 columns or create your own columns, I'll run you through how to use them both.

+

As far as grid systems go, Lemonade is pretty simple and to understand it is extremely easy. Lets create a 3 column gallery:

+ 
<div class="frame">
+    <div class="bit-3">
+        <img src="http://placehold.it/500x500" />
+    </div>
+    <div class="bit-3">
+        <img src="http://placehold.it/500x500" />
+    </div>
+    <div class="bit-3">
+        <img src="http://placehold.it/500x500" />
+    </div>
+</div>
+
+
Premade Columns
+

Let me run you through each line of this snippet. You may be aware of what a clearfix is, but for those who don't it is known as CSS hack that clears floated elements and aligns them correctly. Lemonade uses a clearfix which is a class called .frame, to successfully create columns you will always need to have a .frame class wrapped around your grid columns.

+

Next line is .bit-3 which is a column with a width of 33.33%, which allows you to in-line three columns. Always try to avoid adding class names to grid columns.

+ +
Creating Columns
+

Creating columns is really simple if you have basic knowledge of Sass but if you don't, I guess you've got to learn somewhere.

+
.bit-75 {
+    width: $full - 25%;
+}
+
+.bit-25 {
+    width: $full - 75%;
+}
+

Let me explain this in a little more detail. $full is basically a Sass variable of 100%, so by creating these custom columns we are basically taking 100% and subtracting a number. Creating the columns are really easy as long as they equal to 100% inline.

+
+
Articles
+ Build a Freshly Squeezed Responsive Grid System +
+
+
+
+ +
+
+ + + comments powered by Disqus + +
+ + + + + + + diff --git a/docs/js/main.js b/docs/js/main.js new file mode 100644 index 0000000..1345fdb --- /dev/null +++ b/docs/js/main.js @@ -0,0 +1,6 @@ +const $trigger = document.querySelector('.js-mobile') +const nav = document.querySelector('.js-nav') + +$trigger.addEventListener('click', function() { + nav.classList.toggle('site-header__list--show') +}) diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 0000000..8a69a16 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,34 @@ +{ + "name": "Lemonade-docs", + "version": "0.0.1", + "description": "Lemonade-Docs", + "main": "gulpfile.js", + "dependencies": { + "gulp": "~3.8.8", + "gulp-sass": "*" + }, + "devDependencies": { + "gulp": "^3.8.8", + "browser-sync": "^1.5.2", + "gulp-autoprefixer": "^1.0.1" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/dope/lemonade" + }, + "keywords": [ + "sass", + "bem", + "html5", + "framework" + ], + "author": "Joe Richardson", + "license": "MIT", + "bugs": { + "url": "https://github.com/dope/lemonade/issues" + }, + "homepage": "http://lemonade.im" +} \ No newline at end of file diff --git a/docs/prism/prism.css b/docs/prism/prism.css new file mode 100644 index 0000000..7afa6a7 --- /dev/null +++ b/docs/prism/prism.css @@ -0,0 +1,133 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important { + font-weight: bold; +} + +.token.entity { + cursor: help; +} + diff --git a/docs/prism/prism.js b/docs/prism/prism.js new file mode 100644 index 0000000..a17e916 --- /dev/null +++ b/docs/prism/prism.js @@ -0,0 +1,4 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css */ +self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(d instanceof a)){c.lastIndex=0;var m=c.exec(d);if(m){u&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+""},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);; +Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))});; +Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; diff --git a/docs/sass/base/_styles.scss b/docs/sass/base/_styles.scss new file mode 100644 index 0000000..5e955b5 --- /dev/null +++ b/docs/sass/base/_styles.scss @@ -0,0 +1,37 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 100%; +} + +body { + font-family: $font-sans; + font-size: $base-font; + line-height: $line-height; +} + +input, textarea { + outline: 0; + border: 0; + box-shadow: none; + border-radius: 0; + appearance: none; +} + +ul { + li { + list-style-type: none; + } +} + +a { + text-decoration: none; + + &:hover { + text-decoration: none; + } +} \ No newline at end of file diff --git a/docs/sass/blocks/_comments.scss b/docs/sass/blocks/_comments.scss new file mode 100644 index 0000000..0b25144 --- /dev/null +++ b/docs/sass/blocks/_comments.scss @@ -0,0 +1,10 @@ +.comments { + max-width: $max-width; + width: 90%; + margin: 0 auto; + padding: 50px 0; + + a { + color: $color-pink; + } +} \ No newline at end of file diff --git a/docs/sass/blocks/_lemonade.scss b/docs/sass/blocks/_lemonade.scss new file mode 100644 index 0000000..0758a97 --- /dev/null +++ b/docs/sass/blocks/_lemonade.scss @@ -0,0 +1,93 @@ +// Helpers +$full: 100%; +$half: 100% / 2; + +// Media Queries Breakpoints +// Can be tweaked if need be. +$small: 30em; // Portrait mobile to landscape mobile +$medium: 50em; // Portrait tablet to landscape tablet +$large: 68.750em; // Small desktop to large desktop + +// Example padding for grid +// Doesn't actually need to be kept in. +$bit-padding: 0.3em; + +// Grid widths +// ---------------------------------------------- +// Feel free to change this to how many columns +// you want this grid system to have. +$start: 1; +$end: 12; + +// Frame width (grid wrapper) +$frame-width: 100%; + +// Demo Colors +$lemonade-color: #FCD920; +$new-grid-color: #87D37C; + +// Mixins, not worth having its own file. +// Border box +// Should probably use auto-prefix on this. +@mixin box-sizing($type) { + -webkit-box-sizing: $type; + -moz-box-sizing: $type; + box-sizing: $type; +} + +// Start the grid. +// Optional hard reset +* { +margin: 0; +padding: 0; +@include box-sizing(border-box); +} + +// clearfix +.frame { + margin: 0 auto; + max-width: $frame-width; + &:after { + content: ""; + display: table; + clear: both; + } +} + +// Attribute selector +// Also I've removed :last-of-type +[class*='bit-'] { + float: left; + padding: $bit-padding; +} + +// Create grid widths (1-12) +@for $i from $start through $end { + .bit-#{$i} { + width: $full / $i; + } +} + +// Common widths +// Please use the media queries below to respond these widths +// Feel free to pull request new widths +.bit-25 { width: $full - 75; } +.bit-40 { width: $full - 60; } +.bit-60 { width: $full - 40; } +.bit-75 { width: $full - 25; } + +.box { + border: 2px solid lighten($color-black, 90%); + padding: 15px 0; +} + +.content { + max-width: 1200px; + margin: 40px auto; + + h2 { + font-size: 2.5em; + text-align: center; + margin-bottom: 10px; + } +} \ No newline at end of file diff --git a/docs/sass/blocks/_site-content.scss b/docs/sass/blocks/_site-content.scss new file mode 100644 index 0000000..552f5a9 --- /dev/null +++ b/docs/sass/blocks/_site-content.scss @@ -0,0 +1,80 @@ +.site-content { + max-width: $max-width; + margin: 40px auto; + + &__install { + border: 1px solid darken($color-white, 5%); + padding: 20px 0; + p { + margin-bottom: 0 !important; + } + + h5, h3, p, a { + padding: 0 20px; + } + + } + + &__copy { + padding: 10px; + padding-left: 40px; + + @include small { + padding-left: 0; + } + + @include medium { + padding-left: 0; + } + } + + &__title { + font-size: 1.4em; + } + + h5 { + font-size: 0.7em; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 10px; + } + + a { + color: $color-black; + + &:hover { + color: $color-pink; + text-decoration: underline; + } + } + + p { + margin-top: 10px; + line-height: 1.6; + margin-bottom: 30px; + } + + hr { + height: 0px; + border: 0; + border-top: 1px solid darken($color-white, 5%); + margin: 20px 0; + } +} + +@include small { + .bit-75, + .bit-25 { + width: 100%; + padding: 20px; + } +} + +@include medium { + .bit-75, + .bit-25 { + width: 100%; + padding: 20px; + } +} \ No newline at end of file diff --git a/docs/sass/blocks/_site-footer.scss b/docs/sass/blocks/_site-footer.scss new file mode 100644 index 0000000..1b6d64d --- /dev/null +++ b/docs/sass/blocks/_site-footer.scss @@ -0,0 +1,68 @@ +.site-footer { + max-width: $max-width; + margin: 0 auto; + width: 90%; + padding: 5em 0; + color: $color-black; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + border-top: 1px solid #f2f2f2; + + + a { + color: $color-black; + border-bottom: 1px solid transparent; + transition: .3s; + + &:hover { + color: $color-lemon; + border-color: $color-lemon; + } + } + + &__copyright { + @include small { + display: block; + } + + @include medium { + display: block; + text-align: center; + } + } + + &__info { + float: right; + + @include small { + float: left; + margin-top: 20px; + } + + @include medium { + float: left; + width: 100%; + margin-top: 10px; + display: block; + text-align: center; + } + + a { + margin-right: 20px; + + @include small { + display: block; + margin-bottom: 5px; + } + + @include medium { + margin-right: 5px; + } + + &:last-of-type { + margin-right: 0; + } + } + } +} \ No newline at end of file diff --git a/docs/sass/blocks/_site-header.scss b/docs/sass/blocks/_site-header.scss new file mode 100644 index 0000000..9d44238 --- /dev/null +++ b/docs/sass/blocks/_site-header.scss @@ -0,0 +1,209 @@ +.site-header { + position: relative; + background: linear-gradient(45deg, $gradient-start 10%, $gradient-end 90%); + overflow: hidden; + background-size: 200% 100% !important; + animation: move 10s ease infinite; + + &__mobile { + opacity: 0; + cursor: pointer; + z-index: 10; + position: absolute; + top: 27px; + right: 25px; + width: 25px; + height: 15px; + border-top: 1px solid $color-white; + border-bottom: 1px solid $color-white; + + @include small { + opacity: 1; + } + + &:after { + position: absolute; + content: ""; + height: 1px; + width: 70%; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: $color-white; + margin: auto; + } + } + + &__nav { + position: relative; + background: rgba(0,0,0,.1); + padding: 25px; + } + + &__logo { + width: 25%; + display: inline-block; + transition: .3s; + + @include small { + display: block; + } + vertical-align: middle; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 11px; + font-weight: 600; + color: $color-white; + text-align: center; + } + + &__list { + display: inline-block; + text-align: right; + width: 74%; + display: none; + + &--show { + @include small { + display: block; + width: 100%; + line-height: 2; + margin-top: 30px; + } + } + + @include medium { + display: inline-block !important; + } + + @include large { + display: inline-block !important; + } + } + + &__link { + color: $color-white; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 11px; + margin-right: 20px; + + @include small { + width: 100%; + display: block; + } + + @include medium { + margin-right: 10px; + } + + &:hover { + border-bottom: 2px solid $color-white; + + @include small { + border: 0; + } + } + + &--download { + border: 2px solid $color-white; + color: $color-white; + letter-spacing: 1px; + font-size: 11px; + text-transform: uppercase; + border-radius: 100px; + padding: 10px 20px; + transition: .3s ease-in; + + @include small { + display: none; + } + + @include medium { + display: none; + } + + &:hover { + background: $color-white; + color: $color-black; + } + } + } + + &__content { + padding: 130px 0 190px 0; + text-align: center; + + @include small { + padding: 60px 0 60px 0; + } + + > * { + position: relative; + } + } + + &__title { + font-size: 5em; + color: $color-white; + + @include small { + font-size: 3em; + } + } + + &__subtitle { + font-size: 1.5em; + max-width: 400px; + width: 90%; + margin: 0 auto; + color: rgba(0,0,0,.4); + margin-top: -15px; + + @include small { + font-size: 1.3em; + margin-top: 0; + + } + } + + &__btn { + display: block; + max-width: 200px; + margin: 0px auto; + background: $color-white; + margin-top: 40px; + padding: 15px 0px; + font-size: 1.3em; + color: $color-black; + text-decoration: none; + border-radius: 100px; + transition: .3s; + border: 2px solid $color-white; + + &:hover { + color: $color-white; + background: transparent; + } + + span { + font-size: 0.7em; + color: rgba(0,0,0,.4); + } + } +} + +@-webkit-keyframes move { + 0% { + background-position: 0 0; + } + + 50% { + background-position: 100% 0; + } + + 100% { + background-position: 0 0; + } +} diff --git a/docs/sass/config/_config.scss b/docs/sass/config/_config.scss new file mode 100644 index 0000000..f98981a --- /dev/null +++ b/docs/sass/config/_config.scss @@ -0,0 +1,24 @@ +// Color +$color-black: #000000; +$color-white: #FFFFFF; +$color-lemon: #F7CA18; +$color-pink: #D2527F; + +$gradient-start: $color-lemon; +$gradient-end: $color-pink; + +$color-error: #C0392B; +$color-success: #4DB788; + +// Typography +$font-sans: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; +$base-font: 14px; +$line-height: 1.4; + +// Media Queries +$small: 30em; +$medium: 43em; +$large: 70em; + +// Widths +$max-width: 1000px; diff --git a/docs/sass/main.scss b/docs/sass/main.scss new file mode 100644 index 0000000..ba8cdd4 --- /dev/null +++ b/docs/sass/main.scss @@ -0,0 +1,20 @@ +/* + * Static Template by Joe Richardson + * 2014 + */ + +// Configuration +@import 'config/config'; + +// Mixins +@import 'mixins/mixins'; + +// Base +@import 'base/styles'; + +// Blocks +@import 'blocks/lemonade'; +@import 'blocks/site-header'; +@import 'blocks/site-content'; +@import 'blocks/comments'; +@import 'blocks/site-footer'; \ No newline at end of file diff --git a/docs/sass/mixins/_mixins.scss b/docs/sass/mixins/_mixins.scss new file mode 100644 index 0000000..baa42d2 --- /dev/null +++ b/docs/sass/mixins/_mixins.scss @@ -0,0 +1,33 @@ +// Placeholder +@mixin placeholder($color) { + &.placeholder { + color: $color; + } + + &:-moz-placeholder { + color: $color; + } + + &::-webkit-input-placeholder { + color: $color; + } +} + +// Media Queries +@mixin small { + @media (max-width: $small) { + @content; + } +} + +@mixin medium { + @media (min-width: $small) and (max-width: $medium) { + @content; + } +} + +@mixin large { + @media (min-width: $medium) { + @content; + } +}