Switch from left menu to a top horizontal header. Add some tweakings for mobile/responsive layout
- commit
- 45f9b8668f6c171cc5d194b3eded8e6b51d31ff0
- author
- bnema · · 2023-10-10 09:02 UTC
- parent
- 220ba47
- signature
- unsigned
6 files · +200 -181
M internal/templates/models/html/admin/manager.gohtml +19 -17
| @@ -6,21 +6,23 @@ | |||
| 6 | 6 | <body class="bg-zinc-200 flex flex-col lg:flex-row p-0"> | |
| 7 | 7 | {{template "menu.gohtml" .}} | |
| 8 | 8 | <!-- Main content here --> | |
| 9 | - | <div class="flex-1 flex flex-col space-y-4 p-4 md:ml-4"> | |
| 10 | - | <div class="flex flex-col md:flex-row w-full flex-grow md:mt-24"> | |
| 11 | - | <div class="flex-grow bg-white p-4 rounded-md shadow mb-4"> | |
| 12 | - | <h1 class="text-lg md:text-2xl font-bold">{{index .Lang "manager" "content" "title"}}</h1> | |
| 13 | - | <!-- List all the containers --> | |
| 14 | - | <div | |
| 15 | - | id="container-manager" | |
| 16 | - | hx-get="/htmx/container-manager" | |
| 17 | - | hx-trigger="load" | |
| 18 | - | hx-swap="innerHTML" | |
| 19 | - | hx-swap-oob="true" | |
| 20 | - | hx-target-error="container-manager-error" | |
| 21 | - | hx-poll="5s" | |
| 22 | - | ></div> | |
| 23 | - | <div id="container-manager-error" hidden></div> | |
| 9 | + | <div class="flex-1 flex flex-col space-y-4 pt-16 md:pt-32 md:px-6"> | |
| 10 | + | <div class="flex flex-col md:flex-row w-full flex-grow"> | |
| 11 | + | <div class="flex-grow bg-white p-4 md:rounded-md md:shadow mb-4"> | |
| 12 | + | <h1 class="text-lg md:text-2xl font-bold text-gray-400 IBMPlexSans justify-center text-center"> | |
| 13 | + | {{index .Lang "manager" "content" "title"}} | |
| 14 | + | </h1> | |
| 15 | + | <!-- List all the containers --> | |
| 16 | + | <div | |
| 17 | + | id="container-manager" | |
| 18 | + | hx-get="/htmx/container-manager" | |
| 19 | + | hx-trigger="load" | |
| 20 | + | hx-swap="innerHTML" | |
| 21 | + | hx-swap-oob="true" | |
| 22 | + | hx-target-error="container-manager-error" | |
| 23 | + | hx-poll="5s" | |
| 24 | + | ></div> | |
| 25 | + | <div id="container-manager-error" hidden></div> | |
| 24 | 26 | <!-- List all the images --> | |
| 25 | 27 | <div | |
| 26 | 28 | id="image-manager" | |
| @@ -29,11 +31,11 @@ | |||
| 29 | 31 | hx-swap="innerHTML" | |
| 30 | 32 | hx-swap-oob="true" | |
| 31 | 33 | hx-target-error="image-manager-error" | |
| 32 | - | hx-poll="5s" | |
| 34 | + | hx-poll="5s" | |
| 33 | 35 | ></div> | |
| 34 | 36 | <div id="image-manager-error" hidden></div> | |
| 35 | - | </div> | |
| 36 | 37 | </div> | |
| 38 | + | </div> | |
| 37 | 39 | ||
| 38 | 40 | <!-- footer --> | |
| 39 | 41 | {{template "footer.gohtml" .}} | |
| @@ -6,21 +6,23 @@ | |||||
| 6 | <body class="bg-zinc-200 flex flex-col lg:flex-row p-0"> | 6 | <body class="bg-zinc-200 flex flex-col lg:flex-row p-0"> | ||
| 7 | {{template "menu.gohtml" .}} | 7 | {{template "menu.gohtml" .}} | ||
| 8 | <!-- Main content here --> | 8 | <!-- Main content here --> | ||
| 9 | - | <div class="flex-1 flex flex-col space-y-4 p-4 md:ml-4"> | 9 | + | <div class="flex-1 flex flex-col space-y-4 pt-16 md:pt-32 md:px-6"> |
| 10 | - | <div class="flex flex-col md:flex-row w-full flex-grow md:mt-24"> | 10 | + | <div class="flex flex-col md:flex-row w-full flex-grow"> |
| 11 | - | <div class="flex-grow bg-white p-4 rounded-md shadow mb-4"> | 11 | + | <div class="flex-grow bg-white p-4 md:rounded-md md:shadow mb-4"> |
| 12 | - | <h1 class="text-lg md:text-2xl font-bold">{{index .Lang "manager" "content" "title"}}</h1> | 12 | + | <h1 class="text-lg md:text-2xl font-bold text-gray-400 IBMPlexSans justify-center text-center"> |
| 13 | - | <!-- List all the containers --> | 13 | + | {{index .Lang "manager" "content" "title"}} |
| 14 | - | <div | 14 | + | </h1> |
| 15 | - | id="container-manager" | 15 | + | <!-- List all the containers --> |
| 16 | - | hx-get="/htmx/container-manager" | 16 | + | <div |
| 17 | - | hx-trigger="load" | 17 | + | id="container-manager" |
| 18 | - | hx-swap="innerHTML" | 18 | + | hx-get="/htmx/container-manager" |
| 19 | - | hx-swap-oob="true" | 19 | + | hx-trigger="load" |
| 20 | - | hx-target-error="container-manager-error" | 20 | + | hx-swap="innerHTML" |
| 21 | - | hx-poll="5s" | 21 | + | hx-swap-oob="true" |
| 22 | - | ></div> | 22 | + | hx-target-error="container-manager-error" |
| 23 | - | <div id="container-manager-error" hidden></div> | 23 | + | hx-poll="5s" |
| 24 | + | ></div> | |||
| 25 | + | <div id="container-manager-error" hidden></div> | |||
| 24 | <!-- List all the images --> | 26 | <!-- List all the images --> | ||
| 25 | <div | 27 | <div | ||
| 26 | id="image-manager" | 28 | id="image-manager" | ||
| @@ -29,11 +31,11 @@ | |||||
| 29 | hx-swap="innerHTML" | 31 | hx-swap="innerHTML" | ||
| 30 | hx-swap-oob="true" | 32 | hx-swap-oob="true" | ||
| 31 | hx-target-error="image-manager-error" | 33 | hx-target-error="image-manager-error" | ||
| 32 | - | hx-poll="5s" | 34 | + | hx-poll="5s" |
| 33 | ></div> | 35 | ></div> | ||
| 34 | <div id="image-manager-error" hidden></div> | 36 | <div id="image-manager-error" hidden></div> | ||
| 35 | - | </div> | |||
| 36 | </div> | 37 | </div> | ||
| 38 | + | </div> | |||
| 37 | 39 | ||||
| 38 | <!-- footer --> | 40 | <!-- footer --> | ||
| 39 | {{template "footer.gohtml" .}} | 41 | {{template "footer.gohtml" .}} | ||
M internal/templates/models/html/fragments/containerlist.gohtml +15 -15
| @@ -1,5 +1,5 @@ | |||
| 1 | 1 | <div class="flex flex-col p-4" hx-boost="true"> | |
| 2 | - | <h1 class="text-lg md:text-xl font-bold"> | |
| 2 | + | <h1 class="text-lg md:text-xl font-bold text-gordonmascot-hblue"> | |
| 3 | 3 | {{index .Lang "manager" "content" "h1-containers"}} | |
| 4 | 4 | </h1> | |
| 5 | 5 | <table class="p-4 border-t-2 table-auto" hx-ext="response-targets"> | |
| @@ -38,31 +38,31 @@ | |||
| 38 | 38 | hx-swap="outerHTML" | |
| 39 | 39 | class="py-2 px-4" | |
| 40 | 40 | > | |
| 41 | - | <span class="iconoir-play text-xl font-bold"></span> | |
| 41 | + | <span title="Start the container" class="iconoir-play text-xl text-blue-600 font-bold hover:text-gordonmascot-hblue"></span> | |
| 42 | 42 | </button> | |
| 43 | - | <!-- stop --> | |
| 43 | + | <!-- EDIT --> | |
| 44 | 44 | <button | |
| 45 | - | id="stop-button-{{.ID}}" | |
| 46 | - | hx-post="/htmx/container-manager/stop/{{.ID}}" | |
| 47 | - | hx-target="#container-{{.ID}}" | |
| 45 | + | id="edit-button-{{.ID}}" | |
| 46 | + | hx-get="/htmx/container-manager/edit/{{.ID}}" | |
| 47 | + | hx-target="#edit-container-{{.ID}}" | |
| 48 | 48 | hx-target-*="#error-message-{{.ID}}" | |
| 49 | 49 | hx-swap="innerHTML" | |
| 50 | - | hx-confirm="{{index $Lang "manager" "content" "confirm-container-stop"}}" | |
| 51 | 50 | class="py-2 px-4" | |
| 51 | + | data-active="false" | |
| 52 | 52 | > | |
| 53 | - | <span class="iconoir-system-shut text-xl font-bold"></span> | |
| 53 | + | <span title="Edit the container" class="iconoir-edit text-xl text-blue-600 font-bold hover:text-gordonmascot-hblue"></span> | |
| 54 | 54 | </button> | |
| 55 | - | <!-- EDIT --> | |
| 55 | + | <!-- stop --> | |
| 56 | 56 | <button | |
| 57 | - | id="edit-button-{{.ID}}" | |
| 58 | - | hx-get="/htmx/container-manager/edit/{{.ID}}" | |
| 59 | - | hx-target="#edit-container-{{.ID}}" | |
| 57 | + | id="stop-button-{{.ID}}" | |
| 58 | + | hx-post="/htmx/container-manager/stop/{{.ID}}" | |
| 59 | + | hx-target="#container-{{.ID}}" | |
| 60 | 60 | hx-target-*="#error-message-{{.ID}}" | |
| 61 | 61 | hx-swap="innerHTML" | |
| 62 | + | hx-confirm="{{index $Lang "manager" "content" "confirm-container-stop"}}" | |
| 62 | 63 | class="py-2 px-4" | |
| 63 | - | data-active="false" | |
| 64 | 64 | > | |
| 65 | - | <span class="iconoir-edit text-xl text-blue-600 font-bold"></span> | |
| 65 | + | <span title="Stop the container" class="iconoir-system-shut text-xl text-red-600 font-bold hover:text-red-900"></span> | |
| 66 | 66 | </button> | |
| 67 | 67 | <!-- REMOVE --> | |
| 68 | 68 | <button | |
| @@ -75,7 +75,7 @@ | |||
| 75 | 75 | class="py-2 px-4" | |
| 76 | 76 | > | |
| 77 | 77 | <!-- iconoir trash --> | |
| 78 | - | <span class="iconoir-trash text-xl text-red-600 font-bold"></span> | |
| 78 | + | <span title="Remove the container" class="iconoir-trash text-xl text-red-600 font-bold hover:text-red-900"></span> | |
| 79 | 79 | </button> | |
| 80 | 80 | </td> | |
| 81 | 81 | </tr> | |
| @@ -1,5 +1,5 @@ | |||||
| 1 | <div class="flex flex-col p-4" hx-boost="true"> | 1 | <div class="flex flex-col p-4" hx-boost="true"> | ||
| 2 | - | <h1 class="text-lg md:text-xl font-bold"> | 2 | + | <h1 class="text-lg md:text-xl font-bold text-gordonmascot-hblue"> |
| 3 | {{index .Lang "manager" "content" "h1-containers"}} | 3 | {{index .Lang "manager" "content" "h1-containers"}} | ||
| 4 | </h1> | 4 | </h1> | ||
| 5 | <table class="p-4 border-t-2 table-auto" hx-ext="response-targets"> | 5 | <table class="p-4 border-t-2 table-auto" hx-ext="response-targets"> | ||
| @@ -38,31 +38,31 @@ | |||||
| 38 | hx-swap="outerHTML" | 38 | hx-swap="outerHTML" | ||
| 39 | class="py-2 px-4" | 39 | class="py-2 px-4" | ||
| 40 | > | 40 | > | ||
| 41 | - | <span class="iconoir-play text-xl font-bold"></span> | 41 | + | <span title="Start the container" class="iconoir-play text-xl text-blue-600 font-bold hover:text-gordonmascot-hblue"></span> |
| 42 | </button> | 42 | </button> | ||
| 43 | - | <!-- stop --> | 43 | + | <!-- EDIT --> |
| 44 | <button | 44 | <button | ||
| 45 | - | id="stop-button-{{.ID}}" | 45 | + | id="edit-button-{{.ID}}" |
| 46 | - | hx-post="/htmx/container-manager/stop/{{.ID}}" | 46 | + | hx-get="/htmx/container-manager/edit/{{.ID}}" |
| 47 | - | hx-target="#container-{{.ID}}" | 47 | + | hx-target="#edit-container-{{.ID}}" |
| 48 | hx-target-*="#error-message-{{.ID}}" | 48 | hx-target-*="#error-message-{{.ID}}" | ||
| 49 | hx-swap="innerHTML" | 49 | hx-swap="innerHTML" | ||
| 50 | - | hx-confirm="{{index $Lang "manager" "content" "confirm-container-stop"}}" | |||
| 51 | class="py-2 px-4" | 50 | class="py-2 px-4" | ||
| 51 | + | data-active="false" | |||
| 52 | > | 52 | > | ||
| 53 | - | <span class="iconoir-system-shut text-xl font-bold"></span> | 53 | + | <span title="Edit the container" class="iconoir-edit text-xl text-blue-600 font-bold hover:text-gordonmascot-hblue"></span> |
| 54 | </button> | 54 | </button> | ||
| 55 | - | <!-- EDIT --> | 55 | + | <!-- stop --> |
| 56 | <button | 56 | <button | ||
| 57 | - | id="edit-button-{{.ID}}" | 57 | + | id="stop-button-{{.ID}}" |
| 58 | - | hx-get="/htmx/container-manager/edit/{{.ID}}" | 58 | + | hx-post="/htmx/container-manager/stop/{{.ID}}" |
| 59 | - | hx-target="#edit-container-{{.ID}}" | 59 | + | hx-target="#container-{{.ID}}" |
| 60 | hx-target-*="#error-message-{{.ID}}" | 60 | hx-target-*="#error-message-{{.ID}}" | ||
| 61 | hx-swap="innerHTML" | 61 | hx-swap="innerHTML" | ||
| 62 | + | hx-confirm="{{index $Lang "manager" "content" "confirm-container-stop"}}" | |||
| 62 | class="py-2 px-4" | 63 | class="py-2 px-4" | ||
| 63 | - | data-active="false" | |||
| 64 | > | 64 | > | ||
| 65 | - | <span class="iconoir-edit text-xl text-blue-600 font-bold"></span> | 65 | + | <span title="Stop the container" class="iconoir-system-shut text-xl text-red-600 font-bold hover:text-red-900"></span> |
| 66 | </button> | 66 | </button> | ||
| 67 | <!-- REMOVE --> | 67 | <!-- REMOVE --> | ||
| 68 | <button | 68 | <button | ||
| @@ -75,7 +75,7 @@ | |||||
| 75 | class="py-2 px-4" | 75 | class="py-2 px-4" | ||
| 76 | > | 76 | > | ||
| 77 | <!-- iconoir trash --> | 77 | <!-- iconoir trash --> | ||
| 78 | - | <span class="iconoir-trash text-xl text-red-600 font-bold"></span> | 78 | + | <span title="Remove the container" class="iconoir-trash text-xl text-red-600 font-bold hover:text-red-900"></span> |
| 79 | </button> | 79 | </button> | ||
| 80 | </td> | 80 | </td> | ||
| 81 | </tr> | 81 | </tr> | ||
M internal/templates/models/html/fragments/imagelist.gohtml +1 -1
| @@ -1,7 +1,7 @@ | |||
| 1 | 1 | <div class="flex flex-col p-4"> | |
| 2 | 2 | <!-- Upload button aligned right of Images --> | |
| 3 | 3 | <div class="flex justify-between items-center mb-1"> | |
| 4 | - | <h1 class="text-lg md:text-xl font-bold">Images</h1> | |
| 4 | + | <h1 class="text-lg md:text-xl font-bold text-gordonmascot-hblue">Images</h1> | |
| 5 | 5 | <button | |
| 6 | 6 | id="upload-button" | |
| 7 | 7 | hx-get="/htmx/upload-image" | |
| @@ -1,7 +1,7 @@ | |||||
| 1 | <div class="flex flex-col p-4"> | 1 | <div class="flex flex-col p-4"> | ||
| 2 | <!-- Upload button aligned right of Images --> | 2 | <!-- Upload button aligned right of Images --> | ||
| 3 | <div class="flex justify-between items-center mb-1"> | 3 | <div class="flex justify-between items-center mb-1"> | ||
| 4 | - | <h1 class="text-lg md:text-xl font-bold">Images</h1> | 4 | + | <h1 class="text-lg md:text-xl font-bold text-gordonmascot-hblue">Images</h1> |
| 5 | <button | 5 | <button | ||
| 6 | id="upload-button" | 6 | id="upload-button" | ||
| 7 | hx-get="/htmx/upload-image" | 7 | hx-get="/htmx/upload-image" | ||
M internal/templates/models/html/fragments/menu.gohtml +48 -57
| @@ -1,60 +1,51 @@ | |||
| 1 | - | <div id="menubar" class="lg:w-64 w-full"> | |
| 2 | - | <div class="hidden lg:flex justify-center p-4"> | |
| 3 | - | <img src="/assets/imgs/gordon-mascot-hq-trsp.png" alt="logo" class="h-32" /> | |
| 1 | + | <div | |
| 2 | + | id="menubar" | |
| 3 | + | class="w-full h-12 md:h-16 fixed top-0 left-0 bg-gordonmascot-lblue flex flex-row justify-evenly items-center px-4 IBMPlexSans" | |
| 4 | + | > | |
| 5 | + | <div class="w-full flex justify-start"> | |
| 6 | + | <h1 | |
| 7 | + | class="gordon-title text-3xl md:text-4xl text-gordonmascot-hblue tracking-tighter" | |
| 8 | + | > | |
| 9 | + | Gordon | |
| 10 | + | </h1> | |
| 11 | + | <span | |
| 12 | + | class="text-gordonmascot-mblue text-xs md:text-sm" | |
| 13 | + | >{{ .BuildVersion }}</span | |
| 14 | + | > | |
| 4 | 15 | </div> | |
| 5 | - | <div | |
| 6 | - | class="p-4 xl:p-8 flex flex-col bg-gordonmascot-lblue rounded-lg shadow space-y-4" | |
| 7 | - | > | |
| 8 | - | <div class="w-full flex justify-center"> | |
| 9 | - | <h1 | |
| 10 | - | class="gordon-title text-5xl text-gordonmascot-hblue tracking-tighter" | |
| 11 | - | > | |
| 12 | - | Gordon | |
| 13 | - | </h1> | |
| 14 | - | <span class="text-gordonmascot-mblue text-sm">{{ .BuildVersion }}</span> | |
| 15 | - | </div> | |
| 16 | - | <div class="w-full"> | |
| 17 | - | <ul | |
| 18 | - | class="flex flex-wrap lg:flex-col lg:space-y-6 lg:py-8 font-semibold text-gray-100 text-lg min-w-fit justify-center" | |
| 19 | - | > | |
| 20 | - | <li class="flex items-center lg:justify-start w-1/2 lg:w-full"> | |
| 21 | - | <i class="iconoir-dashboard-speed mr-2 text-3xl"></i> | |
| 22 | - | <a href="/admin">Dashboard</a> | |
| 23 | - | </li> | |
| 24 | - | <li class="flex items-center lg:justify-start w-1/2 lg:w-full"> | |
| 25 | - | <i class="iconoir-server mr-2 text-3xl"></i> | |
| 26 | - | <a href="/admin/manager">Manager</a> | |
| 27 | - | </li> | |
| 28 | - | <li | |
| 29 | - | class="flex items-center w-1/2 lg:w-full text-gray-600" | |
| 30 | - | style="display: none" | |
| 31 | - | > | |
| 32 | - | <i class="iconoir-community mr-2 text-3xl"></i> | |
| 33 | - | <a title="Disabled" href="#">Users</a> | |
| 34 | - | </li> | |
| 35 | - | <li | |
| 36 | - | class="flex items-center w-1/2 lg:w-full text-gray-600" | |
| 37 | - | style="display: none" | |
| 38 | - | > | |
| 39 | - | <i class="iconoir-database-settings mr-2 text-3xl"></i> | |
| 40 | - | <a title="Disabled" href="#">Settings</a> | |
| 41 | - | </li> | |
| 42 | - | </ul> | |
| 43 | - | </div> | |
| 44 | - | <!-- Settings / Logout on the same line --> | |
| 45 | - | <div class="w-full flex justify-center space-x-4"> | |
| 46 | - | <a | |
| 47 | - | href="/admin/settings" | |
| 48 | - | title="User settings" | |
| 49 | - | class="iconoir-settings text-gordonmascot-mblue text-lg md:text-2xl" | |
| 50 | - | > | |
| 51 | - | </a> | |
| 52 | - | <a | |
| 53 | - | href="/admin/logout" | |
| 54 | - | title="Logout" | |
| 55 | - | class="iconoir-log-out text-gordonmascot-mblue text-lg md:text-2xl" | |
| 56 | - | > | |
| 57 | - | </a> | |
| 58 | - | </div> | |
| 16 | + | <div class="w-full"> | |
| 17 | + | <ul | |
| 18 | + | class="flex flex-row space-y-6 font-semibold text-gray-100 text-lg md:text-xl justify-center" | |
| 19 | + | > | |
| 20 | + | <li class=""> | |
| 21 | + | <span class="JetBrainsMonoBoldNF pr-1"> </span> | |
| 22 | + | <a href="/admin/manager">Manager</a> | |
| 23 | + | </li> | |
| 24 | + | </ul> | |
| 25 | + | </div> | |
| 26 | + | <div class="w-full flex space-x-4 justify-end"> | |
| 27 | + | <a | |
| 28 | + | href="/admin/settings" | |
| 29 | + | title="User settings" | |
| 30 | + | class="iconoir-settings text-gordonmascot-mblue text-lg md:text-2xl" | |
| 31 | + | ></a> | |
| 32 | + | <a | |
| 33 | + | href="/admin/logout" | |
| 34 | + | title="Logout" | |
| 35 | + | class="iconoir-log-out text-gordonmascot-mblue text-lg md:text-2xl" | |
| 36 | + | ></a> | |
| 59 | 37 | </div> | |
| 60 | 38 | </div> | |
| 39 | + | ||
| 40 | + | <!-- <li class="" hidden> | |
| 41 | + | <i class="iconoir-dashboard-speed mr-2 text-3xl"></i> | |
| 42 | + | <a href="/admin">Dashboard</a> | |
| 43 | + | </li> | |
| 44 | + | <li class="flex items-center justify-start w-full text-gray-600" hidden> | |
| 45 | + | <i class="iconoir-community mr-2 text-3xl"></i> | |
| 46 | + | <a title="Disabled" href="#">Users</a> | |
| 47 | + | </li> | |
| 48 | + | <li class="flex items-center justify-start w-full text-gray-600" hidden> | |
| 49 | + | <i class="iconoir-database-settings mr-2 text-3xl"></i> | |
| 50 | + | <a title="Disabled" href="#">Settings</a> | |
| 51 | + | </li> --> | |
| @@ -1,60 +1,51 @@ | |||||
| 1 | - | <div id="menubar" class="lg:w-64 w-full"> | 1 | + | <div |
| 2 | - | <div class="hidden lg:flex justify-center p-4"> | 2 | + | id="menubar" |
| 3 | - | <img src="/assets/imgs/gordon-mascot-hq-trsp.png" alt="logo" class="h-32" /> | 3 | + | class="w-full h-12 md:h-16 fixed top-0 left-0 bg-gordonmascot-lblue flex flex-row justify-evenly items-center px-4 IBMPlexSans" |
| 4 | + | > | |||
| 5 | + | <div class="w-full flex justify-start"> | |||
| 6 | + | <h1 | |||
| 7 | + | class="gordon-title text-3xl md:text-4xl text-gordonmascot-hblue tracking-tighter" | |||
| 8 | + | > | |||
| 9 | + | Gordon | |||
| 10 | + | </h1> | |||
| 11 | + | <span | |||
| 12 | + | class="text-gordonmascot-mblue text-xs md:text-sm" | |||
| 13 | + | >{{ .BuildVersion }}</span | |||
| 14 | + | > | |||
| 4 | </div> | 15 | </div> | ||
| 5 | - | <div | 16 | + | <div class="w-full"> |
| 6 | - | class="p-4 xl:p-8 flex flex-col bg-gordonmascot-lblue rounded-lg shadow space-y-4" | 17 | + | <ul |
| 7 | - | > | 18 | + | class="flex flex-row space-y-6 font-semibold text-gray-100 text-lg md:text-xl justify-center" |
| 8 | - | <div class="w-full flex justify-center"> | 19 | + | > |
| 9 | - | <h1 | 20 | + | <li class=""> |
| 10 | - | class="gordon-title text-5xl text-gordonmascot-hblue tracking-tighter" | 21 | + | <span class="JetBrainsMonoBoldNF pr-1"> </span> |
| 11 | - | > | 22 | + | <a href="/admin/manager">Manager</a> |
| 12 | - | Gordon | 23 | + | </li> |
| 13 | - | </h1> | 24 | + | </ul> |
| 14 | - | <span class="text-gordonmascot-mblue text-sm">{{ .BuildVersion }}</span> | 25 | + | </div> |
| 15 | - | </div> | 26 | + | <div class="w-full flex space-x-4 justify-end"> |
| 16 | - | <div class="w-full"> | 27 | + | <a |
| 17 | - | <ul | 28 | + | href="/admin/settings" |
| 18 | - | class="flex flex-wrap lg:flex-col lg:space-y-6 lg:py-8 font-semibold text-gray-100 text-lg min-w-fit justify-center" | 29 | + | title="User settings" |
| 19 | - | > | 30 | + | class="iconoir-settings text-gordonmascot-mblue text-lg md:text-2xl" |
| 20 | - | <li class="flex items-center lg:justify-start w-1/2 lg:w-full"> | 31 | + | ></a> |
| 21 | - | <i class="iconoir-dashboard-speed mr-2 text-3xl"></i> | 32 | + | <a |
| 22 | - | <a href="/admin">Dashboard</a> | 33 | + | href="/admin/logout" |
| 23 | - | </li> | 34 | + | title="Logout" |
| 24 | - | <li class="flex items-center lg:justify-start w-1/2 lg:w-full"> | 35 | + | class="iconoir-log-out text-gordonmascot-mblue text-lg md:text-2xl" |
| 25 | - | <i class="iconoir-server mr-2 text-3xl"></i> | 36 | + | ></a> |
| 26 | - | <a href="/admin/manager">Manager</a> | |||
| 27 | - | </li> | |||
| 28 | - | <li | |||
| 29 | - | class="flex items-center w-1/2 lg:w-full text-gray-600" | |||
| 30 | - | style="display: none" | |||
| 31 | - | > | |||
| 32 | - | <i class="iconoir-community mr-2 text-3xl"></i> | |||
| 33 | - | <a title="Disabled" href="#">Users</a> | |||
| 34 | - | </li> | |||
| 35 | - | <li | |||
| 36 | - | class="flex items-center w-1/2 lg:w-full text-gray-600" | |||
| 37 | - | style="display: none" | |||
| 38 | - | > | |||
| 39 | - | <i class="iconoir-database-settings mr-2 text-3xl"></i> | |||
| 40 | - | <a title="Disabled" href="#">Settings</a> | |||
| 41 | - | </li> | |||
| 42 | - | </ul> | |||
| 43 | - | </div> | |||
| 44 | - | <!-- Settings / Logout on the same line --> | |||
| 45 | - | <div class="w-full flex justify-center space-x-4"> | |||
| 46 | - | <a | |||
| 47 | - | href="/admin/settings" | |||
| 48 | - | title="User settings" | |||
| 49 | - | class="iconoir-settings text-gordonmascot-mblue text-lg md:text-2xl" | |||
| 50 | - | > | |||
| 51 | - | </a> | |||
| 52 | - | <a | |||
| 53 | - | href="/admin/logout" | |||
| 54 | - | title="Logout" | |||
| 55 | - | class="iconoir-log-out text-gordonmascot-mblue text-lg md:text-2xl" | |||
| 56 | - | > | |||
| 57 | - | </a> | |||
| 58 | - | </div> | |||
| 59 | </div> | 37 | </div> | ||
| 60 | </div> | 38 | </div> | ||
| 39 | + | ||||
| 40 | + | <!-- <li class="" hidden> | |||
| 41 | + | <i class="iconoir-dashboard-speed mr-2 text-3xl"></i> | |||
| 42 | + | <a href="/admin">Dashboard</a> | |||
| 43 | + | </li> | |||
| 44 | + | <li class="flex items-center justify-start w-full text-gray-600" hidden> | |||
| 45 | + | <i class="iconoir-community mr-2 text-3xl"></i> | |||
| 46 | + | <a title="Disabled" href="#">Users</a> | |||
| 47 | + | </li> | |||
| 48 | + | <li class="flex items-center justify-start w-full text-gray-600" hidden> | |||
| 49 | + | <i class="iconoir-database-settings mr-2 text-3xl"></i> | |||
| 50 | + | <a title="Disabled" href="#">Settings</a> | |||
| 51 | + | </li> --> | |||
M internal/webui/public/assets/css/custom.css +14 -20
| @@ -28,12 +28,20 @@ | |||
| 28 | 28 | /* Import Jetbrains Mono Nerd Font */ | |
| 29 | 29 | @font-face { | |
| 30 | 30 | font-family: "JetBrainsMono-Nerd-Font-Regular"; | |
| 31 | - | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2") | |
| 31 | + | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFont-Regular.woff2") | |
| 32 | 32 | format("woff2"); | |
| 33 | 33 | font-weight: normal; | |
| 34 | 34 | font-style: normal; | |
| 35 | 35 | } | |
| 36 | 36 | ||
| 37 | + | /* Import Jetbrains Mono Nerd Font Bold */ | |
| 38 | + | @font-face { | |
| 39 | + | font-family: "JetBrainsMono-Nerd-Font-Bold"; | |
| 40 | + | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFont-Bold.woff2") format("woff2"); | |
| 41 | + | font-weight: bold; | |
| 42 | + | font-style: normal; | |
| 43 | + | } | |
| 44 | + | ||
| 37 | 45 | @font-face { | |
| 38 | 46 | font-family: "LilitaOne-Regular"; | |
| 39 | 47 | src: url("/assets/fonts/LilitaOne/LilitaOne-Regular.ttf") format("truetype"); | |
| @@ -93,24 +101,10 @@ | |||
| 93 | 101 | font-family: "IBMPlexSans-Regular", sans-serif; | |
| 94 | 102 | } | |
| 95 | 103 | ||
| 96 | - | .circle-shadow { | |
| 97 | - | width: 100%; | |
| 98 | - | position: relative; | |
| 99 | - | } | |
| 100 | - | ||
| 101 | - | .circle-shadow::after { | |
| 102 | - | position: absolute; | |
| 103 | - | width: 50%; | |
| 104 | - | height: 0.4rem; | |
| 105 | - | margin: auto; | |
| 106 | - | background: rgba(0, 0, 0, 0.1); | |
| 107 | - | border-radius: 50%; | |
| 108 | - | z-index: -1; | |
| 109 | - | bottom: 2%; | |
| 110 | - | content: ""; | |
| 111 | - | box-shadow: 0 0 1px 0.3rem rgba(0, 0, 0, 0.1); | |
| 104 | + | .JetBrainsMonoNF { | |
| 105 | + | font-family: "JetBrainsMono-Nerd-Font-Regular", sans-serif; | |
| 112 | 106 | } | |
| 113 | 107 | ||
| 114 | - | .iconoir { | |
| 115 | - | margin-right: 8px; | |
| 116 | - | } | |
| 108 | + | .JetBrainsMonoBoldNF { | |
| 109 | + | font-family: "JetBrainsMono-Nerd-Font-Bold", sans-serif; | |
| 110 | + | }⏎̸ | |
| @@ -28,12 +28,20 @@ | |||||
| 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/JetBrainsMonoNerdFont-Regular.woff2") |
| 32 | format("woff2"); | 32 | format("woff2"); | ||
| 33 | font-weight: normal; | 33 | font-weight: normal; | ||
| 34 | font-style: normal; | 34 | font-style: normal; | ||
| 35 | } | 35 | } | ||
| 36 | 36 | ||||
| 37 | + | /* Import Jetbrains Mono Nerd Font Bold */ | |||
| 38 | + | @font-face { | |||
| 39 | + | font-family: "JetBrainsMono-Nerd-Font-Bold"; | |||
| 40 | + | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFont-Bold.woff2") format("woff2"); | |||
| 41 | + | font-weight: bold; | |||
| 42 | + | font-style: normal; | |||
| 43 | + | } | |||
| 44 | + | ||||
| 37 | @font-face { | 45 | @font-face { | ||
| 38 | font-family: "LilitaOne-Regular"; | 46 | font-family: "LilitaOne-Regular"; | ||
| 39 | src: url("/assets/fonts/LilitaOne/LilitaOne-Regular.ttf") format("truetype"); | 47 | src: url("/assets/fonts/LilitaOne/LilitaOne-Regular.ttf") format("truetype"); | ||
| @@ -93,24 +101,10 @@ | |||||
| 93 | font-family: "IBMPlexSans-Regular", sans-serif; | 101 | font-family: "IBMPlexSans-Regular", sans-serif; | ||
| 94 | } | 102 | } | ||
| 95 | 103 | ||||
| 96 | - | .circle-shadow { | 104 | + | .JetBrainsMonoNF { |
| 97 | - | width: 100%; | 105 | + | font-family: "JetBrainsMono-Nerd-Font-Regular", sans-serif; |
| 98 | - | position: relative; | |||
| 99 | - | } | |||
| 100 | - | ||||
| 101 | - | .circle-shadow::after { | |||
| 102 | - | position: absolute; | |||
| 103 | - | width: 50%; | |||
| 104 | - | height: 0.4rem; | |||
| 105 | - | margin: auto; | |||
| 106 | - | background: rgba(0, 0, 0, 0.1); | |||
| 107 | - | border-radius: 50%; | |||
| 108 | - | z-index: -1; | |||
| 109 | - | bottom: 2%; | |||
| 110 | - | content: ""; | |||
| 111 | - | box-shadow: 0 0 1px 0.3rem rgba(0, 0, 0, 0.1); | |||
| 112 | } | 106 | } | ||
| 113 | 107 | ||||
| 114 | - | .iconoir { | 108 | + | .JetBrainsMonoBoldNF { |
| 115 | - | margin-right: 8px; | 109 | + | font-family: "JetBrainsMono-Nerd-Font-Bold", sans-serif; |
| 116 | - | } | 110 | + | }⏎̸ |
M internal/webui/public/assets/css/tailwind.css +103 -71
| @@ -575,6 +575,18 @@ video { | |||
| 575 | 575 | } | |
| 576 | 576 | } | |
| 577 | 577 | ||
| 578 | + | .fixed { | |
| 579 | + | position: fixed; | |
| 580 | + | } | |
| 581 | + | ||
| 582 | + | .left-0 { | |
| 583 | + | left: 0px; | |
| 584 | + | } | |
| 585 | + | ||
| 586 | + | .top-0 { | |
| 587 | + | top: 0px; | |
| 588 | + | } | |
| 589 | + | ||
| 578 | 590 | .my-2 { | |
| 579 | 591 | margin-top: 0.5rem; | |
| 580 | 592 | margin-bottom: 0.5rem; | |
| @@ -624,6 +636,10 @@ video { | |||
| 624 | 636 | height: 2.5rem; | |
| 625 | 637 | } | |
| 626 | 638 | ||
| 639 | + | .h-12 { | |
| 640 | + | height: 3rem; | |
| 641 | + | } | |
| 642 | + | ||
| 627 | 643 | .h-32 { | |
| 628 | 644 | height: 8rem; | |
| 629 | 645 | } | |
| @@ -644,10 +660,6 @@ video { | |||
| 644 | 660 | height: 100%; | |
| 645 | 661 | } | |
| 646 | 662 | ||
| 647 | - | .w-1\/2 { | |
| 648 | - | width: 50%; | |
| 649 | - | } | |
| 650 | - | ||
| 651 | 663 | .w-1\/3 { | |
| 652 | 664 | width: 33.333333%; | |
| 653 | 665 | } | |
| @@ -672,11 +684,6 @@ video { | |||
| 672 | 684 | width: 100%; | |
| 673 | 685 | } | |
| 674 | 686 | ||
| 675 | - | .min-w-fit { | |
| 676 | - | min-width: -moz-fit-content; | |
| 677 | - | min-width: fit-content; | |
| 678 | - | } | |
| 679 | - | ||
| 680 | 687 | .flex-1 { | |
| 681 | 688 | flex: 1 1 0%; | |
| 682 | 689 | } | |
| @@ -701,14 +708,14 @@ video { | |||
| 701 | 708 | flex-direction: column; | |
| 702 | 709 | } | |
| 703 | 710 | ||
| 704 | - | .flex-wrap { | |
| 705 | - | flex-wrap: wrap; | |
| 706 | - | } | |
| 707 | - | ||
| 708 | 711 | .items-center { | |
| 709 | 712 | align-items: center; | |
| 710 | 713 | } | |
| 711 | 714 | ||
| 715 | + | .justify-start { | |
| 716 | + | justify-content: flex-start; | |
| 717 | + | } | |
| 718 | + | ||
| 712 | 719 | .justify-end { | |
| 713 | 720 | justify-content: flex-end; | |
| 714 | 721 | } | |
| @@ -721,6 +728,10 @@ video { | |||
| 721 | 728 | justify-content: space-between; | |
| 722 | 729 | } | |
| 723 | 730 | ||
| 731 | + | .justify-evenly { | |
| 732 | + | justify-content: space-evenly; | |
| 733 | + | } | |
| 734 | + | ||
| 724 | 735 | .justify-items-center { | |
| 725 | 736 | justify-items: center; | |
| 726 | 737 | } | |
| @@ -743,6 +754,12 @@ video { | |||
| 743 | 754 | margin-bottom: calc(1rem * var(--tw-space-y-reverse)); | |
| 744 | 755 | } | |
| 745 | 756 | ||
| 757 | + | .space-y-6 > :not([hidden]) ~ :not([hidden]) { | |
| 758 | + | --tw-space-y-reverse: 0; | |
| 759 | + | margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); | |
| 760 | + | margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); | |
| 761 | + | } | |
| 762 | + | ||
| 746 | 763 | .rounded { | |
| 747 | 764 | border-radius: 0.25rem; | |
| 748 | 765 | } | |
| @@ -866,6 +883,14 @@ video { | |||
| 866 | 883 | padding-bottom: 1rem; | |
| 867 | 884 | } | |
| 868 | 885 | ||
| 886 | + | .pr-1 { | |
| 887 | + | padding-right: 0.25rem; | |
| 888 | + | } | |
| 889 | + | ||
| 890 | + | .pt-16 { | |
| 891 | + | padding-top: 4rem; | |
| 892 | + | } | |
| 893 | + | ||
| 869 | 894 | .text-center { | |
| 870 | 895 | text-align: center; | |
| 871 | 896 | } | |
| @@ -909,6 +934,11 @@ video { | |||
| 909 | 934 | line-height: 1.75rem; | |
| 910 | 935 | } | |
| 911 | 936 | ||
| 937 | + | .text-xs { | |
| 938 | + | font-size: 0.75rem; | |
| 939 | + | line-height: 1rem; | |
| 940 | + | } | |
| 941 | + | ||
| 912 | 942 | .font-bold { | |
| 913 | 943 | font-weight: 700; | |
| 914 | 944 | } | |
| @@ -1024,7 +1054,7 @@ video { | |||
| 1024 | 1054 | @font-face { | |
| 1025 | 1055 | font-family: "JetBrainsMono-Nerd-Font-Regular"; | |
| 1026 | 1056 | ||
| 1027 | - | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2") | |
| 1057 | + | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFont-Regular.woff2") | |
| 1028 | 1058 | format("woff2"); | |
| 1029 | 1059 | ||
| 1030 | 1060 | font-weight: normal; | |
| @@ -1032,6 +1062,18 @@ video { | |||
| 1032 | 1062 | font-style: normal; | |
| 1033 | 1063 | } | |
| 1034 | 1064 | ||
| 1065 | + | /* Import Jetbrains Mono Nerd Font Bold */ | |
| 1066 | + | ||
| 1067 | + | @font-face { | |
| 1068 | + | font-family: "JetBrainsMono-Nerd-Font-Bold"; | |
| 1069 | + | ||
| 1070 | + | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFont-Bold.woff2") format("woff2"); | |
| 1071 | + | ||
| 1072 | + | font-weight: bold; | |
| 1073 | + | ||
| 1074 | + | font-style: normal; | |
| 1075 | + | } | |
| 1076 | + | ||
| 1035 | 1077 | @font-face { | |
| 1036 | 1078 | font-family: "LilitaOne-Regular"; | |
| 1037 | 1079 | ||
| @@ -1095,26 +1137,12 @@ video { | |||
| 1095 | 1137 | font-family: "IBMPlexSans-Regular", sans-serif; | |
| 1096 | 1138 | } | |
| 1097 | 1139 | ||
| 1098 | - | .circle-shadow { | |
| 1099 | - | width: 100%; | |
| 1100 | - | position: relative; | |
| 1101 | - | } | |
| 1102 | - | ||
| 1103 | - | .circle-shadow::after { | |
| 1104 | - | position: absolute; | |
| 1105 | - | width: 50%; | |
| 1106 | - | height: 0.4rem; | |
| 1107 | - | margin: auto; | |
| 1108 | - | background: rgba(0, 0, 0, 0.1); | |
| 1109 | - | border-radius: 50%; | |
| 1110 | - | z-index: -1; | |
| 1111 | - | bottom: 2%; | |
| 1112 | - | content: ""; | |
| 1113 | - | box-shadow: 0 0 1px 0.3rem rgba(0, 0, 0, 0.1); | |
| 1140 | + | .JetBrainsMonoNF { | |
| 1141 | + | font-family: "JetBrainsMono-Nerd-Font-Regular", sans-serif; | |
| 1114 | 1142 | } | |
| 1115 | 1143 | ||
| 1116 | - | .iconoir { | |
| 1117 | - | margin-right: 8px; | |
| 1144 | + | .JetBrainsMonoBoldNF { | |
| 1145 | + | font-family: "JetBrainsMono-Nerd-Font-Bold", sans-serif; | |
| 1118 | 1146 | } | |
| 1119 | 1147 | ||
| 1120 | 1148 | .hover\:bg-blue-700:hover { | |
| @@ -1127,6 +1155,16 @@ video { | |||
| 1127 | 1155 | background-color: rgb(0 82 147 / var(--tw-bg-opacity)); | |
| 1128 | 1156 | } | |
| 1129 | 1157 | ||
| 1158 | + | .hover\:text-gordonmascot-hblue:hover { | |
| 1159 | + | --tw-text-opacity: 1; | |
| 1160 | + | color: rgb(1 30 92 / var(--tw-text-opacity)); | |
| 1161 | + | } | |
| 1162 | + | ||
| 1163 | + | .hover\:text-red-900:hover { | |
| 1164 | + | --tw-text-opacity: 1; | |
| 1165 | + | color: rgb(127 29 29 / var(--tw-text-opacity)); | |
| 1166 | + | } | |
| 1167 | + | ||
| 1130 | 1168 | @media (min-width: 640px) { | |
| 1131 | 1169 | .sm\:h-24 { | |
| 1132 | 1170 | height: 6rem; | |
| @@ -1138,14 +1176,14 @@ video { | |||
| 1138 | 1176 | margin-left: 1rem; | |
| 1139 | 1177 | } | |
| 1140 | 1178 | ||
| 1141 | - | .md\:mt-24 { | |
| 1142 | - | margin-top: 6rem; | |
| 1143 | - | } | |
| 1144 | - | ||
| 1145 | 1179 | .md\:flex { | |
| 1146 | 1180 | display: flex; | |
| 1147 | 1181 | } | |
| 1148 | 1182 | ||
| 1183 | + | .md\:h-16 { | |
| 1184 | + | height: 4rem; | |
| 1185 | + | } | |
| 1186 | + | ||
| 1149 | 1187 | .md\:w-1\/2 { | |
| 1150 | 1188 | width: 50%; | |
| 1151 | 1189 | } | |
| @@ -1170,6 +1208,10 @@ video { | |||
| 1170 | 1208 | margin-bottom: calc(0px * var(--tw-space-y-reverse)); | |
| 1171 | 1209 | } | |
| 1172 | 1210 | ||
| 1211 | + | .md\:rounded-md { | |
| 1212 | + | border-radius: 0.375rem; | |
| 1213 | + | } | |
| 1214 | + | ||
| 1173 | 1215 | .md\:p-0 { | |
| 1174 | 1216 | padding: 0px; | |
| 1175 | 1217 | } | |
| @@ -1178,57 +1220,51 @@ video { | |||
| 1178 | 1220 | padding: 2rem; | |
| 1179 | 1221 | } | |
| 1180 | 1222 | ||
| 1223 | + | .md\:px-6 { | |
| 1224 | + | padding-left: 1.5rem; | |
| 1225 | + | padding-right: 1.5rem; | |
| 1226 | + | } | |
| 1227 | + | ||
| 1181 | 1228 | .md\:pt-10 { | |
| 1182 | 1229 | padding-top: 2.5rem; | |
| 1183 | 1230 | } | |
| 1184 | 1231 | ||
| 1232 | + | .md\:pt-32 { | |
| 1233 | + | padding-top: 8rem; | |
| 1234 | + | } | |
| 1235 | + | ||
| 1185 | 1236 | .md\:text-2xl { | |
| 1186 | 1237 | font-size: 1.5rem; | |
| 1187 | 1238 | line-height: 2rem; | |
| 1188 | 1239 | } | |
| 1189 | 1240 | ||
| 1190 | - | .md\:text-xl { | |
| 1191 | - | font-size: 1.25rem; | |
| 1192 | - | line-height: 1.75rem; | |
| 1241 | + | .md\:text-4xl { | |
| 1242 | + | font-size: 2.25rem; | |
| 1243 | + | line-height: 2.5rem; | |
| 1193 | 1244 | } | |
| 1194 | - | } | |
| 1195 | 1245 | ||
| 1196 | - | @media (min-width: 1024px) { | |
| 1197 | - | .lg\:flex { | |
| 1198 | - | display: flex; | |
| 1246 | + | .md\:text-sm { | |
| 1247 | + | font-size: 0.875rem; | |
| 1248 | + | line-height: 1.25rem; | |
| 1199 | 1249 | } | |
| 1200 | 1250 | ||
| 1201 | - | .lg\:w-64 { | |
| 1202 | - | width: 16rem; | |
| 1251 | + | .md\:text-xl { | |
| 1252 | + | font-size: 1.25rem; | |
| 1253 | + | line-height: 1.75rem; | |
| 1203 | 1254 | } | |
| 1204 | 1255 | ||
| 1205 | - | .lg\:w-full { | |
| 1206 | - | width: 100%; | |
| 1256 | + | .md\:shadow { | |
| 1257 | + | --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); | |
| 1258 | + | --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); | |
| 1259 | + | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); | |
| 1207 | 1260 | } | |
| 1261 | + | } | |
| 1208 | 1262 | ||
| 1263 | + | @media (min-width: 1024px) { | |
| 1209 | 1264 | .lg\:flex-row { | |
| 1210 | 1265 | flex-direction: row; | |
| 1211 | 1266 | } | |
| 1212 | 1267 | ||
| 1213 | - | .lg\:flex-col { | |
| 1214 | - | flex-direction: column; | |
| 1215 | - | } | |
| 1216 | - | ||
| 1217 | - | .lg\:justify-start { | |
| 1218 | - | justify-content: flex-start; | |
| 1219 | - | } | |
| 1220 | - | ||
| 1221 | - | .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) { | |
| 1222 | - | --tw-space-y-reverse: 0; | |
| 1223 | - | margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); | |
| 1224 | - | margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); | |
| 1225 | - | } | |
| 1226 | - | ||
| 1227 | - | .lg\:py-8 { | |
| 1228 | - | padding-top: 2rem; | |
| 1229 | - | padding-bottom: 2rem; | |
| 1230 | - | } | |
| 1231 | - | ||
| 1232 | 1268 | .lg\:text-4xl { | |
| 1233 | 1269 | font-size: 2.25rem; | |
| 1234 | 1270 | line-height: 2.5rem; | |
| @@ -1244,12 +1280,8 @@ video { | |||
| 1244 | 1280 | height: 12rem; | |
| 1245 | 1281 | } | |
| 1246 | 1282 | ||
| 1247 | - | .xl\:p-8 { | |
| 1248 | - | padding: 2rem; | |
| 1249 | - | } | |
| 1250 | - | ||
| 1251 | 1283 | .xl\:text-5xl { | |
| 1252 | 1284 | font-size: 3rem; | |
| 1253 | 1285 | line-height: 1; | |
| 1254 | 1286 | } | |
| 1255 | - | } | |
| 1287 | + | }⏎̸ | |
| @@ -575,6 +575,18 @@ video { | |||||
| 575 | } | 575 | } | ||
| 576 | } | 576 | } | ||
| 577 | 577 | ||||
| 578 | + | .fixed { | |||
| 579 | + | position: fixed; | |||
| 580 | + | } | |||
| 581 | + | ||||
| 582 | + | .left-0 { | |||
| 583 | + | left: 0px; | |||
| 584 | + | } | |||
| 585 | + | ||||
| 586 | + | .top-0 { | |||
| 587 | + | top: 0px; | |||
| 588 | + | } | |||
| 589 | + | ||||
| 578 | .my-2 { | 590 | .my-2 { | ||
| 579 | margin-top: 0.5rem; | 591 | margin-top: 0.5rem; | ||
| 580 | margin-bottom: 0.5rem; | 592 | margin-bottom: 0.5rem; | ||
| @@ -624,6 +636,10 @@ video { | |||||
| 624 | height: 2.5rem; | 636 | height: 2.5rem; | ||
| 625 | } | 637 | } | ||
| 626 | 638 | ||||
| 639 | + | .h-12 { | |||
| 640 | + | height: 3rem; | |||
| 641 | + | } | |||
| 642 | + | ||||
| 627 | .h-32 { | 643 | .h-32 { | ||
| 628 | height: 8rem; | 644 | height: 8rem; | ||
| 629 | } | 645 | } | ||
| @@ -644,10 +660,6 @@ video { | |||||
| 644 | height: 100%; | 660 | height: 100%; | ||
| 645 | } | 661 | } | ||
| 646 | 662 | ||||
| 647 | - | .w-1\/2 { | |||
| 648 | - | width: 50%; | |||
| 649 | - | } | |||
| 650 | - | ||||
| 651 | .w-1\/3 { | 663 | .w-1\/3 { | ||
| 652 | width: 33.333333%; | 664 | width: 33.333333%; | ||
| 653 | } | 665 | } | ||
| @@ -672,11 +684,6 @@ video { | |||||
| 672 | width: 100%; | 684 | width: 100%; | ||
| 673 | } | 685 | } | ||
| 674 | 686 | ||||
| 675 | - | .min-w-fit { | |||
| 676 | - | min-width: -moz-fit-content; | |||
| 677 | - | min-width: fit-content; | |||
| 678 | - | } | |||
| 679 | - | ||||
| 680 | .flex-1 { | 687 | .flex-1 { | ||
| 681 | flex: 1 1 0%; | 688 | flex: 1 1 0%; | ||
| 682 | } | 689 | } | ||
| @@ -701,14 +708,14 @@ video { | |||||
| 701 | flex-direction: column; | 708 | flex-direction: column; | ||
| 702 | } | 709 | } | ||
| 703 | 710 | ||||
| 704 | - | .flex-wrap { | |||
| 705 | - | flex-wrap: wrap; | |||
| 706 | - | } | |||
| 707 | - | ||||
| 708 | .items-center { | 711 | .items-center { | ||
| 709 | align-items: center; | 712 | align-items: center; | ||
| 710 | } | 713 | } | ||
| 711 | 714 | ||||
| 715 | + | .justify-start { | |||
| 716 | + | justify-content: flex-start; | |||
| 717 | + | } | |||
| 718 | + | ||||
| 712 | .justify-end { | 719 | .justify-end { | ||
| 713 | justify-content: flex-end; | 720 | justify-content: flex-end; | ||
| 714 | } | 721 | } | ||
| @@ -721,6 +728,10 @@ video { | |||||
| 721 | justify-content: space-between; | 728 | justify-content: space-between; | ||
| 722 | } | 729 | } | ||
| 723 | 730 | ||||
| 731 | + | .justify-evenly { | |||
| 732 | + | justify-content: space-evenly; | |||
| 733 | + | } | |||
| 734 | + | ||||
| 724 | .justify-items-center { | 735 | .justify-items-center { | ||
| 725 | justify-items: center; | 736 | justify-items: center; | ||
| 726 | } | 737 | } | ||
| @@ -743,6 +754,12 @@ video { | |||||
| 743 | margin-bottom: calc(1rem * var(--tw-space-y-reverse)); | 754 | margin-bottom: calc(1rem * var(--tw-space-y-reverse)); | ||
| 744 | } | 755 | } | ||
| 745 | 756 | ||||
| 757 | + | .space-y-6 > :not([hidden]) ~ :not([hidden]) { | |||
| 758 | + | --tw-space-y-reverse: 0; | |||
| 759 | + | margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); | |||
| 760 | + | margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); | |||
| 761 | + | } | |||
| 762 | + | ||||
| 746 | .rounded { | 763 | .rounded { | ||
| 747 | border-radius: 0.25rem; | 764 | border-radius: 0.25rem; | ||
| 748 | } | 765 | } | ||
| @@ -866,6 +883,14 @@ video { | |||||
| 866 | padding-bottom: 1rem; | 883 | padding-bottom: 1rem; | ||
| 867 | } | 884 | } | ||
| 868 | 885 | ||||
| 886 | + | .pr-1 { | |||
| 887 | + | padding-right: 0.25rem; | |||
| 888 | + | } | |||
| 889 | + | ||||
| 890 | + | .pt-16 { | |||
| 891 | + | padding-top: 4rem; | |||
| 892 | + | } | |||
| 893 | + | ||||
| 869 | .text-center { | 894 | .text-center { | ||
| 870 | text-align: center; | 895 | text-align: center; | ||
| 871 | } | 896 | } | ||
| @@ -909,6 +934,11 @@ video { | |||||
| 909 | line-height: 1.75rem; | 934 | line-height: 1.75rem; | ||
| 910 | } | 935 | } | ||
| 911 | 936 | ||||
| 937 | + | .text-xs { | |||
| 938 | + | font-size: 0.75rem; | |||
| 939 | + | line-height: 1rem; | |||
| 940 | + | } | |||
| 941 | + | ||||
| 912 | .font-bold { | 942 | .font-bold { | ||
| 913 | font-weight: 700; | 943 | font-weight: 700; | ||
| 914 | } | 944 | } | ||
| @@ -1024,7 +1054,7 @@ video { | |||||
| 1024 | @font-face { | 1054 | @font-face { | ||
| 1025 | font-family: "JetBrainsMono-Nerd-Font-Regular"; | 1055 | font-family: "JetBrainsMono-Nerd-Font-Regular"; | ||
| 1026 | 1056 | ||||
| 1027 | - | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFontMono-Regular.woff2") | 1057 | + | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFont-Regular.woff2") |
| 1028 | format("woff2"); | 1058 | format("woff2"); | ||
| 1029 | 1059 | ||||
| 1030 | font-weight: normal; | 1060 | font-weight: normal; | ||
| @@ -1032,6 +1062,18 @@ video { | |||||
| 1032 | font-style: normal; | 1062 | font-style: normal; | ||
| 1033 | } | 1063 | } | ||
| 1034 | 1064 | ||||
| 1065 | + | /* Import Jetbrains Mono Nerd Font Bold */ | |||
| 1066 | + | ||||
| 1067 | + | @font-face { | |||
| 1068 | + | font-family: "JetBrainsMono-Nerd-Font-Bold"; | |||
| 1069 | + | ||||
| 1070 | + | src: url("/assets/fonts/JetBrainsMonoNerd/JetBrainsMonoNerdFont-Bold.woff2") format("woff2"); | |||
| 1071 | + | ||||
| 1072 | + | font-weight: bold; | |||
| 1073 | + | ||||
| 1074 | + | font-style: normal; | |||
| 1075 | + | } | |||
| 1076 | + | ||||
| 1035 | @font-face { | 1077 | @font-face { | ||
| 1036 | font-family: "LilitaOne-Regular"; | 1078 | font-family: "LilitaOne-Regular"; | ||
| 1037 | 1079 | ||||
| @@ -1095,26 +1137,12 @@ video { | |||||
| 1095 | font-family: "IBMPlexSans-Regular", sans-serif; | 1137 | font-family: "IBMPlexSans-Regular", sans-serif; | ||
| 1096 | } | 1138 | } | ||
| 1097 | 1139 | ||||
| 1098 | - | .circle-shadow { | 1140 | + | .JetBrainsMonoNF { |
| 1099 | - | width: 100%; | 1141 | + | font-family: "JetBrainsMono-Nerd-Font-Regular", sans-serif; |
| 1100 | - | position: relative; | |||
| 1101 | - | } | |||
| 1102 | - | ||||
| 1103 | - | .circle-shadow::after { | |||
| 1104 | - | position: absolute; | |||
| 1105 | - | width: 50%; | |||
| 1106 | - | height: 0.4rem; | |||
| 1107 | - | margin: auto; | |||
| 1108 | - | background: rgba(0, 0, 0, 0.1); | |||
| 1109 | - | border-radius: 50%; | |||
| 1110 | - | z-index: -1; | |||
| 1111 | - | bottom: 2%; | |||
| 1112 | - | content: ""; | |||
| 1113 | - | box-shadow: 0 0 1px 0.3rem rgba(0, 0, 0, 0.1); | |||
| 1114 | } | 1142 | } | ||
| 1115 | 1143 | ||||
| 1116 | - | .iconoir { | 1144 | + | .JetBrainsMonoBoldNF { |
| 1117 | - | margin-right: 8px; | 1145 | + | font-family: "JetBrainsMono-Nerd-Font-Bold", sans-serif; |
| 1118 | } | 1146 | } | ||
| 1119 | 1147 | ||||
| 1120 | .hover\:bg-blue-700:hover { | 1148 | .hover\:bg-blue-700:hover { | ||
| @@ -1127,6 +1155,16 @@ video { | |||||
| 1127 | background-color: rgb(0 82 147 / var(--tw-bg-opacity)); | 1155 | background-color: rgb(0 82 147 / var(--tw-bg-opacity)); | ||
| 1128 | } | 1156 | } | ||
| 1129 | 1157 | ||||
| 1158 | + | .hover\:text-gordonmascot-hblue:hover { | |||
| 1159 | + | --tw-text-opacity: 1; | |||
| 1160 | + | color: rgb(1 30 92 / var(--tw-text-opacity)); | |||
| 1161 | + | } | |||
| 1162 | + | ||||
| 1163 | + | .hover\:text-red-900:hover { | |||
| 1164 | + | --tw-text-opacity: 1; | |||
| 1165 | + | color: rgb(127 29 29 / var(--tw-text-opacity)); | |||
| 1166 | + | } | |||
| 1167 | + | ||||
| 1130 | @media (min-width: 640px) { | 1168 | @media (min-width: 640px) { | ||
| 1131 | .sm\:h-24 { | 1169 | .sm\:h-24 { | ||
| 1132 | height: 6rem; | 1170 | height: 6rem; | ||
| @@ -1138,14 +1176,14 @@ video { | |||||
| 1138 | margin-left: 1rem; | 1176 | margin-left: 1rem; | ||
| 1139 | } | 1177 | } | ||
| 1140 | 1178 | ||||
| 1141 | - | .md\:mt-24 { | |||
| 1142 | - | margin-top: 6rem; | |||
| 1143 | - | } | |||
| 1144 | - | ||||
| 1145 | .md\:flex { | 1179 | .md\:flex { | ||
| 1146 | display: flex; | 1180 | display: flex; | ||
| 1147 | } | 1181 | } | ||
| 1148 | 1182 | ||||
| 1183 | + | .md\:h-16 { | |||
| 1184 | + | height: 4rem; | |||
| 1185 | + | } | |||
| 1186 | + | ||||
| 1149 | .md\:w-1\/2 { | 1187 | .md\:w-1\/2 { | ||
| 1150 | width: 50%; | 1188 | width: 50%; | ||
| 1151 | } | 1189 | } | ||
| @@ -1170,6 +1208,10 @@ video { | |||||
| 1170 | margin-bottom: calc(0px * var(--tw-space-y-reverse)); | 1208 | margin-bottom: calc(0px * var(--tw-space-y-reverse)); | ||
| 1171 | } | 1209 | } | ||
| 1172 | 1210 | ||||
| 1211 | + | .md\:rounded-md { | |||
| 1212 | + | border-radius: 0.375rem; | |||
| 1213 | + | } | |||
| 1214 | + | ||||
| 1173 | .md\:p-0 { | 1215 | .md\:p-0 { | ||
| 1174 | padding: 0px; | 1216 | padding: 0px; | ||
| 1175 | } | 1217 | } | ||
| @@ -1178,57 +1220,51 @@ video { | |||||
| 1178 | padding: 2rem; | 1220 | padding: 2rem; | ||
| 1179 | } | 1221 | } | ||
| 1180 | 1222 | ||||
| 1223 | + | .md\:px-6 { | |||
| 1224 | + | padding-left: 1.5rem; | |||
| 1225 | + | padding-right: 1.5rem; | |||
| 1226 | + | } | |||
| 1227 | + | ||||
| 1181 | .md\:pt-10 { | 1228 | .md\:pt-10 { | ||
| 1182 | padding-top: 2.5rem; | 1229 | padding-top: 2.5rem; | ||
| 1183 | } | 1230 | } | ||
| 1184 | 1231 | ||||
| 1232 | + | .md\:pt-32 { | |||
| 1233 | + | padding-top: 8rem; | |||
| 1234 | + | } | |||
| 1235 | + | ||||
| 1185 | .md\:text-2xl { | 1236 | .md\:text-2xl { | ||
| 1186 | font-size: 1.5rem; | 1237 | font-size: 1.5rem; | ||
| 1187 | line-height: 2rem; | 1238 | line-height: 2rem; | ||
| 1188 | } | 1239 | } | ||
| 1189 | 1240 | ||||
| 1190 | - | .md\:text-xl { | 1241 | + | .md\:text-4xl { |
| 1191 | - | font-size: 1.25rem; | 1242 | + | font-size: 2.25rem; |
| 1192 | - | line-height: 1.75rem; | 1243 | + | line-height: 2.5rem; |
| 1193 | } | 1244 | } | ||
| 1194 | - | } | |||
| 1195 | 1245 | ||||
| 1196 | - | @media (min-width: 1024px) { | 1246 | + | .md\:text-sm { |
| 1197 | - | .lg\:flex { | 1247 | + | font-size: 0.875rem; |
| 1198 | - | display: flex; | 1248 | + | line-height: 1.25rem; |
| 1199 | } | 1249 | } | ||
| 1200 | 1250 | ||||
| 1201 | - | .lg\:w-64 { | 1251 | + | .md\:text-xl { |
| 1202 | - | width: 16rem; | 1252 | + | font-size: 1.25rem; |
| 1253 | + | line-height: 1.75rem; | |||
| 1203 | } | 1254 | } | ||
| 1204 | 1255 | ||||
| 1205 | - | .lg\:w-full { | 1256 | + | .md\:shadow { |
| 1206 | - | width: 100%; | 1257 | + | --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); |
| 1258 | + | --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); | |||
| 1259 | + | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); | |||
| 1207 | } | 1260 | } | ||
| 1261 | + | } | |||
| 1208 | 1262 | ||||
| 1263 | + | @media (min-width: 1024px) { | |||
| 1209 | .lg\:flex-row { | 1264 | .lg\:flex-row { | ||
| 1210 | flex-direction: row; | 1265 | flex-direction: row; | ||
| 1211 | } | 1266 | } | ||
| 1212 | 1267 | ||||
| 1213 | - | .lg\:flex-col { | |||
| 1214 | - | flex-direction: column; | |||
| 1215 | - | } | |||
| 1216 | - | ||||
| 1217 | - | .lg\:justify-start { | |||
| 1218 | - | justify-content: flex-start; | |||
| 1219 | - | } | |||
| 1220 | - | ||||
| 1221 | - | .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) { | |||
| 1222 | - | --tw-space-y-reverse: 0; | |||
| 1223 | - | margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); | |||
| 1224 | - | margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); | |||
| 1225 | - | } | |||
| 1226 | - | ||||
| 1227 | - | .lg\:py-8 { | |||
| 1228 | - | padding-top: 2rem; | |||
| 1229 | - | padding-bottom: 2rem; | |||
| 1230 | - | } | |||
| 1231 | - | ||||
| 1232 | .lg\:text-4xl { | 1268 | .lg\:text-4xl { | ||
| 1233 | font-size: 2.25rem; | 1269 | font-size: 2.25rem; | ||
| 1234 | line-height: 2.5rem; | 1270 | line-height: 2.5rem; | ||
| @@ -1244,12 +1280,8 @@ video { | |||||
| 1244 | height: 12rem; | 1280 | height: 12rem; | ||
| 1245 | } | 1281 | } | ||
| 1246 | 1282 | ||||
| 1247 | - | .xl\:p-8 { | |||
| 1248 | - | padding: 2rem; | |||
| 1249 | - | } | |||
| 1250 | - | ||||
| 1251 | .xl\:text-5xl { | 1283 | .xl\:text-5xl { | ||
| 1252 | font-size: 3rem; | 1284 | font-size: 3rem; | ||
| 1253 | line-height: 1; | 1285 | line-height: 1; | ||
| 1254 | } | 1286 | } | ||
| 1255 | - | } | 1287 | + | }⏎̸ |