Improve mobile design of homepage
diff --git a/index.html b/index.html
index 07f4744..81a7078 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<title>Eclipse Lyo - Enabling Tool Integration with OSLC</title>
- <link rel="stylesheet" type="text/css" href="/lyo/style.css?v=20140524">
+ <link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
html, body {
margin: 0;
@@ -28,7 +28,93 @@
max-width: 50em;
padding: 0.5em 1em;
}
+
+ .footerSpace {
+ height: 1em;
+ }
+
+ .footer {
+ position: fixed;
+ bottom: 0;
+ height: 1.5em;
+ padding: 0.7em;
+ background-color: #EFEFEF;
+ width: 100%;
+ text-align: center;
+ font-size: 0.8em;
+ }
+
+ .footerLeft {
+ float: left;
+ width: 33%;
+ }
+
+ .footerCenter {
+ display: inline-block; width: 33%;
+ }
+
+ .footerRight {
+ float: right; width: 33%;
+ }
+
+ @media only screen and (max-device-width: 480px) {
+ html, body {
+ font-size: 14px;
+ }
+
+ .h2 {
+ font-size: 1.5em;
+ margin: 1.5em 0 0;
+ }
+
+ .h3 {
+ margin-top: 1.5em;
+ }
+
+ .logo-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .logo-text {
+ display: block;
+ text-align: right;
+ margin: 4em 1em 0;
+ }
+
+ .horizontalCenter {
+ padding-top: 0.33em;
+ text-align: center;
+ }
+
+ .lyoLinkButton, .lyoLinkButton:visited, .lyoLinkButton:hover {
+ color: #00E;
+ display: inline;
+ background-color: inherit;
+ border 0;
+ padding: 0.25em;
+ font-size: inherit;
+ margin 0;
+ }
+
+ .footer, .footerLeft, .footerCenter, .footerRight {
+ display: block;
+ float: none;
+ position: relative;
+ text-align: left;
+ height: auto;
+ font-size: 1em;
+ width: auto;
+ padding-top: 0.5em;
+ }
+
+ .footerSpace {
+ height: 0;
+ }
+ }
</style>
+ <meta name='viewport' content='width=device-width'>
</head>
<body>
@@ -77,12 +163,12 @@
</div>
- <div style="height: 1em;"></div>
+ <div class="footerSpace"></div>
- <div style="position: fixed; bottom: 0; height: 1.5em; padding: 0.7em; background-color: #EFEFEF; width: 100%; text-align: center; font-size: 0.8em;">
- <div style="float: left; width: 33%;"><a href="http://wiki.eclipse.org/Lyo/ContributorsGettingStarted">Contribute</a></div>
- <div style="display: inline-block; width: 33%;"><a href="https://dev.eclipse.org/mailman/listinfo/lyo-dev">Join</a> the mailing list</div>
- <div style="float: right; width: 33%;"><a href="http://twitter.com/#!/oslcNews">Follow us</a> on Twitter</div>
+ <div class="footer">
+ <div class="footerLeft"><a href="http://wiki.eclipse.org/Lyo/ContributorsGettingStarted">Contribute</a></div>
+ <div class="footerCenter"><a href="https://dev.eclipse.org/mailman/listinfo/lyo-dev">Join</a> the mailing list</div>
+ <div class="footerRight"><a href="http://twitter.com/#!/oslcNews">Follow us</a> on Twitter</div>
</div>
<script>
