diff --git a/assets/css/app.scss b/assets/css/app.scss index d0386d8..99200ff 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -1,8 +1,9 @@ @import "app/config"; -@import "~wire.css/dist/wire.css"; -@import "~tingle.js/src/tingle.css"; @import 'app/prism'; -@import 'app/alert'; + +@tailwind base; +@tailwind components; +@tailwind utilities; @font-face { font-family: "MainFont"; @@ -46,7 +47,7 @@ html, body { } body { - font-size: 1.7em; + // font-size: 1.7em; } $dicons: coffee server search project share contact list response twitter diaspora github code rss linkedin mastodon pixelfed gpg matrix murph cube link; @@ -170,9 +171,9 @@ pre[class*="language-"] { } } -.button, .btn, input[type="submit"], input[type="button"] { - border-radius: 10px; -} +// .button, .btn, input[type="submit"], input[type="button"] { +// border-radius: 10px; +// } .no-margin { margin: 0; @@ -339,7 +340,7 @@ pre[class*="language-"] { } .content { - background: $color-content-background; + // background: $color-content-background; width: calc(100% - 230px); } @@ -804,17 +805,17 @@ $links: ( } } -.button, .btn, input[type="submit"], input[type="button"] { - background: $color-blue; -} - -.button:hover, .btn:hover, input:hover[type="submit"], input:hover[type="button"] { - background: $color-blue2; -} - -.button:focus, .btn:focus, input:focus[type="submit"], input:focus[type="button"] { - background: $color-blue2; -} +// .button, .btn, input[type="submit"], input[type="button"] { +// background: $color-blue; +// } +// +// .button:hover, .btn:hover, input:hover[type="submit"], input:hover[type="button"] { +// background: $color-blue2; +// } +// +// .button:focus, .btn:focus, input:focus[type="submit"], input:focus[type="button"] { +// background: $color-blue2; +// } .pager { padding: 20px 20px 0 20px; @@ -886,83 +887,78 @@ $links: ( } } -.tingle-modal-box--mesh { - .tingle-modal-box__content { +.modal-mesh { + iframe { + margin: 0; padding: 0; - line-height: 0; - - iframe { - margin: 0; - padding: 0; - height: 90vh; - width: 100%; - } + height: 80vh; + width: 100%; } } -.card { - border: 1px solid $color-hr-border; - border-radius: 10px; - margin: 20px; - - &-preview { - img { - border-top-left-radius: 10px; - border-top-right-radius: 10px; - width: 100%; - } - } - - &-title { - font-size: 20px; - padding: 10px; - color: $color-body-text; - } - - &-description { - padding-left: 10px; - padding-right: 10px; - } - - &-file { - ul { - margin-top: 0; - } - - li { - padding-left: 0; - } - } - - .button { - margin-top: 4px; - } -} - - -.cards { - padding: 0 20px 20px 20px; - - &--posts { - padding-left: 0; - padding-right: 0; - - .card-preview { - img { - max-height: 200px; - width: 100%; - } - } - - .row > .col-4:nth-child(1) .card { - margin-left: 0; - } - - .row > .col-4:nth-child(3) .card { - margin-right: 0; - } - } -} +// .card { +// border: 1px solid $color-hr-border; +// border-radius: 10px; +// margin: 20px; +// +// &-preview { +// img { +// border-top-left-radius: 10px; +// border-top-right-radius: 10px; +// width: 100%; +// } +// } +// +// &-title { +// font-size: 20px; +// padding: 10px; +// color: $color-body-text; +// } +// +// &-description { +// padding-left: 10px; +// padding-right: 10px; +// } +// +// &-file { +// ul { +// margin-top: 0; +// } +// +// li { +// padding-left: 0; +// } +// } +// +// .button { +// margin-top: 4px; +// } +// } +// +// +// .cards { +// padding: 0 20px 20px 20px; +// +// &--posts { +// padding-left: 0; +// padding-right: 0; +// +// .card-preview { +// img { +// max-height: 200px; +// width: 100%; +// } +// } +// +// .row > .col-4:nth-child(1) .card { +// margin-left: 0; +// } +// +// .row > .col-4:nth-child(3) .card { +// margin-right: 0; +// } +// } +// } .ejs-link { border: 2px solid $color-very-light-grey; @@ -1156,111 +1152,13 @@ $links: ( } @media (prefers-color-scheme: dark) { - .content { - background: #242b3d; - } - - .body, .review, #form { - a, h1, h2, h3, h4, h5, p, ul, li, label, th, td, - .h1, .h2, .h3, .h4, .h5, .review-body { - color: #fff !important; - } - } - - .review .review-header .review-anchor-link { - color: #ccc; - } - - .body p a, .body ul a { - border-bottom: 2px dotted $color-white; - } - - .body p strong, .body ul strong { - background: rgba(255, 255, 255, 0.1); - } - - .body .pager a { - border-bottom: 0; - } - - img.border { - border-color: #32333b; - } - - .form .field { - input[type=text], - input[type=email], - input[type=url], - textarea { - border-color: #32333b; - background: #86899f; - } - } - - .content hr, .content .hr { - background: none; - } - - .quick-body, - .quick-video .video-ratio, - .quick-image img, - .content hr, .content .hr, - .ejs-link, - .alert - { - border-color: darken($color-wide-menu-background-to, 10%) !important; - } - - .quick-body { - background: $color-wide-menu-background-to; - } - - .ejs-link { - background: $color-wide-menu-background-to; - } - - .code-title { - background: #000000; - } - - .code-window { - background: #000000 url('../images/window.svg') no-repeat center right; - } - - .body pre { - background: #141414; - } - - .body pre[class*="language-"], .code-title { - border: 1px solid #000000; - border-radius: 0; - } - - .body pre { - &.with-title { - border: 3px solid #000; - } - } - - .card { - border-color: #86899f; - - &-title { - color: #fff; - } - - &-description { - color: #fff; - } - } - - .review.review--post { - border-color: #86899f; - } - - .header-shadow { - background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255,255,255,0) 100%); - } + // .content { + // background: #242b3d; + // } + // + // .header-shadow { + // background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255,255,255,0) 100%); + // } } @media all and (max-height: 600px) { diff --git a/package.json b/package.json index b0398ea..1829bbd 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "build": "encore production" }, "dependencies": { + "daisyui": "^2.31.0", "encore": "^0.0.30-beta", "flatpickr": "^4.6.9", "lozad": "^1.16.0", @@ -21,5 +22,11 @@ "vanillajs-datepicker": "^1.1.4", "vue": "^2.6.14", "wire.css": "^1.2.5" + }, + "devDependencies": { + "autoprefixer": "^10.4.12", + "postcss": "^8.4.16", + "postcss-loader": "^7.0.1", + "tailwindcss": "^3.1.8" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..3dd9c78 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,14 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./assets/**/*.js", + "./templates/**/*.html.twig", + ], + theme: { + extend: {}, + }, + plugins: [require("daisyui")], + daisyui: { + themes: ["dark"], + }, +} diff --git a/templates/base.html.twig b/templates/base.html.twig index a3e7d9f..3779e75 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -67,8 +67,8 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX - -
+ +
{{ include('module/_navigation.html.twig') }}
@@ -96,13 +96,19 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-
+
{% set flashes = app.flashes %} {% if flashes|length %} + {% set classes = { + info: 'alert-info', + success: 'alert-success', + warning: 'alert-warning', + error: 'alert-error', + } %} {% for level, messages in flashes %} {% for message in messages %} -
+
{{- message|nl2br -}}
{% endfor %} @@ -115,10 +121,9 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX {% endblock %}
- -
- {{- setting('blog_footer')|murph_url|raw -}} -
+
+
+ {{- setting('blog_footer')|murph_url|raw -}}
{% block js %} diff --git a/templates/module/_navigation.html.twig b/templates/module/_navigation.html.twig index b6764b5..e5d5e1c 100644 --- a/templates/module/_navigation.html.twig +++ b/templates/module/_navigation.html.twig @@ -54,6 +54,7 @@ {%- endif -%}
+{#
+#} diff --git a/templates/module/_pager.html.twig b/templates/module/_pager.html.twig index c3fe56c..26d93ef 100644 --- a/templates/module/_pager.html.twig +++ b/templates/module/_pager.html.twig @@ -1,58 +1,48 @@ {% if pages > 1 %} -