You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@mnemonic.apache.org by ga...@apache.org on 2017/07/28 21:41:59 UTC
incubator-mnemonic-site git commit: MNEMONIC-317: Decorate links as
button for home page
Repository: incubator-mnemonic-site
Updated Branches:
refs/heads/master 7f4cb39b8 -> 43635fe0c
MNEMONIC-317: Decorate links as button for home page
Project: http://git-wip-us.apache.org/repos/asf/incubator-mnemonic-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-mnemonic-site/commit/43635fe0
Tree: http://git-wip-us.apache.org/repos/asf/incubator-mnemonic-site/tree/43635fe0
Diff: http://git-wip-us.apache.org/repos/asf/incubator-mnemonic-site/diff/43635fe0
Branch: refs/heads/master
Commit: 43635fe0cdd297872c1c3253b02043e8707bf9a1
Parents: 7f4cb39
Author: Wang, Gang(Gary) <ga...@intel.com>
Authored: Fri Jul 28 12:49:50 2017 -0700
Committer: Wang, Gang(Gary) <ga...@intel.com>
Committed: Fri Jul 28 12:49:50 2017 -0700
----------------------------------------------------------------------
src/css/screen.scss | 109 ++++++++++++++++++++++++++++++++++++++++++-----
src/index.html | 25 ++++++++---
2 files changed, 119 insertions(+), 15 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-mnemonic-site/blob/43635fe0/src/css/screen.scss
----------------------------------------------------------------------
diff --git a/src/css/screen.scss b/src/css/screen.scss
index 11fe79a..37bbb98 100644
--- a/src/css/screen.scss
+++ b/src/css/screen.scss
@@ -280,15 +280,17 @@ footer {
.introlinks {
text-align: right;
- padding: 10px 16px;
+ margin: 10px 12px;
a {
display: inline-block;
font-weight: bold;
- padding: 0px 10px 0px;
- color: #eee;
- text-decoration: none;
- @include transition(all .25s);
- &:hover { color: #fff; }
+ margin: 0px 5px;
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+ &:hover {
+ opacity: 1.0;
+ filter: alpha(opacity=100);
+ }
}
}
}
@@ -343,11 +345,15 @@ footer {
}
a {
- line-height: 3em;
- color: #eee;
+ display: inline-block;
text-decoration: none;
@include transition(all .25s);
- &:hover { color: #fff; }
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+ &:hover {
+ opacity: 1.0;
+ filter: alpha(opacity=100);
+ }
}
}
@@ -1158,5 +1164,88 @@ code.output {
top: 5px;
}
+
+.secbtn {
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ margin: 10px;
+ border: 1px solid rgba(0,0,0,0.4) ;
+ box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
+ 0 0 1px 1px rgba(255,255,255,0.8),
+ 0 0 0 6px rgba(0,0,0,0.06),
+ 0 0 0 3px rgba(0,0,0,0.1);
+ cursor: pointer;
+ .title {
+ padding: 10px;
+ float: left;
+ color: #fff;
+ font-weight: 800;
+ font-size: 20px;
+ text-shadow: 1px 1px rgba(0,0,0,0.2);
+ text-align: center;
+ border-right: 1px solid rgba(255,255,255,0.3);
+ }
+ .tag {
+ padding: 10px;
+ float: left;
+ color: rgba(0,0,0,0.4);
+ font-weight: 800;
+ font-size: 20px;
+ text-shadow: 1px 1px rgba(255,255,255,0.3);
+ text-align: left;
+ border-left: 1px solid rgba(0,0,0,0.2);
+ }
+}
+
+/* colors */
+.btnyellow {
+ background: rgb(255,214,94);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1)));
+ background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
+ background: -o-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
+ background: -ms-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
+ background: linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
+}
+
+.btnyellow:hover {
+ background: rgb(254,191,4);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYmYwNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmQ2NWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(254,191,4,1) 0%, rgba(255,214,94,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,191,4,1)), color-stop(100%,rgba(255,214,94,1)));
+ background: -webkit-linear-gradient(top, rgba(254,191,4,1) 0%,rgba(255,214,94,1) 100%);
+ background: -o-linear-gradient(top, rgba(254,191,4,1) 0%,rgba(255,214,94,1) 100%);
+ background: -ms-linear-gradient(top, rgba(254,191,4,1) 0%,rgba(255,214,94,1) 100%);
+ background: linear-gradient(top, rgba(254,191,4,1) 0%,rgba(255,214,94,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf04', endColorstr='#ffd65e',GradientType=0 );
+}
+
+.btngreen {
+ background: rgb(143,200,0);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhmYzgwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NjhlMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,200,0,1)), color-stop(100%,rgba(102,142,0,1)));
+ background: -webkit-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);
+ background: -o-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);
+ background: -ms-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);
+ background: linear-gradient(top, rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#668e00',GradientType=0 );
+}
+.btngreen:hover {
+ background: rgb(102,142,0);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2OGUwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4ZmM4MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(102,142,0,1) 0%, rgba(143,200,0,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,142,0,1)), color-stop(100%,rgba(143,200,0,1)));
+ background: -webkit-linear-gradient(top, rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);
+ background: -o-linear-gradient(top, rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);
+ background: -ms-linear-gradient(top, rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);
+ background: linear-gradient(top, rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#668e00', endColorstr='#8fc800',GradientType=0 );
+}
+
+
.highlight .lineno { color: #ccc; display:inline-block; padding: 0 5px; border-right:1px solid #ccc; }
-.highlight pre code { display: block; white-space: pre; overflow-x: auto; word-wrap: normal; font-size: 10px; }
\ No newline at end of file
+.highlight pre code { display: block; white-space: pre; overflow-x: auto; word-wrap: normal; font-size: 10px; }
http://git-wip-us.apache.org/repos/asf/incubator-mnemonic-site/blob/43635fe0/src/index.html
----------------------------------------------------------------------
diff --git a/src/index.html b/src/index.html
index 8b11f8e..24cd0b6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,8 +19,14 @@ overview: true
</div>
</div>
<div class="introlinks">
- <a href="/docs/features">Features <i class="fa fa-arrow-circle-o-right"></i></a>
- <a href="/docs/arch">Architecture <i class="fa fa-arrow-circle-o-right"></i></a>
+ <a class="secbtn btngreen" href="/docs/features">
+ <div class="title">Features</div>
+ <div class="tag"><i class="fa fa-arrow-circle-o-right"></i></div>
+ </a>
+ <a class="secbtn btngreen" href="/docs/arch">
+ <div class="title">Architecture</div>
+ <div class="tag"><i class="fa fa-arrow-circle-o-right"></i></div>
+ </a>
</div>
</div>
</section>
@@ -42,13 +48,22 @@ overview: true
</div>
<div class="row">
<div class="tblunit2 one-third">
- <a href="/docs/domusecases">Use Cases <i class="fa fa-arrow-circle-o-right"></i></a>
+ <a class="secbtn btngreen" href="/docs/domusecases">
+ <div class="title">Use Cases</div>
+ <div class="tag"><i class="fa fa-arrow-circle-o-right"></i></div>
+ </a>
</div>
<div class="tblunit2 one-third">
- <a href="/docs/arch">Architecture <i class="fa fa-arrow-circle-o-right"></i></a>
+ <a class="secbtn btngreen" href="/docs/arch">
+ <div class="title">Architecture</div>
+ <div class="tag"><i class="fa fa-arrow-circle-o-right"></i></div>
+ </a>
</div>
<div class="tblunit2 one-third">
- <a href="/docs/devices">Devices <i class="fa fa-arrow-circle-o-right"></i></a>
+ <a class="secbtn btngreen" href="/docs/devices">
+ <div class="title">Devices</div>
+ <div class="tag"><i class="fa fa-arrow-circle-o-right"></i></div>
+ </a>
</div>
</div>
</div>