Move to Tailwind 3

1 files changed, 233 insertions, 0 deletions

diff --git a/themes/simple/static/css/tailwind.css b/themes/simple/static/css/tailwind.css
new file mode 100644
index 0000000..199f1c6
--- /dev/null
+++ b/themes/simple/static/css/tailwind.css
@@ -0,0 +1,233 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Container */
+.container-blog {
+  max-width: 700px;
+}
+
+/* User text selection */
+::selection {
+  @apply bg-yellow-100 text-black;
+}
+
+::-moz-selection {
+  @apply bg-yellow-100 text-black;
+}
+
+/* Headings */
+article.single h2 {
+  @apply text-2xl font-bold mb-4 mt-8;
+}
+
+article.single h3 {
+  @apply text-xl font-bold mb-4 mt-8;
+}
+
+article.single h4 {
+  @apply text-lg font-bold mb-4 mt-8;
+}
+
+/* Paragraph */
+article.single p {
+  @apply mb-5;
+}
+
+/* Links */
+article.single a {
+  @apply underline hover:bg-yellow-100;
+}
+
+/* Blockquote */
+article.single blockquote {
+  background-image: url('/general/alert-light.svg');
+  background-size: 30px 30px;
+  background-repeat: no-repeat;
+  background-position: 0 5px;
+  @apply pl-12 my-8;
+}
+
+/* Media: Images, audio, video */
+article.single img {
+  @apply rounded w-full !bg-gray-50 my-8;
+}
+
+article.single video {
+  @apply rounded w-full !bg-gray-50;
+}
+
+article.single audio {
+  @apply w-full mb-6;
+}
+
+/* Code */
+article.single code {
+  @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium;
+}
+
+article.single pre {
+  @apply !bg-gray-50 rounded text-xs p-4 mb-6 overflow-x-auto;
+}
+
+article.single pre code {
+  background: unset;
+  padding: unset;
+  @apply leading-relaxed;
+}
+
+/* Tables */
+article.single table {
+  @apply w-full border border-black border-collapse mb-4;
+}
+
+article.single table tr,
+article.single table td,
+article.single table th {
+  @apply px-4 py-2 border text-left;
+}
+
+/* Unordered list */
+article.single ul {
+  @apply list-disc pl-6 md:pl-10 mb-6;
+}
+
+/* Ordered list */
+article.single ol {
+  @apply list-decimal pl-8 md:pl-10;
+}
+
+/* Katex */
+article.single .katex-display {
+  @apply my-10;
+}
+
+/* Lazy loading of iframes */
+article.single .ll-iframe {
+  @apply bg-gray-100 rounded;
+}
+
+article.single .ll-iframe::before {
+  @apply h-full flex border-2 border-gray-300 rounded justify-center items-center font-medium text-sm cursor-pointer animate-pulse;
+  content: 'Click here to load resource…';
+}
+
+article.single .ll-iframe.empty::before {
+  content: none;
+}
+
+/* Cactus Comments */
+.comments img {
+  max-width: auto !important;
+  max-width: unset !important;
+  max-width: inherit !important;
+}
+
+.cactus-container .cactus-editor-textarea {
+  @apply border w-full h-32 px-3 py-2 outline-none rounded mb-2;
+}
+
+.cactus-container .cactus-editor-name input {
+  @apply border w-full px-3 py-2 mb-2 outline-none rounded;
+}
+
+.cactus-container .cactus-editor-name {
+  @apply mb-1;
+}
+
+/* Cactus: Buttons */
+.cactus-editor-buttons {
+  @apply flex gap-2;
+}
+
+.cactus-container .cactus-button {
+  @apply text-base bg-gray-200 hover:bg-gray-300 font-medium px-6 py-2 rounded;
+}
+
+.cactus-container .cactus-editor {
+  @apply mb-10;
+}
+
+/* Cactus: Comment List */
+.cactus-container .cactus-comments-list {
+  @apply flex flex-col gap-8;
+}
+
+.cactus-container .cactus-comment {
+  @apply flex gap-4;
+}
+
+.cactus-container .cactus-comment .cactus-comment-avatar img {
+  @apply w-8 h-8 rounded-full;
+}
+
+.cactus-container .cactus-comment .cactus-comment-avatar-placeholder {
+  @apply w-8 h-8 rounded-full bg-gray-300;
+}
+
+.cactus-container .cactus-comment .cactus-comment-header {
+  @apply flex gap-2 items-center;
+}
+
+.cactus-container .cactus-comment .cactus-comment-header .cactus-comment-displayname {
+  @apply font-semibold;
+}
+
+.cactus-container .cactus-comment .cactus-comment-header .cactus-comment-time {
+  @apply text-gray-400 text-sm;
+}
+
+.cactus-container .cactus-comment .cactus-message-text code {
+  @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium;
+}
+
+/* Unordered list */
+.cactus-container .cactus-comment .cactus-message-text ul {
+  @apply list-disc pl-2 md:pl-6;
+}
+
+/* Ordered list */
+.cactus-container .cactus-comment .cactus-message-text ol {
+  @apply list-decimal pl-2 md:pl-6;
+}
+
+/* Cactus: Login */
+.cactus-container .cactus-login-form-wrapper {
+  @apply border mb-6 p-3 relative rounded;
+}
+
+.cactus-container .cactus-login-form .cactus-login-close {
+  @apply absolute right-3 top-3 w-4 h-4;
+}
+
+.cactus-container .cactus-login-form .cactus-login-title {
+  @apply font-bold mb-4 mt-0 pt-0;
+}
+
+/* Cactus: Login with a button */
+.cactus-container .cactus-login-form .cactus-login-client {
+  @apply mb-6;
+}
+
+.cactus-container .cactus-login-form .cactus-login-client-title {
+  @apply font-semibold mb-2;
+}
+
+/* Cactus: Login with credentials */
+.cactus-container .cactus-login-form .cactus-login-credentials {}
+
+.cactus-container .cactus-login-form .cactus-login-credentials-title {
+  @apply font-semibold mb-1;
+}
+
+.cactus-container .cactus-login-form .cactus-login-field {
+  @apply flex gap-4 mb-2 items-center;
+}
+
+.cactus-container .cactus-login-form .cactus-login-label {
+  @apply w-20;
+}
+
+.cactus-container .cactus-login-form input {
+  @apply border px-2 py-1 rounded;
+}