okami101/blog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 46 Wiki Activity

update works

Browse Source
This commit is contained in:
Adrien Beaudouin
2023-02-17 19:29:41 +01:00
parent a153de327a
commit 20da24dcae
5 changed files with 63 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
assets/css/compiled/main.css
View File

@ -1808,10 +1808,6 @@ body:has(#menu-controller:checked) {
margin-bottom: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
@ -1844,6 +1840,10 @@ body:has(#menu-controller:checked) {
margin-top: 2rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
@ -2206,6 +2206,11 @@ body:has(#menu-controller:checked) {
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.border-orange-500 {
--tw-border-opacity: 1;
border-color: rgb(249 115 22 / var(--tw-border-opacity));
@ -2321,6 +2326,11 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-neutral-100), 0.5);
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.object-scale-down {
-o-object-fit: scale-down;
object-fit: scale-down;
@ -2467,6 +2477,11 @@ body:has(#menu-controller:checked) {
line-height: 1.25rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
@ -2482,11 +2497,6 @@ body:has(#menu-controller:checked) {
line-height: 2rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.text-\[0\.6rem\] {
font-size: 0.6rem;
}
@ -2630,14 +2640,14 @@ body:has(#menu-controller:checked) {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-transform {
transition-property: transform;
.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;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@ -2712,6 +2722,16 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
}
.hover\:\!bg-blue-500:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(59 130 246 / var(--tw-bg-opacity)) !important;
}
.hover\:text-primary-500:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-500), var(--tw-text-opacity));
}
.hover\:text-primary-600:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@ -2727,11 +2747,6 @@ body:has(#menu-controller:checked) {
color: rgba(var(--color-primary-700), var(--tw-text-opacity));
}
.hover\:text-primary-500:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-500), var(--tw-text-opacity));
}
.hover\:text-neutral:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral), var(--tw-text-opacity));
@ -3035,6 +3050,11 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-neutral-800), 0.5);
}
.dark .dark\:bg-blue-800 {
--tw-bg-opacity: 1;
background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}
.dark .dark\:prose-invert {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
@ -3152,6 +3172,11 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-primary-400), var(--tw-bg-opacity));
}
.dark .dark\:hover\:\!bg-blue-700:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(29 78 216 / var(--tw-bg-opacity)) !important;
}
.dark .dark\:hover\:text-primary-400:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-400), var(--tw-text-opacity));
@ -3188,10 +3213,6 @@ body:has(#menu-controller:checked) {
margin-bottom: 0px;
}
.sm\:block {
display: block;
}
.sm\:flex {
display: flex;
}
@ -3269,10 +3290,6 @@ body:has(#menu-controller:checked) {
}
@media (min-width: 768px) {
.md\:block {
display: block;
}
.md\:w-1\/3 {
width: 33.333333%;
}
@ -3304,18 +3321,10 @@ body:has(#menu-controller:checked) {
order: 9999;
}
.lg\:mr-8 {
margin-right: 2rem;
}
.lg\:block {
display: block;
}
.lg\:flex {
display: flex;
}
.lg\:hidden {
display: none;
}

12
content/_data/works/react-ts.md Normal file
View File

@ -0,0 +1,12 @@
[`React TS`](https://vuejs.org/) implementation. Using same :
* [UnoCSS](https://github.com/unocss/unocss) utility-first CSS framework as `Vue 3` version with Dark Mode support.
* [openapi-typescript](https://github.com/drwpow/openapi-typescript) as OpenAPI SDK.
Main packages involved :
* [Vite](https://vitejs.dev/) as main bundler
* [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and code formatting
* [UnoCSS](https://github.com/unocss/unocss) as utility-first CSS framework
* [Iconify](https://github.com/iconify/iconify) as universal icons
* React Context as minimalist store system

6
data/works.yaml
View File

@ -10,6 +10,12 @@
ci: conduit-vue-ts
demo: https://vuetsrealworld.okami101.io
color: green
- name: react-ts
title: React TS Realworld
repo: adr1enbe4udou1n/react-ts-realworld-example-app
ci: conduit-react-ts
demo: https://reacttsrealworld.okami101.io
color: blue
- title: Backend
apps:

2
layouts/partials/button.html
View File

@ -1,4 +1,4 @@
{{ $colors := dict "green" "bg-green-600 hover:!bg-green-500 dark:bg-green-800 dark:hover:!bg-green-700" "orange" "bg-orange-600 hover:!bg-orange-500 dark:bg-orange-800 dark:hover:!bg-orange-700" "black" "bg-black hover:!bg-gray-500 dark:bg-white dark:hover:!bg-gray-700 dark:!text-black" "red" "bg-red-600 hover:!bg-red-500 dark:bg-red-800 dark:hover:!bg-red-700" "teal" "bg-teal-600 hover:!bg-teal-500 dark:bg-teal-800 dark:hover:!bg-teal-700" "primary" "bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" }}
{{ $colors := dict "green" "bg-green-600 hover:!bg-green-500 dark:bg-green-800 dark:hover:!bg-green-700" "blue" "bg-blue-600 hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700" "orange" "bg-orange-600 hover:!bg-orange-500 dark:bg-orange-800 dark:hover:!bg-orange-700" "black" "bg-black hover:!bg-gray-500 dark:bg-white dark:hover:!bg-gray-700 dark:!text-black" "red" "bg-red-600 hover:!bg-red-500 dark:bg-red-800 dark:hover:!bg-red-700" "teal" "bg-teal-600 hover:!bg-teal-500 dark:bg-teal-800 dark:hover:!bg-teal-700" "primary" "bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" }}
<a class="{{ print "px-4 py-2 !text-neutral !no-underline !rounded-md " (index $colors (or .color "primary")) }}"
href="{{ .href }}" target="{{ or .target " _blank" }}" role="button">

2
layouts/works/single.html
View File

@ -27,7 +27,7 @@
{{ end }}
<div class="grid md:grid-cols-2 gap-4 mb-4">
{{ range .apps }}
{{ $borders := dict "green" "border-green-500" "orange" "border-orange-500" "black" "border-black dark:border-white"
{{ $borders := dict "green" "border-green-500" "blue" "border-blue-500" "orange" "border-orange-500" "black" "border-black dark:border-white"
"red" "border-red-500" "teal" "border-teal-500" "primary" "border-purple-500" }}
<div class="flex flex-col gap-4 rounded border-2 p-4 {{ (index $borders (or .color "primary")) }}">
<div class="text-center">