udate: doodle theme

FarhadG · Nov 25, 2015 · 751c71c · 751c71c
1 parent 5bf20a1
commit 751c71c
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 280 deletions.
diff --git a/build/repo-card.js b/build/repo-card.js
@@ -27,14 +27,6 @@ var RepoCard = RepoCard || (function() {
  background: 'repo-card__image-wrap',
  thumb: 'repo-card__thumb'
  }
- },
- test: {
- template: '@@import test/index.html',
- style: '@@import test/style.css',
- selectors: {
- background: 'repo-card__image-wrap',
- thumb: 'repo-card__thumb'
- }
  }
  };
 

diff --git a/build/themes/doodle/index.html b/build/themes/doodle/index.html
@@ -1,22 +1,24 @@
-<div id="repo-card__image-wrap">
- <div id="repo-card__thumb-wrap">
- <img id="repo-card__thumb" />
+<div id="repo-card">
+ <div id="repo-card__image-wrap">
+ <div id="repo-card__thumb-wrap">
+ <img id="repo-card__thumb" />
+ </div>
+ <header id="repo-card__header">
+ <h1 id="repo-card__title">
+ {{title}}
+ </h1>
+
+ <div id="repo-card__subtitle">
+ {{subtitle}}
+ </div>
+ </header>
  </div>
- <header id="repo-card__header">
- <h1 id="repo-card__title">
- {{title}}
- </h1>
- <div id="repo-card__subtitle">
- {{subtitle}}
+ <div id="repo-card__content-wrap">
+ <div id="repo-card__content">
+ {{info}}
  </div>
- </header>
-</div>
-<div id="repo-card__content-wrap">
- <div id="repo-card__content">
- {{info}}
  </div>
-</div>
-<ul id="repo-card__social">
- {{buttons}}
-</ul>
-
+ <ul id="repo-card__social">
+ {{buttons}}
+ </ul>
+</div>
diff --git a/build/themes/doodle/style.css b/build/themes/doodle/style.css
@@ -9,7 +9,6 @@
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  overflow: hidden;
- position: fixed;
 }
 
 #repo-card a {

diff --git a/build/themes/test/index.html b/build/themes/test/index.html
diff --git a/build/themes/test/style.css b/build/themes/test/style.css
diff --git a/index.html b/index.html
@@ -23,45 +23,19 @@
 
  RepoCard
  .configure({
- theme: 'test',
+ theme: 'doodle',
  repo: 'init',
  username: 'farhadg',
  title: 'Init',
  subtitle: '<a href="http:https://www.github.com/farhadg" target="_blank">@farhadg</a>',
- thumb: 'green',
- background: 'red',
- info: 'djksjdklsajdsajlkdjsalk',
- position: {
- bottom: 15,
- left: 15
- }
- })
- .configure({
- repo: 'mesh-code-editor'
- })
- .setTheme('asjkajsklajskl')
- .setStyling({
+ info: 'A quick way to get you to the first commit of any GitHub repo (tracks branches too)',
  background: 'url(http:https://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_embroidery.png)',
  thumb: 'url(https://avatars0.githubusercontent.com/u/1647596?v=3&s=460)',
  position: {
  top: 15,
  right: 15
  }
- })
- .configure({
- theme: 'test',
- repo: 'init',
- username: 'farhadg',
- title: 'Init',
- subtitle: '<a href="http:https://www.github.com/farhadg" target="_blank">@farhadg</a>',
- thumb: 'green',
- background: 'red',
- info: 'djksjdklsajdsajlkdjsalk',
- position: {
- bottom: 15,
- left: 15
- }
- })
+ });
 
 </script>
 

