truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend style fix

Browse Source
This commit is contained in:
Ümit Tunç
2026-01-01 16:25:27 +03:00
parent e8cdba4fd3
commit 0ca75829bb
454 changed files with 10087 additions and 9940 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/docs/index.html
+56 -56
View File
@@ -650,16 +650,16 @@
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] "
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] "
href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] "
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] "
href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] "
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] "
href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -700,11 +700,11 @@
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='active' href='index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='faq.html'>FAQ</a>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='faq.html'>FAQ</a>
</li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='credits.html'>Credits</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -714,13 +714,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -730,34 +730,34 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/accordion.html'>Accordion</a>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='elements/accordion.html'>Accordion</a>
</li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -771,13 +771,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="!text-inherit hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active"
<li><a class="!text-inherit hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active"
href="#snippet-1">Overview</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] "
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] "
href="#snippet-2">File Structure</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] "
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] "
href="#snippet-3">Installation</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] "
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] "
href="#snippet-5">Quick Video</a></li>
</ul>
</nav>
@@ -796,7 +796,7 @@
<p>If you have any questions that are beyond the scope of this help documentation, please feel free to
contact us with the links below and please don't forget to provide your website URL.</p>
<a href="https://themeforest.net/user/ib-themes"
class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
target="_blank">Contact Form</a>
<a href="https://truncgil.com.tr/comments"
class="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]"
@@ -844,7 +844,7 @@
class="folder !bg-[#e0e9fa]">dist/docs</code> Contain all documentation files (installation,
blocks, elements, etc.) regarding the template. You can also reach the documentation from the <a
href="index.html"
class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
target="_blank">live demo</a> as well.</li>
<li><code class="file !bg-[#e0e9fa]">package.json</code> Includes the list of dependencies to install
from npm.</li>
@@ -863,17 +863,17 @@
these steps:</p>
<ol class="!mb-0">
<li><strong>Install</strong> <a href="https://nodejs.org/en/"
class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
target="_blank">Node.js</a> if you don’t have it yet.</li>
<li><strong>Then Run</strong> <kbd class="terminal">yarn dev or npm run dev</kbd>
</li>
<li>You should now have the project files set up and all the npm packages installed.</li>
<li><strong>Install Vs code Live Server plugin to run HTML file locally</strong> <a
href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer"
class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
target="_blank">Live Server</a> if you don’t have it yet. You can check this video guide <a
href="https://youtu.be/9kEOkw_LvGU?si=UXmIWI4qW0KgAVqV"
class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
target="_blank">Video Guide</a></li>
<li><strong>Build</strong> <kbd class="terminal">npm run build or yarn build </kbd> you wll run this
command after
@@ -890,13 +890,13 @@
<div class="card">
<div class="card-body p-[40px]">
<p class="!mb-2">This <a href="https://youtu.be/5uAiBfQsB1k"
class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
target="_blank">quick video</a> demonstrates:</p>
<p class="!mb-2">This <a href="https://youtu.be/l4IAxGmEUBI"
class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
target="_blank">How to Change Color</a> demonstrates:</p>
<p class="!mb-2">This <a href="https://youtu.be/uqTmqQJMDHU"
class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom"
target="_blank">How to Change icon font</a> demonstrates:</p>
<ul class="pl-0 list-none !mb-0">
<li>Installing npm packages (Terminal command: <kbd class="terminal !mt-[-0.25rem]">npm install or
@@ -944,10 +944,10 @@
</section>
<!-- /section -->
<div
class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path
class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none"
class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none"
d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>