Strona główna Odkrywaj Pomoc
Zaloguj się
tati
/
eba-vademecum
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

Use Bulma css

Tatiana Inama 7 lat temu
rodzic
d245785aca
commit
976700772d
7 zmienionych plików z 56 dodań i 49 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 1 0
      css/bulma.min.css
  2. 23 24
      css/main.css
  3. 8 8
      index.html
  4. 13 8
      js/vademecum.js
  5. 10 8
      lib/vademecum.js
  6. 1 1
      package.json
  7. BIN
      pdf/vademecum.pdf

Plik diff jest za duży
+ 1 - 0
css/bulma.min.css


+ 23 - 24
css/main.css
Wyświetl plik 

@@ -1,6 +1,5 @@
 
 body {
 
     font-family: 'Roboto', sans-serif;
 
-    font-size: 16px;
 
     background-color: white;
 
     color: #182F40;
 
 }
 
@@ -33,6 +32,7 @@ body {
 
     text-align: center;
 
     padding: 0 1rem;
 
 }
 
+
 
 h2,
 
 h2.category-name {
 
     background: rgb(24,40,72);
 
@@ -45,33 +45,26 @@ h2.category-name {
 
     font-weight: 300;
 
     letter-spacing: 0.05rem;
 
     page-break-before: always;
 
+    margin-bottom: 2rem;
 
 }
 
 
-/* .category-title::after{
 
-    display: block;
 
-    content: '';
 
-    width: 50%;
 
-    height: 6rem;
 
-    transform: skew(-30deg);
 
-    background: rgba(0, 38, 84, 0.7);
 
-    position: relative;
 
-    top: 0;
 
-    left: -50px;
 
-    box-shadow: 0 3px 5px 0px rgba(0,0,0,0.5);
 
-} */
 
-
 
-.product-name {
 
-    background-color: rgba(24,40,72,0.8);
 
+h3.product-name {
 
+    background-color: #435074;
 
     color: white;
 
     padding: 0.5rem 1rem;
 
-    max-width: 75%;
 
     font-family: 'Raleway', sans-serif;
 
     font-weight: 300;
 
+    font-size: 1.3rem;
 
 }
 
 
 .us-container,
 
 .product-container {
 
     page-break-inside: avoid;
 
+    margin-bottom: 2rem;
 
+}
 
+
 
+.product-container {
 
+    background-color: #f5f5f5;
 
 }
 
 
 .us-body,
 
@@ -86,7 +79,11 @@ h2.category-name {
 
     font-style: italic;
 
     letter-spacing: 0.02rem;
 
     font-weight: 400;
 
-    margin-bottom: 1rem;
 
+    margin: 0.5rem 0;
 
+}
 
+
 
+.product-body .section-container {
 
+    padding-bottom: 0.5rem;
 
 }
 
 
 .product-body .section-name {
 
@@ -94,14 +91,16 @@ h2.category-name {
 
     font-weight: 600;
 
     color: #596992;
 
     font-size: 1.1rem;
 
-    margin-bottom: 0.2rem;
 
 }
 
 
-.product-body .chip {
 
-    background: linear-gradient(25deg, rgba(24,40,72,.8) 0%, rgba(24,40,72,.7) 100%);
 
-    color: white;
 
+.tag {
 
+    margin: 0 0.2rem;
 
+}
 
+.tag.is-ph {
 
+    background-color: white;
 
 }
 
 
-.product-body .chip.ph {
 
-    background: #3B5FBF!important;
 
+.tag.is-active {
 
+    background-color: #004c8c;
 
+    color: white;
 
 }

+ 8 - 8
index.html
Wyświetl plik 

@@ -2,9 +2,9 @@
 
 <html>
 
   <head>
 
     <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>Vademecum</title>
 
-    <link rel="stylesheet" href="css/spectre.min.css">
 
-    <link rel="stylesheet" href="css/spectre-exp.min.css">
 
+    <link rel="stylesheet" href="css/bulma.min.css">
 
     <link rel="stylesheet" href="css/main.css">
 
     <link href="https://fonts.googleapis.com/css?family=Fira+Sans|Raleway:300,300i,400,400i|Roboto" rel="stylesheet">
 
     <!-- Polyfill file for wkhtmltopdf -->
 
@@ -23,7 +23,7 @@
 
       <image src="images/varios.png" class="cover-products"/>
 
     </div>
 
 
-    <section class="us-container">
 
+    <section class="container us-container">
 
       <h2>Nosotros</h2>
 
       <div class="us-body">
 
         <p>
 
@@ -39,28 +39,28 @@
 
       </div>
 
       <div class="container eba-foundations">
 
         <div class="columns">
 
-          <div class="column col-6">
 
+          <div class="column">
 
             <image src="images/pure.png" width="124"/>
 
             <p>Principios activos seleccionados de máximo grado de pureza.</p>
 
           </div>
 
-          <div class="column col-6">
 
+          <div class="column">
 
             <image src="images/application.png" width="124" />
 
             <p>Formulaciones únicas, concebidas en combinación con técnicas de aplicación sinérgica, que aportan resultados inmediatos y duraderos.</p>
 
           </div>
 
         </div>
 
         <div class="columns">
 
-          <div class="column col-6">
 
+          <div class="column">
 
             <image src="images/science.png" width="124"/>
 
             <p>Vehículos especializados para preservar la integridad de las fórmulas y evitar procesos de sensibilización.</p>
 
           </div>
 
-          <div class="column col-6">
 
+          <div class="column">
 
             <image src="images/certification.png" width="124" />
 
             <p>Estrictos controles bajo normas de calidad internacional GMP son garantía de los productos ESPECIFICOS Buenos Aires.</p>
 
           </div>
 
         </div>
 
       </div>
 
     </section>
 
-    <div id="vademecum"></div>
 
+    <div id="vademecum" class="container"></div>
 
 
     <!-- Load React. -->
 
     <!-- Note: when deploying, replace "development.js" with "production.min.js". -->

+ 13 - 8
js/vademecum.js
Wyświetl plik 

@@ -1157,12 +1157,12 @@ const categories = [
 
   "Protección Solar",
 
 ]
 
 
-const Chip = (label, key, className) => (
 
-  <span className={`chip ${className||''}`} key={key}>{label}</span>
 
+const Tag = (label, key, className) => (
 
+  <span className={`tag ${className||''}`} key={key}>{label}</span>
 
 );
 
 
 const Section = (title, paragraph, prepend) => (
 
-  <div>
 
+  <div className="section-container">
 
     <h4 className="section-name">
 
       { title }
 
     </h4>
 
@@ -1188,7 +1188,12 @@ const Product = (product, key) => (
 
         product.application && Section('Aplicación', product.application)
 
       }
 
       {
 
-        product.actives && Section('Activos', product.actives.map((a, i) => Chip(a, i)), product.ph&&Chip(`PH ${product.ph}`, null, 'ph'))
 
+        product.actives &&
 
+          Section(
 
+            'Activos',
 
+            product.actives.map((a, i) => Tag(a, i, 'is-active')),
 
+            product.ph && Tag(`PH ${product.ph}`, null, 'is-ph')
 
+          )
 
       }
 
     </div>
 
   </div>
 
@@ -1196,12 +1201,12 @@ const Product = (product, key) => (
 
 
 const Category = (categoryName, products) => (
 
   <div className="category-container">
 
-    <div className="category-title" id={categoryName.toLowerCase().replace(' ', '-')}>
 
+    <div className="category" id={categoryName.toLowerCase().replace(' ', '-')}>
 
       <h2 className="category-name">{categoryName}</h2>
 
-      {
 
-        products.map((p, i) => Product(p, i))
 
-      }
 
     </div>
 
+    {
 
+      products.map((p, i) => Product(p, i))
 
+    }
 
   </div>
 
 );

+ 10 - 8
lib/vademecum.js
Wyświetl plik 

@@ -722,15 +722,17 @@ var products = {
 
 var dom = React.createElement;
 
 var categories = ["Higiene", "Máscaras", "Ácido Hialurónico", "Peeling", "Corporales", "Hombres", "Protección Intensiva", "Monodosis", "Activos Concentrados", "Protección Solar"];
 
 
-var Chip = function Chip(label, key, className) {
 
+var Tag = function Tag(label, key, className) {
 
   return dom("span", {
 
-    className: "chip ".concat(className || ''),
 
+    className: "tag ".concat(className || ''),
 
     key: key
 
   }, label);
 
 };
 
 
 var Section = function Section(title, paragraph, prepend) {
 
-  return dom("div", null, dom("h4", {
 
+  return dom("div", {
 
+    className: "section-container"
 
+  }, dom("h4", {
 
     className: "section-name"
 
   }, title), dom("p", {
 
     className: "section-body"
 
@@ -747,21 +749,21 @@ var Product = function Product(product, key) {
 
   }, dom("p", {
 
     className: "product-short-desc"
 
   }, product.shortDesc), Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application), product.actives && Section('Activos', product.actives.map(function (a, i) {
 
-    return Chip(a, i);
 
-  }), product.ph && Chip("PH ".concat(product.ph), null, 'ph'))));
 
+    return Tag(a, i, 'is-active');
 
+  }), product.ph && Tag("PH ".concat(product.ph), null, 'is-ph'))));
 
 };
 
 
 var Category = function Category(categoryName, products) {
 
   return dom("div", {
 
     className: "category-container"
 
   }, dom("div", {
 
-    className: "category-title",
 
+    className: "category",
 
     id: categoryName.toLowerCase().replace(' ', '-')
 
   }, dom("h2", {
 
     className: "category-name"
 
-  }, categoryName), products.map(function (p, i) {
 
+  }, categoryName)), products.map(function (p, i) {
 
     return Product(p, i);
 
-  })));
 
+  }));
 
 };
 
 
 var Vademecum = function Vademecum() {

+ 1 - 1
package.json
Wyświetl plik 

@@ -19,7 +19,7 @@
 
   "scripts": {
 
     "start": "./node_modules/.bin/babel js/vademecum.js --watch --out-file lib/vademecum.js",
 
     "build": "./node_modules/.bin/babel js/vademecum.js --out-dir lib",
 
-    "pdf": "wkhtmltopdf.exe toc --xsl-style-sheet pdf/toc.xsl index.html pdf/vademecum.pdf"
 
+    "pdf": "wkhtmltopdf.exe -B 0 -L 0 -R 0 -T 0 toc --xsl-style-sheet pdf/toc.xsl index.html pdf/vademecum.pdf"
 
   },
 
   "repository": {
 
     "type": "git",

BIN
pdf/vademecum.pdf
Wyświetl plik