From 89806d4a77e02609657a9c2f64d07ffd6c4c2f9c Mon Sep 17 00:00:00 2001 From: philc Date: Tue, 6 May 2025 20:51:15 +0000 Subject: [PATCH] Update Wwws_project --- Wwws_project.md | 170 +++++++++++++++++++++--------------------------- 1 file changed, 74 insertions(+), 96 deletions(-) diff --git a/Wwws_project.md b/Wwws_project.md index 2f887bd..bf4baf4 100644 --- a/Wwws_project.md +++ b/Wwws_project.md @@ -56,8 +56,6 @@ $ tribe=adminapi webapp=admin yarn dist:jscss ``` - - Then the webapp can get context data with the endpoint http://appname.tribename.townname.nationname/api/adminapi/wwws/updatelocaldbanonymous/tribename/appname/pagename/versionnumber this will return in data a set of data parameter into tribename/objects/wwws/itm/appname.json @@ -225,105 +223,85 @@ This will generate /src/static/css/twstyle.css $ tribe=tribename webapp=appname yarn src:css ``` -To customize webpage and wco, all is set into tailwindcss.config.js. The file tribename/objects/wwws/itm/webappname.json contain a property tailwindcsscontent updated with the list of wco to watch for tailwindcss. - +The tailwindcss conf is store in /wwws/appname/src/static/css/input.css ``` -** @type {import('tailwindcss').Config} */ -const colors = require('tailwindcss/colors'); -const confwww= require('../itm/webappname.json'); -// content: ["../adminapi/objects/wwws/admin/src/**/*.{html,js,mustache}","../adminapi/objects/wco/apxid/*.{html,js,mustache}"], - -module.exports = { - content: confwww.tailwindcsscontent, - theme: { - fontFamily: { - sans: ["questrial", "sans-serif"], - serif: ["quicksand", "serif"], - }, - }, - plugins: [require("@tailwindcss/typography"), require("daisyui")], - daisyui: { - themes: ["dark", "light", "apxtri"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"] - darkTheme: "dark", // name of one of the included themes for dark mode - base: true, // applies background color and foreground color for root element by default - styled: true, // include daisyUI colors and design decisions for all components - utils: true, // adds responsive and modifier utility classes - prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors) - logs: true, // Shows info about daisyUI version and used config in the console when building your CSS - themeRoot: ":root", // The element that receives theme color CSS variables - themes: [ - { - //check https://daisyui.com/theme-generator/ to customize - apxtri: { - primary: "#2e7fc8", - "primary-focus": "#218787", - "primary-content": "#ffffff", - secondary: "#ffc332", - "secondary-focus": "#fa6a31", - "secondary-content": "#ffffff", - accent: "#6aa84f", - "accent-focus": "#218787", - "accent-content": "#ffffff", - neutral: colors.gray[800], - "neutral-focus": colors.gray[600], - "neutral-content": "#ffffff", - "base-100": "#ffffff", // Fond principal - "base-200": "#f9fafb", // Fond secondaire - "base-300": "#d1d5db", // Fond tertiaire - "base-content": "#1f2937", // Texte principal - info: "#2e7fc8", - success: "#6aa84f", - warning: "#ffc332", - error: "#fa6a31", - }, - }, - ], - }, -}; - -``` - -The dev tailwindcss is store in /wwws/appname/src/static/css/twdevstyle.css - -``` -@tailwind base; -@tailwind components; -@tailwind utilities; -@import 'daisyui'; - -@Layer base { - @font-face{ - font-family: 'questrial'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(../fonts/questrial-regular-webfont.woff2) format('woff2'); - } - font-family:"questrial", system-ui, sans-serif; - @font-face{ - font-family:'quicksand'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(../fonts/Quicksand-Light.woff2) format('woff2'); - } +/* +//start with if need a google font +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +*/ +@font-face{ + font-family: 'Questrial'; + /*font-style: normal; + font-weight: 400;*/ + font-display: swap; + src: url(../fonts/questrial-regular-webfont.woff2) format('woff2'); } - ::-webkit-scrollbar { - width: 8px; - } - ::-webkit-scrollbar-track { - background: #2d3748; - } - ::-webkit-scrollbar-thumb { - background: #4a5568; - border-radius: 4px; - } +@font-face{ + font-family:'Quicksand'; + /*font-style: normal; + font-weight: 400;*/ + font-display: swap; + src: url(../fonts/Quicksand-Light.ttf) format('ttf'); +} +@import "tailwindcss" source("../../../src/**/*.{html,js,mustache}"); +@import "./sourcetw.css"; - .transition-width { - transition: width 0.3s ease; - } +@plugin "daisyui"; +@theme { + --font-display: "Questrial", "sans-serif"; + --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --font-display--font-variation-settings: "opsz" 32; + --font-heading:"Quicksand","system-ui"; + --font-body:"Questrial"; +} +@layer base { + html { + font-family: var(--font-body); + font-weight: 300; /* Si nécessaire */ + } + + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); + font-weight: 500; /* Ajuster selon besoin */ + } +} + +@plugin "daisyui/theme" { + name: "apxtridark"; + default: true; + prefersdark: true; + color-scheme: "dark"; + --color-base-100: oklch(37% 0.044 257.287); + --color-base-200: oklch(20% 0.042 265.755); + --color-base-300: oklch(12% 0.042 264.695); + --color-base-content: oklch(100% 0 0); + --color-primary: oklch(58.34% 0.136 249.54); + --color-primary-content: oklch(98% 0.019 200.873); + --color-secondary: oklch(84.93% 0.162 84.01); + --color-secondary-content: oklch(0% 0 0); + --color-accent: oklch(66.88% 0.138 137.06); + --color-accent-content: oklch(98% 0.002 247.839); + --color-neutral: oklch(27% 0.041 260.031); + --color-neutral-content: oklch(100% 0 0); + --color-info: oklch(82% 0.111 230.318); + --color-info-content: oklch(30% 0.056 229.695); + --color-success: oklch(66.88% 0.138 137.06); + --color-success-content: oklch(26% 0.051 172.552); + --color-warning: oklch(84.93% 0.162 84.01); + --color-warning-content: oklch(27% 0.077 45.635); + --color-error: oklch(69.54% 0.189 40.23); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.5rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; +} ``` ## Build