From a08bd40cc1a89c0275d7e42f0484a0faaef144b4 Mon Sep 17 00:00:00 2001 From: Serhii Zautkin Date: Mon, 2 Dec 2024 09:30:47 -0800 Subject: [PATCH 01/12] iss101 Adding tailwind CSS, WIP --- assets/css/tailwind.css | 3 + hugo.toml | 10 + layouts/partials/head.html | 3 +- postcss.config.json | 6 + static/css/tailwind.css | 772 +++++++++++++++++++++++++++++++++++++ tailwind.config.js | 63 +++ 6 files changed, 856 insertions(+), 1 deletion(-) create mode 100644 assets/css/tailwind.css create mode 100644 postcss.config.json create mode 100644 static/css/tailwind.css create mode 100644 tailwind.config.js diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/assets/css/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/hugo.toml b/hugo.toml index 8ad1191..9baf2fb 100644 --- a/hugo.toml +++ b/hugo.toml @@ -2,3 +2,13 @@ baseURL = "https://webtest.ivoa.info" languageCode = "en-us" title = "International Virtual Observatory Alliance" author = "IVOA.net" +theme= "ananke" + +[markup] + [markup.goldmark] + [markup.goldmark.renderer] + unsafe = true + +[build] + writeStats = true + useResourceCacheWhen = "fallback" \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 5447145..ab617bd 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,9 +1,10 @@ - + + IVOA.net - International Virtual Observatory Alliance diff --git a/postcss.config.json b/postcss.config.json new file mode 100644 index 0000000..5622d47 --- /dev/null +++ b/postcss.config.json @@ -0,0 +1,6 @@ +{ + "plugins": { + "tailwindcss": {}, + "autoprefixer": {} + } +} \ No newline at end of file diff --git a/static/css/tailwind.css b/static/css/tailwind.css new file mode 100644 index 0000000..fe0ea08 --- /dev/null +++ b/static/css/tailwind.css @@ -0,0 +1,772 @@ +*, ::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: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::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: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +/* +! tailwindcss v3.4.15 | 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: #e5e7eb; + /* 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. +7. Disable tap highlights on iOS +*/ + +html, +:host { + 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, 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 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ +} + +/* +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. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. 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-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +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-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: 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, +input:where([type='button']), +input:where([type='reset']), +input:where([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; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + 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]:where(:not([hidden="until-found"])) { + display: none; +} + +.visible { + visibility: visible; +} + +.invisible { + visibility: hidden; +} + +.collapse { + visibility: collapse; +} + +.static { + position: static; +} + +.fixed { + position: fixed; +} + +.absolute { + position: absolute; +} + +.relative { + position: relative; +} + +.bottom-0 { + bottom: 0px; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.block { + display: block; +} + +.flex { + display: flex; +} + +.table { + display: table; +} + +.grid { + display: grid; +} + +.contents { + display: contents; +} + +.hidden { + display: none; +} + +.h-24 { + height: 6rem; +} + +.w-24 { + width: 6rem; +} + +.flex-none { + flex: none; +} + +.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-wrap { + flex-wrap: wrap; +} + +.items-center { + align-items: center; +} + +.justify-between { + justify-content: space-between; +} + +.justify-around { + 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)); +} + +.overflow-hidden { + overflow: hidden; +} + +.rounded { + border-radius: 0.25rem; +} + +.rounded-full { + border-radius: 9999px; +} + +.rounded-xl { + border-radius: 0.75rem; +} + +.border { + border-width: 1px; +} + +.bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-100 { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.bg-center { + background-position: center; +} + +.bg-top { + background-position: top; +} + +.p-8 { + padding: 2rem; +} + +.pt-6 { + padding-top: 1.5rem; +} + +.text-center { + text-align: center; +} + +.font-medium { + font-weight: 500; +} + +.no-underline { + text-decoration-line: none; +} + +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.outline { + outline-style: solid; +} + +.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); +} + +@media (min-width: 768px) { + .md\:flex { + display: flex; + } + + .md\:h-auto { + height: auto; + } + + .md\:w-48 { + width: 12rem; + } + + .md\:rounded-none { + border-radius: 0px; + } + + .md\:p-0 { + padding: 0px; + } + + .md\:p-8 { + padding: 2rem; + } + + .md\:text-left { + text-align: left; + } +} + +@media (prefers-color-scheme: dark) { + .dark\:bg-slate-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); + } +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..dcd7542 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,63 @@ +module.exports = { + content: [ + "./layouts/**/*.html", + "./content/**/*.md", + "./themes/**/layouts/**/*.html", + "./themes/**/content/**/*.md", + ], + theme: { + extend: { + colors: { + primary: "#012647", // Main text and background color + secondary: "#004d91", // Links and headers + accent: "#92d5ff", // Footer and sitemap links + lightGray: "#f2f2f2", // Table row background + darkGray: "#555", // Figure caption text + lightBackground: "#eee", // Figure caption background + white: "#ffffff", + black: "#000000", + }, + fontFamily: { + sans: ["Inter", "sans-serif"], // Default font + arial: ["Arial", "Helvetica", "sans-serif"], // For table fallback + }, + fontSize: { + base: "1rem", + lg: "1.3rem", // Large text (e.g., header nav links) + xl: "2rem", // H1 font size in articles + "2xl": "2.3rem", // Carousel titles + }, + spacing: { + 1: "0.25rem", // Small padding + 2: "0.5rem", // Small margin + 4: "1rem", // Medium spacing + 8: "2rem", // Large spacing + 16: "4rem", // Extra-large spacing + }, + maxWidth: { + content: "80em", // Article max-width + table: "100%", // Full-width tables + image: "100%", // Responsive images + }, + lineHeight: { + base: "1.5", + header: "5em", // Header line height + }, + gridTemplateColumns: { + asideMainAside: "1fr auto 1fr", // Grid layout with two asides + mainAside: "1fr auto", // Grid layout with one aside + }, + gridTemplateAreas: { + full: [ + "header header header", + "left-aside main right-aside", + "footer footer footer", + ], + rightAside: ["header header", "main right-aside", "footer footer"], + leftAside: ["header header", "left-aside main", "footer footer"], + }, + }, + }, + plugins: [], +}; + From ca581600c9c0e4d7426ae15d97a696de7bfed962 Mon Sep 17 00:00:00 2001 From: Serhii Zautkin Date: Tue, 3 Dec 2024 15:00:43 -0800 Subject: [PATCH 02/12] iss101 Adjusting the header, WIP --- .gitmodules | 3 + assets/css/tailwind.css | 1 + layouts/_default/baseof.html | 2 +- layouts/partials/head.html | 7 +- layouts/partials/header.html | 71 ++++++++++--- static/css/layout.css | 6 ++ static/css/tailwind.css | 192 +++++++++++++++++++++++++---------- static/js/layout.js | 8 ++ themes/ananke | 1 + 9 files changed, 224 insertions(+), 67 deletions(-) create mode 100644 .gitmodules create mode 100644 static/css/layout.css create mode 100644 static/js/layout.js create mode 160000 themes/ananke 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 From acb2089a61ef800fd2d2dde046d1191841b2c79a Mon Sep 17 00:00:00 2001 From: Serhii Zautkin Date: Fri, 13 Dec 2024 11:11:06 -0800 Subject: [PATCH 03/12] Updated settings, added a node app package for tooling, tailwind works --- assets/css/tailwind.css | 13 +- layouts/_default/baseof.html | 2 +- layouts/newsletter/single.html | 4 +- layouts/partials/head.html | 7 +- layouts/partials/header.html | 8 +- layouts/partials/page-dates.html | 2 +- package.json | 20 + postcss.config.json => postcss.config.js | 2 +- static/css/tailwind.css | 862 ----------------------- tailwind.config.js | 24 +- 10 files changed, 57 insertions(+), 887 deletions(-) create mode 100644 package.json rename postcss.config.json => postcss.config.js (77%) delete mode 100644 static/css/tailwind.css diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index 23163a0..6f34ea7 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -1,4 +1,13 @@ @tailwind base; -@tailwind colors; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +@layer base { + a { + @apply text-secondary hover:text-secondary/80 hover:underline hover:decoration-1; + } + p { + @apply text-justify; + } +} + diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 2363117..c872fa6 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/newsletter/single.html b/layouts/newsletter/single.html index e318027..85b8b19 100644 --- a/layouts/newsletter/single.html +++ b/layouts/newsletter/single.html @@ -2,9 +2,9 @@ {{- $pdf := printf "newsletter_pdf/%s.pdf" .File.BaseFileName }} -