[OCaml] Mobile-friendly clone of cgit.
feat move git logo into navbar, make nav-home monospaced
Move the git logo from the page header into the navbar as a link to the site root. The nav-home link shows the repo name in monospace and links to the repo summary. Remove the standalone 'ogit' heading link. Page header now only shows the repo description when present.
Changed files
lib/static/styles.css
@@ -10,12 +10,14 @@
10
10
}
11
11
12
12
#page-header {
13
Removed:
display: flex;
14
Removed:
align-items: center;
15
Removed:
gap: 1em;
16
13
padding: 0.5em 1em;
17
14
}
18
15
16
Added:
#page-header p {
17
Added:
margin: 0;
18
Added:
color: #b0b0b0;
19
Added:
}
20
Added:
19
21
.skip-link {
20
22
position: absolute;
21
23
top: -100%;
@@ -49,18 +51,6 @@
49
51
border: 0;
50
52
}
51
53
52
Removed:
53
Removed:
#page-header .site-logo {
54
Removed:
width: 2.5em;
55
Removed:
height: 2.5em;
56
Removed:
}
57
Removed:
58
Removed:
#page-header h1,
59
Removed:
#page-header h2 {
60
Removed:
margin: 0;
61
Removed:
padding: 0;
62
Removed:
}
63
Removed:
64
54
nav#top {
65
55
background-color: black;
66
56
border-radius: 0.25rem;
@@ -92,6 +82,7 @@
92
82
padding: 0.5em 1em;
93
83
min-height: 44px;
94
84
border-radius: 0.25rem;
85
Added:
font-family: monospace;
95
86
}
96
87
97
88
.nav-home:hover {
@@ -99,6 +90,23 @@
99
90
color: black;
100
91
}
101
92
93
Added:
.nav-logo {
94
Added:
display: flex;
95
Added:
align-items: center;
96
Added:
padding: 0.5em;
97
Added:
min-height: 44px;
98
Added:
border-radius: 0.25rem;
99
Added:
}
100
Added:
101
Added:
.nav-logo:hover {
102
Added:
background-color: #333;
103
Added:
}
104
Added:
105
Added:
.nav-logo .site-logo {
106
Added:
width: 2em;
107
Added:
height: 2em;
108
Added:
}
109
Added:
102
110
nav#top ul {
103
111
display: flex;
104
112
flex-wrap: wrap;
@@ -318,13 +326,7 @@
318
326
319
327
@media (max-width: 600px) {
320
328
#page-header {
321
Removed:
gap: 0.5em;
322
329
padding: 0.5em 0.5em;
323
Removed:
}
324
Removed:
325
Removed:
#page-header .site-logo {
326
Removed:
width: 2em;
327
Removed:
height: 2em;
328
330
}
329
331
330
332
div#main {
lib/views/layout.ml
@@ -35,7 +35,12 @@
35
35
nav
36
36
[ id "top"; Aria.label "Repository navigation" ]
37
37
[
38
Removed:
Routes.link_to Root ~other_attrs:[ class_ "nav-home" ] (txt "Home");
38
Added:
Routes.link_to Root
39
Added:
~other_attrs:[ class_ "nav-logo" ]
40
Added:
(img [ src "/static/git_icon.svg"; alt "Home"; class_ "site-logo" ]);
41
Added:
Routes.link_to (Repo repo)
42
Added:
~other_attrs:[ class_ "nav-home" ]
43
Added:
(txt "%s" repo);
39
44
input [ type_ "checkbox"; id "nav-toggle"; class_ "nav-toggle" ];
40
45
label
41
46
[ for_ "nav-toggle"; class_ "nav-hamburger"; Aria.label "Menu" ]
@@ -43,24 +48,13 @@
43
48
ul [] (List.map li_of_item nav_items);
44
49
])
45
50
46
Removed:
let page_header header1 header2 =
51
Added:
let page_header _header1 header2 =
47
52
let header2 =
48
53
if String.starts_with ~prefix:"Unnamed repository" header2 then ""
49
54
else header2
50
55
in
51
Removed:
HTML.(
52
Removed:
header
53
Removed:
[ id "page-header" ]
54
Removed:
[
55
Removed:
img
56
Removed:
[
57
Removed:
src "/static/git_icon.svg";
58
Removed:
alt "";
59
Removed:
role `presentation;
60
Removed:
class_ "site-logo";
61
Removed:
];
62
Removed:
div [] [ h1 [] [ txt "%s" header1 ]; h2 [] [ txt "%s" header2 ] ];
63
Removed:
])
56
Added:
if header2 = "" then HTML.null []
57
Added:
else HTML.(header [ id "page-header" ] [ p [] [ txt "%s" header2 ] ])
64
58
65
59
let page_footer () =
66
60
let now = Unix.(time () |> localtime) in