Ongoing modifications

README.md

@@ -1,76 +1,31 @@
+
 ![Puppertino Stars](https://img.shields.io/github/stars/codedgar/puppertino?style=for-the-badge) ![Puppertino's contributors](https://img.shields.io/github/contributors/codedgar/puppertino?style=for-the-badge)   [![Follow Puppertino_css](https://img.shields.io/twitter/follow/Puppertino_css?style=for-the-badge)](https://twitter.com/Puppertino_css) [![Follow Codedgar_dev](https://img.shields.io/twitter/follow/codedgar_dev?style=for-the-badge)](https://twitter.com/codedgar_dev)
 ![Puppertino Logo](https://i.imgur.com/r81X3Yj.png)
 
-# Welcome to Puppertino V 1.0!
+# Welcome to Puppertino by Codedgar
 
-Hi! Welcome to **Puppertino!** Puppertino is a framework meant to mimic the look
-of **macOS** and follow the **human guidelines**. Puppertino is a Framework
-created to be lightweight, modular, and cool looking!
 
-> **NOTE**: Puppertino does not include any responsive system, you must use
-> Bootstrap, Flexbox Grid, Skeleton, or some other responsive Framework along
-> with it.
+Welcome to **Puppertino**. A framework designed to bring your macOS apps to a whole new level. Create better interfaces with Puppertino.
 
-## In a nutshell
+## Table of contents
 
-- [Components](#current-components)
-- [Usage](#usage)
-- [Documentation](https://codedgar.github.io/Puppertino/examples/)
+- [Get Started](#get-started)
+- [Current Components](#current-components)
+- [Examples and templates](https://codedgar.github.io/Puppertino/examples/)
 - [About the creator](#about-the-creator)
 
-## Lightweight
-
-I'm focused on making Puppertino as Lightweight as possible, I want it to become
-a big framework, but not at the cost of weight and performance. So to keep it
-small, I won't be adding AnimateCSS, or any other framework (No matter how cool
-it is) on top of Puppertino. And to make it more lightweight, I have implemented
-my second point.
-
-## Modular
-
-I'm developing Puppertino to be used with only the components you need or to be
-used as a complete framework. Choosing the components that you need may help you
-throw some extra KB that you don't need in your website or app.
-
-## Cool looking
-
-This is the most important part of Puppertino! This also means that I can go out
-of the main components of macOS and human guidelines in the future to add other
-things that I think maybe necessary or great to have in the framework. In any
-case, coolness, it's my main focus with Puppertino.
-
-# Current Components
-
-Puppertino currently includes:
-
-- Buttons
-- Switches
-- Actions
-- Form Elements (Inputs, select, form validation)
-- Modals
-- Icons
-- Font Layout
-- Segmented Controls
-- Tabs
-- Shadows
-- NEW! Dark Mode
-- Color Palette
-
-Yeah... That's all. But no worries! I'm working on adding new components every day!
+## Get Started
+To get started you can include the full.css in your head tag as following:
 
-# Usage
+    https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/full.css
+   
+This will include all the components needed to use with Puppertino, 
 
-You can use Puppertino in 3 ways (for now):
+## Current Components
 
-1. You can download the `newfull.css` file located in the `/dist/` directory.
-   Download this if you are sure that you need at least half of the elements
-   that are present in Puppertino.
-2. Download every component CSS that you need from the `/dist/` folder. Such as
-   buttons or form elements or other components. While it maybe tedious to
-   download  them one by one, this can help you to save some KBs in your website. :)
-3. ~~You can now download the SCSS version of Puppertino, also located in `/dist/`.~~ **(Deprecated)**
+The current list of components can be found on the [Components page](https://codedgar.github.io/Puppertino/examples/). If you can't find a component that you want, you can always [create an issue](https://github.com/codedgar/Puppertino/issues/new/choose) to vote for the new components.
 
-# Docs
+## Examples and templates
 
 Find all the documentation, examples, and list of components and how to use them
 at https://codedgar.github.io/Puppertino/.
@@ -81,4 +36,4 @@ Puppertino is free to use and abuse under the [open-source MIT license](https://
 
 ## About the creator
 
-I'm [Edgar Pérez](https://twitter.com/codedgar_dev). And I make cool websites :)
+I'm [Edgar Pérez](https://twitter.com/codedgar_dev). And I make cool websites :)

dist/css/cards.css

@@ -17,13 +17,6 @@
   transition: .3s ease;
   box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
 }
-.p-card:hover{
-  color: var(--p-blueberry-500);
-  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
-}
-.p-card.p-blueberry:hover{
-  background: var(--p-bg-card);
-}
 .p-card-image > img {
   border-bottom: 3px solid var(--accent-article);
   display: block;

dist/css/dark_mode.css

@@ -1,4 +1,4 @@
-.p-dark-mode {
+.p-dark-mode, [data-p-theme=darkmode] {
 
   --p-btn-border: #454545;
   --p-btn-def-bg: #262525;

dist/css/forms.css

@@ -3,6 +3,11 @@
   --primary-col-ac:#0f75f5;
   --bg-color-input:#fff;
 
+  --p-checkbox-gradient: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
+  --p-checkbox-border: rgba(0, 0, 0, 0.2);
+  --p-checkbox-border-active: rgba(0, 0, 0, 0.12);
+  --p-checkbox-bg: transparent;
+  --p-checkbox-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 0px 2px rgba(0, 0, 0, 0.05);
 
   --p-input-bg:#fff;
   --p-input-color:#000;
@@ -16,6 +21,15 @@
   --valid-color:#94d63c;
 }
 
+.p-dark-mode{
+  --p-checkbox-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.13) 100%);
+  --p-checkbox-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25), inset 0px 0.5px 0px rgba(255, 255, 255, 0.15);
+  --p-checkbox-border: rgba(0, 0, 0, 0);
+
+  --p-checkbox-gradient:  linear-gradient(180deg, #3168DD 0%, #2C5FC8 100%);
+  --p-checkbox-border-active: rgba(0, 0, 0, 0);
+}
+
 .p-form-select {
   border-radius: 5px;
   display: inline-block;
@@ -208,12 +222,11 @@ textarea.p-form-text {
   height: 20px;
   margin-right: 5px;
   position: relative;
-  transition: background 0.2s;
+  transition: 0.2s;
   width: 20px;
 }
 
-.p-form-radio-cont:hover > input + span,
-.p-form-checkbox-cont:hover > input + span {
+.p-form-radio-cont:hover > input + span{
   background: #f9f9f9;
 }
 
@@ -250,44 +263,37 @@ textarea.p-form-text {
 
 .p-form-checkbox-cont > input + span {
   border-radius: 5px;
+  box-shadow: var(--p-checkbox-shadow);
+  border: 0.5px solid var(--p-checkbox-border);
+  background: var(--p-checkbox-bg)
 }
 
 .p-form-checkbox-cont > input:checked + span {
-  background: #0f75f5;
+  background: var(--p-checkbox-gradient);
+  border: 0.5px solid var(--p-checkbox-border-active);
+  box-shadow: none;
 }
 
-.p-form-checkbox-cont > input + span::before,
-.p-form-checkbox-cont > input + span::after {
-  background: #fff;
-  border-radius: 20px;
+.p-form-checkbox-cont > input + span::before{
   content: "";
   display: block;
-  height: 8%;
+  height: 100%;
+  width: 100%;
   position: absolute;
+  left: 0%;
+  top: 0%;
   opacity: 0;
   transition: opacity 0.2s;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='m2 5 2.25 2.5L8.5 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' x='.75' y='.25' width='9' height='9' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='.5'/%3E%3CfeGaussianBlur stdDeviation='.25'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_201_11690'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_201_11690' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
+  background-size: 70%;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-.p-form-checkbox-cont > input:checked + span::before,
-.p-form-checkbox-cont > input:checked + span::after {
+.p-form-checkbox-cont > input:checked + span::before{
   opacity: 1;
 }
 
-.p-form-checkbox-cont > input + span::before {
-  right: 30%;
-  top: 15%;
-  transform: rotate(-65deg);
-  transform-origin: top right;
-  width: 70%;
-}
-
-.p-form-checkbox-cont > input + span::after {
-  left: 30%;
-  top: 43%;
-  transform: rotate(59deg);
-  transform-origin: top left;
-  width: 40%;
-}
 
 .p-form-checkbox-cont > input[disabled] + span,
 .p-form-radio-cont > input[disabled] ~ span

docs/examples/buttons.html

@@ -49,9 +49,7 @@
     <h1>Buttons</h1>
     <div class="master">
       <p>
-        Buttons are the main thing that move the interface. That's why it was
-        the main thing that was developed for Puppertino. <br />Puppertino
-        buttons support usage as links, buttons and submit elements.
+        Puppertino Buttons are available to be used as <code class="code">&#60;a></code> and <code class="code">&#60;button></code> tags, with multiple <br> extra classes to allow changing the style of the button.
       </p>
 
       <div class="talk-about-it">
@@ -111,22 +109,25 @@
           <br><br>
           You can use the colors available in <a href="/docs/examples/color_palette.html">Color palette</a> or custom colors defined in your own CSS.
         </p>
-
-        <button class="p-btn p-btn-mob p-lime p-white-color p-white-color">Success</button>
-        <button class="p-btn p-btn-mob p-orange p-white-color p-white-color">Danger</button>
-        <button class="p-btn p-btn-mob p-strawberry p-white-color p-white-color">Error</button>
-
-                <p>Usage:</p>
-        <div class="code">
-          <pre>
-        <code class="html">
+        <div class="row">
+          <div class="col-md-6 mt-lg-5">
+            <button class="p-btn p-btn-mob p-lime p-white-color p-white-color">Success</button>
+            <button class="p-btn p-btn-mob p-orange p-white-color p-white-color">Danger</button>
+            <button class="p-btn p-btn-mob p-strawberry p-white-color p-white-color">Error</button>
+          </div>
+          <div class="col-md-6">
+            <p>Usage:</p>
+            <div class="code">
+              <pre><code class="html">
 &#60;button class="p-btn p-btn-mob p-lime p-white-color p-white-color">Success&#60;/button>
-
+    
 &#60;button class="p-btn p-btn-mob p-orange p-white-color p-white-color">Danger&#60;/button>
-
+    
 &#60;button class="p-btn p-btn-mob p-strawberry p-white-color p-white-color">Error&#60;/button>
-        </code>
-      </pre>
+            </code>
+          </pre>
+            </div>
+          </div>
         </div>
 
       </div>
@@ -136,24 +137,31 @@
         <p>
           Button sizing was a very requested feature during the alpha version of Puppertino. So now, I'm bringin 4 sizes for button sizes:
         </p>
-        <a href="#" class="p-btn p-btn-mob p-btn-sm">Small size</a>
-        <a href="#" class="p-btn p-btn-mob p-btn-md">Medium size</a>
-        <a href="#" class="p-btn p-btn-mob p-btn-lg">Large size</a>
-        <a href="#" class="p-btn p-btn-mob p-btn-block">Block size</a>
-
-                <p>Usage:</p>
-        <div class="code">
-          <pre>
-        <code class="html">
-&#60;a href="#" class="p-btn p-btn-sm">Small size&#60;/a>
-
-&#60;a href="#" class="p-btn p-btn-md">Medium size&#60;/a>
+        <div class="row">
+          <div class="col-md-6 mt-lg-5">
+            <a href="#" class="p-btn p-btn-mob p-btn-sm">Small size</a>
+            <a href="#" class="p-btn p-btn-mob p-btn-md">Medium size</a>
+            <a href="#" class="p-btn p-btn-mob p-btn-lg">Large size</a>
+            <a href="#" class="p-btn p-btn-mob p-btn-block">Block size</a>
+          </div>
+        <div class="col-md-6">
+          <p>Usage:</p>
+          <div class="code">
+            <pre>
+          <code class="html">
+  &#60;a href="#" class="p-btn p-btn-sm">Small size&#60;/a>
+  
+  &#60;a href="#" class="p-btn p-btn-md">Medium size&#60;/a>
+  
+  &#60;a href="#" class="p-btn p-btn-lg">Large size&#60;/a>
+  
+  &#60;a href="#" class="p-btn p-btn-block">Block size&#60;/a>
+          </code>
+        </pre>
+        </div>
+      </div>
 
-&#60;a href="#" class="p-btn p-btn-lg">Large size&#60;/a>
 
-&#60;a href="#" class="p-btn p-btn-block">Block size&#60;/a>
-        </code>
-      </pre>
         </div>
 
       </div>

docs/examples/doc.css

@@ -3,6 +3,8 @@
   --color-docs: #1d1d1f;
   --route-bg:#e6e6e6;
   --white-or-black:#fff;
+  --p-talk-bg: var(--p-silver-100);
+  --p-talk-bd: var(--p-silver-300);
 }
 .dark_theme{
   --bg-docs: #0e0e0e;
@@ -10,11 +12,13 @@
   --route-bg:#040404;
   --white-or-black:#212121;
 }
-.p-dark-mode {
+.p-dark-mode,[data-p-theme=darkmode] {
   --bg-docs: #0e0e0e;
   --color-docs: #e6e6e6;
   --route-bg:#040404;
   --white-or-black:#212121;
+  --p-talk-bg: var(--route-bg);
+  --p-talk-bd: #242424;
 }
 html {
   scroll-behavior: smooth;
@@ -47,6 +51,8 @@ code {
 }
 h1 {
   font-size: 50px;
+  font-weight: 600;
+  opacity: .9;
 }
 a {
   color: var(--primary-col-ac);
@@ -61,7 +67,19 @@ a {
   max-width: 100%;
 }
 .talk-about-it {
-  padding: 1% 5%;
+  padding: 1% 2%;
+  border: 1px solid var(--p-talk-bd);
+  border-radius: 25px;
+  background-color: var(--p-talk-bg);
+  max-width: 1450px;
+  display: block;
+  margin: auto;
+  margin-top: 100px;
+}
+.talk-about-it h2{
+  font-weight: 400;
+  font-size: 2.11rem;
+  line-height: 115%;
 }
 .cta {
   height: 50vh;
@@ -296,8 +314,14 @@ pre {
   background-repeat: no-repeat;
 }
 
+
 @media (max-width: 768px){
   .sponsored{
     max-width: 100%;
   }
+  .talk-about-it {
+    background-color: transparent;
+    border-color: transparent;
+    margin-top: 30px;
+  }
 }

docs/examples/index.html

@@ -54,7 +54,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="getting-started.html" class="p-card p-blueberry p-white-color">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M10.146 10.146l-.353.354.707.707.354-.353-.708-.708zM13.5 7.5l.354.354.353-.354-.353-.354-.354.354zm-2.646-3.354l-.354-.353-.707.707.353.354.708-.708zm-6.708 6.708l.354.353.707-.707-.353-.354-.708.708zM1.5 7.5l-.354-.354-.353.354.353.354L1.5 7.5zm3.354-2.646l.353-.354-.707-.707-.354.353.708.708zm6 6l3-3-.708-.708-3 3 .708.708zm3-3.708l-3-3-.708.708 3 3 .708-.708zm-9 3l-3-3-.708.708 3 3 .708-.708zm-3-2.292l3-3-.708-.708-3 3 .708.708zm6.153-6.436l-2 12 .986.164 2-12-.986-.164z" fill="currentColor"></path></svg>
@@ -63,7 +63,7 @@
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="buttons.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M5.5 10V8.5m0 0v-5a1 1 0 012 0v4h3.353c.91 0 1.647.737 1.647 1.647V10A4.5 4.5 0 018 14.5h-.5a4 4 0 01-4-4 2 2 0 012-2zm3.5-3h2a2.5 2.5 0 000-5H4a2.5 2.5 0 000 5" stroke="currentColor"></path></svg>
@@ -72,7 +72,7 @@
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="forms.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path clip-rule="evenodd" d="M5.5 11.493l2 2.998 2-2.998h4a1 1 0 001-1V1.5a.999.999 0 00-1-.999h-12a1 1 0 00-1 1v8.993a1 1 0 001 1h4z" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"></path></svg>
@@ -81,7 +81,7 @@
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="modals.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M2 12.5v.5h1v-.5H2zm5 0v.5h1v-.5H7zm-4 0V12H2v.5h1zm4-.5v.5h1V12H7zm-2-2a2 2 0 012 2h1a3 3 0 00-3-3v1zm-2 2a2 2 0 012-2V9a3 3 0 00-3 3h1zm2-8a2 2 0 00-2 2h1a1 1 0 011-1V4zm2 2a2 2 0 00-2-2v1a1 1 0 011 1h1zM5 8a2 2 0 002-2H6a1 1 0 01-1 1v1zm0-1a1 1 0 01-1-1H3a2 2 0 002 2V7zM1.5 3h12V2h-12v1zm12.5.5v8h1v-8h-1zm-.5 8.5h-12v1h12v-1zM1 11.5v-8H0v8h1zm.5.5a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 13v-1zm12.5-.5a.5.5 0 01-.5.5v1a1.5 1.5 0 001.5-1.5h-1zM13.5 3a.5.5 0 01.5.5h1A1.5 1.5 0 0013.5 2v1zm-12-1A1.5 1.5 0 000 3.5h1a.5.5 0 01.5-.5V2zM9 6h3V5H9v1zm0 3h3V8H9v1zm-9 6h15v-1H0v1zM3 0v2.5h1V0H3zm8 0v2.5h1V0h-1z" fill="currentColor"></path></svg>
@@ -90,7 +90,7 @@
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="actions.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M15 14.5H0m15-14H0m13.5 9h-12v-4h12v4z" stroke="currentColor"></path></svg>
@@ -99,7 +99,7 @@
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="icons.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M6.5 5.5l1 1 1-1a1.414 1.414 0 012 2l-3 3-3-3a1.414 1.414 0 012-2z" stroke="currentColor"></path><path d="M.5 7.5a7 7 0 1014 0 7 7 0 00-14 0z" stroke="currentColor"></path></svg>
@@ -108,7 +108,7 @@
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="layout.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M7.5 14V1.5M1.5 5V1.5h12V5m-10 8.5H11" stroke="currentColor"></path></svg>
@@ -117,7 +117,7 @@
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="color_palette.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M6.086 2.914l-.354-.353.354.353zM1.914 7.086l-.353-.354.353.354zm0 2.828l.354-.353-.354.353zm3.172 3.172l.353-.354-.353.354zm2.828 0l.354.353-.354-.353zm4.172-4.172l-.354-.353.354.353zm0-2.828l.353-.354-.353.354zM8.914 2.914l-.353.354.353-.354zm3.767 7.586l.353-.354-.353-.353-.354.353.354.354zm1.18 1.18l-.353.354.354-.353zM11.639 14l.312-.39-.312.39zm2.086 0l-.312-.39.312.39zM5.732 2.56L1.561 6.733l.707.707 4.171-4.171-.707-.707zm-4.171 7.708l3.171 3.171.707-.707-3.171-3.171-.707.707zm6.707 3.171l4.171-4.171-.707-.707-4.171 4.171.707.707zm4.171-7.707L9.268 2.561l-.707.707 3.171 3.171.707-.707zm0 3.536a2.5 2.5 0 000-3.536l-.707.707a1.5 1.5 0 010 2.122l.707.707zm-7.707 4.171a2.5 2.5 0 003.536 0l-.707-.707a1.5 1.5 0 01-2.122 0l-.707.707zM1.561 6.732a2.5 2.5 0 000 3.536l.707-.707a1.5 1.5 0 010-2.122l-.707-.707zm4.878-3.464a1.5 1.5 0 012.122 0l.707-.707a2.5 2.5 0 00-3.536 0l.707.707zM7 7V2.5H6V7h1zM2 2.5v4h1v-4H2zM4.5 0A2.5 2.5 0 002 2.5h1A1.5 1.5 0 014.5 1V0zM7 2.5A2.5 2.5 0 004.5 0v1A1.5 1.5 0 016 2.5h1zM1.5 10h10V9h-10v1zm10.827.854l1.181 1.18.707-.707-1.18-1.18-.708.707zm-.473 1.18l1.18-1.18-.707-.708-1.18 1.181.707.707zm.096 1.576c-.29-.232-.422-.51-.438-.77-.015-.257.081-.545.342-.806l-.707-.707c-.444.444-.667 1.004-.633 1.575.035.569.324 1.099.811 1.488l.625-.78zm1.462 0a1.17 1.17 0 01-1.462 0l-.625.78a2.17 2.17 0 002.711 0l-.624-.78zm.096-1.576c.26.26.357.549.341.807-.016.259-.147.537-.437.769l.624.78c.487-.39.777-.919.811-1.489.035-.57-.188-1.13-.632-1.574l-.707.707z" fill="currentColor"></path></svg>
@@ -127,7 +127,7 @@
       </div>
 
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="segmented_controls.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M7.5 1.5v12m-6-6h12m-12-6h12v12h-12v-12z" stroke="currentColor"></path></svg>
@@ -136,7 +136,7 @@
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="shadows.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M1.5 8.5l-.395-.307a.5.5 0 00.041.66L1.5 8.5zm5-7l-.354.354L6.5 1.5zm2 2l.354.354.353-.354-.353-.354L8.5 3.5zm-2 2l-.354.354.354.353.354-.353L6.5 5.5zm-2-2l-.354.354L4.5 3.5zm3.136.864l.354.353-.354-.353zm-.272.272l-.354-.353.354.353zm.272 5.728l-.353-.354.353.354zm5.728-5.728l-.354-.353.354.353zm0-.272l-.354.353.354-.353zm-6 6l.353-.354-.353.354zM2 15h11v-1H2v1zm5.854-.854l-6-6-.708.708 6 6 .708-.707zm-5.96-5.339l3.5-4.5-.789-.614-3.5 4.5.79.614zm4.252-6.953l2 2 .708-.708-2-2-.708.708zm2 1.292l-2 2 .708.708 2-2-.708-.708zm-1.292 2l-2-2-.708.708 2 2 .708-.708zm-2-3.292a.914.914 0 011.292 0l.708-.708a1.914 1.914 0 00-2.708 0l.708.708zm-.708-.708a1.914 1.914 0 000 2.708l.708-.708a.914.914 0 010-1.292l-.708-.708zM7.283 4.01l-.273.273.707.707.273-.273-.707-.707zm.707 6.707l5.727-5.727-.707-.707-5.727 5.727.707.707zm5.727-5.727c.27-.27.27-.71 0-.98l-.707.707a.307.307 0 010-.434l.707.707zM7.01 10.717c.27.27.71.27.98 0l-.707-.707c.12-.12.314-.12.434 0l-.707.707zm0-6.434a4.55 4.55 0 000 6.434l.707-.707a3.55 3.55 0 010-5.02l-.707-.707zm.98.434a3.55 3.55 0 015.02 0l.707-.707a4.55 4.55 0 00-6.434 0l.707.707z" fill="currentColor"></path></svg>
@@ -145,7 +145,7 @@
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="tabs.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M7.5 1.5l.197-.46a.5.5 0 00-.394 0l.197.46zm-7 3l-.197-.46a.5.5 0 000 .92L.5 4.5zm7 3l-.197.46a.5.5 0 00.394 0L7.5 7.5zm7-3l.197.46a.5.5 0 000-.92l-.197.46zm-7 6l-.197.46.197.084.197-.084-.197-.46zm0 3l-.197.46.197.084.197-.084-.197-.46zM7.303 1.04l-7 3 .394.92 7-3-.394-.92zm-7 3.92l7 3 .394-.92-7-3-.394.92zm7.394 3l7-3-.394-.92-7 3 .394.92zm7-3.92l-7-3-.394.92 7 3 .394-.92zM.303 7.96l7 3 .394-.92-7-3-.394.92zm7.394 3l7-3-.394-.92-7 3 .394.92zm-7.394 0l7 3 .394-.92-7-3-.394.92zm7.394 3l7-3-.394-.92-7 3 .394.92z" fill="currentColor"></path></svg>
@@ -155,7 +155,7 @@
       </div>
 
 
-      <div class="col-xs-11 col-sm-4 p-dark-mode">
+      <div class="col-xs-11 col-sm-3 p-dark-mode">
         <a href="dark_mode.html" class="p-card">
           <div class="p-card-content">
             <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M1.66 11.362A6.5 6.5 0 007.693.502a7 7 0 11-6.031 10.86z" stroke="currentColor" stroke-linejoin="round"></path></svg>

docs/index-assets/bootstrap-grid.min.css

@@ -25,7 +25,7 @@
         --text_color: #252525;
         --bg_page_color: #f5f5f5;
       }
-      .p-dark-mode{
+      .p-dark-mode, [data-p-theme=darkmode]{
         --bg_page_color: #0e0e0e;
         --text_color: #f5f5f5;
       }
@@ -68,7 +68,7 @@
 
       .main-cta h2{
         font-weight: 400;
-        margin-bottom: 20px;
+        margin-bottom: 20px;darkmode
         font-size: 30px;
       }
 
@@ -148,7 +148,7 @@
         opacity: 1;
       }
 
-      .p-dark-mode .p-white-darkmode{
+      .p-dark-mode .p-white-darkmode, [data-p-theme=darkmode] .p-white-darkmode{
         color: #fff;
       }
 
@@ -163,7 +163,7 @@
       }
 
       .puppertino-footer{
-        background: var(--p-blueberry-700);
+        background: var(--p-slate-700);
         color: #fff;
       }
 
@@ -353,7 +353,7 @@
       </div>
     </div>
 </body>
-  <script src="../src/js/Puppertino.js"></script>
+  <script src="../src/js/dakmode_manager.js"></script>
   <script defer>
     document.querySelector('.toggles_dark_mode input').addEventListener('change',function(){
       let theme = localStorage.getItem('puppertino_theme');