Skip to content

Commit 12b722a

Browse files
fnetXn0toose
fnetX
and
n0toose
committed
CB/ui: Codeberg Custom footer
- Dark theme footer has different colours (optional) - Update footer to work nice with any theme - Add social links to footer --- + Change "What is that?" to "Who are we" in the footer (!49) Reviewed-on: https://codeberg.org/Codeberg/gitea/pulls/49 Co-authored-by: Jeremy <[email protected]> Co-committed-by: Jeremy <[email protected]> --- + Fix string inconsistencies in custom footer (!59) Co-authored-by: Panagiotis "Ivory" Vasilopoulos <[email protected]> Reviewed-on: https://codeberg.org/Codeberg/forgejo/pulls/59
1 parent 77b1dcd commit 12b722a

File tree

5 files changed

+121
-65
lines changed

5 files changed

+121
-65
lines changed

‎templates/base/footer_content.tmpl

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,66 @@
11
<footer role="group" aria-label="{{.locale.Tr "aria.footer"}}">
2-
<div class="ui left" role="contentinfo" aria-label="{{.locale.Tr "aria.footer.software"}}">
3-
<a target="_blank" rel="noopener noreferrer" href="https://forgejo.org">{{.locale.Tr "powered_by" "Forgejo"}}</a>
4-
{{if (or .ShowFooterVersion .PageIsAdmin)}}
5-
{{.locale.Tr "version"}}:
6-
{{if .IsAdmin}}
7-
<a href="{{AppSubUrl}}/admin/config">{{AppVer}}</a>
8-
{{else}}
9-
{{AppVer}}
10-
{{end}}
11-
{{end}}
12-
{{if and .TemplateLoadTimes ShowFooterTemplateLoadTime}}
13-
{{.locale.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong>
14-
{{.locale.Tr "template"}}{{if .TemplateName}} {{.TemplateName}}{{end}}: <strong>{{call .TemplateLoadTimes}}</strong>
15-
{{end}}
2+
<div class="grid" aria-label="{{.locale.Tr "aria.footer.links"}}">
3+
<div class="branding not-mobile">
4+
<img src="https://design.codeberg.org/logo-kit/icon_inverted.svg">
5+
</div>
6+
<div>
7+
<b>Codeberg</b>
8+
<ul>
9+
<li><a href="https://docs.codeberg.org" target="_blank">Documentation</a></li>
10+
<li><a href="/Codeberg/Community/issues">Community Issues</a></li>
11+
{{if .IsSigned}}
12+
<li><a href="/about">Landing Page</a></li>
13+
{{end}}
14+
{{if .EnableSwagger}}
15+
<li><a href="{{AppSubUrl}}/api/swagger">API</a></li>
16+
{{end}}
17+
<li><a href="https://docs.{{AppDomain}}/contact/#abuse" target="_blank">Report Abuse</a>
18+
</ul>
19+
</div>
20+
<div>
21+
<b>Codeberg e.V.</b>
22+
<ul>
23+
<li><a href="https://docs.codeberg.org/getting-started/what-is-codeberg/#what-is-codeberg-e.v.%3F" target="_blank">Who are we?</a></li>
24+
<li><a href="/codeberg/org/src/en/bylaws.md" target="_blank">Bylaws / Satzung</a></li>
25+
<li><a href="https://docs.codeberg.org/improving-codeberg/#donate-to-codeberg" target="_blank">Donate</a></li>
26+
<li><a href="https://join.codeberg.org" target="_blank">Join / Support</a></li>
27+
<li><a href="https://docs.codeberg.org/contact/" target="_blank">Contact</a></li>
28+
</ul>
29+
</div>
30+
<div>
31+
<b>Service</b>
32+
<ul>
33+
<li><a href="https://codeberg.page" target="_blank">Codeberg Pages</a></li>
34+
<li><a href="https://translate.codeberg.org" target="_blank">Weblate Translations</a></li>
35+
<li><a href="/Codeberg-CI/request-access/issues" target="_blank">Woodpecker CI</a></li>
36+
<li><a href="https://status.codeberg.eu" target="_blank">Status Page</a></li>
37+
</ul>
38+
</div>
39+
<div>
40+
<b>Legal</b>
41+
<ul>
42+
<li><a href="/codeberg/org/src/Imprint.md" target="_blank">Imprint / Impressum</a></li>
43+
<li><a href="/codeberg/org/src/PrivacyPolicy.md" target="_blank">Privacy Policy</a></li>
44+
<li><a href="{{AssetUrlPrefix}}/js/licenses.txt">{{.locale.Tr "licenses"}}</a></li>
45+
<li><a href="/codeberg/org/src/TermsOfUse.md">Terms of Use</a></li>
46+
</ul>
47+
</div>
1648
</div>
17-
<div class="ui right links" role="group" aria-label="{{.locale.Tr "aria.footer.links"}}">
18-
{{if .ShowFooterBranding}}
19-
<a target="_blank" rel="noopener noreferrer" href="https://codeberg.org/forgejo/forgejo">{{svg "octicon-mark-github"}}<span class="sr-only">Codeberg</span></a>
20-
{{end}}
21-
<div class="ui language bottom floating slide up dropdown link item">
22-
{{svg "octicon-globe"}}
23-
<span>{{.locale.LangName}}</span>
49+
<center>
50+
<a href="https://blog.codeberg.org" target="_blank">Blog</a> |
51+
<a href="https://social.anoxinon.de/@Codeberg" target="_blank" rel="noopener noreferrer">Mastodon</a> |
52+
<a href="https://matrix.to/#/#codeberg-space:matrix.org" target="_blank" rel="noopener noreferrer">Matrix Space</a> |
53+
<a href="https://twitter.com/codeberg_org" target="_blank" rel="noopener noreferrer">Twitter</a>
54+
</center>
55+
<div class="ui right">
56+
<div class="ui language bottom floating slide up dropdown link item button">
57+
{{svg "octicon-globe"}}
58+
<div class="text">{{.locale.LangName}}</div>
2459
<div class="menu language-menu">
2560
{{range .AllLangs}}
2661
<a lang="{{.Lang}}" data-url="{{AppSubUrl}}/?lang={{.Lang}}" class="item {{if eq $.locale.Lang .Lang}}active selected{{end}}">{{.Name}}</a>
2762
{{end}}
2863
</div>
2964
</div>
30-
<a href="{{AssetUrlPrefix}}/js/licenses.txt">{{.locale.Tr "licenses"}}</a>
31-
{{if .EnableSwagger}}<a href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
32-
{{template "custom/extra_links_footer" .}}
3365
</div>
3466
</footer>

‎web_src/css/base.css

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,8 @@
145145
--color-box-header: #f7f7f7;
146146
--color-box-body: #ffffff;
147147
--color-box-body-highlight: #f8f8f8;
148-
--color-footer: #ffffff;
148+
--color-footer: #B5DDFF;
149+
--color-footer-text: var(--color-text-light);
149150
--color-timeline: #ececec;
150151
--color-input-text: #212121;
151152
--color-input-background: #ffffff;
@@ -1822,6 +1823,53 @@ img.ui.avatar,
18221823
color: var(--color-warning-text);
18231824
}
18241825

1826+
/* modified by Codeberg */
1827+
footer {
1828+
background-color: var(--color-footer);
1829+
width: 100%;
1830+
color: var(--color-footer-text);
1831+
font-weight: 400;
1832+
padding: 10px;
1833+
}
1834+
footer .grid {
1835+
display: grid;
1836+
grid-gap: 40px 20px;
1837+
padding: 30px;
1838+
}
1839+
@media (min-width: 992px) {
1840+
footer .grid {
1841+
grid-template-columns: 2fr repeat(4, 3fr);
1842+
}
1843+
}
1844+
footer .grid a,
1845+
footer .grid ul {
1846+
list-style-type: none;
1847+
padding: 0;
1848+
margin: 0;
1849+
margin-top: 15px;
1850+
line-height: 2em;
1851+
}
1852+
footer .branding img {
1853+
width: 100px;
1854+
}
1855+
footer * a {
1856+
color: inherit;
1857+
}
1858+
footer * b {
1859+
font-size: 2em;
1860+
}
1861+
footer .ui.language .menu {
1862+
max-height: 500px;
1863+
overflow-y: auto;
1864+
margin-bottom: 7px;
1865+
}
1866+
footer .ui.language .svg,
1867+
footer .ui.language .text {
1868+
margin-right: 0.15em;
1869+
vertical-align: middle;
1870+
}
1871+
/* end custom footer */
1872+
18251873
.center:not(.popup) {
18261874
text-align: center;
18271875
}

‎web_src/css/home.css

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -43,43 +43,4 @@
4343
color: var(--color-primary);
4444
}
4545

