Merge pull request #3 from uracreative/new-components

New components

_includes/components/jumbotron.html

@@ -0,0 +1,20 @@
+<div class="mb-4" id="jumbotron">
+	<h2  >Jumbotron</h2>
+	<div class="bg-light p-md-5 p-sm-3">
+		<div class="jumbotron bg-primary text-white">
+			<div class="container" >
+				<div class="row" >
+				<div class="col-sm-4 d-none d-sm-block" >
+					<img src="../assets/images/jumbo.png" class="img-fluid" />
+				</div>
+					<div class="col-sm-8" >
+						<h1 class="display-4">Privacy in numbers</h1>
+						<p class="lead">Protect communication from dragnet surveillance and monitoring.</p>
+						<hr class="my-4">
+						<a class="btn btn-white btn-pill btn-lg" href="#" role="button">Download I2P</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

_layouts/components.html

@@ -38,10 +38,10 @@
         {% include components/navbar.html %}
 			</div>
 			<div class="component-wrapper my-5" id="">
-        {% include components/paginate.html %}
+        {% include components/jumbotron.html %}
 			</div>
 			<div class="component-wrapper my-5" id="">
-        {% include components/scrollspy.html %}
+        {% include components/paginate.html %}
 			</div>
 			<div class="component-wrapper my-5" id="">
         {% include components/tables.html %}

_site/assets/styles/components.scss

@@ -1,39 +1,52 @@
 .alert {
-	border-radius: 25px;
+	border-radius: 15px;
 
 	&-custom {
-		color: #041f67;
-		background-color: #bbd6ff;
-		border-color: #a4bfff;
+		color: #3b4f87;
+		background-color: #e2e6f0;
+		border-color: #6679ac;
 
 		& hr {
-			border-top-color: #7691d9;
+			border-top-color: #6679ac;
 		}
 
 		& .alert-link {
-		color: #000850;
+		color: #081b4f;
 		}
 	}
 	&-primary {
-		color: #041f67;
-		background-color: #bbd6ff;
-		border-color: #a4bfff;
+		color: #3b4f87;
+		background-color: #e2e6f0;
+		border-color: #6679ac;
 
 		& hr {
-			border-top-color: #7691d9;
+			border-top-color: #6679ac;
 		}
 
 		& .alert-link {
-		color: #000850;
+		color: #003600;
+		}
+	}
+	&-secondary {
+		color: $oc-gray-7;
+		background-color: $oc-gray-2;
+		border-color: $oc-gray-6;
+
+		& hr {
+			border-top-color: $oc-gray-6;
+		}
+
+		& .alert-link {
+		color: $oc-gray-8;
 		}
 	}
 	&-success {
-		color: #075207;
-		background-color: #beffbe;
-		border-color: #a7f2a7;
+		color: #105c10;
+		background-color: #e1f2e1;
+		border-color: #60ab60;
 
 		& hr {
-			border-top-color: #7ac57a;
+			border-top-color: #1d731d;
 		}
 
 		& .alert-link {
@@ -41,12 +54,12 @@
 		}
 	}
 	&-warning {
-		color: #bd8200;
-		background-color: #ffffa9;
-		border-color: #ffff92;
+		color: #6b4c00;
+		background-color: #ffeab5;
+		border-color: #cca443;
 
 		& hr {
-			border-top-color: #fff464;
+			border-top-color: #cca443;
 		}
 
 		& .alert-link {
@@ -54,12 +67,12 @@
 		}
 	}
 	&-danger {
-		color: #9f1405;
-		background-color: #ffcbbc;
-		border-color: #ffb4a5;
+		color: #700b00;
+		background-color: #ffcac4;
+		border-color: #e15647;
 
 		& hr {
-			border-top-color: #ff8677;
+			border-top-color: #e15647;
 		}
 
 		& .alert-link {
@@ -176,6 +189,19 @@
   }
 }
 
+.btn-white {
+	color: $primary !important;
+  background-color: $oc-white !important;
+  border-color: transparent !important;
+  padding: 1rem 1.5rem !important;
+  font-size: 1rem;
+  &:hover {
+		color: $oc-white !important;
+    background-color: $secondary !important;
+    border-color: transparent !important;
+  }
+}
+
 .btn-small {
   background-color: $primary !important;
   border-color: transparent !important;
@@ -355,7 +381,7 @@
 	}
 }
 #styleguide-nav {
-  background-color: $oc-white !important;
+  background-color: $oc-gray-0 !important;
 	.nav-item:hover {
 		box-shadow: inset 0 -5px $primary;
 

_site/assets/styles/layout.scss

@@ -165,6 +165,15 @@
   background-color: #f1f3f5 !important;
 }
 
