v2.1.0

- Docs ready for v2.1 Changes have been written in CHANGELOG
SavanDev · Oct 23, 2020 · fa9228f · fa9228f
1 parent d6de5db
commit fa9228f
Show file tree

Hide file tree

Showing 15 changed files with 93 additions and 46 deletions.
diff --git a/dist/css/cleanify.css b/dist/css/cleanify.css
diff --git a/public/css/cleanify.css b/public/css/cleanify.css
diff --git a/scss/_colors.scss b/scss/_colors.scss
@@ -16,7 +16,9 @@ $colors: (
     @each $name, $color in $colors {
         --color-#{$name}: #{$color};
     }
+}
 
+body {
     // Theme support
     --bubble: var(--color-light);
     --background: #eee;

diff --git a/scss/_header.scss b/scss/_header.scss
@@ -13,14 +13,6 @@
 header {
     @include init-container();
 
-    &.withImage {
-        img {
-            width: 100%;
-            max-width: 256px;
-            max-height: 256px;
-        }
-    }
-
     > * {
         display: block;
         text-align: center;
@@ -40,36 +32,40 @@ header {
         @include font-size(1.5rem);
     }
 
+    img {
+        width: 100%;
+        max-width: 256px;
+        max-height: 256px;
+    }
+
     @media screen and (min-width: 1000px) {
         display: grid;
-        grid-template:
-            'text'
-            'subText';
         padding: 3rem;
 
         > * {
             display: inline-block;
             margin: auto;
         }
 
-        &.withImage {
-            grid-template:
-            'logo text'
-            'logo subText';
-
-            img {
-                grid-area: logo;
-            }
-        }
-
         h1 {
             @include font-size(4.5rem);
-            grid-area: text;
+            grid-row: 1 / 2;
+            grid-column: 2 / 3;
         }
 
         h2 {
             @include font-size(2rem);
-            grid-area: subText;
+            grid-row: 2 / 3;
+            grid-column: 2 / 3;
+        }
+
+        img {
+            grid-column: 1 / 2;
+            grid-row: 1 / span 2;
+        }
+
+        &:not(.withImage) {
+            grid-template-columns: 0 100%;
         }
     }
 

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -92,6 +92,7 @@ nav {
 
         .navbar-right-menu {
             @include menuMobile();
+            border-radius: 0 0 $border-size $border-size;
             text-align: center;
             float: none;
         }

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
@@ -30,7 +30,7 @@
     @include disableAppareance();
     @include form-baseStyle();
     outline: none;
-    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='20px'><text y='15' font-size='20'>▾</text></svg>")
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='20px'><text y='15' fill='gray' font-size='20'>▾</text></svg>")
         no-repeat right var(--fields);
     padding: 0.5rem 1rem;
 }
@@ -77,7 +77,7 @@
 
     &:hover {
         background-color: var(--color-lightgray);
-        color: var(--color-light);
+        color: var(--color-dark);
     }
 }
 

diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,7 @@
+#darkToggle { color: var(--text) }
+
 #darkToggle:hover {
-  color: var(--color-dark);
+  color: var(--color-warning);
   cursor: pointer;
 }
 

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -6,7 +6,7 @@ import { faDownload, faBook, faAddressCard, faLightbulb } from '@fortawesome/fre
 let darkState = false;
 
 function darkMode() {
-    document.documentElement.setAttribute("dark", darkState ? "0" : "1");
+    document.body.setAttribute("dark", darkState ? "0" : "1");
     darkState = !darkState;
 }
 

diff --git a/src/img/CDExample.png b/src/img/CDExample.png
diff --git a/src/img/Mobile.png b/src/img/Mobile.png
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -37,10 +37,13 @@ const Home: React.FC = () => {
             <article className="grid">
                 <section className="transparent">
                     <h4>Dark Mode</h4>
-                    <p>Depending on the theme established in the system (dark or light), Cleanify will adapt to it automatically!</p>
-                    <hr/>
-                    <p>Now if Windows is dark, Cleanify too. If Windows is light, Cleanify will be as well.</p>
-                    <p>Also, this was tested in GNOME 3 and also works!</p>
+                    <p>The framework has a dark variant that can also be modified with the theme system.</p>
+                    <p>You <b>can activate</b> it using:</p>
+                    <Highlight>
+                        {'<body dark="1">'}<br />
+                        {'  ...'}<br />
+                        {'</body>'}
+                    </Highlight>
                 </section>
                 <section className="transparent">
                     <img src={DarkExample} alt="Example" className="rounded" width="100%"/>

diff --git a/src/pages/docs/Components.tsx b/src/pages/docs/Components.tsx
@@ -154,7 +154,7 @@ const Components: React.FC = () => {
                 <section>
                     <header className="withImage">
                         <img src={logo} alt="Logo" />
-                        <h1>Example Title</h1>
+                        <h1>Example</h1>
                         <h2>Example Subtitle</h2>
                     </header>
                 </section>

diff --git a/src/pages/docs/Content.tsx b/src/pages/docs/Content.tsx
@@ -51,6 +51,49 @@ const Content: React.FC = () => {
                     {'<img class="rounded" src="...">'}
                 </Highlight>
             </section>
+            <section className="transparent">
+                <h2>Theme system</h2>
+                <p>Now you can change the Cleanify Design colors by creating a new <b>.css</b> file following these rules:</p>
+                <Highlight>
+                    {'/* Color base */'}<br />
+                    {':root {'}<br />
+                    {'  --color-primary: #color;'}<br />
+                    {'  --color-secondary: #color;'}<br />
+                    {'  --color-success: #color;'}<br />
+                    {'  --color-danger: #color;'}<br />
+                    {'  --color-warning: #color;'}<br />
+                    {'  --color-info: #color;'}<br />
+                    {'  --color-light: #color;'}<br />
+                    {'  --color-dark: #color;'}<br />
+                    {'  --color-muted: #color;'}<br />
+                    {'  --color-lightgray: #color;'}<br />
+                    {'}'}<br />
+                    <br />
+                    {'/* Theme specific colors */'}<br />
+                    {'body {'}<br />
+                    {'  --bubble: #color;'}<br />
+                    {'  --background: #color;'}<br />
+                    {'  --backgroundTransparent: #color;'}<br />
+                    {'  --text: #color;'}<br />
+                    {'  --list1: #color;'}<br />
+                    {'  --list2: #color;'}<br />
+                    {'  --list: #color;'}<br />
+                    {'  --fields: #color;'}<br />
+                    {'}'}<br />
+                    <br />
+                    {'/* Dark mode variant */'}<br />
+                    {'body[dark="1"] {'}<br />
+                    {'  --bubble: #color;'}<br />
+                    {'  --background: #color;'}<br />
+                    {'  --backgroundTransparent: #color;'}<br />
+                    {'  --text: #color;'}<br />
+                    {'  --list1: #color;'}<br />
+                    {'  --list2: #color;'}<br />
+                    {'  --list: #color;'}<br />
+                    {'  --fields: #color;'}<br />
+                    {'}'}<br />
+                </Highlight>
+            </section>
             <section className="transparent">
                 <h2>Typography</h2>
                 <section>

diff --git a/src/pages/docs/GStarted.tsx b/src/pages/docs/GStarted.tsx
@@ -9,13 +9,13 @@ const GStarted: React.FC = () => {
                 <h2>Let's start!</h2>
                 <p>Once the files have been <Link to="/download">downloaded</Link>, the directory should look like this.</p>
                 <section>
-                    <pre style={{ margin: 5 }}>
-                        {'website'}<br/>
-                        {'--> css'}<br/>
-                        {'-----> cleanify.css'}<br/>
-                        {'--> js'}<br/>
-                        {'-----> cleanify.js'}<br/>
-                        {'--> index.html'}
+                    <pre style={{ margin: 3 }}>
+                        {'> website'}<br/>
+                        {'-> css'}<br/>
+                        {'--> cleanify.css'}<br/>
+                        {'-> js'}<br/>
+                        {'--> cleanify.js'}<br/>
+                        {'-> index.html'}
                     </pre>
                 </section>
                 <h4>Starter template</h4>

diff --git a/src/pages/docs/Layout.tsx b/src/pages/docs/Layout.tsx
@@ -33,11 +33,9 @@ const Layout: React.FC = () => {
                 <div id="containerTransparentExample">
                 </div>
                 <Highlight>
-                    {'<article class="fluid">'}<br/>
-                    {'  <section>'}<br/>
-                    {'      ...'}<br/>
-                    {'  </section>'}<br/>
-                    {'</article>'}
+                    {'<section class="transparent">'}<br/>
+                    {'  ...'}<br/>
+                    {'</section>'}
                 </Highlight>
             </section>
             <section className="transparent">
@@ -50,6 +48,8 @@ const Layout: React.FC = () => {
                 <Highlight>
                     {'<article class="grid">'}<br/>
                     {'  <section>...</section>'}<br/>
+                    {'  <section>...</section>'}<br/>
+                    {'  <section>...</section>'}<br/>
                     {'</article>'}
                 </Highlight>
             </section>