Create template UI with tailwind

.gitignore

@@ -132,8 +132,7 @@ dmypy.json
 config.json
 debug
 
-/static/admin/
-/static/fontawesomefree/
+local-cdn/
 config.json
-/media/profile_pics/*
-!/media/profile_pics/default.jpg
+node_modules/
+package-lock.json

package.json

@@ -0,0 +1,8 @@
+{
+    "scripts": {
+        "dev": "tailwindcss -i src/static/tailwind/tailwind-input.css -o src/static/css/fossdb-ui.css -w"
+    },
+    "devDependencies": {
+        "tailwindcss": "^3.3.2"
+    }
+}

src/FOSSDB/settings.py

@@ -15,13 +15,13 @@ import sys
 from pathlib import Path
 
 # Build paths inside the project like this: BASE_DIR / "subdir".
-BASE_PATH = Path(__file__).resolve().parent.parent
-sys.path.insert(0, str(BASE_PATH.joinpath("FOSSDB", "apps")))
+BASE_DIR = Path(__file__).resolve().parent.parent
+sys.path.insert(0, str(BASE_DIR / "apps"))
 
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/
-with open(BASE_PATH.parent / "config.json", "r", encoding="UTF-8") as config_file:
+with open(BASE_DIR.parent / "config.json", "r", encoding="UTF-8") as config_file:
     config = json.load(config_file)
 
 # SECURITY WARNING: keep the secret key used in production secret!
@@ -38,6 +38,7 @@ INSTALLED_APPS = [
     "account",
     "fossdb",
     "django_filters",
+    "fontawesomefree",
     "django.contrib.admin",
     "django.contrib.auth",
     "django.contrib.contenttypes",
@@ -62,7 +63,7 @@ TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
         "DIRS": [
-            BASE_PATH / "templates",
+            BASE_DIR / "templates",
         ],
         "APP_DIRS": True,
         "OPTIONS": {
@@ -130,17 +131,17 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.0/howto/static-files/
 
-STATIC_URL = "static/"
-STATICFILE_DIRS = [
-    BASE_PATH / "static",
+STATIC_URL = "/static/"
+STATICFILES_DIRS = [
+    BASE_DIR / "static",
 ]
-STATIC_ROOT = BASE_PATH.parent / "local-cdn" / "static"
+STATIC_ROOT = BASE_DIR.parent / "local-cdn" / "static"
 
 MEDIA_URL = "media/"
 MEDIAFILES_DIRS = [
-    BASE_PATH / "media",
+    BASE_DIR / "media",
 ]
-MEDIA_ROOT = BASE_PATH.parent / "local-cdn" / "media"
+MEDIA_ROOT = BASE_DIR.parent / "local-cdn" / "media"
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

src/FOSSDB/urls.py

@@ -1,7 +1,7 @@
 """FOSSDB URL Configuration
 
 The `urlpatterns` list routes URLs to views. For more information please see:
-    https://docs.djangoproject.com/en/4.0/topics/http/urls/
+    https://docs.djangoproject.com/en/4.2/topics/http/urls/
 Examples:
 Function views
     1. Add an import:  from my_app import views
@@ -19,8 +19,8 @@ from django.urls import include, path
 
 urlpatterns = [
     path("admin/", admin.site.urls),
-    path("", include("fossdb.urls")),
     path("", include("account.urls")),
+    path("", include("fossdb.urls")),
     path("", include("django.contrib.auth.urls")),
 ]
 if settings.DEBUG:

src/static/css/fossdb-ui.css

@@ -0,0 +1,775 @@
+/*
+! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #15161e;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.static {
+  position: static;
+}
+
+.relative {
+  position: relative;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.max-w-\[10rem\] {
+  max-width: 10rem;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-b-lightsteelblue-100 {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(192 202 245 / var(--tw-border-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 27 38 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 22 30 / var(--tw-bg-opacity));
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.font-abel {
+  font-family: Abel, Roboto, Helvetica, Arial, sans-serif;
+}
+
+.font-condensed {
+  font-family: Roboto Condensed, Roboto, Helvetica, Arial, sans-serif;
+}
+
+.font-rationale {
+  font-family: Rationale, Roboto, Helvetica, Arial, sans-serif;
+}
+
+.font-roboto {
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+}
+
+.text-4xl {
+  font-size: 4rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.text-lightsteelblue-100 {
+  --tw-text-opacity: 1;
+  color: rgb(192 202 245 / var(--tw-text-opacity));
+}
+
+.text-skyblue {
+  --tw-text-opacity: 1;
+  color: rgb(13 185 215 / var(--tw-text-opacity));
+}
+
+.text-slategray {
+  --tw-text-opacity: 1;
+  color: rgb(115 122 162 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body {
+  margin: 0px;
+  line-height: normal;
+}
+
+*,
+::before,
+::after {
+  border-width: 0;
+}
+
+.hover\:border-b-2:hover {
+  border-bottom-width: 2px;
+}
+
+.hover\:text-skyblue:hover {
+  --tw-text-opacity: 1;
+  color: rgb(13 185 215 / var(--tw-text-opacity));
+}
+
+.focus\:border-b-2:focus {
+  border-bottom-width: 2px;
+}
+
+.focus\:border-b-skyblue:focus {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(13 185 215 / var(--tw-border-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}

src/static/img/icons/logo.svg

@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="396.43799"
+   height="512"
+   viewBox="0 0 104.89088 135.46667"
+   version="1.1"
+   id="svg38941"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="penguin.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview38943"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.77504209"
+     inkscape:cx="239.98697"
+     inkscape:cy="355.46457"
+     inkscape:window-width="1916"
+     inkscape:window-height="1055"
+     inkscape:window-x="1920"
+     inkscape:window-y="21"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs38938" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#cee2fb;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="M 13.333187,84.618973 9.6005212,109.78868 0,83.420191 0.71185222,50.927976 Z"
+       id="path11984"
+       sodipodi:nodetypes="ccccc"
+       inkscape:export-filename="512p_blank.png"
+       inkscape:export-xdpi="143.58"
+       inkscape:export-ydpi="143.58" />
+    <path
+       style="fill:#e88353;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="m 104.89093,16.970784 c 0,0 -5.839523,-1.121858 -29.013232,1.872563 0,0 -2.667291,-0.564322 -2.806952,1.847489 -0.139692,2.41181 0.626942,6.876194 0.626942,6.876194 6.116392,-3.715341 21.495581,-7.841451 31.193242,-10.596246 z"
+       id="path1175"
+       sodipodi:nodetypes="cccccc" />
+    <path
+       style="fill:#1a2e3c;fill-opacity:1;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="m 104.74514,16.095951 c -0.0863,-0.115567 -2.98575,-3.725719 -2.98575,-3.725719 L 75.937254,7.7660864 46.654615,21.674733 73.309503,48.53419 73.819537,20.985821 c 0,0 0.02677,-2.002222 2.058161,-2.142474 2.031464,-0.14026 28.867452,-2.747396 28.867452,-2.747396 z"
+       id="path1177"
+       sodipodi:nodetypes="scccccscs" />
+    <path
+       style="fill:#4a5a69;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="m 62.215647,0 0.07792,2.7613939 6.228984,8.5265221 7.414701,-3.5218296 z"
+       id="path4968"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#4a5a69;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="M 101.75939,12.370232 75.937254,7.7660864 98.372199,8.1171024 Z"
+       id="path7241"
+       sodipodi:nodetypes="cccc" />
+    <path
+       style="fill:#f5f8fa;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="m 61.647025,1.9546891 6.875528,9.3332269 c 0,0 -21.835797,10.60734 -21.867938,10.386817 C 46.622459,21.454209 42.694361,5.6132912 42.694361,5.6132912 Z"
+       id="path7243"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#1a2f3c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="m 62.215647,0 c 0,0 0.15568,2.829599 0.07792,2.7613939 -0.07777,-0.0682 -0.646544,-0.8067048 -0.646544,-0.8067048 L 42.694361,5.6132912 46.654615,21.674733 24.979029,23.851689 42.750713,75.525429 40.671899,93.308335 20.697937,132.67748 6.2053796,132.68196 6.1452704,85.951869 0.71185072,50.927976 40.99639,0.48868237 Z"
+       id="path9102"
+       sodipodi:nodetypes="cscccccccccccc" />
+    <path
+       style="fill:#f3f8fc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="M 24.979029,23.851689 46.654615,21.674733 82.792262,58.089726 67.359703,59.575448 Z"
+       id="path9650"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#dbebfc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="m 24.979029,23.851689 17.771684,51.67374 -2.078814,17.782906 -18.774983,36.905825 26.941956,5.25251 18.520831,-75.891222 z"
+       id="path10267"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="fill:#75a7d2;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="m 67.359703,59.575448 c 0.202792,-0.06638 15.432559,-1.485722 15.432559,-1.485722 L 70.770838,122.55849 49.210822,135.46667 h -0.37195 z"
+       id="path11022"
+       sodipodi:nodetypes="cccccc" />
+    <path
+       style="fill:#102631;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="m 70.770838,122.55849 c 0.504669,0.0643 13.01434,3.35272 13.01434,3.35272 L 82.792262,58.089726 Z"
+       id="path13291"
+       sodipodi:nodetypes="cccc" />
+    <path
+       style="fill:#ab5e44;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="M 73.697688,27.56703 104.89093,16.970784 75.140145,21.877162 74.212154,21.328889 73.819537,20.985821 Z"
+       id="path22968"
+       sodipodi:nodetypes="cccccc" />
+    <path
+       style="fill:#0c2333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.395717;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+       d="M 56.448797,7.5849631 56.579933,11.307183 54.226569,11.532052 52.689192,11.311476 51.599122,10.28935 51.83251,8.4196571 53.177576,7.220503 Z"
+       id="path24475"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>

src/static/tailwind/tailwind-input.css

@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Rationale&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
+
+body {
+    @apply leading-[normal] m-0;
+}
+*,
+::before,
+::after {
+    border-width: 0;
+}

src/templates/layout.html

@@ -1,15 +1,65 @@
 {% load static %}
 <!DOCTYPE html>
-<html lang="en" data-color-mode="dark">
+<html lang="en" data-theme="dark">
     <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="{% static 'css/fossdb-ui.css' %}" />
+        <link href="{% static 'fontawesomefree/css/all.min.css' %}"
+              rel="stylesheet" />
         <title>
             {% block title %}{% endblock %}
         </title>
         {% block meta %}{% endblock %}
     </head>
-    <body>
-        {% block content %}{% endblock %}
+    <body class="text-lightsteelblue-100 bg-gray-100 flex flex-col min-h-screen font-roboto">
+        <header class="flex justify-between items-center px-6 py-2 font-abel text-xl">
+            <div class="flex justify-between">
+                <!-- logo -->
+                <div class="flex items-center text-4xl font-abel">
+                    <img class=""
+                         width="40"
+                         src="{% static 'img/icons/logo.svg' %}"
+                         alt="logo" />
+                    <a class="hover:text-skyblue transform duration-300 ease-in-out" href="">foss<span class="text-skyblue">db</span></a>
+                </div>
+                <!-- search -->
+                <div class="relative items-center flex">
+                    <input type="text"
+                           placeholder="Search projects..."
+                           class="py-2 mx-4 placeholder-lightsteelblue-300 focus:outline-none bg-gray-100 border border-b-lightsteelblue-100 hover:border-b-2 transform duration-200 ease-in-out focus:border-b-skyblue focus:border-b-2 max-w-[10rem]" />
+                </div>
+                <!-- navbar -->
+                <nav class="uppercase flex gap-x-6 items-center">
+                    <a href="" class="hover:text-skyblue transform duration-200 ease-in-out">explore</a>
+                    <a href="" class="hover:text-skyblue transform duration-200 ease-in-out">contribute</a>
+                    <a href="" class="hover:text-skyblue transform duration-200 ease-in-out">news</a>
+                    <a href="" class="hover:text-skyblue transform duration-200 ease-in-out">dashboard</a>
+                    <a href="" class="hover:text-skyblue transform duration-200 ease-in-out">help</a>
+                </nav>
+            </div>
+            <div class="">
+                <a href="" class=""><i class="fa-solid fa-globe fa-lg"></i></a>
+                <a href=""
+                   class="hover:text-skyblue transition duration-300 ease-in-out"><i class="fa-solid fa-user fa-lg ml-4"></i></a>
+            </div>
+        </header>
+        <main class="flex-grow">
+        </main>
+        <footer class="h-32 flex items-center text-slategray bg-gray-200 mb-1 mt-4 font-condensed">
+            <div class="p-8">
+                <div class="space-y-4 text-left">
+                    <p>
+                        FOSSDB is a passion project of <a class="underline"
+    href="https://github.com/kristoferssolo"
+    target="_blank">@kristoferssolo</a> and a dedicated community of reporters.
+                    </p>
+                    <!-- TODO: finish these sentences -->
+                    <p>This site uses data from GitHub as well as data...</p>
+                    <p>This site has no affiliation with GitHub or any other hosting platform.</p>
+                </div>
+                <div></div>
+            </div>
+        </footer>
     </body>
 </html>

tailwind.config.js

@@ -0,0 +1,48 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./src/**/*.{html,js}"],
+    theme: {
+        colors: {
+            gray: {
+                100: "#1a1b26",
+                200: "#15161e",
+                300: "#16161e",
+            },
+            indianred: "#db4b4b",
+            burlywood: "#e0af68",
+
+            lightsteelblue: {
+                100: "#c0caf5",
+                200: "#a9b1d6",
+            },
+            skyblue: "#0db9d7",
+            crimson: "#f52a65",
+            slategray: "#737aa2",
+        },
+        fontFamily: {
+            rationale: [
+                "Rationale",
+                "Roboto",
+                "Helvetica",
+                "Arial",
+                "sans-serif",
+            ],
+            abel: ["Abel", "Roboto", "Helvetica", "Arial", "sans-serif"],
+            condensed: [
+                "Roboto Condensed",
+                "Roboto",
+                "Helvetica",
+                "Arial",
+                "sans-serif",
+            ],
+            roboto: ["Roboto", "Helvetica", "Arial", "sans-serif"],
+        },
+        fontSize: {
+            base: "1rem",
+            xl: "1.25rem",
+            "4xl": "4rem",
+        },
+        extend: {},
+    },
+    plugins: [],
+}