add global divider styles

Author: christopheschwyzer

css/main.css

@@ -85,13 +85,27 @@ h2 {
   font-weight: normal;
   text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
 }
+article {
+  padding: 15px 0;
+  margin-bottom: 25px;
+}
+article p {
+  text-align: justify;
+}
 ul {
   margin-bottom: 15px;
   padding-left: 25px;
 }
 ul li {
   margin-bottom: 5px;
 }
+img {
+  display: block;
+  max-width: 100%;
+}
+strong {
+  font-weight: bold;
+}
 .button {
   -webkit-appearance: none;
   display: inline-block;
@@ -123,15 +137,29 @@ ul li {
   box-shadow: inset 0 2px 0 2px #006c80;
   outline: none;
 }
-img {
+.centered {
+  text-align: center;
+}
+.divider-vertical {
   display: block;
-  max-width: 100%;
+  font-weight: bold;
+  margin: 12px 0;
 }
-strong {
+.divider-vertical:before {
+  content: '-- ';
+}
+.divider-vertical:after {
+  content: ' --';
+}
+.divider-horizontal {
   font-weight: bold;
+  margin: 0 5px;
 }
-.centered {
-  text-align: center;
+.divider-horizontal:before {
+  content: '< ';
+}
+.divider-horizontal:after {
+  content: ' >';
 }
 #header {
   height: 100%;
@@ -325,13 +353,6 @@ strong {
 #footer .social-link.github:hover {
   background-color: #404041;
 }
-article {
-  padding: 15px 0;
-  margin-bottom: 25px;
-}
-article p {
-  text-align: justify;
-}
 .badge-link,
 .list-item-link {
   display: block;
@@ -391,7 +412,6 @@ article p {
 }
 @media (min-width: 700px) {
   .badge .badge-link {
-    margin-bottom: 10px;
     padding: 4px;
     border: 3px dashed transparent;
   }
@@ -402,9 +422,6 @@ article p {
 .badge .badge-link:hover {
   border-color: rgba(26, 26, 26, 0.2);
 }
-.badge .divider {
-  font-weight: bold;
-}
 .partner-list {
   list-style: none;
   padding: 0;
@@ -425,7 +442,7 @@ article p {
   padding: 0;
 }
 .meetup-list .list-item {
-  margin-bottom: 5px;
+  margin-bottom: 7px;
   padding: 12px;
   background-color: rgba(26, 26, 26, 0.08);
   background-color: white;

css/main.less

@@ -137,6 +137,15 @@ h2 {
 	text-shadow: 1px 1px 1px hsla(0, 0%, 100%, .5);
 }
 
+article {
+	padding: 15px 0;
+	margin-bottom: 25px;
+
+	p {
+		text-align: justify;
+	}
+}
+
 ul {
 	margin-bottom: 15px;
 	padding-left: 25px;
@@ -146,12 +155,6 @@ ul {
 	}
 }
 
-.button {
-	-webkit-appearance: none;
-	.button(@colorBgAlternative);
-	cursor: pointer;
-}
-
 img {
 	display: block;
 	max-width: 100%;
@@ -161,10 +164,43 @@ strong {
 	font-weight: bold;
 }
 
+.button {
+	-webkit-appearance: none;
+	.button(@colorBgAlternative);
+	cursor: pointer;
+}
+
 .centered {
 	text-align: center;
 }
 
+.divider-vertical {
+	display: block;
+	font-weight: bold;
+	margin: 12px 0;
+
+	&:before {
+		content: '-- ';
+	}
+
+	&:after{
+		content: ' --';
+	}
+}
+
+.divider-horizontal {
+	font-weight: bold;
+	margin: 0 5px;
+
+	&:before {
+		content: '< ';
+	}
+
+	&:after{
+		content: ' >';
+	}
+}
+
 #header {
 	height: 100%;
 
@@ -361,15 +397,6 @@ strong {
 	}
 }
 
-article {
-	padding: 15px 0;
-	margin-bottom: 25px;
-
-	p {
-		text-align: justify;
-	}
-}
-
 .badge-link, .list-item-link {
 	display: block;
 	width: 100%; // FF bug?
@@ -401,7 +428,6 @@ article {
 
 	.badge-link {
 		@media (min-width: @breakpointMedium) {
-			margin-bottom: 10px;
 			padding: 4px;
 			border: 3px dashed transparent;
 
@@ -414,10 +440,6 @@ article {
 			border-color: hsla(0, 0%, 10%, .2);
 		}
 	}
-
-	.divider {
-		font-weight: bold;
-	}
 }
 
 .partner-list {
@@ -444,7 +466,7 @@ article {
 	padding: 0;
 
 	.list-item {
-		margin-bottom: 5px;
+		margin-bottom: 7px;
 		padding: 12px;
 		background-color: hsla(0, 0%, 10%, .08);
 		background-color: white;

index.html

@@ -25,7 +25,7 @@ <h2>Choose your badge</h2>
 		</div>
 	</div>
 	<div class="centered">
-		<p class="centered"><span class="divider">-- or --</span></p>
+		<span class="divider-vertical">or</span>
 		<a href="/img/logo/MadeInBasel-LogoPackage.zip" download="MadeInBasel-LogoPackage.zip" class="button button-download">Download Logo Package</a>
 		<p class="centered"><small>(eps, svg, png)</small></p>
 	</div>
@@ -43,10 +43,10 @@ <h2>Who is in</h2>
 		{% endfor %}
 	</ul>
 	<div class="centered">
-		<p>Have you placed your badge already? Great, send your logo and we'll place it here. If you feel bold, you can also add your logo via Github Pull-Request.
-			<a href="https://github.com/MadeInBasel/madeinbasel.github.io">Here is the public repository.</a></p>
-		<button class="button button-download">Represent me here</button>
-		<p class="centered"><small>(min. 150x150, SVG preferred)</small></p>
+		<p>Have you placed your badge already and want to get represented here? Great, send us your logo via email and we'll place it here. If you feel bold, you can also add your logo directly via Github Pull-Request.</p>
+		<a class="button" href="https://github.com/MadeInBasel/madeinbasel.github.io">Use Github</a>
+		<span class="divider-horizontal"></span>
+		<a href="mailto:[email protected]" class="button">Use Email</a>
 	</div>
 </article>