diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..5154615 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "themes/ananke"] + path = themes/ananke + url = https://github.com/theNewDynamic/gohugo-theme-ananke.git diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index bd6213e..23163a0 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -1,3 +1,4 @@ @tailwind base; +@tailwind colors; @tailwind components; @tailwind utilities; \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 2427a96..2363117 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -2,7 +2,7 @@ {{- partial "head.html" . -}} {{- .Scratch.Set "canBeIndexed" (or (or (eq .BundleType "branch") (hasPrefix .Type "_")) (or (eq .Kind "term") (eq .Kind "taxonomy"))) }} - + {{- partial "header.html" . -}}
{{- block "main" . }}{{- end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index ab617bd..23c0fc3 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -2,9 +2,14 @@ + + + - + IVOA.net - International Virtual Observatory Alliance diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 80832c7..953d4a5 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,14 +1,57 @@ -
- - -
+
+
+ + + + +
+
+
+ IVOA Logo + International Virtual Observatory Alliance +
+ +
+ + +
+
+
\ No newline at end of file diff --git a/static/css/layout.css b/static/css/layout.css new file mode 100644 index 0000000..d42429c --- /dev/null +++ b/static/css/layout.css @@ -0,0 +1,6 @@ +.bg-primary-dark { + background-color: color-mix(in srgb, var(--color-primary) 80%, black); +} +.bg-primary-darker { + background-color: color-mix(in srgb, var(--color-primary) 60%, black); +} \ No newline at end of file diff --git a/static/css/tailwind.css b/static/css/tailwind.css index fe0ea08..f20854e 100644 --- a/static/css/tailwind.css +++ b/static/css/tailwind.css @@ -154,7 +154,7 @@ html, -o-tab-size: 4; tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: Inter, sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ @@ -554,6 +554,20 @@ video { display: none; } +@tailwind colors; + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + .visible { visibility: visible; } @@ -591,6 +605,14 @@ video { margin-right: auto; } +.mr-4 { + margin-right: 1rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + .block { display: block; } @@ -615,12 +637,44 @@ video { display: none; } -.h-24 { - height: 6rem; +.h-10 { + height: 2.5rem; +} + +.h-12 { + height: 3rem; +} + +.h-16 { + height: 4rem; +} + +.h-20 { + height: 5rem; } -.w-24 { - width: 6rem; +.h-6 { + height: 1.5rem; +} + +.w-6 { + width: 1.5rem; +} + +.w-auto { + width: auto; +} + +.w-full { + width: 100%; +} + +.max-w-6xl { + max-width: 72rem; +} + +.max-w-\[2560px\] { + max-width: 2560px; } .flex-none { @@ -635,6 +689,10 @@ video { 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; +} + .flex-wrap { flex-wrap: wrap; } @@ -643,6 +701,10 @@ video { align-items: center; } +.justify-end { + justify-content: flex-end; +} + .justify-between { justify-content: space-between; } @@ -651,10 +713,14 @@ video { justify-content: space-around; } -.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)); +.gap-8 { + gap: 2rem; +} + +.space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); } .overflow-hidden { @@ -665,26 +731,30 @@ video { border-radius: 0.25rem; } -.rounded-full { - border-radius: 9999px; -} - -.rounded-xl { - border-radius: 0.75rem; +.rounded-lg { + border-radius: 0.5rem; } .border { border-width: 1px; } +.border-t { + border-top-width: 1px; +} + +.border-white\/10 { + border-color: rgb(255 255 255 / 0.1); +} + .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } -.bg-slate-100 { +.bg-primary { --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); + background-color: rgb(1 38 71 / var(--tw-bg-opacity, 1)); } .bg-white { @@ -700,20 +770,46 @@ video { background-position: top; } -.p-8 { - padding: 2rem; +.p-2 { + padding: 0.5rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.pb-4 { + padding-bottom: 1rem; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; } -.pt-6 { - padding-top: 1.5rem; +.text-xl { + font-size: 2rem; } -.text-center { - text-align: center; +.text-xs { + font-size: 0.75rem; + line-height: 1rem; } -.font-medium { - font-weight: 500; +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .no-underline { @@ -734,39 +830,33 @@ video { 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); } -@media (min-width: 768px) { - .md\:flex { - display: flex; - } - - .md\:h-auto { - height: auto; - } - - .md\:w-48 { - width: 12rem; - } +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} - .md\:rounded-none { - border-radius: 0px; - } +.hover\:bg-white\/10:hover { + background-color: rgb(255 255 255 / 0.1); +} - .md\:p-0 { - padding: 0px; - } +.hover\:text-gray-300:hover { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity, 1)); +} - .md\:p-8 { - padding: 2rem; +@media (min-width: 768px) { + .md\:flex { + display: flex; } - .md\:text-left { - text-align: left; + .md\:hidden { + display: none; } } -@media (prefers-color-scheme: dark) { - .dark\:bg-slate-800 { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +@media (min-width: 1024px) { + .lg\:text-2xl { + font-size: 2.3rem; } } \ No newline at end of file diff --git a/static/js/layout.js b/static/js/layout.js new file mode 100644 index 0000000..56bd875 --- /dev/null +++ b/static/js/layout.js @@ -0,0 +1,8 @@ +function toggleMobileMenu() { + const menu = document.getElementById('mobile-menu'); + const button = document.querySelector('[aria-controls="mobile-menu"]'); + const isExpanded = button.getAttribute('aria-expanded') === 'true'; + + menu.classList.toggle('hidden'); + button.setAttribute('aria-expanded', !isExpanded); +} \ No newline at end of file diff --git a/themes/ananke b/themes/ananke new file mode 160000 index 0000000..b06949e --- /dev/null +++ b/themes/ananke @@ -0,0 +1 @@ +Subproject commit b06949eb2d8c8196527aab93fe92898fa56c9bc1