Add decoration to sidebar background

This commit is contained in:
str4d
2015-07-19 10:20:13 +00:00
parent fae2031211
commit 56851d3940
4 changed files with 297 additions and 2 deletions

292
design/bg-sidebar.svg Normal file
View File

@ -0,0 +1,292 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="250"
height="460"
viewBox="0 0 250 460.00001"
id="svg3411"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="bg-sidebar.svg"
inkscape:export-filename="bg-sidebar.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs3413" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="59.5"
inkscape:cy="228.5"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1366"
inkscape:window-height="719"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1" />
<metadata
id="metadata3416">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-592.36214)">
<g
id="g4892">
<circle
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2965"
cx="221.73021"
cy="707.62994"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2969"
cx="197.54765"
cy="753.52283"
r="9.4642859" />
<circle
id="path2961"
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="100.81744"
cy="753.52283"
r="9.4642859" />
<circle
id="path2979"
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="197.54765"
cy="891.20135"
r="9.4642859" />
<circle
id="path2933"
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="221.73021"
cy="615.84424"
r="9.4642859" />
<circle
id="path2941"
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="221.73021"
cy="845.30853"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2917"
cx="173.3651"
cy="707.62994"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2949"
cx="197.54765"
cy="661.73712"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2953"
cx="149.18254"
cy="753.52283"
r="9.4642859" />
<circle
id="path2955"
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="173.3651"
cy="937.09418"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2935"
cx="124.99998"
cy="937.09418"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2959"
cx="221.73021"
cy="982.98706"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2973"
cx="197.54765"
cy="799.41565"
r="9.4642859" />
<circle
id="path2975"
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="124.99998"
cy="1028.88"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#01ff01;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2977"
cx="173.3651"
cy="845.30853"
r="9.4642859" />
</g>
<g
id="g4841">
<circle
id="path2863"
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="28.269793"
cy="799.41565"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2873"
cx="100.81744"
cy="707.62994"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2881"
cx="52.452339"
cy="753.52283"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2865"
cx="28.269793"
cy="845.30853"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2891"
cx="76.634888"
cy="937.09418"
r="9.4642859" />
<circle
id="path2857"
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="28.269793"
cy="615.84424"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2877"
cx="76.634888"
cy="615.84424"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2869"
cx="52.452339"
cy="661.73712"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2861"
cx="100.81744"
cy="982.98706"
r="9.4642859" />
<circle
id="path2875"
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="52.452339"
cy="891.20135"
r="9.4642859" />
<circle
id="path2899"
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="28.269793"
cy="937.09418"
r="9.4642859" />
<circle
id="path2883"
style="display:inline;opacity:1;fill:#ff0101;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="52.452339"
cy="1028.88"
r="9.4642859" />
</g>
<g
id="g4865">
<circle
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2897"
cx="76.634888"
cy="799.41565"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2943"
cx="149.18254"
cy="982.98706"
r="9.4642859" />
<circle
id="path2923"
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="100.81744"
cy="891.20135"
r="9.4642859" />
<circle
id="path2909"
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="149.18254"
cy="615.84424"
r="9.4642859" />
<circle
id="path2901"
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="124.99998"
cy="661.73712"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2921"
cx="124.99998"
cy="799.41565"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2907"
cx="52.452339"
cy="982.98706"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2925"
cx="124.99998"
cy="845.30853"
r="9.4642859" />
<circle
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path2947"
cx="52.452339"
cy="707.62994"
r="9.4642859" />
<circle
id="path2931"
style="display:inline;opacity:1;fill:#ebed02;fill-opacity:0.39215687;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
cx="197.54765"
cy="1028.88"
r="9.4642859" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -174,11 +174,11 @@ div#content .inner:before {
}
div#content .inner .fluid {
background: white;
background-color: white;
}
div#content .sidebar {
background: rgba(171, 204, 113, 0.6);
background: white;
border-bottom: 1px solid #abcc71;
font-size: 0.875rem;
}
@ -188,6 +188,7 @@ div#content .sidebar .top {
}
div#content .sidebar nav {
background: rgba(171, 204, 113, 0.6);
padding: 1em;
}

View File

@ -240,6 +240,8 @@ div#content .aside:first-child {
*/
div#content .inner .fluid {
background-image: url('images/bg-sidebar.png');
background-repeat: repeat-y;
border-left: 1px solid #abcc71;
margin-left: 0.625rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB