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
commit
f091922861
|
@ -1,7 +1,7 @@
|
|||
<p class="head good">
|
||||
<span class="release-current">
|
||||
Current Release: <span class="version"><!--%curver--></span>
|
||||
<span class="version date">(<!--%curver-date-->)</span>
|
||||
<span class="version date">Released: <!--%curver-date--></span>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>ease.js</title>
|
||||
<meta charset="utf-8" />
|
||||
<link type="text/css" rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
@ -6,8 +6,10 @@
|
|||
</p>
|
||||
|
||||
<a href="download.html" class="download btn large go">
|
||||
Download v<!--%curver-->
|
||||
<div class="note">(Released: <!--%curver-date-->)</div>
|
||||
<div class="inner">
|
||||
Download <!--%curver-->
|
||||
<div class="note">Released: <!--%curver-date--></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<ul class="features">
|
||||
|
|
35
style.css
35
style.css
|
@ -187,7 +187,7 @@ body.source #source a {
|
|||
text-align: center;
|
||||
text-shadow: black 0px 0px 1px;
|
||||
|
||||
padding: 0.25em 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
border: 1px solid #ce5c00;
|
||||
border-radius: 0.25em;
|
||||
|
@ -205,10 +205,20 @@ body.source #source a {
|
|||
rgb(245,123,0) 0%,
|
||||
rgb(206,93,0) 100%
|
||||
);
|
||||
|
||||
box-shadow: 0.05em 0.1em #ce5c00;
|
||||
}
|
||||
a.btn:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
a.btn:active {
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
|
||||
/* to replace shadow; appear depressed */
|
||||
left: 0.05em;
|
||||
top: 0.1em;
|
||||
}
|
||||
|
||||
.btn.go {
|
||||
border: 1px solid #4e9a06;
|
||||
|
@ -226,6 +236,8 @@ a.btn:hover {
|
|||
rgb(116,210,22) 0%,
|
||||
rgb(139,226,52) 100%
|
||||
);
|
||||
|
||||
box-shadow: 0.05em 0.1em #4e9a06;
|
||||
}
|
||||
|
||||
.btn.med {
|
||||
|
@ -289,11 +301,26 @@ span.shell-start {
|
|||
}
|
||||
|
||||
.btn.download .note {
|
||||
font-size: 0.4em;
|
||||
position: relative;
|
||||
top: 0.55em;
|
||||
|
||||
font-size: 0.45em;
|
||||
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 {
|
||||
clear: both;
|
||||
}
|
||||
|
@ -307,6 +334,7 @@ a.man:before {
|
|||
/** download **/
|
||||
span.release-current {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
@ -314,7 +342,8 @@ span.release-current .version {
|
|||
font-weight: normal;
|
||||
}
|
||||
span.release-current .date {
|
||||
font-size: 0.6em;
|
||||
font-size: 0.9em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue