Started Big Woof development

CODE_OF_CONDUCT.md

@@ -10,19 +10,19 @@
 
 .p-btn {
   background: var(--p-btn-def-bg);
-  border: 1px solid var(--p-btn-border);
-  border-radius: .3rem;
+  border-radius: 6px;
   color: var(--p-btn-def-col);
   display: inline-block;
   font-family: -apple-system, "Inter", sans-serif;
   font-size: 1.1rem;
   margin: .7rem;
-  padding: .4rem 1.2rem;
+  padding: 6px 37px;
   text-decoration: none;
   text-align: center;
-  box-shadow: 0px 2px 3px -2px rgba(0,0,0,.3);
+  box-shadow: 0px 0.5px 1px 0.5px rgba(0, 0, 0, .1);
   user-select: none;
   cursor: pointer;
+  border: 1px solid transparent;
 }
 .p-btn:focus{
   outline: 2px solid #64baff;
@@ -31,7 +31,7 @@
   display: block;
 }
 .p-btn.p-btn-sm {
-  padding: .3rem 1.1rem;
+  padding: .2px 10px;
   font-size: 1rem;
 }
 .p-btn.p-btn-md {
@@ -52,17 +52,19 @@
 .p-btn[disabled],
 .p-btn:disabled,
 .p-btn-disabled{
-  filter:contrast(0.5) grayscale(.5) opacity(.8);
+  color: #797979;
+  background: #0d000026;
+  border: none;
   cursor: not-allowed;
   box-shadow: none;
   pointer-events: none;
 }
 
 .p-prim-col {
-  background: linear-gradient(to bottom, #4fc5fa 0%, #0f75f5 100%);
+  background: #017AFF;
   background-size: 100%;
   border:0;
-  box-shadow: inset 0 1px 1px rgb(255 255 255 / 41%), 0px 2px 3px -2px rgba(0,0,0,.3);
+  box-shadow: none;
   color: #fff;
 }
 
@@ -77,7 +79,6 @@
 .p-btn-round {
   border: 0;
   border-radius: 50px;
-  box-shadow: inset 0 1px 1px rgb(255 255 255 / 41%);
   padding: 10px 30px;
 }
 
@@ -89,8 +90,8 @@
   color: #0f75f5;
   display: inline-flex;
   font-weight: 900;
-  height: 40px;
-  width: 40px;
+  height: 26px;
+  width: 26px;
   justify-content: center;
   margin: 5px;
   text-align: center;
@@ -98,9 +99,12 @@
   box-sizing: border-box;
   user-select: none;
   vertical-align: bottom;
+  font-size: 13px;
 }
 
 .p-btn-icon.p-btn-icon-no-border{
+  height: 27px;
+  width: 27px;
   border: 0px;
 }
 

dist/css/forms.css

@@ -28,30 +28,20 @@
   outline: 2px solid #64baff;
 }
 
