Fix alignment issues

css/main.css

@@ -10,6 +10,7 @@
   src: url(../fonts/Roboto-Thin.ttf) format('truetype');
 }
 
+
 /* csslint ignore:end */
 
 .main {
@@ -17,13 +18,15 @@
   text-align: center;
 }
 
+
 /* https://github.com/CSSLint/csslint/wiki/Disallow-qualified-headings */
+
 h1 {
   color: #949494;
   font-family: "Amaranth-Regular";
 }
 
-.main > p {
+.main>p {
   text-align: justify;
 }
 
@@ -32,3 +35,40 @@ h1 {
   margin: auto;
   max-width: 968px;
 }
+
+.separator {
+  margin: -1px 15px;
+  padding: 15px 0 10px;
+}
+
+.separator-top {
+  margin-right: 15px;
+  padding: 15px 0 10px;
+}
+
+.events-list {
+  min-height: 65px;
+}
+
+.event-details {
+  min-height: 80vh;
+}
+
+.bootcards-richtext>.panel-body {
+  font-size: 16px;
+  max-width: 968px;
+  padding: 25px 35px;
+}
+
+.bootcards-richtext>.panel-body img {
+  margin: 15px 0;
+}
+
+.col-sm-8 .panel-heading .panel-title {
+  padding-left: 20px;
+}
+
+.panel-heading .panel-title {
+  font-weight: 700;
+  margin-top: 15px;
+}

pug/templates/events.pug

@@ -14,12 +14,12 @@ block content
           .panel-body
             .search-form
               .row
-                .col-xs-9
+                .col-xs-10
                   |  
                   //-.form-group
                     input.form-control(type='text', placeholder='Search Contacts...')
                     i.fa.fa-search
-                .col-xs-3
+                .col-xs-2
                   a.btn.btn-primary.btn-block(href='#')
                     i.fa.fa-plus
                     span Add
@@ -27,7 +27,7 @@ block content
           .list-group
             // list of sample data
             for event in events.events
-              a.list-group-item(href='/events/' + event.id + '.html')
+              a.list-group-item.events-list.separator(href='/events/' + event.id + '.html')
                 img.img-rounded.pull-left(src=event.imgurl)
                 h4.list-group-item-heading= event.name
-                p.list-group-item-text!= event.locationame 
+                p.list-group-item-text!= event.locationame

pug/templates/individual_event_page.pug

@@ -30,8 +30,8 @@ block content
                 p.list-group-item-text!= event.locationame
       .col-sm-12.bootcards-cards
         // contact details
-        #contactCard.col-sm-4
-          .panel.panel-default
+        #contact-card.event-card.col-sm-4
+          .panel.panel-default.event-details
             .panel-heading.clearfix
               h3.panel-title.pull-left Contact Details
               .btn-group.pull-right.visible-xs
@@ -39,26 +39,27 @@ block content
                   i.fa.fa-pencil
                   span Edit
             .list-group
-              .list-group-item
-                label= "NAME" 
+              .list-group-item.separator-top
+                label= "NAME"
                 h4.list-group-item-heading= evt.name
-              .list-group-item
+              .list-group-item.separator
                 label= "LOCATION"
-                a(href="http://www.openstreetmap.org/?mlat=" + evt.lat + "&mlon=" + evt.lng + "&ref=FSCI") 
+                a(href="http://www.openstreetmap.org/?mlat=" + evt.lat + "&mlon=" + evt.lng + "&ref=FSCI")
                   h4.list-group-item-heading= evt.locationname
-              .list-group-item
-                label= "ORGANIZED BY" 
+              .list-group-item.separator
+                label= "ORGANIZED BY"
                 h4.list-group-item-heading= evt.organizedby
-              .list-group-item
-                label= "DATETIME" 
+              .list-group-item.separator
+                label= "DATETIME"
                 h4.list-group-item-heading= evt.when
-              .list-group-item
-                label= "CONTACT INFO" 
+              .list-group-item.separator
+                label= "CONTACT INFO"
                 h4.list-group-item-heading= evt.contactinfo
 
-        .panel.panel-default.bootcards-richtext.col-sm-8
-          .panel-heading
-            h3.panel-title Description
-          .panel-body!= evt.description
-            p.lead
-              img(src=evt.imgurl, alt=evt.name)
+        #description-card.event-card.col-sm-8
+          .panel.panel-default.bootcards-richtext.event-details
+            .panel-heading
+              h3.panel-title Description
+            .panel-body!= evt.description
+              p.lead
+                img(src=evt.imgurl, alt=evt.name)