diff options
| author | Mitja Felicijan <mitja.felicijan@gmail.com> | 2023-06-27 14:50:20 +0200 |
|---|---|---|
| committer | Mitja Felicijan <mitja.felicijan@gmail.com> | 2023-06-27 14:50:20 +0200 |
| commit | 8697555125c57ae64a0c9b78514b4aac4fd523de (patch) | |
| tree | a699df53a7c35a4425f30bca86982c4341f6de40 /themes/simple/static | |
| parent | 33b2615a5038bc85036081e8b5e0da8584d88097 (diff) | |
| download | mitjafelicijan.com-8697555125c57ae64a0c9b78514b4aac4fd523de.tar.gz | |
Massive formatting and added figcaption
Diffstat (limited to 'themes/simple/static')
| -rw-r--r-- | themes/simple/static/css/tailwind.css | 88 |
1 files changed, 48 insertions, 40 deletions
diff --git a/themes/simple/static/css/tailwind.css b/themes/simple/static/css/tailwind.css index b99c7fc..51b922c 100644 --- a/themes/simple/static/css/tailwind.css +++ b/themes/simple/static/css/tailwind.css | |||
| @@ -6,153 +6,161 @@ | |||
| 6 | 6 | ||
| 7 | /* Container */ | 7 | /* Container */ |
| 8 | .container-blog { | 8 | .container-blog { |
| 9 | max-width: 700px; | 9 | max-width: 700px; |
| 10 | } | 10 | } |
| 11 | 11 | ||
| 12 | /* User text selection */ | 12 | /* User text selection */ |
| 13 | ::selection { | 13 | ::selection { |
| 14 | @apply bg-yellow-100 text-black; | 14 | @apply bg-yellow-100 text-black; |
| 15 | } | 15 | } |
| 16 | 16 | ||
| 17 | ::-moz-selection { | 17 | ::-moz-selection { |
| 18 | @apply bg-yellow-100 text-black; | 18 | @apply bg-yellow-100 text-black; |
| 19 | } | 19 | } |
| 20 | 20 | ||
| 21 | /* Helpers */ | 21 | /* Helpers */ |
| 22 | 22 | ||
| 23 | a:hover { | 23 | a:hover { |
| 24 | color: blue; | 24 | color: blue; |
| 25 | } | 25 | } |
| 26 | 26 | ||
| 27 | .blue { | 27 | .blue { |
| 28 | color: blue; | 28 | color: blue; |
| 29 | } | 29 | } |
| 30 | 30 | ||
| 31 | /* Headings */ | 31 | /* Headings */ |
| 32 | article.single h2 { | 32 | article.single h2 { |
| 33 | @apply text-2xl font-bold mb-8 mt-8 leading-tight; | 33 | @apply text-2xl font-bold mb-8 mt-8 leading-tight; |
| 34 | } | 34 | } |
| 35 | 35 | ||
| 36 | article.single.note h2 { | 36 | article.single.note h2 { |
| 37 | @apply text-2xl font-bold mb-1 mt-8 leading-tight; | 37 | @apply text-2xl font-bold mb-1 mt-8 leading-tight; |
| 38 | } | 38 | } |
| 39 | 39 | ||
| 40 | article.single h3 { | 40 | article.single h3 { |
| 41 | @apply text-xl font-bold mb-4 mt-8 leading-tight; | 41 | @apply text-xl font-bold mb-4 mt-8 leading-tight; |
| 42 | } | 42 | } |
| 43 | 43 | ||
| 44 | article.single h4 { | 44 | article.single h4 { |
| 45 | @apply text-lg font-bold mb-4 mt-8 leading-tight; | 45 | @apply text-lg font-bold mb-4 mt-8 leading-tight; |
| 46 | } | 46 | } |
| 47 | 47 | ||
| 48 | /* Paragraph */ | 48 | /* Paragraph */ |
| 49 | article.single p { | 49 | article.single p { |
| 50 | @apply mb-5; | 50 | @apply mb-5; |
| 51 | } | 51 | } |
| 52 | 52 | ||
| 53 | /* Links */ | 53 | /* Links */ |
| 54 | article.single a { | 54 | article.single a { |
| 55 | @apply underline-offset-2 underline hover:bg-yellow-100; | 55 | @apply underline-offset-2 underline hover:bg-yellow-100; |
| 56 | } | 56 | } |
| 57 | 57 | ||
| 58 | /* Blockquote */ | 58 | /* Blockquote */ |
| 59 | article.single .content blockquote { | 59 | article.single .content blockquote { |
| 60 | background-image: url('/general/alert-light.svg'); | 60 | background-image: url('/general/alert-light.svg'); |
| 61 | background-size: 30px 30px; | 61 | background-size: 30px 30px; |
| 62 | background-repeat: no-repeat; | 62 | background-repeat: no-repeat; |
| 63 | background-position: 0 5px; | 63 | background-position: 0 5px; |
| 64 | @apply pl-12 my-8; | 64 | @apply pl-12 my-8; |
| 65 | } | 65 | } |
| 66 | 66 | ||
| 67 | article.single .content blockquote p { | 67 | article.single .content blockquote p { |
| 68 | @apply mb-2; | 68 | @apply mb-2; |
| 69 | } | 69 | } |
| 70 | 70 | ||
| 71 | /* Media: Images, audio, video */ | 71 | /* Media: Images, audio, video */ |
| 72 | article.single figure { | ||
| 73 | @apply my-8; | ||
| 74 | } | ||
| 75 | |||
| 76 | article.single figure figcaption { | ||
| 77 | @apply text-center italic mt-1; | ||
| 78 | } | ||
| 79 | |||
| 72 | article.single img { | 80 | article.single img { |
| 73 | @apply rounded w-full !bg-gray-50 my-8; | 81 | @apply rounded w-full !bg-gray-50; |
| 74 | 82 | ||
| 75 | image-rendering: crisp-edges; | 83 | image-rendering: crisp-edges; |
| 76 | image-rendering: -webkit-optimize-contrast; | 84 | image-rendering: -webkit-optimize-contrast; |
| 77 | } | 85 | } |
| 78 | 86 | ||
| 79 | article.single video { | 87 | article.single video { |
| 80 | @apply rounded w-full !bg-gray-50; | 88 | @apply rounded w-full !bg-gray-50; |
| 81 | } | 89 | } |
| 82 | 90 | ||
| 83 | article.single audio { | 91 | article.single audio { |
| 84 | @apply w-full mb-6; | 92 | @apply w-full mb-6; |
| 85 | } | 93 | } |
| 86 | 94 | ||
| 87 | /* Code */ | 95 | /* Code */ |
| 88 | article.single code { | 96 | article.single code { |
| 89 | @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium; | 97 | @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium; |
| 90 | } | 98 | } |
| 91 | 99 | ||
| 92 | article.single.note code { | 100 | article.single.note code { |
| 93 | @apply bg-gray-100 rounded px-2 py-1 text-xs font-medium; | 101 | @apply bg-gray-100 rounded px-2 py-1 text-xs font-medium; |
| 94 | } | 102 | } |
| 95 | 103 | ||
| 96 | article.single pre { | 104 | article.single pre { |
| 97 | @apply !bg-gray-50 rounded text-xs p-4 mb-6 overflow-x-auto; | 105 | @apply !bg-gray-50 rounded text-xs p-4 mb-6 overflow-x-auto; |
| 98 | } | 106 | } |
| 99 | 107 | ||
| 100 | article.single pre code, | 108 | article.single pre code, |
| 101 | article.single.note pre code { | 109 | article.single.note pre code { |
| 102 | background: unset; | 110 | background: unset; |
| 103 | padding: unset; | 111 | padding: unset; |
| 104 | @apply leading-relaxed; | 112 | @apply leading-relaxed; |
| 105 | } | 113 | } |
| 106 | 114 | ||
| 107 | /* Tables */ | 115 | /* Tables */ |
| 108 | article.single table { | 116 | article.single table { |
| 109 | @apply w-full border border-black border-collapse mb-4; | 117 | @apply w-full border border-black border-collapse mb-4; |
| 110 | } | 118 | } |
| 111 | 119 | ||
| 112 | article.single table tr, | 120 | article.single table tr, |
| 113 | article.single table td, | 121 | article.single table td, |
| 114 | article.single table th { | 122 | article.single table th { |
| 115 | @apply px-4 py-2 border text-left; | 123 | @apply px-4 py-2 border text-left; |
| 116 | } | 124 | } |
| 117 | 125 | ||
| 118 | /* Unordered list */ | 126 | /* Unordered list */ |
| 119 | article.single .content ul { | 127 | article.single .content ul { |
| 120 | @apply list-disc pl-6 md:pl-10 mb-6; | 128 | @apply list-disc pl-6 md:pl-10 mb-6; |
| 121 | } | 129 | } |
| 122 | 130 | ||
| 123 | /* Ordered list */ | 131 | /* Ordered list */ |
| 124 | article.single .content ol { | 132 | article.single .content ol { |
| 125 | @apply list-decimal pl-8 md:pl-10 mb-6; | 133 | @apply list-decimal pl-8 md:pl-10 mb-6; |
| 126 | } | 134 | } |
| 127 | 135 | ||
| 128 | /* Table of contents */ | 136 | /* Table of contents */ |
| 129 | article.single #TableOfContents { | 137 | article.single #TableOfContents { |
| 130 | @apply mb-10 ml-4 leading-relaxed; | 138 | @apply mb-10 ml-4 leading-relaxed; |
| 131 | } | 139 | } |
| 132 | article.single #TableOfContents ul { | 140 | article.single #TableOfContents ul { |
| 133 | @apply list-decimal pl-4 md:pl-6; | 141 | @apply list-decimal pl-4 md:pl-6; |
| 134 | } | 142 | } |
| 135 | 143 | ||
| 136 | /* Lists */ | 144 | /* Lists */ |
| 137 | article.single .content ul ul { | 145 | article.single .content ul ul { |
| 138 | margin-bottom: auto; | 146 | margin-bottom: auto; |
| 139 | } | 147 | } |
| 140 | 148 | ||
| 141 | /* Katex */ | 149 | /* Katex */ |
| 142 | article.single .katex-display { | 150 | article.single .katex-display { |
| 143 | @apply my-10; | 151 | @apply my-10; |
| 144 | } | 152 | } |
| 145 | 153 | ||
| 146 | /* Lazy loading of iframes */ | 154 | /* Lazy loading of iframes */ |
| 147 | article.single .ll-iframe { | 155 | article.single .ll-iframe { |
| 148 | @apply bg-gray-100 rounded; | 156 | @apply bg-gray-100 rounded; |
| 149 | } | 157 | } |
| 150 | 158 | ||
| 151 | article.single .ll-iframe::before { | 159 | article.single .ll-iframe::before { |
| 152 | @apply h-full flex border-2 border-gray-300 rounded justify-center items-center font-medium text-sm cursor-pointer animate-pulse; | 160 | @apply h-full flex border-2 border-gray-300 rounded justify-center items-center font-medium text-sm cursor-pointer animate-pulse; |
| 153 | content: 'Click here to load resource…'; | 161 | content: 'Click here to load resource…'; |
| 154 | } | 162 | } |
| 155 | 163 | ||
| 156 | article.single .ll-iframe.empty::before { | 164 | article.single .ll-iframe.empty::before { |
| 157 | content: none; | 165 | content: none; |
| 158 | } | 166 | } |
