diff --git a/build.sh b/build.sh index c4b5b74..3343fbb 100755 --- a/build.sh +++ b/build.sh @@ -59,8 +59,22 @@ rm -rf public # Compile Tailwind echo "๐งต Building Tailwind CSS..." +# Create a backup of the original CSS file +cp css/index.css css/index.css.bak + +# Generate the CSS file with Tailwind ./tailwindcss -i css/index.css -o static/css/index.css --minify +# Check if the generated CSS file is empty or very small +if [ ! -s static/css/index.css ] || [ $(wc -c < static/css/index.css) -lt 1000 ]; then + echo "โ ๏ธ Warning: Generated CSS file is empty or very small. Using backup CSS file." + # If Tailwind fails to generate a proper CSS file, use a pre-generated one + cp css/index.css.bak static/css/index.css +fi + +# Print the size of the generated CSS file +echo "๐ Generated CSS file size: $(du -h static/css/index.css | cut -f1)" + # Build Zola site echo "๐ Running Zola..." zola --root "$ABS_DIR_OF_SCRIPT" build diff --git a/css/index.css b/css/index.css index 1a892e3..1c2336e 100644 --- a/css/index.css +++ b/css/index.css @@ -1,16 +1,5 @@ - -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer components { - /* .btn-primary { - @apply py-1.5 px-3 text-center bg-blue-700 rounded-md text-white; - } */ -} - @import "tailwindcss/base"; @import "layout.css"; @import "tailwindcss/components"; @@ -82,10 +71,6 @@ body.dark-mode .icon { fill: #ffffff !important; } -body.dark-mode .card { - background-color: rgba(82, 82, 82, 50%) !important; -} - body.dark-mode .dropdown a{ @apply px-0 @@ -118,6 +103,20 @@ body.dark-mode .d_menu { background-color: rgba(255, 255, 255, 0.75); } +.bg-dark-gradient { + background: rgba(16,16,16,1); + background: radial-gradient(circle, rgba(16,16,16,1) 0%, rgb(24, 24, 24) 50%, rgba(16,16,16,1) 100%); +} + +.bg-black1 { + background-color: rgba(16,16,16,1); +} + +.bg-transparent { + background-color: transparent; +} + + /* Custom css allowing image styling in markdown */ img[src*="#mx-auto"] { @@ -210,18 +209,63 @@ a img:hover{ text-white } +.subtitle { + background-color:#58CF77 !important; + color: #fff !important; + text-transform: uppercase; + /* font-weight: 600 !important; */ +} + +.green{ + + background-color:#58CF77 !important; + color: #fff !important; + +} + +.green:hover { +background-color:#7ad993 !important; +} +.green a{ + color: #fff !important; +} + +.green:hover { +background-color:#7ad993 !important; +} + +.green_text{ +color: #58CF77 ; +} + + + .blue_b{ + + background-color:#2E83FF !important; + color: #fff !important; + +} +.blue_b a{ + color: #fff !important; +} + +.blue_b:hover { +background-color:#5596f5 !important; +} + + .footer-cust a{ - + color: #999; cursor: pointer; } .footer-cust a:hover { - color: #a3a3a3; + color: #c7c7c7; } -/* .footer-cust h6{ +.footer-cust h6{ margin-bottom: 15px; -} */ +} .logo_size{ width:200px @@ -286,18 +330,18 @@ a img:hover{ @layer components { h1 { - @apply text-4xl font-semibold tracking-tight lg:text-6xl; + @apply text-4xl lg:text-6xl font-normal; font-family: "Inter", sans-serif !important; } h2 { - @apply lg:text-5xl text-4xl font-medium tracking-tight leading-none; + @apply text-3xl lg:text-4xl my-4 font-normal leading-none; font-family: "Inter", sans-serif !important; } h2 strong { @apply font-semibold; } h3 { - @apply lg:text-4xl text-3xl font-normal tracking-tight; + @apply text-2xl lg:text-3xl my-4 font-extralight; font-family: "Inter", sans-serif !important; } h3 strong { @@ -414,6 +458,11 @@ a img:hover{ font-family: "Inter", sans-serif; } + +/* button:hover :is(:where(a)) { + color: #5e5e5e; +} */ + button :is(:where(p)) { color: #ddd; font-weight: 400; @@ -592,6 +641,7 @@ header { .post-content-text h2 { font-family: "Inter", sans-serif; line-height: 1.5; + font-size: 2.25rem; font-weight: 700; } .container-fluid { @@ -605,8 +655,12 @@ header { .zola-anchor { display: none; } - - +@media (min-width: 1024px){ + h2 { + font-size: 3.5rem; + } + +} @media (max-width: 1024px) { diff --git a/css/index.css.bak b/css/index.css.bak new file mode 100644 index 0000000..1c2336e --- /dev/null +++ b/css/index.css.bak @@ -0,0 +1,743 @@ + + +@import "tailwindcss/base"; +@import "layout.css"; +@import "tailwindcss/components"; +@import "admonition.css"; +@import "tailwindcss/utilities"; +@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); + +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); + +/* Defaul lightMode */ +body { + background-color: #ffffff; + color: #000000; +} + +body .semigray { + + color: #424242 !important; +} + +body .semigray2 { + + color: #424242 !important; +} + +body .nav a { + color: #333333 !important; +} + +body .dropdown a{ + @apply + px-0 + text-black +} + +body .dropdown{ + background-color: rgb(255 255 255 / 100%); + color: #121212; +} + +body .d_menu { + background-color: #e5e5e5; +} + +body .icon { + + fill: #424242 !important; +} + +/* Dark Mode */ +body.dark-mode { + background-color: #121212; + color: #ffffff; +} + +body.dark-mode .nav a { + color: #ffffff !important; +} + +body.dark-mode .semigray { + color: #e5e7eb !important; +} + +body.dark-mode .semigray2 { + color: #d1d5db !important; +} + +body.dark-mode .icon { + fill: #ffffff !important; +} + +body.dark-mode .dropdown a{ + @apply + px-0 + text-white +} + +body.dark-mode .dropdown{ + background-color: rgb(0 0 0 / 50%); + color: #fff; +} + +body.dark-mode .d_menu { + background-color: rgba(34 34 34); +} + + + + + +/* Custom CSS for header partial */ +.backdrop-blur { + -webkit-backdrop-filter: blur(40px); +} + +* { + font-family: "Inter", sans-serif; +} + +.bg-semi-white { + background-color: rgba(255, 255, 255, 0.75); +} + +.bg-dark-gradient { + background: rgba(16,16,16,1); + background: radial-gradient(circle, rgba(16,16,16,1) 0%, rgb(24, 24, 24) 50%, rgba(16,16,16,1) 100%); +} + +.bg-black1 { + background-color: rgba(16,16,16,1); +} + +.bg-transparent { + background-color: transparent; +} + + + +/* Custom css allowing image styling in markdown */ +img[src*="#mx-auto"] { + margin: auto; +} + +img[src*="#small"] { + width: 68px; +} + +img[src*="#medium"] { + width: 400px; + margin: auto; +} + +img[src*="#logo"] { + max-width: min(250px, 100%); + margin: auto; +} + +img[src*="#icon"] { + width: 200px; + margin: auto; +} + +img[src*="#social"] { + width: 60px; + margin: auto; +} + +img[src*="#semilarge"] { + width: 500px; + margin: auto; +} + +img[src*="#large"] { + width: 700px; + margin: auto; +} + +img[src*="#tft_img"] { + width: 100px; + margin: auto; +} + +img[src*="#absolute"] { + position: absolute; + left: 0; + top: 0; +} + +a img:hover{ + opacity: 0.5 !important; + cursor: pointer; +} + +/* new theme */ + +.dropdown { + + background-color: rgb(0 0 0 / 50%); + @apply + lg:text-lg + px-6 + py-1 + lg:mr-5 + my-3 + shadow + border-black + capitalize + leading-6 + border-transparent + flex + flex-col + border-2 + w-full + items-start + rounded + transition + hover:border-stone-700 + /* hover:bg-stone-100 */ + p-2 + text-left + text-white +} + +.dropdown a{ + @apply + px-0 + text-white +} + +.subtitle { + background-color:#58CF77 !important; + color: #fff !important; + text-transform: uppercase; + /* font-weight: 600 !important; */ +} + +.green{ + + background-color:#58CF77 !important; + color: #fff !important; + +} + +.green:hover { +background-color:#7ad993 !important; +} +.green a{ + color: #fff !important; +} + +.green:hover { +background-color:#7ad993 !important; +} + +.green_text{ +color: #58CF77 ; +} + + + .blue_b{ + + background-color:#2E83FF !important; + color: #fff !important; + +} +.blue_b a{ + color: #fff !important; +} + +.blue_b:hover { +background-color:#5596f5 !important; +} + + +.footer-cust a{ + color: #999; + cursor: pointer; +} + +.footer-cust a:hover { + color: #c7c7c7; +} + +.footer-cust h6{ + margin-bottom: 15px; +} + +.logo_size{ + width:200px +} + + +.nav p > a { + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; + text-align: left; + line-height: 1.5rem; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + border-radius: 0.25rem; + border-width: 2px; + border-color: transparent; + padding: 0.5rem; + margin-top: 0.75rem; + margin-bottom: 0.75rem; + display: inline-block; + border-width: 2px; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); + padding-left: 3rem; + padding-right: 3rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + text-transform: capitalize; + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); +} + +.nav p > a:hover { + --tw-border-opacity: 1; + border-color: rgb(231 229 228 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(245 245 244 / var(--tw-bg-opacity)); +} + +.big_header{ + font-size: 6rem !important; + font-weight: 500 !important; +} + +.mycard{ + height: 300px !important; +} + + +.mypartners{ + height: 300px !important; + +} + +.key_card{ + + height: 250px; + +} + + +@layer components { + h1 { + @apply text-4xl lg:text-6xl font-normal; + font-family: "Inter", sans-serif !important; + } + h2 { + @apply text-3xl lg:text-4xl my-4 font-normal leading-none; + font-family: "Inter", sans-serif !important; + } + h2 strong { + @apply font-semibold; + } + h3 { + @apply text-2xl lg:text-3xl my-4 font-extralight; + font-family: "Inter", sans-serif !important; + } + h3 strong { + @apply font-normal; + } + h4 { + @apply text-xl lg:text-2xl font-normal tracking-wider; + font-family: "Inter", sans-serif !important; + + } + h5 { + @apply text-lg my-1 tracking-normal font-medium; + font-family: "Inter", sans-serif !important; + + } + h6 { + @apply text-md not-italic font-normal my-1; + font-family: "Inter", sans-serif !important; + } + p { + @apply text-lg; + + font-family: "Inter", sans-serif !important; + } + blockquote { + @apply border-l-4 border-gray-400 mx-2 my-2 p-2; + } + li { + @apply text-base lg:text-base font-normal; + } + li li { + @apply text-sm lg:text-sm font-light; + } + button { + @apply + inline-block + md:text-md + text-sm + lg:mr-3 + py-1 + my-2 + border + rounded + shadow + border-gray-400 + capitalize + bg-gray-200 + } + .my-header h4{ + color:#9f9f9f; + + } + + h3 a{ + color:#ffffff; + + } + + h3 a:hover{ + color:#b6b6b6; + + } + + + + + + .article h2{ + font-size: 2.25rem; + font-family: "Inter", sans-serif; + line-height: 1.5; + font-weight: 700; + color:#e2e2e2; + } + + .article h1{ + font-family: "Inter", sans-serif; + } + + } + .article p{ + font-size: 1.125rem; + font-family: "Inter", sans-serif; + line-height: 1.7; + color:#e2e2e2 + } + + .post-content-text a, .article a{ + color: #a5a5a5; + } + + .post-content-text a:hover, .article a:hover{ + color: #c6c9c8; + } + + .article li{ + font-size: 1.125rem; + font-family: "Inter", sans-serif; + line-height: 1.7; + color:#e2e2e2 + } + + .article h3{ + font-weight: 400; + + } + + .article h4{ + color: #fff !important; + + } + + .main-title { + font-family: "Inter", sans-serif; + } + + +/* button:hover :is(:where(a)) { + color: #5e5e5e; +} */ + +button :is(:where(p)) { + color: #ddd; + font-weight: 400; +} + +button a { + line-height: 1.3; + @apply + text-black + px-8 +} + +.long-text a{ + padding-left: 2rem; + padding-right: 2rem; + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +a { + border-width: 0px; +} + +header { + font-family: "Inter", sans-serif; +} + +.nav_btn { + margin: 0 !important; + border: none !important; + box-shadow: none !important; +} + +.quicklinks { + box-sizing: border-box; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: auto; + margin: 0 auto; + border-radius: 10px; + margin-top: 30px; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 20px; +} +.quicklinks img { + height: auto; + max-width: 200px; + display: inline-block; + padding: 10px; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + position: relative; + + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + opacity: 0.5; +} + +.quicklinks img:hover { + opacity: 1; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + -webkit-filter: grayscale(0%); + filter: grayscale(0%); +} + + +.banner { + width: 100%; + margin: 0; + padding: 120px 0; + text-align: center; + position: relative; + display: block; + color: #fff !important; + letter-spacing: 0.5px; + overflow: hidden; + background: #00838d; + transition: 1.5s; +} + +.header { + height: auto; + background: none; + padding: 200px 0; +} + +.banner h2, +.header h1 { + margin: auto; + color: #fff; + position: relative; + transition: 0.3s; + z-index: 1; + white-space: nowrap; +} + +.header h1 { + color: #000; + transition: none; +} + +.banner h2 svg { + font-size: 40px; + margin-left: 15px; + position: absolute; + top: 55%; + transform: translateY(-50%) scale(0.5); + opacity: 0; + transition: 0.3s; +} + +.banner .back { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-position: center; + background-size: cover; + filter: grayscale(1) contrast(1.4); + opacity: 0.25; + transition: 1.5s; +} + +.header .back { + filter: none; + opacity: 1; + background-position: center; + + background-size: cover; + background-repeat: no-repeat; +} + +.banner:hover { + background: #4b3a92; +} + +.header:hover { + background: none; +} + +.banner:hover h2 svg { + transform: translateY(-50%) scale(1); + opacity: 1; +} + +.banner:hover h2 { + padding-right: 40px; +} + +.header:hover h1 { + padding-right: 0; +} + +.banner:hover .back { + transform: scale(1.03); +} + +.header:hover .back { + transform: none; +} + +.my-test{ + font-family: "Inter", sans-serif; +} +.post-content-text .my-test { + font-family: "Inter", sans-serif; + line-height: 1.7; +} + +.post-content-text h2 { + font-family: "Inter", sans-serif; + line-height: 1.5; + font-size: 2.25rem; + font-weight: 700; +} +.container-fluid { + width: 100%; + /* padding-right: 15px; + padding-left: 15px; */ + margin-right: auto; + margin-left: auto; +} + +.zola-anchor { + display: none; +} +@media (min-width: 1024px){ + h2 { + font-size: 3.5rem; + } + +} + +@media (max-width: 1024px) { + + .mycard{ + height: auto !important; + } + +} + +@media (max-width: 640px) { + .banner h2 { + font: 600 7vw/10vw; + } + + .header h1 { + font-size: 35px; + } + + .banner h2 svg { + font-size: 30px; + } + .arrow img{ + -moz-transform:rotate(90deg); + -webkit-transform:rotate(90deg); + -ms-transform:rotate(90deg); + transform: rotate(90deg); + } + + .mycard{ + height: auto !important; + } +} + +@media (max-width: 480px) { + .banner, + .header { + padding: 80px 0; + } + + .article h2{ + font-size: 1.5rem; + } + + img[src*="#medium"] { + width: 250px; + margin: auto; + } + + img[src*="#sm_none"] { + display: none; + } + + .big_header{ + font-size: 4rem !important; + + } + + .mytest{ + height: auto; + } + + .card_h { + height: auto !important; + } + + .mycard{ + height: auto !important; + } + + .key_card{ + height: auto; + } + + .mypartners{ + height: auto; + + } + +} + diff --git a/tailwind.config.js b/tailwind.config.js index 1bc5ba5..eb65f68 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,7 +3,6 @@ const colors = require('tailwindcss/colors') module.exports = { darkMode: 'class', content: [ - './css/index.css', './templates/**/*.html' ], safelist: [ diff --git a/templates/partials/head.html b/templates/partials/head.html index aa57a8f..6097b2c 100644 --- a/templates/partials/head.html +++ b/templates/partials/head.html @@ -5,6 +5,13 @@ {% set zolaVer = '0.13.0' %}
+ + + + + + + {% block title %}