#10 completed adding svg options for colour themes

dharmafly · Jul 10, 2012 · 7f2bfab · 7f2bfab
1 parent de1943d
commit 7f2bfab
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/_config.yml b/_config.yml
@@ -4,7 +4,7 @@ GITHUB_CURRENT_VERSION: 1.0
 GITHUB_PROJECT_URL: https://github.com/dharmafly/dharmafly-docs
 
 # The style for your site (currently only default)
-THEME: default
+THEME: ocean
 
 ############ Optional extras
 

diff --git a/_includes/global.css b/_includes/global.css
@@ -428,7 +428,7 @@ section .permalink:hover {
   display: block;
   position: absolute;
   top: 0;
-  left: 50%;
+  left: {{ page.quote_svg_left_pos }};
   width:88px;
   height: 39px;
   margin: 0;
@@ -445,7 +445,7 @@ section .permalink:hover {
 }
 
 .quote:after {
-  left: 18.6em;
+  left: {{ page.quote_svg_right_pos }};
   -webkit-transform: {{ page.quote_svg_right_transform }};
   -moz-transform: {{ page.quote_svg_right_transform }};
   -ms-transform: {{ page.quote_svg_right_transform }};
@@ -830,7 +830,12 @@ aside li.code-css span {
     background-position: right top;
     background-size: 100%;
     background-color: transparent;
-    -webkit-filter: saturate(4.8);
+    -webkit-filter: {{ page.svg_title_filter }};
+     -webkit-transform: {{ page.svg_title_rotation }};
+    -moz-transform: {{ page.svg_title_rotation }};
+    -ms-transform: {{ page.svg_title_rotation }};
+    -o-transform: {{ page.svg_title_rotation }};
+    transform: {{ page.svg_title_rotation }};
   }
 
   footer > div {

diff --git a/css/default.css b/css/default.css
@@ -30,18 +30,26 @@ icon_border: "#152E16"
 
 # svg
 
+# for main title svg
 svg_asset: nodewing.svg
+svg_title_filter: saturate(4.8)
+svg_title_rotation: none
+# for svg element on left hand side of content
 svg_asset_size: 100%
 svg_asset_rotation: 270deg
+# for 'wings' above quote, if present
 quote_svg_left_transform: none
 quote_svg_right_transform: scaleX(-1)
+quote_svg_left_pos: 50%
+quote_svg_right_pos: 18.6em
 
    # <svg width="403" height="8" xmlns="http://www.w3.org/2000/svg"><line stroke="#7DB378" stroke-width="2" x1="4" y1="4" x2="400" y2="4" /><circle fill="#7DB378" cx="4" cy="4" r="4" /></svg>
 subnav_underline: PHN2ZyB3aWR0aD0iNDAzIiBoZWlnaHQ9IjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgc3Ryb2tlPSIjN0RCMzc4IiBzdHJva2Utd2lkdGg9IjIiIHgxPSI0IiB5MT0iNCIgeDI9IjQwMCIgeTI9IjQiIC8+PGNpcmNsZSBmaWxsPSIjN0RCMzc4IiBjeD0iNCIgY3k9IjQiIHI9IjQiIC8+PC9zdmc+
   
   #<svg width="23" height="20" xmlns="http://www.w3.org/2000/svg"> <style> line, circle { stroke: #7DB378; fill: #7DB378; } </style> <line y2="4" x2="23" y1="4" x1="4" /> <line y2="10" x2="23" y1="10" x1="4" /> <line y2="16" x2="23" y1="16" x1="4" /> <circle r="2.5" cy="4" cx="4" /> <circle r="2.5" cy="10" cx="4" /> <circle r="2.5" cy="16" cx="4" /> </svg> 
 show_subnav_icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxzdHlsZT4gbGluZSwgY2lyY2xlIHsgc3Ryb2tlOiAjN0RCMzc4OyBzdHJva2Utd2lkdGg6IDJweDsgZmlsbDogIzdEQjM3ODsgfSBjaXJjbGUgeyBzdHJva2Utd2lkdGg6IDA7IH0gPC9zdHlsZT4gPGxpbmUgeTI9IjQiIHgyPSIyMyIgeTE9IjQiIHgxPSI0IiAvPiA8bGluZSB5Mj0iMTEiIHgyPSIyMyIgeTE9IjExIiB4MT0iNCIgLz4gPGxpbmUgeTI9IjE4IiB4Mj0iMjMiIHkxPSIxOCIgeDE9IjQiIC8+IDxjaXJjbGUgcj0iMiIgY3k9IjQiIGN4PSI0IiAvPiA8Y2lyY2xlIHI9IjIiIGN5PSIxMSIgY3g9IjQiIC8+IDxjaXJjbGUgcj0iMiIgY3k9IjE4IiBjeD0iNCIgLz4gPC9zdmc+IA=='
 
+  # svg element attaching twitter, github buttons to main content
   # ./svg/icon-stem.svg
   # <svg width="90" height="240" xmlns="http://www.w3.org/2000/svg"> <style>path { stroke:	#dbe5d7; fill: none; stroke-width: 9; }</style> <path  d="m77.66501,1.668c0,0 6,56.64099 -15.09601,98c-18.13898,35.608 -34.23698,67.72299 -34.23698,67.72299s-22,40.66803 -22,70"/></svg>
 icon_stem: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTAiIGhlaWdodD0iMjQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiA8c3R5bGU+cGF0aCB7IHN0cm9rZToJI2RiZTVkNzsgZmlsbDogbm9uZTsgc3Ryb2tlLXdpZHRoOiA5OyB9PC9zdHlsZT4gPHBhdGggIGQ9Im03Ny42NjUwMSwxLjY2OGMwLDAgNiw1Ni42NDA5OSAtMTUuMDk2MDEsOThjLTE4LjEzODk4LDM1LjYwOCAtMzQuMjM2OTgsNjcuNzIyOTkgLTM0LjIzNjk4LDY3LjcyMjk5cy0yMiw0MC42NjgwMyAtMjIsNzAiLz48L3N2Zz4='

diff --git a/css/ocean.css b/css/ocean.css
@@ -30,11 +30,18 @@ icon_border: "#152E16"
 
 # svg
 
+# for main title svg
 svg_asset: nodewing_alt.svg
+svg_title_filter: none
+svg_title_rotation: rotate(-18deg)
+# for svg element on left hand side of content
 svg_asset_size: 112%
 svg_asset_rotation: 93deg
-quote_svg_left_transform: none
-quote_svg_right_transform: scaleX(-1)
+# for 'wings' above quote, if present
+quote_svg_right_transform: rotate(80deg)
+quote_svg_left_transform: rotate(-80deg) scaleX(-1)
+quote_svg_left_pos: 46%
+quote_svg_right_pos: 19.6em
 
    # <svg width="403" height="8" xmlns="http://www.w3.org/2000/svg"><line stroke="#6C94B8" stroke-width="2" x1="4" y1="4" x2="400" y2="4" /><circle fill="#6C94B8" cx="4" cy="4" r="4" /></svg>
 subnav_underline: PHN2ZyB3aWR0aD0iNDAzIiBoZWlnaHQ9IjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgc3Ryb2tlPSIjNkM5NEI4IiBzdHJva2Utd2lkdGg9IjIiIHgxPSI0IiB5MT0iNCIgeDI9IjQwMCIgeTI9IjQiIC8+PGNpcmNsZSBmaWxsPSIjNkM5NEI4IiBjeD0iNCIgY3k9IjQiIHI9IjQiIC8+PC9zdmc+