Browse Source

Update site and demo

pull/2301/head
Artur Arseniev 11 years ago
parent
commit
b3c6d554b0
  1. 69
      demo.html
  2. BIN
      img/.DS_Store
  3. BIN
      img/gif-img-txt.gif
  4. BIN
      img/gif-struct-m.gif
  5. 1
      img/grapesjs-logo.svg
  6. BIN
      img/layer-m.gif
  7. BIN
      img/style-3d-text.gif
  8. BIN
      img/style-m.gif
  9. BIN
      img/work-desk-14949.jpg
  10. 126
      index.html
  11. 1
      js/gifffer.min.js
  12. 27
      js/grapes.min.js
  13. 30
      js/main.js
  14. 3340
      stylesheets/animate.css
  15. 4
      stylesheets/grapes.min.css
  16. 215
      stylesheets/stylesheet.css

69
demo.html

@ -212,22 +212,44 @@
commands: {
defaults : [{
id: 'open-github',
run: function(em, sender){
sender.set('active',false);
window.open('https://github.com/artf/grapesjs','_blank');
},
stop: function(){}
},{
id: 'undo',
run: function(em, sender){
sender.set('active',false);
em.get('UndoManager').undo();
},
stop: function(){}
},{
id: 'redo',
run: function(em, sender){
sender.set('active',false);
em.get('UndoManager').redo();
},
stop: function(){}
},{
id: 'clean-all',
run: function(em, sender){
sender.set('active',false);
if(confirm('Are you sure to clean the canvas?')){
var comps = em.get('Components').getComponents();
var len = comps.length;
for(var i = 0; i < len; i++){
comps.pop();
}
}
},
stop: function(){}
}],
},
assetManager: {
uploadText : 'No uploads in demo :)',
storageType : '',
storeOnChange : true,
storeAfterUpload : true,
disableUpload : true,
assets : [
{ type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', date: '2015-01-01',height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', date: '2015-02-01',height:350, width:250},
@ -305,6 +327,13 @@
{ id: 'export', className: 'fa fa-code', command: 'export-template', attributes: { title: 'View code' }, },
{ id: 'view-github', className: 'fa fa-github', command: 'open-github', attributes: { title: 'View on Github' }, },
],
},{
id : 'options2',
buttons : [
{ id: 'undo', className: 'fa fa-undo icon-undo', command: 'undo', attributes: { title: 'Undo (CTRL/CMD + Z)' }, },
{ id: 'redo', className: 'fa fa-repeat icon-redo', command: 'redo', attributes: { title: 'Redo (CTRL/CMD + SHIFT + Z)' }, },
{ id: 'clean-all', className: 'fa fa-trash icon-blank', command: 'clean-all', attributes: { title: 'Empty canvas' }, },
],
},{
id : 'views',
buttons : [{ id: 'open-sm', className: 'fa fa-paint-brush', command: 'open-sm', active: true, attributes: { title: 'Open Style Manager' },},
@ -609,6 +638,36 @@
{ value : 'center', name : 'Center', className: 'fa fa-align-center' },
{ value : 'right', name : 'Right', className: 'fa fa-align-right'},
{ value : 'justify', name : 'Justify', className: 'fa fa-align-justify'},],
},{
name : 'Text shadow',
property : 'text-shadow',
type : 'stack',
preview : true,
properties : [{
name: 'X position',
property: 'h-shadow',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
name: 'Y position',
property: 'v-shadow',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
name: 'Blur',
property: 'blur-radius',
type: 'integer',
units: ['px'],
defaults : 0,
min: 0,
},{
name: 'Color',
property: 'shadow-color',
type: 'color',
defaults: 'black',
},],
}],
},{
name: 'Decorations',

BIN
img/.DS_Store

Binary file not shown.

BIN
img/gif-img-txt.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

BIN
img/gif-struct-m.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

1
img/grapesjs-logo.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1"><g id="gjs-logo"><path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke:#aa7bbf"/></g></svg>

After

Width:  |  Height:  |  Size: 506 B

BIN
img/layer-m.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

BIN
img/style-3d-text.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
img/style-m.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 409 KiB

BIN
img/work-desk-14949.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 434 KiB

126
index.html

@ -3,21 +3,31 @@
<head>
<meta charset="UTF-8">
<title>GrapesJS</title>
<meta property="og:url" content="http://grapesjs.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="GrapesJS" />
<meta property="og:url" content="http://grapesjs.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="GrapesJS" />
<meta name="theme-color" content="#9e5381">
<meta name="description" content="Free and Open source Web Template Editor - Next generation tool for building templates without coding">
<meta name="keywords" content="site builder, web template editor, html builder, html editor">
<meta name="author" content="Artur Arseniev">
<meta property="og:description" content="Free and Open source Web Template Editor - Next generation tool for building templates without coding" />
<meta property="og:image" content="http://grapesjs.com/img/share-image.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/animate.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<a href="https://github.com/artf/grapesjs" class="github-ribbon" target="_blank">Star me on GitHub</a>
<div class="title-cont">
<h1 class="project-name">GrapesJS<span class="b-badge">alpha</span></h1>
<h1 class="project-name">
<svg class="grapesjs-logo" xmlns="http://www.w3.org/2000/svg" version="1"><g id="gjs-logo"><path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke:#fff"/></g></svg>
GrapesJS
<span class="b-badge">alpha</span>
</h1>
</div>
<h2 class="project-tagline">Free and Open source Web Template Editor<br/>
<span>Next generation tool for building templates without coding</span>
@ -26,11 +36,16 @@
<img class="banner-img" src="img/grapesjs-frames2.png">
</div>
<div class="btns-cont">
<a href="https://github.com/artf/grapesjs" class="btn">View on GitHub</a>
<a href="./demo.html" class="btn try"> Try it now </a>
<a href="https://github.com/artf/grapesjs/zipball/master" class="btn">Download</a>
<!--a href="https://github.com/artf/grapesjs" class="btn btn-rnd">View on GitHub</a-->
<a href="./demo.html" class="btn try btn-rnd"> Try it now </a>
<div class="device-small">Sorry but your device is too small for the editor. See below for more information</div>
<!--a href="https://github.com/artf/grapesjs/zipball/master" class="btn btn-rnd">Download</a-->
</div>
<div class="ddown-c">
<div class="ddown-icon-c animated fadeInDown">
<div id="ddown-icon">&lang;&lang;</div>
</div>
</div>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
@ -41,20 +56,94 @@
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="site-footer">
<div class="btn-share">
<div class="fb-share-button" data-href="http://grapesjs.com?test" data-layout="button"></div>
<a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="http://grapesjs.com" data-text="GrapesJS: next generation tool for building templates without coding" data-hashtags="grapesjs">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<span style="visibility:hidden" class="site-footer-owner"><a href="https://github.com/artf/grapesjs">GrapesJS</a> is maintained by <a href="https://github.com/artf">artf</a></span>
</div>
</section>
<footer class="site-footer">
<div class="btn-share">
<div class="fb-share-button" data-href="http://grapesjs.com?test" data-layout="button"></div>
<section class="main-content">
<div class="body-c body1 width-all">
<a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="http://grapesjs.com" data-text="GrapesJS: next generation tool for building templates without coding" data-hashtags="grapesjs">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<h1>Available end-user features</h1>
<div class="info-card fadeInBlock" id="card1">
<div id="desc">Design the structure with already built-in commands</div>
<div id="img-c">
<img data-gifffer="./img/gif-struct-m.gif"/>
</div>
<div class="clearfix"></div>
</div>
<span style="visibility:hidden" class="site-footer-owner"><a href="https://github.com/artf/grapesjs">GrapesJS</a> is maintained by <a href="https://github.com/artf">artf</a></span>
</footer>
<section class="main-content"> <div class="body"></div> </section>
<div class="info-card fadeInBlock" id="card2">
<div id="desc">Easily insert images and text contents</div>
<div id="img-c">
<img data-gifffer="./img/gif-img-txt.gif"/>
</div>
<div class="clearfix"></div>
</div>
<div class="info-card fadeInBlock" id="card3">
<div id="desc">Layer Manager, navigate and manage the structure</div>
<div id="img-c">
<img data-gifffer="./img/layer-m.gif"/>
</div>
<div class="clearfix"></div>
</div>
<div class="info-card fadeInBlock" id="card4">
<div id="desc">Customize style of your components</div>
<div id="img-c">
<img data-gifffer="./img/style-m.gif"/>
</div>
<div class="clearfix"></div>
</div>
<div class="info-card fadeInBlock" id="card4">
<div id="desc">Style faster complex stuff</div>
<div id="img-c">
<img data-gifffer="./img/style-3d-text.gif"/>
</div>
<div class="clearfix"></div>
</div>
<!--div class="info-card fadeInBlock" id="card4">
<div id="desc">With any CSS property, even transitions or 3D (experimental)</div>
<div id="img-c">
<img src="http://placehold.it/450x300/78c5d6/fff/image1.jpg"/>
</div>
<div class="clearfix"></div>
</div-->
<!--div class="info-card fadeInBlock" id="card4">
<div id="desc">Export the code and use it everywhere</div>
<div id="img-c">
<img src="http://placehold.it/450x300/78c5d6/fff/image1.jpg"/>
</div>
<div class="clearfix"></div>
</div-->
<!-- 1255-630 -->
</div><!-- close body1 -->
</section>
<section class="footer-content">
<div class="footer-c width-all">
<div class="title">The project is still in alpha, so stay tuned for new features</div>
<div class="btns-c">
<a class="btn btn-gjs" href="https://github.com/artf/grapesjs/wiki" target="_blank">View Docs</a>
</div>
</div>
</section>
<section class="copyr-content">
<div class="copyr-c width-all">
made with <3 by <a href="https://github.com/artf">artf</a>
</div>
</section>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@ -66,5 +155,8 @@
ga('send', 'pageview');
</script>
<script src="js/jquery.js"></script>
<script src="js/gifffer.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

1
js/gifffer.min.js

@ -0,0 +1 @@
(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define("Gifffer",[],factory);else if(typeof exports==="object")exports["Gifffer"]=factory();else root["Gifffer"]=factory()})(this,function(){var d=document;var playSize=60;var Gifffer=function(){var images,i=0;images=d.querySelectorAll("[data-gifffer]");for(;i<images.length;++i)process(images[i])};function formatUnit(v){return v+(v.toString().indexOf("%")>0?"":"px")}function createContainer(w,h,el){var con=d.createElement("DIV");var cls=el.getAttribute("class");var id=el.getAttribute("id");cls?con.setAttribute("class",el.getAttribute("class")):null;id?con.setAttribute("id",el.getAttribute("id")):null;con.setAttribute("style","position:relative;cursor:pointer;");var play=d.createElement("DIV");play.setAttribute("class","gifffer-play-button");play.setAttribute("style","width:"+playSize+"px;height:"+playSize+"px;border-radius:"+playSize/2+"px;background:rgba(0, 0, 0, 0.3);position:absolute;");var trngl=d.createElement("DIV");trngl.setAttribute("style","width:0;height: 0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:14px solid rgba(0, 0, 0, 0.5);position:absolute;left:26px;top:16px;");play.appendChild(trngl);con.appendChild(play);el.parentNode.replaceChild(con,el);return{c:con,p:play}}function calculatePercentageDim(el,w,h,wOrig,hOrig){var parentDimW=el.parentNode.offsetWidth;var parentDimH=el.parentNode.offsetHeight;var ratio=wOrig/hOrig;if(w.toString().indexOf("%")>0){w=parseInt(w.toString().replace("%",""));w=w/100*parentDimW;h=w/ratio}return{w:w,h:h}}function process(el){var url,con,c,w,h,duration,play,gif,playing=false,cc,isC,durationTimeout,dims;url=el.getAttribute("data-gifffer");w=el.getAttribute("data-gifffer-width");h=el.getAttribute("data-gifffer-height");duration=el.getAttribute("data-gifffer-duration");el.style.display="block";c=document.createElement("canvas");isC=!!(c.getContext&&c.getContext("2d"));if(w&&h&&isC)cc=createContainer(w,h,el);el.onload=function(){if(!isC)return;w=w||el.width;h=h||el.height;if(!cc)cc=createContainer(w,h,el);con=cc.c;play=cc.p;dims=calculatePercentageDim(con,w,h,el.width,el.height);con.addEventListener("click",function(){clearTimeout(durationTimeout);if(!playing){playing=true;gif=document.createElement("IMG");gif.setAttribute("style","width:"+dims.w+"px;height:"+dims.h+"px;");gif.setAttribute("data-uri",Math.floor(Math.random()*1e5)+1);setTimeout(function(){gif.src=url},0);con.removeChild(play);con.removeChild(c);con.appendChild(gif);if(parseInt(duration)>0){durationTimeout=setTimeout(function(){playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null},duration)}}else{playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null}});c.width=dims.w;c.height=dims.h;c.getContext("2d").drawImage(el,0,0,dims.w,dims.h);con.appendChild(c);play.style.top=dims.h/2-playSize/2+"px";play.style.left=dims.w/2-playSize/2+"px";con.setAttribute("style","position:relative;cursor:pointer;width:"+dims.w+"px;height:"+dims.h+"px;")};el.src=url}return Gifffer});

