detached c88cec9

Basic CSS/htmlx layout for v0.1

Basic CSS/htmlx layout for v0.1
commit
c88cec9840630c515c33cf9504fa7c5f0f1fa142
author
bnema · · 2023-09-04 06:40 UTC
committer
bnema · · 2023-09-04 07:00 UTC
parent
b84433b
signature
unsigned
7 files · +107 -91
Unified
UnifiedSplit
M internal/http/routes/admin_routes.go +9 -1
@@ -3,6 +3,7 @@ package routes
33 import (
44 "fmt"
55 "net/http"
6+ "os"
67
78 "github.com/labstack/echo/v4"
89 "gogs.bnema.dev/gordon-echo/internal/http/middlewares"
@@ -36,6 +37,13 @@ func AdminRoute(c echo.Context) error {
3637 }
3738
3839 func StaticRoute(c echo.Context) error {
39- c.Response().Header().Set("Cache-Control", "public, max-age=86400")
40+
41+ // Set the cache-control header to cache the static files for 1 day if PROD env is set to true
42+
43+ if os.Getenv("PROD") == "true" {
44+ c.Response().Header().Set("Cache-Control", "public, max-age=86400")
45+ } else {
46+ c.Response().Header().Set("Cache-Control", "no-cache")
47+ }
4048 return echo.StaticDirectoryHandler(ui.PublicFS, false)(c)
4149 }
@@ -3,6 +3,7 @@ package routes
3 import (3 import (
4 "fmt"4 "fmt"
5 "net/http"5 "net/http"
6+ "os"
6 7
7 "github.com/labstack/echo/v4"8 "github.com/labstack/echo/v4"
8 "gogs.bnema.dev/gordon-echo/internal/http/middlewares"9 "gogs.bnema.dev/gordon-echo/internal/http/middlewares"
@@ -36,6 +37,13 @@ func AdminRoute(c echo.Context) error {
36 }37 }
37 38
38 func StaticRoute(c echo.Context) error {39 func StaticRoute(c echo.Context) error {
39- c.Response().Header().Set("Cache-Control", "public, max-age=86400")40+
41+ // Set the cache-control header to cache the static files for 1 day if PROD env is set to true
42+
43+ if os.Getenv("PROD") == "true" {
44+ c.Response().Header().Set("Cache-Control", "public, max-age=86400")
45+ } else {
46+ c.Response().Header().Set("Cache-Control", "no-cache")
47+ }
40 return echo.StaticDirectoryHandler(ui.PublicFS, false)(c)48 return echo.StaticDirectoryHandler(ui.PublicFS, false)(c)
41 }49 }
M internal/ui/public/assets/css/custom.css +8 -25
@@ -13,14 +13,14 @@
1313 /* Import IBM Plex Fonts */
1414 @font-face {
1515 font-family: "IBMPlexSans-Bold";
16- src: url("assets/fonts/IBMPlex/IBMPlexSans-Bold.woff2") format("woff2");
16+ src: url("/assets/fonts/IBMPlex/IBMPlexSans-Bold.woff2") format("woff2");
1717 font-weight: bold;
1818 font-style: normal;
1919 }
2020
2121 @font-face {
2222 font-family: "IBMPlexSans-Regular";
23- src: url("assets/fonts/IBMPlex/IBMPlexSans-Regular.woff2") format("woff2");
23+ src: url("/assets/fonts/IBMPlex/IBMPlexSans-Regular.woff2") format("woff2");
2424 font-weight: normal;
2525 font-style: normal;
2626 }
@@ -28,7 +28,7 @@
2828 /* Import Jetbrains Mono Nerd Font */
2929 @font-face {
3030 font-family: "JetBrainsMono-Nerd-Font-Regular";
31- src: url("assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2")
31+ src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2")
3232 format("woff2");
3333 font-weight: normal;
3434 font-style: normal;
@@ -36,7 +36,7 @@
3636
3737 @font-face {
3838 font-family: "LilitaOne-Regular";
39- src: url("assets/fonts/LilitaOne/LilitaOne-Regular.woff2") format("woff2");
39+ src: url("/assets/fonts/LilitaOne/LilitaOne-Regular.ttf") format("truetype");
4040 font-weight: normal;
4141 font-style: normal;
4242 }
@@ -83,31 +83,14 @@
8383 animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
8484 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
8585 }
86-h1,
87-h2,
88-h3,
89-h4,
90-h5,
91-h6 {
92- font-family: "IBMPlexSans-Bold", sans-serif;
93- font-style: normal;
94- color: #000000;
95- margin: 0;
96- padding: 0;
97-}
86+
9887 .gordon-title {
9988 font-family: "LilitaOne-Regular", sans-serif;
100- font-style: normal;
101- color: #000000;
102- margin: 0;
103- padding: 0;
89+
10490 }
105-.gordon-v-subtitle {
91+
92+.IBMPlexSans {
10693 font-family: "IBMPlexSans-Regular", sans-serif;
107- font-style: normal;
108- color: #000000;
109- margin: 0;
110- padding: 0;
11194 }
11295
11396 .circle-shadow {
@@ -13,14 +13,14 @@
13 /* Import IBM Plex Fonts */13 /* Import IBM Plex Fonts */
14 @font-face {14 @font-face {
15 font-family: "IBMPlexSans-Bold";15 font-family: "IBMPlexSans-Bold";
16- src: url("assets/fonts/IBMPlex/IBMPlexSans-Bold.woff2") format("woff2");16+ src: url("/assets/fonts/IBMPlex/IBMPlexSans-Bold.woff2") format("woff2");
17 font-weight: bold;17 font-weight: bold;
18 font-style: normal;18 font-style: normal;
19 }19 }
20 20
21 @font-face {21 @font-face {
22 font-family: "IBMPlexSans-Regular";22 font-family: "IBMPlexSans-Regular";
23- src: url("assets/fonts/IBMPlex/IBMPlexSans-Regular.woff2") format("woff2");23+ src: url("/assets/fonts/IBMPlex/IBMPlexSans-Regular.woff2") format("woff2");
24 font-weight: normal;24 font-weight: normal;
25 font-style: normal;25 font-style: normal;
26 }26 }
@@ -28,7 +28,7 @@
28 /* Import Jetbrains Mono Nerd Font */28 /* Import Jetbrains Mono Nerd Font */
29 @font-face {29 @font-face {
30 font-family: "JetBrainsMono-Nerd-Font-Regular";30 font-family: "JetBrainsMono-Nerd-Font-Regular";
31- src: url("assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2")31+ src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2")
32 format("woff2");32 format("woff2");
33 font-weight: normal;33 font-weight: normal;
34 font-style: normal;34 font-style: normal;
@@ -36,7 +36,7 @@
36 36
37 @font-face {37 @font-face {
38 font-family: "LilitaOne-Regular";38 font-family: "LilitaOne-Regular";
39- src: url("assets/fonts/LilitaOne/LilitaOne-Regular.woff2") format("woff2");39+ src: url("/assets/fonts/LilitaOne/LilitaOne-Regular.ttf") format("truetype");
40 font-weight: normal;40 font-weight: normal;
41 font-style: normal;41 font-style: normal;
42 }42 }
@@ -83,31 +83,14 @@
83 animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,83 animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
84 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;84 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
85 }85 }
86-h1,86+
87-h2,
88-h3,
89-h4,
90-h5,
91-h6 {
92- font-family: "IBMPlexSans-Bold", sans-serif;
93- font-style: normal;
94- color: #000000;
95- margin: 0;
96- padding: 0;
97-}
98 .gordon-title {87 .gordon-title {
99 font-family: "LilitaOne-Regular", sans-serif;88 font-family: "LilitaOne-Regular", sans-serif;
100- font-style: normal;89+
101- color: #000000;
102- margin: 0;
103- padding: 0;
104 }90 }
105-.gordon-v-subtitle {91+
92+.IBMPlexSans {
106 font-family: "IBMPlexSans-Regular", sans-serif;93 font-family: "IBMPlexSans-Regular", sans-serif;
107- font-style: normal;
108- color: #000000;
109- margin: 0;
110- padding: 0;
111 }94 }
112 95
113 .circle-shadow {96 .circle-shadow {
M internal/ui/public/assets/css/tailwind.css +58 -49
@@ -549,6 +549,10 @@ video {
549549 margin-left: 1rem;
550550 }
551551
552+.mr-2 {
553+ margin-right: 0.5rem;
554+}
555+
552556 .flex {
553557 display: flex;
554558 }
@@ -627,12 +631,6 @@ video {
627631 margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
628632 }
629633
630-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
631- --tw-space-y-reverse: 0;
632- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
633- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
634-}
635-
636634 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
637635 --tw-space-y-reverse: 0;
638636 margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -651,6 +649,16 @@ video {
651649 border-radius: 0.125rem;
652650 }
653651
652+.bg-gordonmascot-lblue {
653+ --tw-bg-opacity: 1;
654+ background-color: rgb(0 123 192 / var(--tw-bg-opacity));
655+}
656+
657+.bg-gordonmascot-mblue {
658+ --tw-bg-opacity: 1;
659+ background-color: rgb(0 82 147 / var(--tw-bg-opacity));
660+}
661+
654662 .bg-gray-300 {
655663 --tw-bg-opacity: 1;
656664 background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -689,40 +697,37 @@ video {
689697 line-height: 1;
690698 }
691699
700+.text-lg {
701+ font-size: 1.125rem;
702+ line-height: 1.75rem;
703+}
704+
692705 .text-sm {
693706 font-size: 0.875rem;
694707 line-height: 1.25rem;
695708 }
696709
697-.text-xs {
698- font-size: 0.75rem;
699- line-height: 1rem;
700-}
701-
702-.font-bold {
703- font-weight: 700;
704-}
705-
706710 .font-semibold {
707711 font-weight: 600;
708712 }
709713
710-.leading-3 {
711- line-height: .75rem;
712-}
713-
714714 .tracking-tighter {
715715 letter-spacing: -0.05em;
716716 }
717717
718-.text-gray-300 {
718+.text-gordonmascot-hblue {
719719 --tw-text-opacity: 1;
720- color: rgb(209 213 219 / var(--tw-text-opacity));
720+ color: rgb(1 30 92 / var(--tw-text-opacity));
721721 }
722722
723-.text-sky-950 {
723+.text-gordonmascot-mblue {
724724 --tw-text-opacity: 1;
725- color: rgb(8 47 73 / var(--tw-text-opacity));
725+ color: rgb(0 82 147 / var(--tw-text-opacity));
726+}
727+
728+.text-gray-100 {
729+ --tw-text-opacity: 1;
730+ color: rgb(243 244 246 / var(--tw-text-opacity));
726731 }
727732
728733 .shadow {
@@ -741,7 +746,7 @@ video {
741746 @font-face {
742747 font-family: "IBMPlexSans-Bold";
743748
744- src: url("assets/fonts/IBMPlex/IBMPlexSans-Bold.woff2") format("woff2");
749+ src: url("/assets/fonts/IBMPlex/IBMPlexSans-Bold.woff2") format("woff2");
745750
746751 font-weight: bold;
747752
@@ -751,7 +756,7 @@ video {
751756 @font-face {
752757 font-family: "IBMPlexSans-Regular";
753758
754- src: url("assets/fonts/IBMPlex/IBMPlexSans-Regular.woff2") format("woff2");
759+ src: url("/assets/fonts/IBMPlex/IBMPlexSans-Regular.woff2") format("woff2");
755760
756761 font-weight: normal;
757762
@@ -763,7 +768,7 @@ video {
763768 @font-face {
764769 font-family: "JetBrainsMono-Nerd-Font-Regular";
765770
766- src: url("assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2")
771+ src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2")
767772 format("woff2");
768773
769774 font-weight: normal;
@@ -774,7 +779,7 @@ video {
774779 @font-face {
775780 font-family: "LilitaOne-Regular";
776781
777- src: url("assets/fonts/LilitaOne/LilitaOne-Regular.woff2") format("woff2");
782+ src: url("/assets/fonts/LilitaOne/LilitaOne-Regular.ttf") format("truetype");
778783
779784 font-weight: normal;
780785
@@ -826,33 +831,12 @@ video {
826831 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
827832 }
828833
829-h1,
830-h2,
831-h3,
832-h4,
833-h5,
834-h6 {
835- font-family: "IBMPlexSans-Bold", sans-serif;
836- font-style: normal;
837- color: #000000;
838- margin: 0;
839- padding: 0;
840-}
841-
842834 .gordon-title {
843835 font-family: "LilitaOne-Regular", sans-serif;
844- font-style: normal;
845- color: #000000;
846- margin: 0;
847- padding: 0;
848836 }
849837
850-.gordon-v-subtitle {
838+.IBMPlexSans {
851839 font-family: "IBMPlexSans-Regular", sans-serif;
852- font-style: normal;
853- color: #000000;
854- margin: 0;
855- padding: 0;
856840 }
857841
858842 .circle-shadow {
@@ -884,13 +868,38 @@ h6 {
884868 }
885869
886870 @media (min-width: 768px) {
871+ .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
872+ --tw-space-y-reverse: 0;
873+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
874+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
875+ }
876+
887877 .md\:p-8 {
888878 padding: 2rem;
889879 }
890880
881+ .md\:py-8 {
882+ padding-top: 2rem;
883+ padding-bottom: 2rem;
884+ }
885+
886+ .md\:pl-4 {
887+ padding-left: 1rem;
888+ }
889+
891890 .md\:pt-10 {
892891 padding-top: 2.5rem;
893892 }
893+
894+ .md\:text-2xl {
895+ font-size: 1.5rem;
896+ line-height: 2rem;
897+ }
898+
899+ .md\:text-3xl {
900+ font-size: 1.875rem;
901+ line-height: 2.25rem;
902+ }
894903 }
895904
896905 @media (min-width: 1024px) {
@@ -549,6 +549,10 @@ video {
549 margin-left: 1rem;549 margin-left: 1rem;
550 }550 }
551 551
552+.mr-2 {
553+ margin-right: 0.5rem;
554+}
555+
552 .flex {556 .flex {
553 display: flex;557 display: flex;
554 }558 }
@@ -627,12 +631,6 @@ video {
627 margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));631 margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
628 }632 }
629 633
630-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
631- --tw-space-y-reverse: 0;
632- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
633- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
634-}
635-
636 .space-y-4 > :not([hidden]) ~ :not([hidden]) {634 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
637 --tw-space-y-reverse: 0;635 --tw-space-y-reverse: 0;
638 margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));636 margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -651,6 +649,16 @@ video {
651 border-radius: 0.125rem;649 border-radius: 0.125rem;
652 }650 }
653 651
652+.bg-gordonmascot-lblue {
653+ --tw-bg-opacity: 1;
654+ background-color: rgb(0 123 192 / var(--tw-bg-opacity));
655+}
656+
657+.bg-gordonmascot-mblue {
658+ --tw-bg-opacity: 1;
659+ background-color: rgb(0 82 147 / var(--tw-bg-opacity));
660+}
661+
654 .bg-gray-300 {662 .bg-gray-300 {
655 --tw-bg-opacity: 1;663 --tw-bg-opacity: 1;
656 background-color: rgb(209 213 219 / var(--tw-bg-opacity));664 background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -689,40 +697,37 @@ video {
689 line-height: 1;697 line-height: 1;
690 }698 }
691 699
700+.text-lg {
701+ font-size: 1.125rem;
702+ line-height: 1.75rem;
703+}
704+
692 .text-sm {705 .text-sm {
693 font-size: 0.875rem;706 font-size: 0.875rem;
694 line-height: 1.25rem;707 line-height: 1.25rem;
695 }708 }
696 709
697-.text-xs {
698- font-size: 0.75rem;
699- line-height: 1rem;
700-}
701-
702-.font-bold {
703- font-weight: 700;
704-}
705-
706 .font-semibold {710 .font-semibold {
707 font-weight: 600;711 font-weight: 600;
708 }712 }
709 713
710-.leading-3 {
711- line-height: .75rem;
712-}
713-
714 .tracking-tighter {714 .tracking-tighter {
715 letter-spacing: -0.05em;715 letter-spacing: -0.05em;
716 }716 }
717 717
718-.text-gray-300 {718+.text-gordonmascot-hblue {
719 --tw-text-opacity: 1;719 --tw-text-opacity: 1;
720- color: rgb(209 213 219 / var(--tw-text-opacity));720+ color: rgb(1 30 92 / var(--tw-text-opacity));
721 }721 }
722 722
723-.text-sky-950 {723+.text-gordonmascot-mblue {
724 --tw-text-opacity: 1;724 --tw-text-opacity: 1;
725- color: rgb(8 47 73 / var(--tw-text-opacity));725+ color: rgb(0 82 147 / var(--tw-text-opacity));
726+}
727+
728+.text-gray-100 {
729+ --tw-text-opacity: 1;
730+ color: rgb(243 244 246 / var(--tw-text-opacity));
726 }731 }
727 732
728 .shadow {733 .shadow {
@@ -741,7 +746,7 @@ video {
741 @font-face {746 @font-face {
742 font-family: "IBMPlexSans-Bold";747 font-family: "IBMPlexSans-Bold";
743 748
744- src: url("assets/fonts/IBMPlex/IBMPlexSans-Bold.woff2") format("woff2");749+ src: url("/assets/fonts/IBMPlex/IBMPlexSans-Bold.woff2") format("woff2");
745 750
746 font-weight: bold;751 font-weight: bold;
747 752
@@ -751,7 +756,7 @@ video {
751 @font-face {756 @font-face {
752 font-family: "IBMPlexSans-Regular";757 font-family: "IBMPlexSans-Regular";
753 758
754- src: url("assets/fonts/IBMPlex/IBMPlexSans-Regular.woff2") format("woff2");759+ src: url("/assets/fonts/IBMPlex/IBMPlexSans-Regular.woff2") format("woff2");
755 760
756 font-weight: normal;761 font-weight: normal;
757 762
@@ -763,7 +768,7 @@ video {
763 @font-face {768 @font-face {
764 font-family: "JetBrainsMono-Nerd-Font-Regular";769 font-family: "JetBrainsMono-Nerd-Font-Regular";
765 770
766- src: url("assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2")771+ src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2")
767 format("woff2");772 format("woff2");
768 773
769 font-weight: normal;774 font-weight: normal;
@@ -774,7 +779,7 @@ video {
774 @font-face {779 @font-face {
775 font-family: "LilitaOne-Regular";780 font-family: "LilitaOne-Regular";
776 781
777- src: url("assets/fonts/LilitaOne/LilitaOne-Regular.woff2") format("woff2");782+ src: url("/assets/fonts/LilitaOne/LilitaOne-Regular.ttf") format("truetype");
778 783
779 font-weight: normal;784 font-weight: normal;
780 785
@@ -826,33 +831,12 @@ video {
826 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;831 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
827 }832 }
828 833
829-h1,
830-h2,
831-h3,
832-h4,
833-h5,
834-h6 {
835- font-family: "IBMPlexSans-Bold", sans-serif;
836- font-style: normal;
837- color: #000000;
838- margin: 0;
839- padding: 0;
840-}
841-
842 .gordon-title {834 .gordon-title {
843 font-family: "LilitaOne-Regular", sans-serif;835 font-family: "LilitaOne-Regular", sans-serif;
844- font-style: normal;
845- color: #000000;
846- margin: 0;
847- padding: 0;
848 }836 }
849 837
850-.gordon-v-subtitle {838+.IBMPlexSans {
851 font-family: "IBMPlexSans-Regular", sans-serif;839 font-family: "IBMPlexSans-Regular", sans-serif;
852- font-style: normal;
853- color: #000000;
854- margin: 0;
855- padding: 0;
856 }840 }
857 841
858 .circle-shadow {842 .circle-shadow {
@@ -884,13 +868,38 @@ h6 {
884 }868 }
885 869
886 @media (min-width: 768px) {870 @media (min-width: 768px) {
871+ .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
872+ --tw-space-y-reverse: 0;
873+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
874+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
875+ }
876+
887 .md\:p-8 {877 .md\:p-8 {
888 padding: 2rem;878 padding: 2rem;
889 }879 }
890 880
881+ .md\:py-8 {
882+ padding-top: 2rem;
883+ padding-bottom: 2rem;
884+ }
885+
886+ .md\:pl-4 {
887+ padding-left: 1rem;
888+ }
889+
891 .md\:pt-10 {890 .md\:pt-10 {
892 padding-top: 2.5rem;891 padding-top: 2.5rem;
893 }892 }
893+
894+ .md\:text-2xl {
895+ font-size: 1.5rem;
896+ line-height: 2rem;
897+ }
898+
899+ .md\:text-3xl {
900+ font-size: 1.875rem;
901+ line-height: 2.25rem;
902+ }
894 }903 }
895 904
896 @media (min-width: 1024px) {905 @media (min-width: 1024px) {
A internal/ui/public/assets/fonts/LilitaOne/LilitaOne-Regular.ttf +0 -0 binary file: no text diff

binary file: no text diff

M internal/ui/public/assets/fonts/LilitaOne/LilitaOne-Regular.woff2 +0 -0 binary file: no text diff

binary file: no text diff

M internal/ui/public/index.gohtml +20 -14
@@ -19,7 +19,7 @@
1919 <!-- Custom JS from assets/js -->
2020 <script src="assets/js/custom.js"></script>
2121 </head>
22- <body class="bg-zinc-200 md:p-8 flex">
22+ <body class="IBMPlexSans bg-zinc-200 md:p-8 flex">
2323 <!-- Left Menu -->
2424 <div class="w-1/5 flex flex-col space-evenly">
2525 <!-- Logo -->
@@ -33,38 +33,44 @@
3333 </div>
3434 </div>
3535 <!-- Site Name + Version -->
36- <div class="p-4 flex flex-col bg-white rounded-lg shadow space-y-4">
36+ <div
37+ class="p-4 flex flex-col bg-gordonmascot-lblue rounded-lg shadow space-y-4"
38+ >
3739 <div class="w-full flex justify-center">
3840 <h1
39- class="gordon-title text-2xl lg:text-4xl xl:text-5xl text-sky-950 font-bold tracking-tighter"
41+ class="gordon-title text-2xl lg:text-4xl xl:text-5xl text-gordonmascot-hblue tracking-tighter"
4042 >
4143 Gordon
4244 </h1>
43- <span class="gordon-v-subtitle text-gray-300 text-xs">v0.0.1</span>
45+ <span class="gordon-v-subtitle text-gordonmascot-mblue text-sm"
46+ >v0.0.1</span
47+ >
4448 </div>
4549 <!--(Navigation) -->
4650 <div id="menu-leftnav" class="w-full">
47- <ul class="flex flex-col space-y-2 leading-3 font-semibold text-sm">
48- <li>
49- <i class="iconoir-dashboard-speed"></i>
51+ <ul
52+ class="flex flex-col md:space-y-6 md:py-8 font-semibold text-gray-100 text-lg md:text-2xl md:pl-4"
53+ >
54+ <li class="flex items-center">
55+ <i class="iconoir-dashboard-speed mr-2 md:text-3xl"></i>
5056 <a href="index.html">Dashboard</a>
5157 </li>
52- <li>
53- <i class="iconoir-server"></i>
58+ <li class="flex items-center">
59+ <i class="iconoir-server mr-2 md:text-3xl"></i>
5460 <a href="#manager">Manager</a>
5561 </li>
56- <li>
57- <i class="iconoir-community"></i>
62+ <li class="flex items-center">
63+ <i class="iconoir-community mr-2 md:text-3xl"></i>
5864 <a href="#users">Users</a>
5965 </li>
60- <li>
61- <i class="iconoir-database-settings"></i>
66+ <li class="flex items-center">
67+ <i class="iconoir-database-settings mr-2 md:text-3xl"></i>
6268 <a href="#gordon-settings">Settings</a>
6369 </li>
6470 </ul>
6571 </div>
6672
67- <div class="w-full h-24 bg-gray-300 rounded-sm"></div>
73+ <div class="w-full h-24 bg-gordonmascot-mblue rounded-lg"></div>
6874 <!-- Mock menu item -->
6975 </div>
7076 </div>
@@ -19,7 +19,7 @@
19 <!-- Custom JS from assets/js -->19 <!-- Custom JS from assets/js -->
20 <script src="assets/js/custom.js"></script>20 <script src="assets/js/custom.js"></script>
21 </head>21 </head>
22- <body class="bg-zinc-200 md:p-8 flex">22+ <body class="IBMPlexSans bg-zinc-200 md:p-8 flex">
23 <!-- Left Menu -->23 <!-- Left Menu -->
24 <div class="w-1/5 flex flex-col space-evenly">24 <div class="w-1/5 flex flex-col space-evenly">
25 <!-- Logo -->25 <!-- Logo -->
@@ -33,38 +33,44 @@
33 </div>33 </div>
34 </div>34 </div>
35 <!-- Site Name + Version -->35 <!-- Site Name + Version -->
36- <div class="p-4 flex flex-col bg-white rounded-lg shadow space-y-4">36+ <div
37+ class="p-4 flex flex-col bg-gordonmascot-lblue rounded-lg shadow space-y-4"
38+ >
37 <div class="w-full flex justify-center">39 <div class="w-full flex justify-center">
38 <h140 <h1
39- class="gordon-title text-2xl lg:text-4xl xl:text-5xl text-sky-950 font-bold tracking-tighter"41+ class="gordon-title text-2xl lg:text-4xl xl:text-5xl text-gordonmascot-hblue tracking-tighter"
40 >42 >
41 Gordon43 Gordon
42 </h1>44 </h1>
43- <span class="gordon-v-subtitle text-gray-300 text-xs">v0.0.1</span>45+ <span class="gordon-v-subtitle text-gordonmascot-mblue text-sm"
46+ >v0.0.1</span
47+ >
44 </div>48 </div>
45 <!--(Navigation) -->49 <!--(Navigation) -->
46 <div id="menu-leftnav" class="w-full">50 <div id="menu-leftnav" class="w-full">
47- <ul class="flex flex-col space-y-2 leading-3 font-semibold text-sm">51+ <ul
48- <li>52+ class="flex flex-col md:space-y-6 md:py-8 font-semibold text-gray-100 text-lg md:text-2xl md:pl-4"
49- <i class="iconoir-dashboard-speed"></i>53+ >
54+ <li class="flex items-center">
55+ <i class="iconoir-dashboard-speed mr-2 md:text-3xl"></i>
50 <a href="index.html">Dashboard</a>56 <a href="index.html">Dashboard</a>
51 </li>57 </li>
52- <li>58+ <li class="flex items-center">
53- <i class="iconoir-server"></i>59+ <i class="iconoir-server mr-2 md:text-3xl"></i>
54 <a href="#manager">Manager</a>60 <a href="#manager">Manager</a>
55 </li>61 </li>
56- <li>62+ <li class="flex items-center">
57- <i class="iconoir-community"></i>63+ <i class="iconoir-community mr-2 md:text-3xl"></i>
58 <a href="#users">Users</a>64 <a href="#users">Users</a>
59 </li>65 </li>
60- <li>66+ <li class="flex items-center">
61- <i class="iconoir-database-settings"></i>67+ <i class="iconoir-database-settings mr-2 md:text-3xl"></i>
62 <a href="#gordon-settings">Settings</a>68 <a href="#gordon-settings">Settings</a>
63 </li>69 </li>
64 </ul>70 </ul>
65 </div>71 </div>
66 72
67- <div class="w-full h-24 bg-gray-300 rounded-sm"></div>73+ <div class="w-full h-24 bg-gordonmascot-mblue rounded-lg"></div>
68 <!-- Mock menu item -->74 <!-- Mock menu item -->
69 </div>75 </div>
70 </div>76 </div>
M tailwind.config.js +12 -2
@@ -2,7 +2,17 @@
22 module.exports = {
33 content: ["./internal/ui/**/*.{gohtml,go}"],
44 theme: {
5- extend: {},
5+ extend: {
6+ colors: {
7+ gordonmascot: {
8+ lblue: "#007BC0",
9+ mblue: "#005293",
10+ hblue: '#011E5C',
11+ lbeige: "#FFDCB3",
12+ mbeige: '#D7B49F',
13+ },
14+ },
15+ },
616 },
717 plugins: [],
8-}
18+}⏎̸
@@ -2,7 +2,17 @@
2 module.exports = {2 module.exports = {
3 content: ["./internal/ui/**/*.{gohtml,go}"],3 content: ["./internal/ui/**/*.{gohtml,go}"],
4 theme: {4 theme: {
5- extend: {},5+ extend: {
6+ colors: {
7+ gordonmascot: {
8+ lblue: "#007BC0",
9+ mblue: "#005293",
10+ hblue: '#011E5C',
11+ lbeige: "#FFDCB3",
12+ mbeige: '#D7B49F',
13+ },
14+ },
15+ },
6 },16 },
7 plugins: [],17 plugins: [],
8-}18+}⏎̸

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 7

Tags 106

↑↓ moveenter openesc close