صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
tati
/
eba-vademecum
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

Add main styles and css classes

Tatiana Inama 7 سال پیش
والد
681d74f76d
کامیت
6ba3af4318
3فایلهای تغییر یافته به همراه49 افزوده شده و 5 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 41 2
      css/main.css
  2. 1 0
      index.html
  3. 7 3
      js/vademecum.js

+ 41 - 2
css/main.css
مشاهده فایل 

@@ -1,5 +1,8 @@
 
 body {
 
 body {
 
     font-family: 'Roboto', sans-serif;
 
     font-family: 'Roboto', sans-serif;
 
+    font-size: 16px;
 
+    background-color: white;
 
+    color: #182F40;
 
 }
 
 }
 
 
 
 
 
@@ -13,10 +16,46 @@ body {
 
     background-color: #334875;
 
     background-color: #334875;
 
     padding: 2rem 1rem;
 
     padding: 2rem 1rem;
 
     color: white;
 
     color: white;
 
-    font-family: 'Roboto', sans-serif;
 
-    font-size: 1.5rem;
 
+    font-family: 'Raleway', sans-serif;
 
+    font-size: 1.8rem;
 
     box-shadow: 0 3px 5px 0px rgba(0,0,0,0.5);
 
     box-shadow: 0 3px 5px 0px rgba(0,0,0,0.5);
 
     text-transform: uppercase;
 
     text-transform: uppercase;
 
     font-weight: 300;
 
     font-weight: 300;
 
     letter-spacing: 0.05rem;
 
     letter-spacing: 0.05rem;
 
+    page-break-before: always;
 
+}
 
+
 
+.product-name {
 
+    background-color: #596992;
 
+    color: white;
 
+    padding: 0.5rem 1rem;
 
+    max-width: 75%;
 
+    font-family: 'Raleway', sans-serif;
 
+    font-weight: 300;
 
+}
 
+
 
+.product-container {
 
+    page-break-inside: avoid;
 
+}
 
+
 
+.product-body {
 
+    padding: 0 1rem;
 
+}
 
+
 
+.product-body p.product-short-desc {
 
+    font-family: 'Raleway', sans-serif;
 
+    color: #334875;
 
+    font-style: italic;
 
+    letter-spacing: 0.02rem;
 
+    font-weight: 400;
 
+    margin-bottom: 1rem;
 
+}
 
+
 
+.product-body .section-name {
 
+    font-family: 'Raleway', sans-serif;
 
+    font-weight: 600;
 
+    color: #596992;
 
+    font-size: 1.1rem;
 
+    margin-bottom: 0.2rem;
 
+
 
 }
 
 }

+ 1 - 0
index.html
مشاهده فایل 

@@ -6,6 +6,7 @@
 
     <link rel="stylesheet" href="css/spectre.min.css">
 
     <link rel="stylesheet" href="css/spectre.min.css">
 
     <link rel="stylesheet" href="css/spectre-exp.min.css">
 
     <link rel="stylesheet" href="css/spectre-exp.min.css">
 
     <link rel="stylesheet" href="css/main.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">
 
   </head>
 
   </head>
 
   <body>
 
   <body>

+ 7 - 3
js/vademecum.js
مشاهده فایل 

@@ -1172,9 +1172,13 @@ const Product = (product, key) => {
 
     'div',
 
     'div',
 
     {key, className: 'product-container'},
 
     {key, className: 'product-container'},
 
     e('h3', {className: 'product-name'}, product.name),
 
     e('h3', {className: 'product-name'}, product.name),
 
-    e('p', {className: 'product-short-desc'}, product.shortDesc),
 
-    Section('Descripción', product.fullDesc),
 
-    Section('Aplicación', product.application)
 
+    e(
 
+      'div',
 
+      {className: 'product-body'},
 
+      e('p', {className: 'product-short-desc'}, product.shortDesc),
 
+      Section('Descripción', product.fullDesc),
 
+      Section('Aplicación', product.application)
 
+    )
 
   )
 
   )
 
 }
 
 }