27
js/grapes.min.js

File diff suppressed because one or more lines are too long

30
js/main.js

@ -0,0 +1,30 @@
$(document).ready(function(){
var aniEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var $header = $('section.page-header');
var viewportH = $(window).height();
$header.css('min-height', viewportH);
//$('#yourElement').one(aniEnd, doSomething);
//
var $win = $(window);
var $els = $('.fadeInBlock');
$win.scroll( function(){
var winH = $win.height();
var winScrollT = $win.scrollTop();
var winBtm = winScrollT + winH;
$els.each( function(i){
var $el = $(this);
if(!$el.hasClass('animated')){
var $elH = $el.outerHeight();
var elTopPos = $el.offset().top;
var elBtm = elTopPos + $elH;
if( winBtm >= (elTopPos + $elH/4) ){
$el.addClass('animated fadeIn');//fadeIn fadeInUp zoomIn
}
}
});
});
$win.trigger('scroll');
Gifffer();
})

3340
stylesheets/animate.css

File diff suppressed because it is too large

4
stylesheets/grapes.min.css

File diff suppressed because one or more lines are too long

215
stylesheets/stylesheet.css

@ -8,7 +8,7 @@ body {
font-size: 16px;
line-height: 1.5;
color: #606c71;
text-shadow: 0 2px 0 #793d7b;
font-weight: 300;
}
a {
@ -57,45 +57,66 @@ a {
.fb-share-button > span, .fb-share-button iframe{ width:60px !important; height: 20px !important;}
.fb-share-button > span{vertical-align: baseline !important; }
.device-small {
display: none;
background-color: white;
border-radius: 3px;
color: #9e5381;
margin: 0 auto;
padding: 25px;
text-shadow: none;
width: 90%;
}
@media screen and (min-width: 64em) {
.btn {
padding: 0.75rem 1rem; } }
padding: 0.75rem 1rem; }
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding: 0.6rem 0.9rem;
font-size: 0.9rem; } }
font-size: 0.9rem; }
}
@media screen and (max-width: 42em) {
.btn {
display: block;
width: 100%;
padding: 0.75rem;
font-size: 0.9rem; }
font-size: 0.9rem;
}
.btn + .btn {
margin-top: 1rem;
margin-left: 0; } }
margin-left: 0; }
.github-ribbon, .btn.try{ display: none; }
.device-small{
display:block;
}
}
.page-header {
position: fixed; width:100%; height:100%;
text-shadow: 0 2px 0 #793d7b;
min-height:100px;
color: #fff;
text-align: center;
background-color: #6f2943;
background-image: linear-gradient(120deg, #d983a6, #4d114f);
overflow: auto;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem; } }
padding: 3rem 6rem 0; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding: 3rem 4rem; } }
padding: 3rem 4rem 0; } }
@media screen and (max-width: 42em) {
.page-header {
padding: 2rem 1rem; } }
padding: 2rem 1rem 0; } }
.project-name {
margin-top: 0;
@ -112,10 +133,14 @@ a {
position: absolute;
text-shadow: none;
}
.project-name {
font-weight: 400;
}
@media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem; }
font-size: 3.25rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
@ -154,7 +179,9 @@ a {
.main-content :first-child {
margin-top: 0; }
.main-content img {
max-width: 100%; }
max-width: 100%;
display: block;
}
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
margin-top: 2rem;
margin-bottom: 1rem;
@ -250,9 +277,29 @@ a {
background-color: #eff0f1;
border: 0; }
.ddown-icon-c{
margin: 0 auto;
width: 45px;
animation-duration: 2s;
animation-iteration-count: 3;
}
#ddown-icon {
cursor: default;
font-size: 30px;
transform: rotate(-90deg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ddown-c {
bottom: 0;
left: 0;
margin-bottom: 20px;
position: absolute;
width: 100%;
}
@media screen and (min-width: 64em) {
.main-content {
max-width: 64rem;
background-color: #fafafa;
padding: 2rem 6rem;
margin: 0 auto;
font-size: 1.1rem; } }
@ -268,7 +315,7 @@ a {
font-size: 1rem; } }
.btns-cont {
margin-bottom: 50px;
margin-bottom: 70px;
}
.site-footer {
@ -303,3 +350,143 @@ a {
@media screen and (max-width: 42em) {
.site-footer {
font-size: 0.9rem; } }
.clearfix{
clear: both;
}
.github-ribbon{
background-color:#fff;
top:3.2em;
right:-3.7em;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
box-shadow:0 0 1px #3b0000;
color:#c64563;
padding:.6em 3.5em;
position:absolute;
font:bold .82em sans-serif;
text-align:center;
text-decoration:none !important;
text-shadow:none;
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none
}
.width-all{
max-width: 980px;
width: 90%;
margin: 0 auto;
}
.info-card {
font-size: 25px;
margin: 0 0 250px;
clear: both;
}
.body-c > h1{
text-align: center;
margin: 50px 0 100px !important;
}
.info-card #desc {
float: left;
width: 30%;
padding-right: 20px;
}
.info-card:nth-child(2n+1) #desc {
float: right;
padding: 0 0 0 20px;
text-align: right;
}
.info-card #img-c {
box-shadow: 0 3px 0 #2d2d2d, 0 10px 10px #555555;
border: 3px solid #444;
border-radius: 3px;
float: right;
max-width: 685px;
width: 70%;
}
.fadeInBlock{opacity: 0;}
.footer-content{
background-color: #222222;
min-height: 350px;
}
.footer-c .title {
color: #eee;
font-size: 20px;
font-weight: 300;
padding: 80px 0;
text-align: center;
}
.btns-c {
text-align: center;
}
.btn.btn-gjs {
background-color: #9e5381;
border: medium none;
font-size: 20px;
font-weight: 300;
padding: 0.75rem 3rem;
text-align: center;
color: #eee;
}
.btn.btn-rnd {
background-color: transparent;
border: 2px solid #fff;
border-radius: 40px;
color: #fff;
}
.btn.btn-rnd:hover {
background-color: white;
color: #9e5381;
text-shadow: none;
}
.copyr-content {
background-color: #333333;
}
.copyr-c {
color: #bbb;
font-weight: 300;
padding: 10px 0;
text-align: center;
}
.copyr-c a{
color: #9e5381;
}
.gifffer-play-button {
background-color: #9e5381 !important;
opacity: 0.7;
}
.gifffer-play-button:hover{
opacity: 0.9;
}
.gifffer-play-button > div {
border-left-color: #eee !important;
}
.grapesjs-logo {
display: block;
height: 90px;
margin: 0 auto;
width: 90px;
}
.info-card canvas, .info-card #img-c > div{
width: 100% !important;
}
@media (max-width: 1300px) {
.info-card #img-c{
width: 100%;
margin: 0 auto;
float: none;
}
.info-card #desc, .info-card:nth-child(2n+1) #desc{
float: none;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.info-card #img-c > div{}
}
Loading…
Cancel
Save