+.bg {
+	&-primary {
+		background-color: $primary !important;
+	}
+	&-secondary {
+		background-color: $secondary !important;
+	}
+}
+
 .b-border {
   border-bottom: 2px solid lightgrey !important;
 }

_site/assets/styles/main.css

@@ -59,6 +59,9 @@
 
 .bg-box { background-color: #f1f3f5 !important; }
 
+.bg-primary { background-color: #4661A9 !important; }
+.bg-secondary { background-color: #60AB60 !important; }
+
 .b-border { border-bottom: 2px solid lightgrey !important; }
 
 .color { height: 100px; }
@@ -78,21 +81,24 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 
 .icon { font-size: 20px; background-color: #212529; padding: 20px; }
 
-.alert { border-radius: 25px; }
-.alert-custom { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; }
-.alert-custom hr { border-top-color: #7691d9; }
-.alert-custom .alert-link { color: #000850; }
-.alert-primary { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; }
-.alert-primary hr { border-top-color: #7691d9; }
-.alert-primary .alert-link { color: #000850; }
-.alert-success { color: #075207; background-color: #beffbe; border-color: #a7f2a7; }
-.alert-success hr { border-top-color: #7ac57a; }
+.alert { border-radius: 15px; }
+.alert-custom { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; }
+.alert-custom hr { border-top-color: #6679ac; }
+.alert-custom .alert-link { color: #081b4f; }
+.alert-primary { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; }
+.alert-primary hr { border-top-color: #6679ac; }
+.alert-primary .alert-link { color: #003600; }
+.alert-secondary { color: #495057; background-color: #e9ecef; border-color: #868e96; }
+.alert-secondary hr { border-top-color: #868e96; }
+.alert-secondary .alert-link { color: #343a40; }
+.alert-success { color: #105c10; background-color: #e1f2e1; border-color: #60ab60; }
+.alert-success hr { border-top-color: #1d731d; }
 .alert-success .alert-link { color: #003b00; }
-.alert-warning { color: #bd8200; background-color: #ffffa9; border-color: #ffff92; }
-.alert-warning hr { border-top-color: #fff464; }
+.alert-warning { color: #6b4c00; background-color: #ffeab5; border-color: #cca443; }
+.alert-warning hr { border-top-color: #cca443; }
 .alert-warning .alert-link { color: #a66b00; }
-.alert-danger { color: #9f1405; background-color: #ffcbbc; border-color: #ffb4a5; }
-.alert-danger hr { border-top-color: #ff8677; }
+.alert-danger { color: #700b00; background-color: #ffcac4; border-color: #e15647; }
+.alert-danger hr { border-top-color: #e15647; }
 .alert-danger .alert-link { color: #880000; }
 
 .background-primary { background-color: #4661A9; }
@@ -143,6 +149,9 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 .btn-primary { background-color: #4661A9 !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; }
 .btn-primary:hover { background-color: #60AB60 !important; border-color: transparent !important; }
 
+.btn-white { color: #4661A9 !important; background-color: #ffffff !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; }
+.btn-white:hover { color: #ffffff !important; background-color: #60AB60 !important; border-color: transparent !important; }
+
 .btn-small { background-color: #4661A9 !important; border-color: transparent !important; padding: .08rem .4rem 0 !important; font-size: .8rem; color: #ffffff; }
 .btn-small:hover { background-color: #60AB60 !important; border-color: transparent !important; }
 
@@ -185,7 +194,7 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 .footer-extras ul li { margin: 0 0.5rem; }
 .footer .spacer { content: " "; height: 2rem; }
 
-#styleguide-nav { background-color: #ffffff !important; }
+#styleguide-nav { background-color: #f8f9fa !important; }
 #styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; }
 #styleguide-nav .nav-item:hover .nav-link { color: #4661A9; }
 #styleguide-nav .nav-link { color: #212529; }

_site/components/index.html

@@ -117,14 +117,14 @@
       
     
       
-        <a href="#pagination"><li class="list-group-item rb-sidebar">
-          Pagination
+        <a href="#jumbotron"><li class="list-group-item rb-sidebar">
+          Jumbotron
         </li></a>
       
     
       
-        <a href="#scrollspy"><li class="list-group-item rb-sidebar">
-          Scrollspy
+        <a href="#pagination"><li class="list-group-item rb-sidebar">
+          Pagination
         </li></a>
       
     
@@ -399,6 +399,29 @@
 </nav>
 </div>
 
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="mb-4" id="jumbotron">
+	<h2  >Jumbotron</h2>
+	<div class="bg-light p-md-5 p-sm-3">
+		<div class="jumbotron bg-primary text-white">
+			<div class="container" >
+				<div class="row" >
+				<div class="col-sm-4 d-none d-sm-block" >
+					<img src="../assets/images/jumbo.png" class="img-fluid" />
+				</div>
+					<div class="col-sm-8" >
+						<h1 class="display-4">Privacy in numbers</h1>
+						<p class="lead">Protect communication from dragnet surveillance and monitoring.</p>
+						<hr class="my-4">
+						<a class="btn btn-white btn-pill btn-lg" href="#" role="button">Download I2P</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
 			</div>
 			<div class="component-wrapper my-5" id="">
         <div class="page-header mb-4 " id="pagination">
@@ -425,21 +448,6 @@
     </nav>
 </div>
 
-			</div>
-			<div class="component-wrapper my-5" id="">
-        <div class="page-header mb-4" id="scrollspy">
-    <h3>Scrollspy</h3>
-    <!--p class="text-muted">Some Description about scrollspy.</p-->
-</div>
-
-<div class="row bg-light p-5">
-    <div class="col-12 p-0">
-        <p>
-            <span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
-        </p>
-    </div>
-</div>
-
 			</div>
 			<div class="component-wrapper my-5" id="">
         <div class="page-header mb-4" id="tables">

assets/styles/components.scss

@@ -1,39 +1,52 @@
 .alert {
-	border-radius: 25px;
+	border-radius: 15px;
 
 	&-custom {
-		color: #041f67;
-		background-color: #bbd6ff;
-		border-color: #a4bfff;
+		color: #3b4f87;
+		background-color: #e2e6f0;
+		border-color: #6679ac;
 
 		& hr {
-			border-top-color: #7691d9;
+			border-top-color: #6679ac;
 		}
 
 		& .alert-link {
-		color: #000850;
+		color: #081b4f;
 		}
 	}
 	&-primary {
-		color: #041f67;
-		background-color: #bbd6ff;
-		border-color: #a4bfff;
+		color: #3b4f87;
+		background-color: #e2e6f0;
+		border-color: #6679ac;
 
 		& hr {
-			border-top-color: #7691d9;
+			border-top-color: #6679ac;
 		}
 
 		& .alert-link {
-		color: #000850;
+		color: #003600;
+		}
+	}
+	&-secondary {
+		color: $oc-gray-7;
+		background-color: $oc-gray-2;
+		border-color: $oc-gray-6;
+
+		& hr {
+			border-top-color: $oc-gray-6;
+		}
+
+		& .alert-link {
+		color: $oc-gray-8;
 		}
 	}
 	&-success {
-		color: #075207;
-		background-color: #beffbe;
-		border-color: #a7f2a7;
+		color: #105c10;
+		background-color: #e1f2e1;
+		border-color: #60ab60;
 
 		& hr {
-			border-top-color: #7ac57a;
+			border-top-color: #1d731d;
 		}
 
 		& .alert-link {
@@ -41,12 +54,12 @@
 		}
 	}
 	&-warning {
-		color: #bd8200;
-		background-color: #ffffa9;
-		border-color: #ffff92;
+		color: #6b4c00;
+		background-color: #ffeab5;
+		border-color: #cca443;
 
 		& hr {
-			border-top-color: #fff464;
+			border-top-color: #cca443;
 		}
 
 		& .alert-link {
@@ -54,12 +67,12 @@
 		}
 	}
 	&-danger {
-		color: #9f1405;
-		background-color: #ffcbbc;
-		border-color: #ffb4a5;
+		color: #700b00;
+		background-color: #ffcac4;
+		border-color: #e15647;
 
 		& hr {
-			border-top-color: #ff8677;
+			border-top-color: #e15647;
 		}
 
 		& .alert-link {
@@ -176,6 +189,19 @@
   }
 }
 
+.btn-white {
+	color: $primary !important;
+  background-color: $oc-white !important;
+  border-color: transparent !important;
+  padding: 1rem 1.5rem !important;
+  font-size: 1rem;
+  &:hover {
+		color: $oc-white !important;
+    background-color: $secondary !important;
+    border-color: transparent !important;
+  }
+}
+
 .btn-small {
   background-color: $primary !important;
   border-color: transparent !important;
@@ -355,7 +381,7 @@
 	}
 }
 #styleguide-nav {
-  background-color: $oc-white !important;
+  background-color: $oc-gray-0 !important;
 	.nav-item:hover {
 		box-shadow: inset 0 -5px $primary;
 

assets/styles/layout.scss

@@ -165,6 +165,15 @@
   background-color: #f1f3f5 !important;
 }
 
+.bg {
+	&-primary {
+		background-color: $primary !important;
+	}
+	&-secondary {
+		background-color: $secondary !important;
+	}
+}
+
 .b-border {
   border-bottom: 2px solid lightgrey !important;
 }

components.md

@@ -11,8 +11,8 @@
   - footer: Footer
   - forms: Forms
   - header: Header
+  - jumbotron: Jumbotron
   - pagination: Pagination
-  - scrollspy: Scrollspy
   - tables: Tables
 ---