Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Rewrote all CSS to use Bootstrap layout

  • Loading branch information...
commit 4338d1fb7fc8fb7d73ec8991166ca85ed6af2ded 1 parent cb92194
@ctfliblime authored
Showing with 56 additions and 102 deletions.
  1. +11 −48 public/css/xape.css
  2. +45 −54 public/index.html
View
59 public/css/xape.css
@@ -4,67 +4,30 @@
}
body {
- background-color:#a63100;
+ padding-top: 60px;
}
-.toplevel_table {
- margin:auto;
- width:50%;
- background-color:#ff4c00;
- border-spacing:0px;
+label {
+ float:left;
+ padding-right:5px;
}
.heading {
font-family: Prociono;
}
-.inputs {
- vertical-align:center;
- background-color:#ffbe00;
-}
-
-#xlit_key_label {
- float:right;
- margin-right:40px;
- font-size:70%;
-}
-
-.outputs {
- margin:auto;
- font-size:200%;
- color:#fff;
- width:10em;
-}
-
-.matches a:link {
- text-decoration:none;
+.result {
+ font-size: 200%;
}
-.matches ul {
- list-style-type: circle;
+.match_list {
+ font-size: 200%;
}
-.matches {
- margin:auto;
- font-size:200%;
- color:#fff;
- width:10em;
+.pad_text {
+ padding: 10px;
}
.xlit_key_display {
- background-color:#ffdb73;
- margin:auto;
- width:27em;
-}
-
-dl {
- float: left;
-}
-
-dd {
- float:left;
-}
-
-dt {
- float:left;
+ font-size: 150%;
}
View
99 public/index.html
@@ -1,22 +1,9 @@
+<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
- <style>
- body {
- padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
- }
- </style>
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
- <!-- <link rel="stylesheet" href="css/xape.css" type="text/css" media="screen" /> -->
- <style>
- label {
- float:left;
- padding-right:5px;
- }
-
- dt { float:left; }
- dd { float:left; }
- </style>
+ <link rel="stylesheet" href="css/xape.css" type="text/css" />
<title>Xape Ape</title>
</head>
@@ -28,61 +15,65 @@
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
- <span class="icon-bar"></span>
</a>
- <a class="brand" href="#">Xape Ape</a>
+ <a class="brand heading" href="#">Xape Ape</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
-<form class="navbar-form pull-left">
- <input type="text" class="span2">
-</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
- <table class="toplevel_table">
- <tr class="inputs">
- <td colspan="2">
- <form id="f">
- <select id="language">
- <option value="he">Hebrew</option>
- </select>
- <input type="text" id="phrase" /> <br />
- <input type="checkbox" id="xlit_key_toggle" />
- <label for="xlit_key_toggle">Show Tranlisteration</label>
- </form>
- </td>
- </tr>
- <tr>
- <td class="outputs">
- <dl>
- <dt id="phrase_text"></dt>
- <dd id="phrase_enum"></dd>
- </dl>
- </td>
- <td class="matches">
- <ul id="match_list"></ul>
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <div class="well xlit_key_display" id="xlit_key_display"></div>
- </td>
- </tr>
- </table>
+ <div class="row">
+
+ <div class="span6 offset3">
+ <form id="f">
+ <select id="language">
+ <option value="he">Hebrew</option>
+ </select>
+ <input type="text" id="phrase" /> <br />
+ <input type="checkbox" id="xlit_key_toggle" />
+ <label for="xlit_key_toggle">Show Tranlisteration</label>
+ </form>
+
+ <div class="row">
+ <div class="span3 result">
+ <div class="row pad_text">
+ <div class="span2">
+ <span id="phrase_text"></span>
+ </div>
+ </div>
+ <div class="row pad_text">
+ <div class="span2">
+ <span id="phrase_enum"></span>
+ </div>
+ </div>
+ </div>
+ <div class="span3 match_list">
+ <ul id="match_list"></ul>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span5">
+ <div class="well xlit_key_display" id="xlit_key_display"></div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
</div>
+
</body>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
- <script type="text/javascript"
- src="js/bootstrap.min.js"></script>
- <script type="text/javascript"
- src="js/xape.js"></script>
+ <script type="text/javascript" src="js/bootstrap.min.js"></script>
+ <script type="text/javascript" src="js/xape.js"></script>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.