Changeset 2949:4e44ab2ef195 for themes/berlin/scss

Timestamp:

01/31/15 13:02:01 (11 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

default

Message:

Use base64 inline url for png/svg images <= 2Kb (recommendation from  http://yellowlab.tools/ tools)

Location:

themes/berlin/scss

Files:

• init/_mixins-functions.scss (modified) (2 diffs)
• modules/_off-canvas.scss (modified) (2 diffs)
• partials/_archive.scss (modified) (2 diffs)
• partials/_content.scss (modified) (1 diff)
• partials/_global_layout.scss (modified) (1 diff)
• partials/_header.scss (modified) (1 diff)
• partials/_icons.scss (modified) (1 diff)
• partials/_post.scss (modified) (3 diffs)

themes/berlin/scss/init/_mixins-functions.scss

@@ -3 +3 @@
     $file-name,
     $css-img-path: $css-img-path) {
-    background-image: url($css-img-path+'/'+$file-name+'.png');
-    background-image: url($css-img-path+'/'+$file-name+'.svg'), none;
+    background-image: inline-image($file-name+'.png');
+    background-image: inline-image($file-name+'.svg'), none;
 }
 
@@ -13 +13 @@
     $position: 50% 50%,
     $bg-color: transparent) {
-    background: url($css-img-path+'/'+$file-name+'.png') $repeat, $position, $bg-color;
-    background-image: url($css-img-path+'/'+$file-name+'.svg'), none;
+    background: inline-image($file-name+'.png') $repeat, $position, $bg-color;
+    background-image: inline-image($file-name+'.svg'), none;
 }
 

themes/berlin/scss/modules/_off-canvas.scss

@@ -44 +44 @@
         display: block;
         background-color: $white;
-        background-image: url(img/icon_open-sidebar.png);
-        background-image: url(img/icon_open-sidebar.svg), none;
+        background-image: inline-image('icon_open-sidebar.png');
+        background-image: inline-image('icon_open-sidebar.svg'), none;
         border: .1em solid $gray-dark;
         border-radius: .25em;
@@ -52 +52 @@
     #offcanvas-off {
         background-color: $gray-very-dark;
-        background-image: url(img/icon_close.png);
-        background-image: url(img/icon_close.svg), none;
+        background-image: inline-image('icon_close.png');
+        background-image: inline-image('icon_close.svg'), none;
         border: 1px solid $white;
     }

themes/berlin/scss/partials/_archive.scss

@@ -79 +79 @@
 /* par categorie */
 .arch-cat-list, .arch-sub-cat-list {
-    background: transparent url(img/vline.png) repeat-y;
+    background: transparent inline-image('vline.png') repeat-y;
     }
 .arch-sub-cat-list {
@@ -86 +86 @@
 .arch-cat-list li {
     padding: .2em .2em .2em 20px;
-    background: transparent url(img/hline.png) no-repeat left .82em;
+    background: transparent inline-image('hline.png') no-repeat left .82em;
     }
 .arch-cat-list li:last-child {
-    background-image: url(img/last-hline.png);
+    background-image: inline-image('last-hline.png');
     }
 /* par tag */

themes/berlin/scss/partials/_content.scss

@@ -5 +5 @@
 }
 .prev {
-    @include replace-text('icon_prev.png');
+    @include replace-text(inline-image('icon_prev.png'));
 }
 .next {
-    @include replace-text('icon_next.png');
+    @include replace-text(inline-image('icon_next.png'));
 }
 .prev, .next {

themes/berlin/scss/partials/_global_layout.scss

@@ -1 +1 @@
 body {
-    background: $gray-light url(img/bg_light.png);
+    background: $gray-light inline-image('bg_light.png');
     color: $primary-color;
 }

themes/berlin/scss/partials/_header.scss

@@ -106 +106 @@
     }
     &.open {
-    background-image: url(img/icon_close.png);
-    background-image: url(img/icon_close.svg), none;
+    background-image: inline-image('icon_close.png');
+    background-image: inline-image('icon_close.svg'), none;
     }
 }

themes/berlin/scss/partials/_icons.scss

@@ -16 +16 @@
 }
 .post-date {
-    background-image: url(img/icon_date.png);
+    background-image: inline-image('icon_date.png');
 }
 .post-cat {
-    background-image: url(img/icon_category.png);
+    background-image: inline-image('icon_category.png');
 }
 .post-tags-list {
-    background-image: url(img/icon_tags.png);
+    background-image: inline-image('icon_tags.png');
     padding-left: 22px !important;
 }
 .comment_count {
-    background-image: url(img/icon_comments.png);
+    background-image: inline-image('icon_comments.png');
 }
 .ping_count {
-    background-image: url(img/icon_trackbacks.png);
+    background-image: inline-image('icon_trackbacks.png');
 }
 .attach_count {
-    background-image: url(img/icon_attach.png);
+    background-image: inline-image('icon_attach.png');
 }
 .post-permalink {
-    background-image: url(img/icon_permalink.png);
+    background-image: inline-image('icon_permalink.png');
 }
 .feed {
-    background-image: url(img/icon_feed.png);
-    background-image: url(img/icon_feed.svg), none;
+    background-image: inline-image('icon_feed.png');
+    background-image: inline-image('icon_feed.svg'), none;
     background-size: .875em;
     padding-left: 1.25em;

themes/berlin/scss/partials/_post.scss

@@ -81 +81 @@
 }
 .post-attachments:before {
-    content: url(img/icon_attachments.png);
-    content: url(img/icon_attachments.svg);
+    content: inline-image('icon_attachments.png');
+    content: inline-image('icon_attachments.svg');
     display: block;
     position: absolute;
@@ -125 +125 @@
         }
         .ping {
-            background: #f3efed url(img/icon_trackbacks.png) no-repeat 1.5em 4em;
+            background: #f3efed inline-image('icon_trackbacks.png') no-repeat 1.5em 4em;
         }
             .comment-number {
@@ -150 +150 @@
 }
 .send-trackback {
-    background: #f3efed url(img/icon_trackbacks.png) no-repeat 1.5em 4em;
+    background: #f3efed inline-image('icon_trackbacks.png') no-repeat 1.5em 4em;
 }
 .field label {