Customization page revisions

server/documents/customize.html.eco

@@ -45,24 +45,25 @@ type        : 'Semantic'
     <div class="content">
       <div class="header">Choosing a package</div>
       <p>
-        Semantic is not a stand-alone library, but many separate components.</code>
+        Semantic is designed to be used as part of a front-end build system like <code>Grunt</code> or <code>Gulp</code> so that you can modify themes, site-specific variables, and UI overrides during development.
       </p>
+      <!-- <div class="ui button">Read more</div> -->
     </div>
   </div>
   <div class="ui basic segment">
     <div class="ui two item secondary pointing menu">
-      <div class="link item">
-        <div class="ui header">
-          Basic
-        </div>
-        1 Theme, CSS Only
-      </div>
       <div class="active link item">
         <div class="ui header">
           Pro
         </div>
         LESS + Build System
       </div>
+      <div class="link item">
+        <div class="ui header">
+          Basic
+        </div>
+        CSS Only
+      </div>
     </div>
   </div>
 
@@ -75,7 +76,7 @@ type        : 'Semantic'
       Elements
     </h3>
     <div class="ui active content">
-      <div class="ui download divided selection list">
+      <div class="ui download selection list">
         <% for element in uiElements: %>
         <div class="item">
           <div class="ui checkbox">
@@ -106,7 +107,7 @@ type        : 'Semantic'
       Collections
     </h3>
     <div class="ui active content">
-      <div class="ui download divided selection list">
+      <div class="ui download selection list">
         <% for collection in uiCollections: %>
         <div class="item">
           <div class="ui checkbox">
@@ -137,7 +138,7 @@ type        : 'Semantic'
       Views
     </h3>
     <div class="ui active content">
-      <div class="ui download divided selection list">
+      <div class="ui download selection list">
         <% for view in uiViews: %>
         <div class="item">
           <div class="ui checkbox">
@@ -168,7 +169,7 @@ type        : 'Semantic'
       Modules
     </h3>
     <div class="ui active content">
-      <div class="ui download divided selection list">
+      <div class="ui download selection list">
       <% for module in uiModules: %>
         <div class="item">
           <div class="ui checkbox">

server/files/stylesheets/customize.css

@@ -3,8 +3,7 @@
 *******************************/
 
 #example.custom .download.list {
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25em;
+  margin: 1em -0.8em;
 }
 
 #example.custom .download.list .checkbox + .content {
@@ -16,6 +15,14 @@
   font-weight: normal;
 }
 
+#example.custom .main.container > h2 {
+  text-align: center;
+  font-size: 2em;
+  margin: 2em 0em;
+}
+#example.custom .main.container > h2:first-child {
+  margin-top: 0em;
+}
 #example.custom .download.list .checkbox.checked + .content {
   opacity: 1;
 }

server/files/stylesheets/semantic.css

@@ -318,7 +318,7 @@ a:hover {
   height: 1px;
   position: absolute;
   right: 100%;
-  top: -30px;
+  top: -70px;
   width: 1px;
 }
 

src/definitions/collections/message.less

@@ -51,11 +51,15 @@
 .ui.message .header {
   display: @headerDisplay;
   font-family: @headerFont;
-  font-size: @headerFontSize;
   font-weight: @headerFontWeight;
   margin: 0em 0em 0em @headerDistance;
 }
 
+/* Default font size */
+.ui.message .header:not(.ui) {
+  font-size: @headerFontSize;
+}
+
 /* Paragraph */
 .ui.message p {
   opacity: @messageTextOpacity;