-.p-form-select::before {
-  border-color: #fff transparent transparent;
-  border-style: solid;
-  border-width: 5px;
-  content: "";
-  pointer-events: none;
-  position: absolute;
-  right: 5px;
-  top: calc(50% - 3px);
-  z-index: 3;
-}
-
 .p-form-select::after {
-  background: linear-gradient(to bottom, #4fc5fa 0%, #0f75f5 100%);
-  border-bottom-right-radius: 5px;
-  border-top-right-radius: 5px;
+  background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M.288 4.117 3.16 1.18c.168-.168.336-.246.54-.246a.731.731 0 0 1 .538.246L7.108 4.12c.125.121.184.27.184.45 0 .359-.293.656-.648.656a.655.655 0 0 1-.48-.211L3.701 2.465l-2.469 2.55a.664.664 0 0 1-.48.212.656.656 0 0 1-.465-1.11Zm3.41 7.324a.73.73 0 0 0 .54-.246l2.87-2.941a.601.601 0 0 0 .184-.45.656.656 0 0 0-.648-.656.677.677 0 0 0-.48.211L3.701 9.91 1.233 7.36a.68.68 0 0 0-.48-.212.656.656 0 0 0-.465 1.11l2.871 2.937c.172.168.336.246.54.246Z' fill='white' style='mix-blend-mode:luminosity'/%3E%3C/svg%3E"), #017AFF;
+  background-size: 100% 75%;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 5px;
   bottom: 0;
   content: "";
   display: block;
-  height: 100%;
+  height: 80%;
   pointer-events: none;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 3%;
+  top: 10%;
   width: 20px;
 }
 
@@ -63,7 +53,7 @@
   font-size: 14px;
   margin: 0;
   outline: none;
-  padding: 5px 30px 5px 10px;
+  padding: 5px 35px 5px 10px;
   position: relative;
   width: 100%;
   color: var(--p-input-color);

docs/examples/actions.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/buttons.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -130,7 +130,7 @@
         <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-lg p-btn-block">Block size</a>
+        <a href="#" class="p-btn p-btn-mob p-btn-block">Block size</a>
 
                 <p>Usage:</p>
         <div class="code">
@@ -142,7 +142,7 @@
 
 &#60;a href="#" class="p-btn p-btn-lg">Large size&#60;/a>
 
-&#60;a href="#" class="p-btn p-btn-lg p-btn-block">Block size&#60;/a>
+&#60;a href="#" class="p-btn p-btn-block">Block size&#60;/a>
         </code>
       </pre>
         </div>
@@ -180,19 +180,19 @@
         <a href="#" class="p-btn-icon p-lime-color">🐶</a>
 
         <a href="#" class="p-btn-icon p-bubblegum-color">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+          <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
         </a>
 
         <a href="#" class="p-btn-icon p-strawberry-color">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+          <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
         </a>
 
         <a href="#" class="p-btn-icon p-orange p-silver-100-color p-btn-icon-no-border">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>
+          <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>
         </a>
 
         <a href="#" class="p-btn-icon p-mint p-silver-100-color">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>
+          <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>
         </a>
 
         <p>Usage:</p>

docs/examples/color_palette.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/dark_mode.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/doc.css

@@ -25,6 +25,17 @@ body {
   margin: 0px;
   color: var(--color-docs);
 }
+body::before{
+  content: 'Attention! You are viewing the documentation of an upcoming version. Looks might differ from version V1.0. For V1.0 documentation, download the V1.0 Release';
+  display: block;
+  margin-bottom: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  background: var(--p-orange);
+  color: #fff;
+  font-family: -apple-system, "Inter", sans-serif;
+}
 h1,
 h2,
 h3,

docs/examples/forms.html

@@ -5,7 +5,7 @@
 	<title>Forms - Puppertino Framework</title>
 	<link href="https://rsms.me/inter/inter.css" rel="stylesheet">
     <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css"> -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     
   	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   	<meta http-equiv="x-ua-compatible" content="ie=edge">

docs/examples/getting-started.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/icons.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/index.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -50,10 +50,7 @@
         <p>Find how to use every component on Puppertino.</p>
       </div>
       <div class="col-xs-11 col-md-3">
-        <h3>Proudly sponsored by</h3>
-        <a href="https://www.ftnow.us/" target="_blank" rel="sponsored">
-        <img src="../landing-images/Fractal_Logo.png" class="sponsored">
-        </a>
+        <h3>Sponsor the project on GitHub</h3>
       </div>
     </div>
     <div class="row">

docs/examples/layout.html

@@ -11,7 +11,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/modals.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/segmented_controls.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/shadows.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/tabs.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/index.html

@@ -6,7 +6,7 @@
       href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900:500,800&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -45,11 +45,16 @@
         color: var(--text_color);
       }
       .cta_pupper {
+        --background: url("landing-images/dog_background_desktop.jpg"), #000;
         min-height: 100vh;
-        background: url("landing-images/pupper_cta.jpg"), #000;
+        background: var(--background);
         background-size: cover;
         background-repeat: no-repeat;
-        background-position: 50% -30%;
+        background-position: 50% 50%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        justify-content: center;
       }
       h1,
       h2,
