michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

coloooors

Browse Source
This commit is contained in:
Michal Vanko
2024-09-18 18:36:54 +02:00
parent fb63a2011b
commit 0937de96dd
14 changed files with 469 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
axum_server/styles/input.css
View File

@ -69,10 +69,10 @@
}
a {
@apply text-pink-600 underline underline-offset-2;
@apply text-pink-800 underline underline-offset-2;
&:hover {
@apply transition text-blue-400;
@apply transition text-blue-500;
}
}
@ -83,6 +83,15 @@ a {
h2 {
@apply px-4 text-xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
}
h3 {
@apply px-4 text-lg font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
}
h4 {
@apply px-4 text-lg font-medium text-blue-900 mb-2 mt-3 max-w-read mx-auto md:text-lg md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
}
p {
@apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
}
@ -125,7 +134,7 @@ a {
}
blockquote {
@apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-500;
@apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-600;
p {
@apply my-2 md:my-4 text-slate-600 max-w-note;
@ -133,12 +142,21 @@ a {
}
:not(pre) code {
@apply text-pink-950 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
@apply text-pink-900 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
}
pre code pre {
@apply mx-2 rounded lg:mx-auto lg:text-lg shadow-sm lg:max-w-note;
}
ul,
ol {
@apply px-4 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
}
iframe {
@apply rounded shadow-md mx-auto lg:max-w-image;
}
}
.video-embed {

470
axum_server/styles/output.css
View File

@ -1,5 +1,113 @@
*, ::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(66 166 240 / 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(66 166 240 / 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.11 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.12 | MIT License | https://tailwindcss.com
*/
/*
@ -538,114 +646,6 @@ video {
url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
}
*, ::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: ;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
@ -914,27 +914,27 @@ video {
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
border-color: rgb(66 166 240 / var(--tw-border-opacity));
}
.border-blue-950 {
--tw-border-opacity: 1;
border-color: rgb(23 37 84 / var(--tw-border-opacity));
border-color: rgb(15 38 55 / var(--tw-border-opacity));
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
background-color: rgb(217 237 252 / var(--tw-bg-opacity));
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
background-color: rgb(236 246 254 / var(--tw-bg-opacity));
}
.bg-pink-200 {
--tw-bg-opacity: 1;
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
background-color: rgb(255 207 247 / var(--tw-bg-opacity));
}
.bg-white {
@ -943,7 +943,7 @@ video {
}
.fill-blue-950 {
fill: #172554;
fill: #0F2637;
}
.object-contain {
@ -967,11 +967,21 @@ video {
padding: 1rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
@ -1063,22 +1073,22 @@ video {
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
color: rgb(66 166 240 / var(--tw-text-opacity));
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
color: rgb(40 100 144 / var(--tw-text-opacity));
}
.text-blue-900 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
color: rgb(23 58 84 / var(--tw-text-opacity));
}
.text-blue-950 {
--tw-text-opacity: 1;
color: rgb(23 37 84 / var(--tw-text-opacity));
color: rgb(15 38 55 / var(--tw-text-opacity));
}
.text-gray-600 {
@ -1091,9 +1101,9 @@ video {
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-pink-950 {
.text-pink-800 {
--tw-text-opacity: 1;
color: rgb(80 7 36 / var(--tw-text-opacity));
color: rgb(146 22 110 / var(--tw-text-opacity));
}
.text-slate-800 {
@ -1101,6 +1111,16 @@ video {
color: rgb(30 41 59 / var(--tw-text-opacity));
}
.text-pink-900 {
--tw-text-opacity: 1;
color: rgb(119 24 89 / var(--tw-text-opacity));
}
.text-pink-950 {
--tw-text-opacity: 1;
color: rgb(80 2 56 / var(--tw-text-opacity));
}
.no-underline {
text-decoration-line: none;
}
@ -1118,12 +1138,12 @@ video {
a {
--tw-text-opacity: 1;
color: rgb(219 39 119 / var(--tw-text-opacity));
color: rgb(146 22 110 / var(--tw-text-opacity));
text-decoration-line: underline;
text-underline-offset: 2px;
&:hover {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity));
color: rgb(66 166 240 / var(--tw-text-opacity));
}
&:hover {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
@ -1161,7 +1181,7 @@ a {
}
h1 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
color: rgb(23 58 84 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
h1 {
@ -1201,7 +1221,7 @@ a {
}
h2 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
color: rgb(23 58 84 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
h2 {
@ -1235,6 +1255,126 @@ a {
line-height: 2.5rem;
}
}
h3 {
margin-left: auto;
margin-right: auto;
}
h3 {
margin-bottom: 0.75rem;
}
h3 {
margin-top: 1rem;
}
h3 {
max-width: 64rem;
}
h3 {
padding-left: 1rem;
padding-right: 1rem;
}
h3 {
font-size: 1.125rem;
line-height: 1.75rem;
}
h3 {
font-weight: 600;
}
h3 {
--tw-text-opacity: 1;
color: rgb(23 58 84 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
h3 {
margin-bottom: 1.5rem;
}
}
@media (min-width: 768px) {
h3 {
margin-top: 2rem;
}
}
@media (min-width: 768px) {
h3 {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media (min-width: 1024px) {
h3 {
margin-bottom: 2rem;
}
}
@media (min-width: 1024px) {
h3 {
margin-top: 3rem;
}
}
@media (min-width: 1024px) {
h3 {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
h4 {
margin-left: auto;
margin-right: auto;
}
h4 {
margin-bottom: 0.5rem;
}
h4 {
margin-top: 0.75rem;
}
h4 {
max-width: 64rem;
}
h4 {
padding-left: 1rem;
padding-right: 1rem;
}
h4 {
font-size: 1.125rem;
line-height: 1.75rem;
}
h4 {
font-weight: 500;
}
h4 {
--tw-text-opacity: 1;
color: rgb(23 58 84 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
h4 {
margin-bottom: 1.5rem;
}
}
@media (min-width: 768px) {
h4 {
margin-top: 2rem;
}
}
@media (min-width: 768px) {
h4 {
font-size: 1.125rem;
line-height: 1.75rem;
}
}
@media (min-width: 1024px) {
h4 {
margin-bottom: 2rem;
}
}
@media (min-width: 1024px) {
h4 {
margin-top: 3rem;
}
}
@media (min-width: 1024px) {
h4 {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
@ -1338,7 +1478,7 @@ a {
}
figcaption {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity));
color: rgb(31 78 113 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
figcaption {
@ -1408,7 +1548,7 @@ a {
}
thead {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
background-color: rgb(217 237 252 / var(--tw-bg-opacity));
}
tbody {
--tw-bg-opacity: 1;
@ -1458,11 +1598,11 @@ a {
}
blockquote {
--tw-border-opacity: 1;
border-color: rgb(236 72 153 / var(--tw-border-opacity));
border-color: rgb(215 34 169 / var(--tw-border-opacity));
}
blockquote {
--tw-bg-opacity: 1;
background-color: rgb(253 242 248 / var(--tw-bg-opacity));
background-color: rgb(255 244 253 / var(--tw-bg-opacity));
}
blockquote {
padding-top: 0.25rem;
@ -1505,11 +1645,11 @@ a {
}
:not(pre) code {
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
border-color: rgb(142 202 246 / var(--tw-border-opacity));
}
:not(pre) code {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
background-color: rgb(217 237 252 / var(--tw-bg-opacity));
}
:not(pre) code {
padding-left: 0.25rem;
@ -1525,7 +1665,7 @@ a {
}
:not(pre) code {
--tw-text-opacity: 1;
color: rgb(80 7 36 / var(--tw-text-opacity));
color: rgb(119 24 89 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
:not(pre) code {
@ -1568,6 +1708,70 @@ a {
line-height: 1.75rem;
}
}
ul,
ol {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
ul,
ol {
margin-left: auto;
margin-right: auto;
}
ul,
ol {
max-width: 64rem;
}
ul,
ol {
padding-left: 1rem;
padding-right: 1rem;
}
ul,
ol {
--tw-text-opacity: 1;
color: rgb(2 6 23 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
ul,
ol {
margin-top: 2rem;
margin-bottom: 2rem;
}
}
@media (min-width: 768px) {
ul,
ol {
font-size: 1.125rem;
line-height: 1.75rem;
}
}
@media (min-width: 1024px) {
ul,
ol {
font-size: 1.75rem;
line-height: 2.25rem;
letter-spacing: -0.015em;
font-weight: 400;
}
}
iframe {
margin-left: auto;
margin-right: auto;
}
iframe {
border-radius: 0.25rem;
}
iframe {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px) {
iframe {
max-width: min(70rem, 95vw);
}
}
}
.video-embed {
@ -1580,7 +1784,7 @@ a {
.hover\:bg-pink-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
background-color: rgb(255 207 247 / var(--tw-bg-opacity));
}
@media (min-width: 768px) {