2024 demo

VincentLoy · Dec 5, 2024 · a0872cf · a0872cf
1 parent 540fdde
commit a0872cf
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 51 deletions.
diff --git a/css/demo.css b/css/demo.css
diff --git a/css/scss/demo.scss b/css/scss/demo.scss
@@ -4,13 +4,16 @@
 * Date : 27/06/2015
 * Author : Vincent Loy <vincent.loy1$gmail.com>
 */
-$color-blue-darken: #024772;
-$color-blue: #02658C;
-$color-blue-lighten: #0387A5;
-$color-gray: #BFB6AE;
-$color-gray-lighten: #F2E6DC;
+$color-main: #3F72AF;
+$color-main-darken: #112D4E;
+$color-main-lighten: #6995ca;
+$color-secondary: #F9F7F7;
+$color-secondary-lighten: #F9F7F7;
 $color-white: #fff;
 
+$ff-base: "Wix Madefor Text", serif;
+$ff-title: "Montserrat", sans-serif;
+
 $spacing: 20px;
 
 $tablet: "screen and (min-width: 970px)";
@@ -22,24 +25,31 @@ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,c
 }
 
 body, html {
-  font-family: 'Lato', sans-serif;
-  font-weight: 400;
+  font-family: $ff-base;
+  font-optical-sizing: auto;
+  font-style: normal;
   overflow-x: hidden;
   font-size: 16px;
 }
 
 p {
-  font-size: 18px;
-  line-height: 22px;
+  font-size: 1.2rem;
+  line-height: 1.6;
+  font-weight: 400;
   margin: $spacing 0;
 }
 
+h1, h2, h3 {
+  font-family: $ff-title;
+}
+
+
 header {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: $color-blue-darken;
-  border-bottom: 5px solid $color-blue;
+  background: $color-main-darken;
+  border-bottom: 5px solid $color-main;
   padding: $spacing;
 
   @media #{$tablet} {
@@ -52,8 +62,8 @@ header {
     h1 {
       font-style: italic;
       font-size: 2rem;
-      font-weight: 400;
-      color: $color-gray-lighten;
+      font-weight: 600;
+      color: $color-secondary-lighten;
 
       @media #{$tablet} {
         font-size: 4rem;
@@ -62,8 +72,9 @@ header {
 
     h2 {
       font-size: 1.33rem;
-      color: $color-gray-lighten;
+      color: $color-secondary-lighten;
       margin: $spacing 0;
+      font-weight: 500;
 
       @media #{$tablet} {
         font-size: 1.75rem;
@@ -80,8 +91,8 @@ header {
 }
 
 .button {
-  color: $color-gray-lighten;
-  border:2px solid $color-gray-lighten;
+  color: $color-secondary-lighten;
+  border:2px solid $color-secondary-lighten;
   border-radius: 2px;
   text-decoration: none;
   padding: $spacing / 2;
@@ -108,8 +119,8 @@ header {
   }
 
   &:hover {
-    background: $color-gray-lighten;
-    color: $color-blue-darken;
+    background: $color-secondary-lighten;
+    color: $color-main-darken;
   }
 }
 
@@ -124,7 +135,7 @@ header {
 }
 
 .note {
-  background: $color-blue-lighten;
+  background: $color-main-darken;
   color: $color-white;
   font-style: italic;
   border-radius: 2px;
@@ -133,25 +144,25 @@ header {
 
 main {
   > section:not(:last-of-type) {
-    border-bottom: 1px solid $color-blue-darken;
+    border-bottom: 1px solid $color-main-darken;
     padding-bottom: $spacing;
   }
 
   h2 {
-    font-size: 26px;
-    color: $color-blue;
+    font-size: 2rem;
+    color: $color-main;
     font-weight: 700;
     margin: $spacing 0;
 
     @media #{$tablet} {
-      font-size: 33px;
+      font-size: 3rem;
       margin: $spacing * 2 0;
     }
   }
 
   h3 {
     font-size: 20px;
-    color: $color-blue;
+    color: $color-main;
     font-weight: 700;
     margin: $spacing 0;
 
@@ -161,7 +172,7 @@ main {
     }
 
     a {
-      color: $color-blue-lighten;
+      color: $color-main-lighten;
       text-decoration: none;
       &:hover {
         text-decoration: underline;
@@ -172,41 +183,34 @@ main {
   a {
     font-weight: bold;
     text-decoration: none;
-    color: $color-blue-lighten;
+    color: $color-main-lighten;
     transition: 0.2s ease all;
 
     &:hover {
-      color: $color-blue-darken;
+      color: $color-main-darken;
       text-decoration: underline;
     }
   }
 }
 
-.examples {
-  h3 {
-    margin: $spacing 0 ($spacing / 3) 0;
-
-    & + p {
-      margin-top: 0;
-    }
-  }
-
-  .simply-countdown-inline {
-    margin-top: $spacing;
-  }
+.simply-countdown-inline {
+  margin-top: $spacing;
+  font-weight: bold;
+  font-size: 1.3rem;
 }
 
 footer {
-  background: $color-blue-darken;
+  background: $color-main-darken;
   color: $color-white;
   text-align: center;
   padding: $spacing;
   margin-top: $spacing * 2;
   font-weight: 600;
 
   a {
-    color: lighten($color-blue-lighten, 25%);
+    color: lighten($color-main-lighten, 25%);
     text-decoration: none;
+    font-weight: bold;
 
     &:hover{
       text-decoration: underline;

diff --git a/index.html b/index.html
@@ -8,8 +8,9 @@
     <meta name="keywords" content="Vincent Loy, Javascript, Javascript Library, Javascript Countdown, jQuery Countdown, JS, JS Countdown, Countdown, Countup"/>
     <meta name="description" content="simplyCountdown.js is an easy to use Javascript Countdown Library. You can easly customize it with your own CSS and versatile parameters."/>
 
-    <link href='http://fonts.googleapis.com/css?family=Lato:300,400italic' rel='stylesheet'
-          type='text/css'>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
     <link rel="stylesheet"
           href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"/>
 
@@ -41,16 +42,21 @@ <h2>A Tiny Javascript Countdown Library</h2>
         <h2>Why another countdown ?</h2>
 
         <p>
-            I developed this little library in a boring day. I regularly use this kind of
-            Javascript's
-            libraries to display countdowns on websites and this one exactly meets the needs that I
-            have.
-            It is perfect to make 'under construction' pages, etc.
+            I created this little library on a day when I had some extra time, 
+            inspired by my regular need for JavaScript countdown solutions on websites. 
+            This library is designed to meet my exact needs for simplicity and flexibility, 
+            making it perfect for use cases like 'under construction' pages or upcoming event countdowns.
         </p>
 
         <p>
-            This is a very (very) basic Javascript CountDown.
+            This JavaScript countdown library is lightweight and easy to use—ideal for developers who want a straightforward, 
+            customizable countdown without the unnecessary complexity of many other libraries. Whether it's for landing pages, 
+            promotions, or personal projects, this solution can help you add engaging countdown timers effortlessly.
         </p>
+
+        <p>
+            simplyCountdown.js has been adopted by a variety of projects where developers needed a simple, reliable countdown solution. 
+            Its lightweight nature and ease of customization make it an appealing choice for straightforward use cases like 'under construction' pages or event countdowns
     </section>
 
     <section class="getting-started">
@@ -185,7 +191,7 @@ <h2>Easy to customize</h2>
 </code>
         </pre>
     </section>
-
+        <h2>Demos</h2>
         <h3>Default</h3>
         <p>Displayed whithout jQuery - UTC enabled</p>
         <div class="simply-countdown simply-countdown-one"></div>