before use less

.gitignore

@@ -2,6 +2,7 @@
 web/bundles/
 web/HtmlMockups
 web/uploads/*
+web/css/*
 app/config/parameters.yml
 app/bootstrap*
 app/cache/*

app/config/config.yml

@@ -42,8 +42,8 @@ assetic:
         yui_js:
             jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
         less:
-            node: /usr/local/bin/node
-            node_paths: [/usr/local/lib/node_modules]
+            node: %node%/usr/local/bin/node
+            node_paths: %node_paths%[/usr/local/lib/node_modules]
 
 # Doctrine Configuration
 doctrine:

src/SFM/PicmntBundle/Resources/public/less/general.less

@@ -0,0 +1,120 @@
+body {
+    background: whiteSmoke;
+    font-family: 'Libre Baskerville', serif;
+    /* font-family: "Nimbus Roman No9 L", Sans, serif; */
+    font-size: 14px;
+}
+
+.picmnt-title a{
+    font-size: 6em;
+    color: rgba(0, 0, 0, 0.19);
+    text-decoration: none !important;
+} 
+
+h1 {
+    font-weight: normal !important;
+}
+
+#image-section {
+    padding-top: 30px;
+}
+
+#image-section img, #image-section canvas {
+    margin-left: 20px;
+    border: 10px solid white;
+    border-radius: 8px;
+    box-shadow: 5px 5px 10px #333;
+    -webkit-box-shadow: 5px 5px 10px #333;
+    -moz-box-shadow: 5px 5px 10px #333;
+}
+
+#image-title {
+    margin-top: 0;
+    font-size: 3em;
+}
+
+.image-extra-info {
+    margin-top: -20px;
+    padding-left: 2em;
+}
+
+#image-info p {
+    padding-bottom: 10px;
+}
+
+#separator {
+    margin: 60px auto 10px auto;
+    width: 960px;
+}
+
+
+
+/* COMMENTS */
+
+#comments-title {
+    text-align: center;
+}
+
+#comment-form .textarea {
+    height: 150px;
+    width: 400px;
+    resize: none;
+}
+
+#comments {
+    margin-top: 50px;
+}
+
+#comments h3 {
+    text-align: center;    
+}
+
+.comment hr {
+    margin-top: 20px;
+}
+
+.comment {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.comment-text {
+    margin-top: -10px;
+    padding-left: 2em;
+}
+
+#image-comment img, #image-comment canvas {
+    top: 10px;
+    display: none;
+    position: fixed;
+    border: 10px solid white;
+    border-radius: 8px;
+    box-shadow: 5px 5px 10px #333;
+    -webkit-box-shadow: 5px 5px 10px #333;
+    -moz-box-shadow: 5px 5px 10px #333;
+}
+
+.link-to-comment {
+    float: right;
+}
+
+
+
+/* HEADER */
+#login-menu {
+    font-size: 0.8em;
+    margin-top: 2em;
+    text-align: right;
+}
+
+#login-menu ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    text-align: center;
+}
+
+#login-menu ul li {
+    display: inline;
+    float:right;
+}

src/SFM/PicmntBundle/Resources/public/stylesheets/picmnt.css

@@ -47,6 +47,8 @@ h1 {
     width: 960px;
 }
 
+
+
 /* COMMENTS */
 
 #comments-title {
@@ -81,6 +83,24 @@ h1 {
     padding-left: 2em;
 }
 
+#image-comment img, #image-comment canvas {
+    top: 10px;
+    display: none;
+    position: fixed;
+    border: 10px solid white;
+    border-radius: 8px;
+    box-shadow: 5px 5px 10px #333;
+    -webkit-box-shadow: 5px 5px 10px #333;
+    -moz-box-shadow: 5px 5px 10px #333;
+}
+
+.link-to-comment {
+    float: right;
+}
+
+
+
+/* HEADER */
 #login-menu {
     font-size: 0.8em;
     margin-top: 2em;
@@ -98,18 +118,3 @@ h1 {
     display: inline;
     float:right;
 }
-
-#image-comment img, #image-comment canvas {
-    top: 10px;
-    display: none;
-    position: fixed;
-    border: 10px solid white;
-    border-radius: 8px;
-    box-shadow: 5px 5px 10px #333;
-    -webkit-box-shadow: 5px 5px 10px #333;
-    -moz-box-shadow: 5px 5px 10px #333;
-}
-
-.link-to-comment {
-    float: right;
-}

src/SFM/PicmntBundle/Resources/views/Image/viewImageNew.html.twig

@@ -7,9 +7,17 @@
       <link href="/favicon.ico" rel="shortcut icon">
 
       {% block stylesheet %}
-        <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
-        <link rel="stylesheet" href="{{ asset('bundles/sfmpicmnt/stylesheets/picmnt.css')}}">
-	<link rel="stylesheet" href="{{ asset('bundles/sfmpicmnt/stylesheets/fluid_grid.css')}}">
+
+       {% stylesheets filter='?yui_css' output='css/libs.css' 
+          '@SFMPicmntBundle/Resources/public/stylesheets/fluid_grid.css' %}
+	<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
+	{% endstylesheets %}
+
+	{% stylesheets filter='less, ?yui_css' output='css/picmnt.css' 
+          '@SFMPicmntBundle/Resources/public/less/general.less' %}
+	<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
+	{% endstylesheets %}
+
       {% endblock stylesheet %}