46-
footer {
47-
background-color: var(--color-footer);
48-
border-top: 1px solid var(--color-secondary);
49-
line-height: 39px;
50-
flex-basis: 40px;
51-
color: var(--color-text-light);
52-
padding: 0 20px;
53-
}
54-
55-
footer .right.links {
56-
min-width: 180px; /* make sure the menu dropdown doesn't overflow horizontally when language name is short */
57-
}
58-
59-
footer .right.links > * {
60-
border-left: 1px solid var(--color-secondary-dark-1);
61-
padding-left: 8px;
62-
margin-left: 5px;
63-
}
64-
65-
footer .right.links > *:first-child {
66-
border-left: none;
67-
}
68-
69-
footer .ui.dropdown.language .menu {
70-
height: 500px;
71-
max-height: calc(100vh - 60px);
72-
overflow-y: auto;
73-
margin-bottom: 10px;
74-
}
75-
76-
77-
@media (max-width: 880px) {
78-
footer .ui.left,
79-
footer .ui.right {
80-
width: 100%;
81-
display: block;
82-
text-align: center;
83-
float: none;
84-
}
85-
}
46+
/* obsolete via Codeberg footer */

‎web_src/css/themes/codeberg/base-brand.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
:root {
2+
--color-footer: #144B49;
3+
--color-footer-text: #ffffff;
4+
}
5+
6+
footer .button:hover {
7+
--color-hover: #73CCC6;
8+
}
9+
110
.following.bar, #navbar {
211
/* Change navbar color scheme to match Codeberg's brand */
312
background-color: var(--color-primary);

‎web_src/css/themes/theme-codeberg-light.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
/* Basic styles for Codeberg */
22
@import "codeberg/base-brand.css";
33

4+
footer, .codeberg {
5+
--color-text-light-2: #73CCC6;
6+
* a:hover {
7+
color: var(--color-text-light-2) !important;
8+
}
9+
}

0 commit comments

Comments
 (0)