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

💄 try some colors

Browse Source
This commit is contained in:
Adrien Beaudouin
2022-02-27 13:11:24 +01:00
parent 15344f5554
commit 93c1e3ba38
5 changed files with 167 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
assets/css/custom.css
View File

@ -2,11 +2,6 @@
position: static
}
.my-0 {
margin-top: 0px;
margin-bottom: 0px
}
.mb-4 {
margin-bottom: 1rem
}
@ -97,6 +92,10 @@
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))
}
.\!rounded-md {
border-radius: 0.375rem !important
}
.rounded-md {
border-radius: 0.375rem
}
@ -105,10 +104,6 @@
border-radius: 0.25rem
}
.\!rounded-md {
border-radius: 0.375rem !important
}
.rounded-full {
border-radius: 9999px
}
@ -140,6 +135,56 @@
border-color: rgb(168 85 247 / var(--tw-border-opacity))
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity))
}
.border-orange-500 {
--tw-border-opacity: 1;
border-color: rgb(249 115 22 / var(--tw-border-opacity))
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity))
}
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity))
}
.border-teal-500 {
--tw-border-opacity: 1;
border-color: rgb(20 184 166 / var(--tw-border-opacity))
}
.bg-green-600 {
--tw-bg-opacity: 1;
background-color: rgb(22 163 74 / var(--tw-bg-opacity))
}
.bg-orange-600 {
--tw-bg-opacity: 1;
background-color: rgb(234 88 12 / var(--tw-bg-opacity))
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity))
}
.bg-teal-600 {
--tw-bg-opacity: 1;
background-color: rgb(13 148 136 / var(--tw-bg-opacity))
}
.bg-blue-900\/20 {
background-color: rgb(30 58 138 / 0.2)
}
@ -152,9 +197,9 @@
padding: 1rem
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.py-2 {
@ -162,9 +207,9 @@
padding-bottom: 0.5rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem
}
.py-1 {
@ -233,6 +278,31 @@
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.hover\:\!bg-green-500:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(34 197 94 / var(--tw-bg-opacity)) !important
}
.hover\:\!bg-orange-500:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(249 115 22 / var(--tw-bg-opacity)) !important
}
.hover\:\!bg-gray-500:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important
}
.hover\:\!bg-red-500:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(239 68 68 / var(--tw-bg-opacity)) !important
}
.hover\:\!bg-teal-500:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(20 184 166 / var(--tw-bg-opacity)) !important
}
.hover\:bg-white\/\[0\.12\]:hover {
background-color: rgb(255 255 255 / 0.12)
}
@ -247,11 +317,69 @@
outline-offset: 2px
}
@media (prefers-color-scheme: dark) {
.dark\:text-neutral-400 {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity))
}
.dark .dark\:border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity))
}
.dark .dark\:bg-green-800 {
--tw-bg-opacity: 1;
background-color: rgb(22 101 52 / var(--tw-bg-opacity))
}
.dark .dark\:bg-orange-800 {
--tw-bg-opacity: 1;
background-color: rgb(154 52 18 / var(--tw-bg-opacity))
}
.dark .dark\:bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.dark .dark\:bg-red-800 {
--tw-bg-opacity: 1;
background-color: rgb(153 27 27 / var(--tw-bg-opacity))
}
.dark .dark\:bg-teal-800 {
--tw-bg-opacity: 1;
background-color: rgb(17 94 89 / var(--tw-bg-opacity))
}
.dark .dark\:\!text-black {
--tw-text-opacity: 1 !important;
color: rgb(0 0 0 / var(--tw-text-opacity)) !important
}
.dark .dark\:text-neutral-400 {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity))
}
.dark .dark\:hover\:\!bg-green-700:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(21 128 61 / var(--tw-bg-opacity)) !important
}
.dark .dark\:hover\:\!bg-orange-700:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(194 65 12 / var(--tw-bg-opacity)) !important
}
.dark .dark\:hover\:\!bg-gray-700:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important
}
.dark .dark\:hover\:\!bg-red-700:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(185 28 28 / var(--tw-bg-opacity)) !important
}
.dark .dark\:hover\:\!bg-teal-700:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(15 118 110 / var(--tw-bg-opacity)) !important
}
@media (min-width: 640px) {

5
data/works.yaml
View File

@ -11,26 +11,31 @@
title: Spring Boot Realworld
repo: adr1enbe4udou1n/spring-boot-realworld-example-app
demo: https://springbootrealworld.okami101.io/api
color: green
- name: laravel
title: Laravel Realworld
repo: adr1enbe4udou1n/laravel-realworld-example-app
demo: https://laravelrealworld.okami101.io/api
color: orange
- name: symfony
title: Symfony Realworld
repo: adr1enbe4udou1n/symfony-realworld-example-app
demo: https://symfonyrealworld.okami101.io/api
color: black
- name: nestjs
title: NestJS Realworld
repo: adr1enbe4udou1n/nestjs-realworld-example-app
demo: https://nestjsrealworld.okami101.io/api
color: red
- name: fastapi
title: FastAPI Realworld
repo: adr1enbe4udou1n/fastapi-realworld-example-app
demo: https://fastapirealworld.okami101.io/api
color: teal
- name: others
title: Other projects

6
layouts/partials/button.html Normal file
View File

@ -0,0 +1,6 @@
{{ $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" }}
<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">
{{ .text }}
</a>

20
layouts/works/single.html
View File

@ -20,7 +20,9 @@
<div class="grid md:grid-cols-2 gap-4">
{{ range .projects }}
<div class="flex flex-col gap-4 rounded border-2 border-purple-500 p-4">
{{ $borders := dict "green" "border-green-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">
<a href="https://github.com/{{ .repo }}" target="_blank">
<h3 class="pb-1 font-bold border-b-2 border-purple-500 inline-block">
@ -37,21 +39,13 @@
{{ readFile (print "_data/works/" .name ".md") | markdownify }}
</div>
<div class="flex justify-center gap-4">
<a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
href="https://github.com/{{ .repo }}" target="_blank" role="button">
{{ partial "icon.html" "github" }}
</a>
{{ partial "button.html" (dict "text" (partial "icon.html" "github") "href" (print
"https://github.com/" .repo) "color" .color) }}
{{ if .demo }}
<a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
href="{{ .demo }}" target="_blank" role="button">
Demo
</a>
{{ partial "button.html" (dict "text" "Demo" "href" .demo "color" .color) }}
{{ end }}
{{ if .docs }}
<a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
href="{{ .docs }}" target="_blank" role="button">
Docs
</a>
{{ partial "button.html" (dict "text" "Docs" "href" .docs "color" .color) }}
{{ end }}
</div>
</div>

1
tailwind.config.js
View File

@ -1,4 +1,5 @@
module.exports = {
darkMode: 'class',
content: [
"./layouts/**/*.html",
"./content/**/*.{html,md}",