Diff between e525fd634b07600110cf0ac940a4b5e9c48f1ab1 and bd40253a7dfeda8bead9dab035c260c404bd3ec3

Changed Files

File Additions Deletions Status
static/styles.css +57 -13 modified
templates/base.html +18 -11 modified
templates/blame.html +1 -1 modified
templates/commits.html +1 -1 modified
templates/index.html +7 -0 modified
templates/refs.html +1 -1 modified
templates/repo.html +1 -1 modified
templates/tree.html +1 -1 modified

Full Patch

diff --git a/static/styles.css b/static/styles.css
index 64d48cc..4a299fa 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,25 +1,69 @@
 body {
-    margin: 20px;
+    font-family: sans-serif;
+    font-size: 12pt;
+    color: #000;
+    background: white;
+    margin: 0;
 }
+
+a {
+    color: blue;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+nav {
+    top: 0;
+    width: screen;
+    position: sticky;
+    padding: 0.5em 1em;
+    border-bottom: 1px solid lightgray;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fbfbfb;
+}
+
+nav a {
+    color: black;
+    margin-right: 0.5em;
+}
+
+nav a.active {
+    font-weight: bold;
+}
+
 table {
     border-collapse: collapse;
     width: 100%;
 }
 
 th, td {
-    border: 1px solid black;
-    padding: 2px;
+    border: 1px solid lightgray;
+    padding: 2px 4px;
     text-align: left;
 }
 
-a {
-    color: blue;
+pre {
+    font-family: monospace;
+    font-size: 10pt;
+}
+
+.content {
+    padding: 1em;
 }
-.base-nav {
-    display:flex; 
-    align-items:center; 
-    margin-bottom:1em;
-    gap: 0.2em;
-    border-bottom: 1px solid black;
-    padding-bottom: 0.4em;
-}
\ No newline at end of file
+
+/* dont make headers too big */
+h1 {
+    font-size: 120%;
+    margin: 0.5em 0;
+}
+
+h2 {
+    font-size: 110%;
+    margin: 1em 0 0.5em 0;
+}
+
diff --git a/templates/base.html b/templates/base.html
index e2d2a9f..3408188 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,18 +7,20 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
 <body>
-    <nav class="base-nav">
-        <a href="/">Back</a>·
-        {% set repo_name = request.view_args.get('repo_name') %}
-        {% if repo_name %}
-        <a href="{{ url_for('repo_detail', repo_name=repo_name) }}?ref={{ current_ref }}">Overview</a>·
-        <a href="{{ url_for('repo_commits', repo_name=repo_name) }}?ref={{ current_ref }}">Commits</a>·
-        <a href="{{ url_for('repo_refs', repo_name=repo_name) }}">Refs</a>·
-        <a href="{{ url_for('repo_tree_path', repo_name=repo_name) }}?ref={{ current_ref }}">Tree</a>·
-        <a href="{{ url_for('repo_diff', repo_name=repo_name) }}?ref={{ current_ref }}">Diff</a>
-        {% endif %}
+    <nav>
+        <div>
+            <a href="/">Back</a>
+            {% set repo_name = request.view_args.get('repo_name') %}
+            {% if repo_name %}
+            <a href="{{ url_for('repo_detail', repo_name=repo_name) }}?ref={{ current_ref }}" {% if request.endpoint == 'repo_detail' %}class="active"{% endif %}>Overview</a>
+            <a href="{{ url_for('repo_commits', repo_name=repo_name) }}?ref={{ current_ref }}" {% if request.endpoint == 'repo_commits' %}class="active"{% endif %}>Commits</a>
+            <a href="{{ url_for('repo_refs', repo_name=repo_name) }}" {% if request.endpoint == 'repo_refs' %}class="active"{% endif %}>Refs</a>
+            <a href="{{ url_for('repo_tree_path', repo_name=repo_name) }}?ref={{ current_ref }}" {% if request.endpoint in ['repo_tree_path', 'repo_blob_path', 'repo_blame_path'] %}class="active"{% endif %}>Tree</a>
+            <a href="{{ url_for('repo_diff', repo_name=repo_name) }}?ref={{ current_ref }}" {% if request.endpoint == 'repo_diff' %}class="active"{% endif %}>Diff</a>
+            {% endif %}
+        </div>
         {% if refs %}
-        <select onchange="changeRef(this.value)" style="margin-left:auto">
+        <select onchange="changeRef(this.value)">
             {% for ref in refs %}
             <option value="{{ ref.shorthand }}" {% if ref.shorthand == current_ref %}selected{% endif %}>{{ ref.name }}</option>
             {% endfor %}
@@ -32,6 +34,11 @@
             window.location = url;
         }
     </script>
+        </nav>
+    <div class="content">
     {% block content %}{% endblock %}
+    </div>
+</body>
+</html>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/blame.html b/templates/blame.html
index 52d7b63..26cc641 100644
--- a/templates/blame.html
+++ b/templates/blame.html
@@ -3,7 +3,7 @@
 {% block content %}
 <h1>Blame: {{ path }}</h1>
 {% if blame %}
-<table border="1"> <!-- temp default styling --->
+<table class="list"> <!-- temp default styling --->
     <thead>
         <tr>
             <th>Line</th>
diff --git a/templates/commits.html b/templates/commits.html
index 8be5101..58fdbb5 100644
--- a/templates/commits.html
+++ b/templates/commits.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <h1>Commits for {{ repo_name }}</h1>
-    <table border="1">
+    <table class="list">
         <thead>
             <tr>
                 <th>Commit</th>
diff --git a/templates/index.html b/templates/index.html
index 1b3bf69..83b9be9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Lipasto</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <style>
+        body {
+            max-width: 800px;
+            margin: auto;
+            padding: 1em; 
+        }
+    </style>
 </head>
 <body>
     <h1>
diff --git a/templates/refs.html b/templates/refs.html
index 292d86e..1789b6b 100644
--- a/templates/refs.html
+++ b/templates/refs.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <h1>Refs for {{ repo_name }}</h1>
-    <table>
+    <table class="list">
         <thead>
             <tr>
                 <th>Name</th>
diff --git a/templates/repo.html b/templates/repo.html
index 5969cb3..7b96a18 100644
--- a/templates/repo.html
+++ b/templates/repo.html
@@ -3,7 +3,7 @@
 {% block content %}
 <h1>Repository: {{ repo_name }}</h1>
 <h2>Latest commits</h2>
-<table border="1">
+<table class="list">
     <thead>
         <tr>
             <th>Commit</th>
diff --git a/templates/tree.html b/templates/tree.html
index 7890891..6326c17 100644
--- a/templates/tree.html
+++ b/templates/tree.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <h1>Tree for {{ repo_name }} at {{ ref }}{% if path %} / {{ path }}{% endif %}</h1>
-    <table>
+    <table class="list">
         <thead>
             <tr>
                 <th>Name</th>