@@ -60,7 +65,6 @@
         font-family: -apple-system, "Inter", sans-serif;
       }
       h1 {
-        padding-top: 20vh;
         padding-left: 5vw;
         padding-right: 3vw;
         margin-top: 0;
@@ -77,7 +81,6 @@
       }
       .cta_pupper p {
         color: white;
-        padding: 0px 10vw;
       }
       .cta_pupper {
         text-align: center;
@@ -101,6 +104,7 @@
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
+        background-attachment: fixed;
         padding: 15vh 3vw;
       }
       .container-no-pad .row {
@@ -109,7 +113,6 @@
       .speed_h2,
       .speed_p {
         color: #f5f5f5;
-        text-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
       }
       .speed_h2 {
         margin-bottom: 10px;
@@ -120,6 +123,28 @@
       .pad_5 {
         padding: 10vh 0vw 20vh;
       }
+
+      .pd-0{
+        padding: 0px;
+      }
+
+      .pd-5{
+        padding-left: 5vw;
+        padding-right: 5vw;
+        padding-bottom: 5vw;
+      }
+
+      .pos_sticky{
+        height: 100%;
+        position: sticky;
+        top: 0;
+      }
+
+      @media (max-width: 768px){
+          .cta_pupper {
+          --background: url("landing-images/dog_background.jpg"), #000;
+        }
+      }
     </style>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
@@ -133,33 +158,28 @@
   </head>
   <body>
     <div class="cta_pupper">
-      <h1>Your websites. Better.</h1>
       <p>
-        Separate yourself from the rest. Create something unique with
-        <span>Puppertino</span>
+        Your new best friend's here.
       </p>
-      <a
-        href="https://github.com/codedgar/Puppertino"
-        class="p-btn p-prim-col p-btn-round"
-        >Learn more</a
-      >
-      <a href="examples" class="p-link">Read the docs</a>
+      <h1>Puppertino</h1>
+      <div>
+        <a href="https://github.com/codedgar/Puppertino" class="p-btn p-prim-col p-btn-round">Learn more</a>
+        <a href="examples" class="p-link">Read the docs</a>
+      </div>
+
     </div>
-    <div class="container-no-pad pad_5" id="what">
-      <div class="row around-xs middle-xs">
-        <h2 class="title text_black">More than a framework</h2>
-        <div class="col-xs-11 col-md-3" data-aos="fade-in">
-          <img src="landing-images/apple.png" />
+    <div class="container-no-pad" id="what">
+      <div class="row">
+        <div class="col-xs-11 col-md-6 pd-0">
+          <img src="landing-images/dog_style.jpg" />
         </div>
-        <div class="col-xs-11 col-md-5">
+        <div class="col-xs-11 col-md-6 pd-5 pos_sticky">
+          <h2 class="text_black">It's all about <u>style</u> here.</h2>
           <p class="text_black">
             Puppertino is a framework designed based on the
             <strong>Human guidelines</strong> and
             <strong>iOS and macOS</strong> from Apple, while adding our
-            flavor to the mix.<br /><br />
-            That doesn't mean that it's a direct rip-off of everything you would
-            find in the Human Guidelines. We work hard to feature components
-            that will be necessary   to build apps or websites.<br /><br />Puppertino
+            flavor to the mix.<br /><br />Puppertino
             is built to work with any framework available, so if you use
             <strong
               >Bootstrap, Bulma, Flexbox Grid, Skeleton, or any
@@ -174,19 +194,18 @@
     <div class="speed_boye container-no-pad">
       <div class="row">
         <div class="col-xs-11 col-md-offset-1 col-md-5">
-          <h2 class="speed_h2">Focused on speed.</h2>
+          <h2 class="speed_h2">Your users won't see it coming.</h2>
           <p class="speed_p">
-            Puppertino weighs less than 50KB, making your website shine even in
-            the worst connections.
+            Puppertino is designed to load extremely fast, even in the worst connections.
           </p>
         </div>
       </div>
     </div>
 
     <div class="container-no-pad pad_5">
-      <h2 class="title text_black">Enhance your apps.</h2>
-      <div class="row around-xs">
+      <div class="row around-xs middle-xs">
         <div class="col-xs-11 col-md-5">
+          <h2 class=" text_black">Enhance your apps.</h2>
           <p class="text_black">
             If you are creating WebApps, you can use Puppertino to make your
             apps look more like a native app without having to style a lot of