simplify & improve styles

Author: christopheschwyzer

_layouts/default.html

@@ -318,14 +318,12 @@
 		</section>
 
 		<footer id="footer">
-			<div class="sheet">
-				<div class="social">
-					<a href="https://twitter.com/madeinbasel" class="social-link twitter" title="Twitter"></a>
-					<a href="https://github.com/MadeInBasel/madeinbasel.github.io" class="social-link github" title="Github"></a>
-				</div>
-				<a href="mailto:[email protected]" class="mail">[email protected]</a>
-				<p class="copyright">&copy; {{ site.time | date: '%Y' }} madeinbasel.org</p>
+			<div class="social">
+				<a href="https://twitter.com/madeinbasel" class="social-link twitter" title="Twitter"></a>
+				<a href="https://github.com/MadeInBasel/madeinbasel.github.io" class="social-link github" title="Github"></a>
 			</div>
+			<a href="mailto:[email protected]" class="mail">[email protected]</a>
+			<p class="copyright">&copy; {{ site.time | date: '%Y' }} madeinbasel.org</p>
 		</footer>
 	</body>
 	<script>

css/main.css

@@ -51,17 +51,6 @@ body {
 .sheet {
   margin: 0 auto;
   max-width: 990px;
-  padding: 0 12px;
-}
-@media (min-width: 450px) {
-  .sheet {
-    padding: 0 20px;
-  }
-}
-@media (min-width: 700px) {
-  .sheet {
-    padding: 0 40px;
-  }
 }
 a {
   text-decoration: none;
@@ -86,8 +75,23 @@ h2 {
   text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
 }
 article {
-  padding: 15px 0;
-  margin-bottom: 25px;
+  padding: 15px 12px 35px;
+}
+@media (min-width: 450px) {
+  article {
+    padding: 15px 20px 35px;
+  }
+}
+@media (min-width: 700px) {
+  article {
+    padding: 15px 40px 35px;
+  }
+}
+article:not(:last-of-type) {
+  border-bottom: 1px dashed #c3c3c3;
+}
+article:nth-child(even) {
+  background-color: #fafafa;
 }
 article p {
   text-align: justify;
@@ -272,7 +276,7 @@ strong {
 #main {
   position: relative;
   box-shadow: 0 12px 12px rgba(0, 0, 0, 0.1);
-  background: #f5f5f5;
+  background-color: #f5f5f5;
   margin-top: -30px;
   padding-top: 50px;
   padding-bottom: 25px;
@@ -437,7 +441,7 @@ strong {
   height: 100px;
   margin: 3px;
   border: 1px solid rgba(0, 0, 0, 0.07);
-  background: white;
+  background-color: #fdfdfd;
 }
 .partner-list .list-item-link:hover {
   background-color: rgba(26, 26, 26, 0.05);
@@ -466,8 +470,8 @@ strong {
 .meetup-list .list-item {
   margin-bottom: 7px;
   padding: 12px;
-  background-color: rgba(26, 26, 26, 0.08);
-  background-color: white;
+  background-color: #f2f2f2;
+  border-left: 1px solid #c3c3c3;
 }
 .meetup-list h4 {
   margin: 0;

css/main.less

@@ -9,7 +9,7 @@
 @colorBgAlternative: #0099CC;
 @colorBgAlternative: #008FA9;
 @colorFgShy: lighten(@colorFg, 20);
-@colorFgBorder: #b9b9b9;
+@colorFgBorder: #c3c3c3;
 
 @fontDefault: 'Open Sans', sans-serif;
 @fontSpecial: 'Pacifico', cursive;
@@ -24,7 +24,6 @@
 @breakpointMedium: 700px;
 
 @link: rgb(44, 135, 173);
-@bgOverlay: rgba(60, 60, 60, .09);
 
 .clearfix {
 	*zoom: 1;
@@ -103,14 +102,6 @@ body {
 .sheet {
 	margin: 0 auto;
 	max-width: @siteWidth;
-	padding: 0 12px;
-
-	@media (min-width: @breakpointSmall) {
-		padding: 0 20px;
-	}
-	@media (min-width: @breakpointMedium) {
-		padding: 0 40px;
-	}
 }
 
 a {
@@ -138,8 +129,22 @@ h2 {
 }
 
 article {
-	padding: 15px 0;
-	margin-bottom: 25px;
+	padding: 15px 12px 35px;
+
+	@media (min-width: @breakpointSmall) {
+		padding: 15px 20px 35px;
+	}
+	@media (min-width: @breakpointMedium) {
+		padding: 15px 40px 35px;
+	}
+
+	&:not(:last-of-type) {
+		border-bottom: 1px dashed @colorFgBorder;
+	}
+
+	&:nth-child(even) {
+		background-color: lighten(@colorBg, 2);
+	}
 
 	p {
 		text-align: justify;
@@ -309,7 +314,7 @@ strong {
 #main {
 	position: relative;
 	box-shadow: 0 12px 12px rgba(0, 0, 0, 0.1);
-	background: @colorBg;
+	background-color: @colorBg;
 	margin-top: -30px;
 	padding-top: 50px;
 	padding-bottom: 25px;
@@ -457,7 +462,7 @@ strong {
 		height: @maxHeight;
 		margin: 3px;
 		border: 1px solid hsla(0, 0%, 0%, .07);
-		background: white;
+		background-color: lighten(@colorBg, 3);
 
 		&:hover {
 			background-color: hsla(0, 0%, 10%, .05);
@@ -491,8 +496,8 @@ strong {
 	.list-item {
 		margin-bottom: 7px;
 		padding: 12px;
-		background-color: hsla(0, 0%, 10%, .08);
-		background-color: white;
+		background-color: darken(@colorBg, 1);
+		border-left: 1px solid @colorFgBorder;
 	}
 
 	h4 {

index.html

@@ -41,7 +41,6 @@ <h2>Who is in</h2>
 			</a>
 		</li>
 		{% endfor %}
-
 		<li class="list-item">
 			<a class="list-item-link empty" href="https://github.com/MadeInBasel/madeinbasel.github.io">
 				<span>You?!</span>