gramado.css: Library organization

polard8 · Oct 24, 2024 · 9df47c7 · 9df47c7
1 parent 0ed0a1d
commit 9df47c7
Showing 1 changed file with 54 additions and 30 deletions.
diff --git a/assets/css/gramado.css b/assets/css/gramado.css
@@ -1,16 +1,19 @@
 @charset "UTF-8";
 :root {
 
-/* gray scale */
-    --gramado-color-black:  #000000;  /*preto*/
-    --gramado-color-gray1:  #202020;  /*cinza mais escuro*/
-    --gramado-color-gray2:  #404040;  /*cinza*/
-    --gramado-color-gray3:  #606060;  /*cinza*/
-    --gramado-color-gray4:  #808080;  /*cinza*/
-    --gramado-color-gray5:  #a0a0a0;  /*cinza*/
-    --gramado-color-gray6:  #c0c0c0;  /*cinza*/
-    --gramado-color-gray7:  #e0e0e0;  /*cinza mais clarinho*/
-    --gramado-color-white:  #ffffff;  /*branco*/
+/* Gray scale */
+    --gramado-color-black:  #000000;
+    --gramado-color-gray1:  #202020;
+    --gramado-color-gray2:  #404040;
+    --gramado-color-gray3:  #606060;
+    --gramado-color-gray4:  #808080;
+    --gramado-color-gray5:  #a0a0a0;
+    --gramado-color-gray6:  #c0c0c0;
+    --gramado-color-gray7:  #e0e0e0;
+    --gramado-color-white:  #ffffff;
+
+/* ... */
+
 }
 
 /*
@@ -21,19 +24,22 @@
 
 /*
  * Library components:
- *   + ) Global scope. (main html elements)
- *   + ) .gramado-nav class. (Navigation bar)
- *   + ) .gramado-header class. (Main header)
- *   + ) .gramado-button class. (Buttons)
- *   + ...
- *   + ) .gramado-footer class. (Main footer)
- */
-
-/*
- * Component: 
- *     Global scope.
+ * ===============================================
+ *   0 ) Initialization     - Global scope
+ * -------------------------------------
+ *   1.1 ) .gramado-banner    - Banner
+ *   1.2 ) .gramado-nav       - Navigation bar
+ *   1.3 ) .gramado-container - Container
+ *   1.4 ) .gramado-header    - Header
+ * -------------------------------------
+ *   2.1 ) .gramado-text      - Text
+ *   2.2 ) .gramado-image     - Image
+ *   2.3 ) .gramado-button    - Button
+ * -------------------------------------
+ *   3.1 ) .gramado-footer    - Footer
  */
 
+/*   0 ) Initialization     - Global scope */
 html, body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     margin: 0;
@@ -51,16 +57,15 @@ a:hover {
   color: #0050a3;
 }
 
-img {
-    max-width: 100%;
-}
 
 /* 
  * Small screen: ------------------------------
  * Mobile first?
  */
 
-/* Navigation bar for small screens */
+/* 1.1 ) .gramado-banner    - Banner */
+
+/* 1.2 ) .gramado-nav       - Navigation bar */
 .gramado-nav {
     font-size: 4.5vw;
     border-top: 2px solid rgba(88, 88, 88, .3);
@@ -87,13 +92,13 @@ img {
     background-color: rgba(200, 200, 200, .6); 
 }
 
+/* 1.3 ) .gramado-container - Container */
 .gramado-container {
-    /*container-type: inline-size;*/
     font-size: 4.4vw;
     text-align: center;
-    margin-inline: auto;
 }
 
+/* 1.4 ) .gramado-header    - Header */
 .gramado-header{
     font-size: 3.5vw;
     color: #202020;
@@ -106,10 +111,12 @@ img {
     height: auto;
 }
 
+/* 2.1 ) .gramado-text      - Text */
 .gramado-text{
     font-size: 3.5vw;
 }
 
+/* 2.2 ) .gramado-image     - Image */
 .gramado-image {
     width: 96%;
     height: auto;
@@ -119,6 +126,7 @@ img {
     border-top: 4px solid rgba(222, 222, 222, .3);
 }
 
+/* 2.3 ) .gramado-button    - Button */
 .gramado-button {
     font-size: 4.5vw;
     text-align: center;
@@ -144,12 +152,17 @@ img {
   color: #eee;
 }
 
+/* 3.1 ) .gramado-footer    - Footer */
 .gramado-footer {
     font-size: 3.5vw;
     text-align: center;
     color: #808080;
     padding-bottom: 2%;
 }
+.gramado-footer-logo {
+    text-align: center;
+    border-top: 4px solid rgba(222, 222, 222, .3);
+}
 
 
 /*
@@ -161,7 +174,9 @@ img {
 /* large screen */
 @media (min-width: 640px) {
 
-/* navigation bar for large screens */
+/* 1.1 ) .gramado-banner    - Banner */
+
+/* 1.2 ) .gramado-nav       - Navigation bar */
 .gramado-nav {
     font-size: 2.2vw;
     border-top: 2px solid rgba(80, 80, 80, .3);
@@ -186,13 +201,13 @@ img {
     background-color: rgba(200, 200, 200, .6); 
 }
 
+/* 1.3 ) .gramado-container - Container */
 .gramado-container {
-    /*container-type: inline-size;*/
     font-size: 4.0vw;
     text-align: center;
-    margin-inline: auto;
 }
 
+/* 1.4 ) .gramado-header    - Header */
 .gramado-header{
     font-size: 1.8vw;
     color: #202020;
@@ -203,11 +218,13 @@ img {
     height: auto;
 }
 
+/* 2.1 ) .gramado-text      - Text */
 .gramado-text{
     font-size: 2.2vw;
     color: #202020;
 }
 
+/* 2.2 ) .gramado-image     - Image */
 .gramado-image {
     width: 50%;
     height: auto;
@@ -217,6 +234,7 @@ img {
     border-top: 4px solid rgba(222, 222, 222, .3);
 }
 
+/* 2.3 ) .gramado-button    - Button */
 .gramado-button {
     font-size: 2.2vw;
     text-align: center;
@@ -242,12 +260,18 @@ img {
   color: #eee;
 }
 
+/* 3.1 ) .gramado-footer    - Footer */
 .gramado-footer {
     font-size: 1.4vw;
     text-align: center;
     color: #808080;
     padding-bottom: 2%;
 }
+.gramado-footer-logo {
+    text-align: center;
+    border-top: 4px solid rgba(222, 222, 222, .3);
+}
+
 
 }