diff --git a/repo-card.js b/repo-card.js
@@ -89,15 +89,7 @@ var RepoCard = RepoCard || (function() {
 
  RepoCard.themes = {
  doodle: {
- template: '<div id="repo-card__image-wrap">\n <div id="repo-card__thumb-wrap">\n <img id="repo-card__thumb" />\n </div>\n <header id="repo-card__header">\n <h1 id="repo-card__title">\n {{title}}\n </h1>\n <div id="repo-card__subtitle">\n {{subtitle}}\n </div>\n </header>\n</div>\n<div id="repo-card__content-wrap">\n <div id="repo-card__content">\n {{info}}\n </div>\n</div>\n<ul id="repo-card__social">\n {{buttons}}\n</ul>\n\n',
- style: '#repo-card {\n box-sizing: border-box;\n font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;\n background-color: #FFFFFF;\n line-height: 1.5em;\n margin: 0 auto;\n padding-bottom: 60px;\n width: 350px;\n border: 1px solid #CCCCCC;\n border-radius: 5px;\n overflow: hidden;\n position: fixed;\n}\n\n#repo-card a {\n color: #999;\n}\n\n#repo-card__image-wrap {\n height: 100px;\n width: 100%;\n position: relative;\n -webkit-transition: height .3s ease-in;\n transition: height .3s ease-in;\n}\n\n#repo-card__image-wrap:before {\n content: \'\';\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(51, 51, 51, .25);\n z-index: 1;\n}\n\n#repo-card__header {\n text-align: left;\n padding-left: 140px;\n position: absolute;\n bottom: -28px;\n left: 0;\n color: #FFFFFF;\n z-index: 20;\n -webkit-transition: -webkit-transform .3s ease-in;\n transition: transform .3s ease-in;\n}\n\n#repo-card__title {\n margin: 0;\n color: #FFFFFF;\n font-size: 1.125em;\n font-weight: 400;\n z-index: 10;\n position: relative;\n padding-bottom: 6px;\n}\n\n#repo-card__subtitle {\n color: #999999;\n font-size: .875em;\n padding-top: 12px;\n -webkit-transition: -webkit-transform .3s ease-in;\n transition: transform .3s ease-in;\n}\n\n#repo-card__thumb-wrap {\n width: 110px;\n height: 110px;\n padding: 3px;\n position: absolute;\n bottom: -55px;\n left: 15px;\n border-radius: 50%;\n z-index: 10;\n -webkit-transition: -webkit-transform .3s linear;\n transition: transform .3s linear;\n}\n\n#repo-card__thumb {\n width: 104px;\n height: 104px;\n display: block;\n border-radius: 50%;\n background-size: cover !important;\n}\n\n#repo-card__content-wrap {\n padding-bottom: 0;\n min-height: 50px;\n position: relative;\n}\n\n#repo-card__content-wrap::after {\n content: \'\';\n position: absolute;\n top: -10px;\n left: 50%;\n z-index: 20;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 10px 10px;\n border-color: transparent transparent #FFFFFF;\n -webkit-transform: translateY(10px);\n -ms-transform: translateY(10px);\n transform: translateY(10px);\n -webkit-transition: -webkit-transform .3s ease-in;\n transition: transform .3s ease-in;\n margin-left: -10px;\n}\n\n#repo-card__content {\n padding: 25px 20px 5px 20px;\n text-align: left;\n font-size: .875em;\n color: #666666;\n max-height: 0;\n overflow: hidden;\n -webkit-transform: translateY(-10%);\n -ms-transform: translateY(-10%);\n transform: translateY(-10%);\n -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n transition: max-height .3s ease-in, opacity .3s ease-in;\n opacity: 0;\n visibility: hidden;\n}\n\n#repo-card__social {\n position: absolute;\n bottom: 0;\n left: 0;\n list-style: none;\n margin: 0;\n width: 100%;\n display: table;\n border-top: 1px solid #CCCCCC;\n padding: 10px 0 5px;\n}\n\n#repo-card__social-item {\n display: table-cell;\n text-align: center;\n}\n\n#repo-card__social-item a {\n opacity: 0;\n font-size: 0;\n text-decoration: none;\n}\n\n#repo-card:hover #repo-card__image-wrap {\n height: 150px;\n}\n\n#repo-card:hover #repo-card__content-wrap:after {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n}\n\n#repo-card:hover #repo-card__content {\n max-height: 200px;\n opacity: 1;\n visibility: visible;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n transition: max-height .3s ease-in, opacity .3s ease-in;\n}\n\n#repo-card:hover #repo-card__thumb-wrap {\n -webkit-transform: translateY(-70%);\n -ms-transform: translateY(-70%);\n transform: translateY(-70%);\n}\n\n#repo-card:hover #repo-card__header {\n -webkit-transform: translateY(-110%);\n -ms-transform: translateY(-110%);\n transform: translateY(-110%);\n}\n\n#repo-card:hover #repo-card__subtitle {\n color: #FFFFFF;\n -webkit-transform: translateY(-10px);\n -ms-transform: translateY(-10px);\n transform: translateY(-10px);\n}',
- selectors: {
- background: 'repo-card__image-wrap',
- thumb: 'repo-card__thumb'
- }
- },
- test: {
- template: '<div id="repo-card">\n <div id="repo-card__image-wrap">\n <div id="repo-card__thumb-wrap">\n <img id="repo-card__thumb" />\n </div>\n <header id="repo-card__header">\n <h1 id="repo-card__title">\n {{title}} - COOL\n </h1>\n <div id="repo-card__subtitle">\n {{subtitle}}\n </div>\n </header>\n </div>\n <div id="repo-card__content-wrap">\n <div id="repo-card__content">\n {{info}}\n </div>\n </div>\n <ul id="repo-card__social">\n {{buttons}}\n </ul>\n</div>',
+ template: '<div id="repo-card">\n <div id="repo-card__image-wrap">\n <div id="repo-card__thumb-wrap">\n <img id="repo-card__thumb" />\n </div>\n <header id="repo-card__header">\n <h1 id="repo-card__title">\n {{title}}\n </h1>\n\n <div id="repo-card__subtitle">\n {{subtitle}}\n </div>\n </header>\n </div>\n <div id="repo-card__content-wrap">\n <div id="repo-card__content">\n {{info}}\n </div>\n </div>\n <ul id="repo-card__social">\n {{buttons}}\n </ul>\n</div>',
  style: '#repo-card {\n box-sizing: border-box;\n font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;\n background-color: #FFFFFF;\n line-height: 1.5em;\n margin: 0 auto;\n padding-bottom: 60px;\n width: 350px;\n border: 1px solid #CCCCCC;\n border-radius: 5px;\n overflow: hidden;\n}\n\n#repo-card a {\n color: #999;\n}\n\n#repo-card__image-wrap {\n height: 100px;\n width: 100%;\n position: relative;\n -webkit-transition: height .3s ease-in;\n transition: height .3s ease-in;\n}\n\n#repo-card__image-wrap:before {\n content: \'\';\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(51, 51, 51, .25);\n z-index: 1;\n}\n\n#repo-card__header {\n text-align: left;\n padding-left: 140px;\n position: absolute;\n bottom: -28px;\n left: 0;\n color: #FFFFFF;\n z-index: 20;\n -webkit-transition: -webkit-transform .3s ease-in;\n transition: transform .3s ease-in;\n}\n\n#repo-card__title {\n margin: 0;\n color: #FFFFFF;\n font-size: 1.125em;\n font-weight: 400;\n z-index: 10;\n position: relative;\n padding-bottom: 6px;\n}\n\n#repo-card__subtitle {\n color: #999999;\n font-size: .875em;\n padding-top: 12px;\n -webkit-transition: -webkit-transform .3s ease-in;\n transition: transform .3s ease-in;\n}\n\n#repo-card__thumb-wrap {\n width: 110px;\n height: 110px;\n padding: 3px;\n position: absolute;\n bottom: -55px;\n left: 15px;\n border-radius: 50%;\n z-index: 10;\n -webkit-transition: -webkit-transform .3s linear;\n transition: transform .3s linear;\n}\n\n#repo-card__thumb {\n width: 104px;\n height: 104px;\n display: block;\n border-radius: 50%;\n background-size: cover !important;\n}\n\n#repo-card__content-wrap {\n padding-bottom: 0;\n min-height: 50px;\n position: relative;\n}\n\n#repo-card__content-wrap::after {\n content: \'\';\n position: absolute;\n top: -10px;\n left: 50%;\n z-index: 20;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 10px 10px;\n border-color: transparent transparent #FFFFFF;\n -webkit-transform: translateY(10px);\n -ms-transform: translateY(10px);\n transform: translateY(10px);\n -webkit-transition: -webkit-transform .3s ease-in;\n transition: transform .3s ease-in;\n margin-left: -10px;\n}\n\n#repo-card__content {\n padding: 25px 20px 5px 20px;\n text-align: left;\n font-size: .875em;\n color: #666666;\n max-height: 0;\n overflow: hidden;\n -webkit-transform: translateY(-10%);\n -ms-transform: translateY(-10%);\n transform: translateY(-10%);\n -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n transition: max-height .3s ease-in, opacity .3s ease-in;\n opacity: 0;\n visibility: hidden;\n}\n\n#repo-card__social {\n position: absolute;\n bottom: 0;\n left: 0;\n list-style: none;\n margin: 0;\n width: 100%;\n display: table;\n border-top: 1px solid #CCCCCC;\n padding: 10px 0 5px;\n}\n\n#repo-card__social-item {\n display: table-cell;\n text-align: center;\n}\n\n#repo-card__social-item a {\n opacity: 0;\n font-size: 0;\n text-decoration: none;\n}\n\n#repo-card:hover #repo-card__image-wrap {\n height: 150px;\n}\n\n#repo-card:hover #repo-card__content-wrap:after {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n}\n\n#repo-card:hover #repo-card__content {\n max-height: 200px;\n opacity: 1;\n visibility: visible;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n transition: max-height .3s ease-in, opacity .3s ease-in;\n}\n\n#repo-card:hover #repo-card__thumb-wrap {\n -webkit-transform: translateY(-70%);\n -ms-transform: translateY(-70%);\n transform: translateY(-70%);\n}\n\n#repo-card:hover #repo-card__header {\n -webkit-transform: translateY(-110%);\n -ms-transform: translateY(-110%);\n transform: translateY(-110%);\n}\n\n#repo-card:hover #repo-card__subtitle {\n color: #FFFFFF;\n -webkit-transform: translateY(-10px);\n -ms-transform: translateY(-10px);\n transform: translateY(-10px);\n}',
  selectors: {
  background: 'repo-card__image-wrap',