GNU
/
easejs
1
0
Fork 0
Code Releases Activity

Download button makeover 

After the font change there were some oddities, but it did need a little bit
of work regardless to make it more appealing to click on.
website
Mike Gerwitz 2014-03-14 23:53:07 -04:00
parent 1b1fccf82c 42fd1a5a1e
commit f091922861
No known key found for this signature in database
GPG Key ID: F22BB8158EE30EAB
4 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
download.html
View File

@ -1,7 +1,7 @@
<p class="head good"> <p class="head good">
<span class="release-current"> <span class="release-current">
Current Release: <span class="version"><!--%curver--></span> Current Release: <span class="version"><!--%curver--></span>
<span class="version date">(<!--%curver-date-->)</span> <span class="version date">Released: <!--%curver-date--></span>
</span> </span>
</p> </p>
<p> <p>

1
includes/header.html
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<title>ease.js</title> <title>ease.js</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" /> <link type="text/css" rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>

6
index.html
View File

@ -6,8 +6,10 @@
</p> </p>
<a href="download.html" class="download btn large go"> <a href="download.html" class="download btn large go">
Download v<!--%curver--> <div class="inner">
<div class="note">(Released: <!--%curver-date-->)</div> Download <!--%curver-->
<div class="note">Released: <!--%curver-date--></div>
</div>
</a> </a>
<ul class="features"> <ul class="features">

35
style.css
View File

@ -187,7 +187,7 @@ body.source #source a {
text-align: center; text-align: center;
text-shadow: black 0px 0px 1px; text-shadow: black 0px 0px 1px;
padding: 0.25em 0.5em; padding: 0.5em;
border: 1px solid #ce5c00; border: 1px solid #ce5c00;
border-radius: 0.25em; border-radius: 0.25em;
@ -205,10 +205,20 @@ body.source #source a {
rgb(245,123,0) 0%, rgb(245,123,0) 0%,
rgb(206,93,0) 100% rgb(206,93,0) 100%
); );
box-shadow: 0.05em 0.1em #ce5c00;
} }
a.btn:hover { a.btn:hover {
text-decoration: none; text-decoration: none;
} }
a.btn:active {
position: relative;
box-shadow: none;
/* to replace shadow; appear depressed */
left: 0.05em;
top: 0.1em;
}
.btn.go { .btn.go {
border: 1px solid #4e9a06; border: 1px solid #4e9a06;
@ -226,6 +236,8 @@ a.btn:hover {
rgb(116,210,22) 0%, rgb(116,210,22) 0%,
rgb(139,226,52) 100% rgb(139,226,52) 100%
); );
box-shadow: 0.05em 0.1em #4e9a06;
} }
.btn.med { .btn.med {
@ -289,11 +301,26 @@ span.shell-start {
} }
.btn.download .note { .btn.download .note {
font-size: 0.4em; position: relative;
top: 0.55em;
font-size: 0.45em;
font-style: italic; font-style: italic;
} }
.btn.download .inner:before {
position: relative;
top: 0.25em;
font-size: 1.25em;
padding-right: 0.25em;
text-decoration: underline;
content: '⇩';
}
.info { .info {
clear: both; clear: both;
} }
@ -307,6 +334,7 @@ a.man:before {
/** download **/ /** download **/
span.release-current { span.release-current {
font-size: 1.2em; font-size: 1.2em;
line-height: 1.2em;
font-weight: bold; font-weight: bold;
} }
@ -314,7 +342,8 @@ span.release-current .version {
font-weight: normal; font-weight: normal;
} }
span.release-current .date { span.release-current .date {
font-size: 0.6em; font-size: 0.9em;
float: right;
} }