Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design tweak and animation #3

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Design tweak and animation #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 12 additions & 0 deletions public/theme/css/styles/animate.min.css
View file
Open in desktop

Large diffs are not rendered by default.

113 changes: 87 additions & 26 deletions public/theme/css/styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
body {
font-family: 'Lato';
padding-bottom: 0px;
background: #EEF3E5;
-webkit-font-smoothing: antialiased;
}

a {
Expand All @@ -16,29 +18,37 @@ h1 {
font-family: 'Lato';
font-weight: bold;
letter-spacing: -2px;

}

h3 {
font-family: 'Lato';
font-size: 20px;
font-size: 18px;
color: #222;
}

button {
input[type=button] {
background: #ABC837;
color: #fff;
color: white;
border: none;
padding: 15px 80px 15px 80px;
font-size: 18px;
margin-top: 16px;
margin-bottom: 25px;
border-bottom: 3px solid #537F00;
/*text-shadow: 0px 1px 0px #537F00;*/
-webkit-font-smoothing: antialiased;
font-weight: bold;
font-family:'Lato';

}

.fork {
position: absolute;
top: 0;
right: 0;
border: 0;
z-index: 16;
z-index: 1100;
}

.container {
Expand All @@ -51,6 +61,7 @@ button {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 80px;
}

.navbar {
Expand Down Expand Up @@ -79,9 +90,19 @@ button {
}

.green {
background: url(/theme/img/BG-GREEN.png) 0px -50PX repeat-x;
color: #FFF;
overflow: hidden;
/*overflow: hidden;*/
background:#578500 url(../../img/bg.png) 945px -40px no-repeat;
height: 490px;

}

.shaker {
-webkit-animation-duration: 0.1s;
-webkit-animation-delay: 0.36s;
-webkit-animation-iteration-count: 1;
opacity: 1.0 !important;
font-weight: normal;
}

.greenpad {
Expand All @@ -92,6 +113,7 @@ button {
font-size: 20px;
max-width: 370px;
line-height: 1.4em;

}

.greenpad a {
Expand All @@ -103,6 +125,10 @@ button {
text-decoration: none;
}

.white {
background: #fff;
}

.git {
margin-right: 25px;
}
Expand All @@ -124,10 +150,21 @@ button {
}

.gobby {
width: 685px;
margin-top: -70px;
width: 395px;
margin-top: 30px;
margin-left: 20px;
z-index: 2000000;
}

.shadow {
border-radius : 100%;
background: #999;
margin: 0px 0px 0px 120px;
position:relative;
height: 16px;
}




.download-goblin {
margin:10px auto 60px;
Expand All @@ -139,9 +176,8 @@ button {
}

.featurette1 {
background: #EEF3E5;
margin-top: 0px;
padding-top: 40px;
padding-top: 45px;
}

.featurette-heading {
Expand Down Expand Up @@ -185,6 +221,10 @@ button {
margin-top: 0px;
}

.col-md-4 {
-webkit-font-smoothing: antialiased;
}

.col-md-4 img {
margin-top: 110px;
margin-bottom: 30px;
Expand All @@ -211,53 +251,61 @@ footer {

.pad120 {padding-top: 120px;}

.picture-row img {
width:161px;
height:160px;
}


@media (min-width: 768px) and (max-width: 991px) {
.gobby {margin-top: -410px; margin-left: 360px;}
.insidecontainer {padding-left: 10px;}
/*.gobby {margin-top: -270px; margin-left: 315px; width: 350px;}*/
.insidecontainer {padding-left: 45px !important;}
.greenbtn {display: none;}
.col-md-6 {padding-left: 30px; padding-right: 30px;}
.col-md-6 p { font-size: 20px; padding-bottom: 100px;}
.col-md-3 p { padding-bottom: 80px; font-size: 18px; padding-left: 30px;}
footer {padding-bottom: 20px;}
h3 {font-size: 24px;}
.padright {padding-right: 10px;}

.greenpad p { font-size: 17px !important; max-width: 300px;}
.green {background-position: 470px -60px !important;}
.col-md-6 { padding-top: 70px;}
}

@media (min-width: 1024px) {

@media (max-width: 1024px) {
.insidecontainer {
padding-left: 80px;}
.green {background-position: 625px -60px;}

}

@media (max-width: 767px) {
@media (max-width: 768px) {
.fork {display: none !important;}
.gobby { margin-left: 360px; margin-top: -410px;}
.insidecontainer {padding-left: 10px;}
.gobby { margin-left: 400px; margin-top: -300px; }
.insidecontainer {padding-left: 10px; }
.greenbtn {display: none;}
.col-md-6 p { font-size: 20px; padding-bottom: 100px;}
.col-md-3 p { padding-bottom: 80px; font-size: 18px; padding-left: 30px;}
footer {padding-bottom: 20px;}
h3 {font-size: 24px;}
.padright {padding-right: 10px;}
.navbar-nav { margin-right: 0px;}
.nav > li { text-align: right;}
.nav > li { text-align: right;}
.green {background-position: 545px -60px;}
.navbar-toggle {display: none;}
.featurette1 { padding-top: 145px !important;}
.shadow {margin: 0px 0px 0px 460px;}
}

@media (max-width: 640px) {

.gobby {display: none;}
.gobby {margin-top: -270px; margin-left: 315px; width: 350px;}
.greenpad p { max-width: 640px; font-size: 21px;}
.greenpad {padding-bottom: 90px;}
.insidecontainer {padding-left: 10px;}
.featurette1 {padding-top: 120px;}
.col-md-5 {padding-left: 30px;}

.green {background-position: 450px -60px !important;}
.greenpad p { font-size: 17px !important; max-width: 300px;}
.navbar-brand {padding: 15px 40px;}
.navbar-toggle { display:none;}
.shadow {margin: 0px 0px 0px 360px;}
}

@media (max-width: 480px) {
Expand All @@ -266,6 +314,16 @@ footer {
.insidecontainer {padding-left: 10px;}
.col-md-3 p { padding-bottom: 80px; font-size: 18px; padding-left: 40px;}
.col-md-6 {padding-left: 40px;}
.gobby {display: none;}
.green {background-position: 245px -60px !important;}
.shadow {display: none;}
.animated {
-webkit-animation-duration: 0.0s !important;
-webkit-animation-delay: 0s !important;
-webkit-animation-iteration-count: 0 !important;
opacity: 1.0 !important;
font-weight: normal;
}
}

@media (max-width: 320px) {
Expand All @@ -277,6 +335,9 @@ h1 {font-size: 85px;}
.col-md-10 { font-size: 9px;}
.featurette-heading { font-size: 28px;}
.col-md-6 p {font-size: 18px;}
.col-md-5 {padding-left: 20px;}
.green {background-image:none;}
.navbar-brand {margin-left: -20px;}
}


Empty file modified public/theme/img/bg.png
100644 → 100755
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/theme/img/copyleft.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 29 additions & 19 deletions theme/index.gob
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,13 @@
<link href="/theme/css/vendor/bootstrap.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="/theme/css/carousel.css" rel="stylesheet">
<!--link href="/theme/css/carousel.css" rel="stylesheet"-->

<!-- Custom styles -->
<link href="/theme/css/styles/style.css" rel="stylesheet">

<!-- Animation styles -->
<link href="/theme/css/styles/animate.min.css" rel="stylesheet">

<!-- Google font -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
Expand All @@ -38,7 +41,7 @@
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.html">
{{site_title}}: {{site_description}}
{{site_title}}: {{site_description}}
</a>
</div>
<div class="navbar-collapse collapse">
Expand All @@ -57,16 +60,19 @@
<div class="row green">
<div class="insidecontainer greenpad">
<!--<img src="/theme/img/goblin_logo.png" data-src="/theme/img/goblin_logo.png" alt="Goblin">-->
<div class="col-md-5">
<div class="col-md-5 shaker">
<h1>{{site_title}}</h1>
<p>Goblin is a simple, customizable and easily accessible content management system designed for themers.
</p>
<button>Download</button><br>
<a href="https://github.com/maned/goblin-website" class="git"><img src="/theme/img/github.png" align="texttop" />Goblin on GitHub</a>
<a href="" class="twitter"><img src="/theme/img/twitter.png" align="texttop" /> @Goblin </a>
<!--button onClick="https://github.com/maned/goblin'">Download</button-->
<input type=button onClick="location.href='https://github.com/maned/goblin'" value='Download'>
<br>
<a href="https://github.com/maned/goblin" class="git"><img src="/theme/img/github.png" align="texttop" />Goblin on GitHub</a>
<!--a href="" class="twitter"><img src="/theme/img/twitter.png" align="texttop" /> @Goblin </a-->
</div>
<div class="col-md-5">
<img src="/theme/img/goblin1.png" class="gobby" />
<img src="/theme/img/goblin.png" class="gobby" />
<div class="shadow">&nbsp;</div>
</div>
</div>
</div>
Expand All @@ -88,19 +94,19 @@

<!-- START THE FEATURETTES -->
<div class="row featurette1">
<div class="insidecontainer">
<div class="col-md-6">
<h2 class="featurette-heading">Goblin: A pure CMS</h2>
<p>{{{page_content}}}</p>
<div class="insidecontainer">
<div class="col-md-6">
<h2 class="featurette-heading">A pure CMS</h2>
<p>Built specifically for non-blogging websites, Goblin is meant to be used by people who need to make static websites with a CMS fast and do it beautifully.</p>
</div>
<div class="col-md-4 text-right" style="padding-top: 25px;">
<button class="greenbtn">Download</button>
<input type=button onClick="location.href='https://github.com/maned/goblin'" value='Download' class="greenbtn">
</div>
</div>
</div>
<div class="row picture-row">
<div class="row white">
<div class="insidecontainer pad120">
<div class="col-md-3 text-center">
<div class="col-md-3 text-center">
<img src="/theme/img/js.png" />
<h3>Javascript. Everywhere.</h3>
<p>Goblin is coded entirely in Javascript, both on the client- and server-sides, offering a level of comfortability that's not obtaininable in other CMS solutions.</p>
Expand All @@ -112,7 +118,7 @@
</div>
<div class="col-md-3 text-center">
<img src="/theme/img/copyleft.png" />
<h3>Javascript. Everywhere.</h3>
<h3>Open Source. And free.</h3>
<p>Goblin is released under the GNU Public License, Version 3, meaning it's completely free software -- you can read and modify the code, and benefit from (and participate with) a growing Goblin Community.</p>
</div>
</div>
Expand All @@ -123,11 +129,11 @@

<!-- FOOTER -->
<footer>
<div class="insidecontainer">
<p class="col-md-10">Powered by <a href="http://goblin.jit.su/">Goblin</a>. Contribute to <a href="https://github.com/maned/goblin-website" target="_blank"> this website</a>.<a href="#" class="pull-right padright">Back to top</a></p>
<div class="insidecontainer">
<p class="col-md-10">Powered by <a href="http://goblin.jit.su/">Goblin</a>. Contribute to <a href="https://github.com/maned/goblin-website" target="_blank"> this website</a>.<a href="#" class="pull-right padright">Back to top</a></p>
</div>
<!--div class="insidecontainer">
<p class="col-md-8">Powered by <a href="http://goblin.jit.su/">Goblin</a>. Contribute to <a href="https://github.com/maned/goblin-website" target="_blank"> this website</a>.</p>
<!--div class="insidecontainer">
<p class="col-md-8">Powered by <a href="http://goblin.jit.su/">Goblin</a>. Contribute to <a href="https://github.com/maned/goblin-website" target="_blank"> this website</a>.</p>
<p class="col-md-4 text-right" style="padding-right: 50px;"><a href="#">Back to top</a></p>
</div-->
</footer>
Expand All @@ -150,6 +156,10 @@
ga('create', '{{ga_id}}', 'jit.su');
ga('send', 'pageview');

$('.gobby').addClass('animated bounceInDown');
$('.shadow').addClass('animated fadeOutUp');
$('.shaker').addClass('animated bounce');

</script>
</body>
</html>