removing old icons and adding new. Adding colophon. Cleaning up a few other things probably

This commit is contained in:
Dave Gamache 2014-12-01 18:26:32 -08:00
parent 0c19f06469
commit 4f8392275a
10 changed files with 178 additions and 63 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

12
images/feather.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="130px" height="70px" viewBox="0 0 130 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch Beta 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
<title>feather</title>
<desc>Created with Sketch Beta.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="feather" sketch:type="MSArtboardGroup" stroke-width="1.5" stroke="#FFFFFF" fill="#000000">
<path d="M62.7545597,80.9293443 L62.7545597,91.4097889 C62.7545597,92.4644569 63.6105221,93.3204193 64.6651901,93.3204193 C65.719858,93.3204193 66.5758205,92.4644569 66.5758205,91.4097889 L66.5758205,80.9293443 L70.2404096,80.822349 C70.8161462,80.8057902 71.354944,80.5293857 71.7039525,80.0695606 L84.4414884,63.3324383 C84.9892025,62.6140413 84.9573587,61.6090497 84.366337,60.9263178 L78.959253,54.6696401 L84.014781,51.1438902 C84.5268299,50.7872391 84.8325308,50.2013125 84.8325308,49.5771732 L84.8325308,2.83933241 C84.8325308,2.42026748 84.6949654,2.01394008 84.4402147,1.68021663 L66.1835044,-22.240876 C66.1401967,-22.2981949 66.0803303,-22.3351337 66.0306539,-22.3873576 C65.9555025,-22.4663303 65.8841723,-22.5453031 65.7962833,-22.6115383 C65.7134893,-22.6726784 65.6230528,-22.7134385 65.53389,-22.7605674 C65.4689286,-22.7949588 65.4128834,-22.8420877 65.342827,-22.8688365 C65.187429,-22.9159654 65.0855288,-22.9287029 64.9836285,-22.9452617 C64.893192,-22.9605467 64.805303,-22.9822006 64.7148665,-22.9834743 C64.6244299,-22.9860218 64.5352672,-22.969463 64.4435569,-22.959273 C64.3365616,-22.9465355 64.2333876,-22.9350717 64.1302136,-22.9057753 C63.9951957,-22.8739315 63.9506143,-22.8344451 63.8945691,-22.8102438 C63.7939426,-22.7656624 63.6958636,-22.7198073 63.6041533,-22.6573934 C63.5264543,-22.6051695 63.4602192,-22.5440293 63.3927102,-22.4816154 C63.3417601,-22.4357603 63.2831674,-22.4039164 63.2373123,-22.3516925 L50.5354414,-8.03979708 C50.051415,-7.49335679 49.9202184,-6.7189146 50.1978967,-6.04382519 L53.0676635,0.926154503 L46.407206,0.926154503 C45.352538,0.926154503 44.4965756,1.78211692 44.4965756,2.8367849 L44.4965756,43.126885 C44.4965756,43.6121851 44.6812698,44.0783789 45.0124458,44.4324824 L50.8385947,50.65859 L44.7513263,61.2205549 C44.3666527,61.886728 44.4201504,62.7197629 44.8863442,63.3311646 L57.6238802,80.0682869 C57.9741624,80.5293857 58.5129602,80.807064 59.0886968,80.822349 L62.7545597,80.9293443 Z M75.0360919,52.7488197 C74.5915519,53.0583418 74.301136,53.5423682 74.2336271,54.0786184 C74.1661182,54.6161425 74.3291586,55.156214 74.6845359,55.5650889 L80.463556,62.2522953 L69.2163117,77.0303846 L66.5758205,77.1080835 L66.5758205,75.761726 L66.5758205,-15.4288417 L81.01127,3.48512548 L81.01127,48.5823717 L75.0360919,52.7488197 Z M54.5961679,49.0829568 L48.3178364,42.3740966 L48.3178364,4.74996281 L55.9208716,4.74996281 C56.5577484,4.74996281 57.1538651,4.43152441 57.5079686,3.90291666 C57.8620721,3.37303517 57.929581,2.70176702 57.6875678,2.1120191 L54.1860192,-6.39283368 L62.7558334,-16.0491597 L62.7558334,45.4056302 L56.7131463,40.6914681 C55.8788377,40.0418538 54.6789618,40.190883 54.031895,41.0226441 C53.3822807,41.8544052 53.5300361,43.0555548 54.363071,43.7038954 L62.7571072,50.2522626 L62.7571072,65.3844554 L56.7144201,60.6715671 C55.8801115,60.0219527 54.6802356,60.1709819 54.0331688,61.002743 C53.3835544,61.8345041 53.5313099,63.0356538 54.3643447,63.6839943 L62.7583809,70.2310878 L62.7583809,75.7629997 L62.7583809,77.1093573 L60.116616,77.0316583 L48.7012362,62.0319359 L54.8572873,51.3425957 C55.2763523,50.6140087 55.1706307,49.6969061 54.5961679,49.0829568 Z" sketch:type="MSShapeGroup" transform="translate(64.664190, 35.168341) rotate(90.000000) translate(-64.664190, -35.168341) "></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path d="M26.789,78.345l2.878,0.084v8.228c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-8.228l2.877-0.084 c0.452-0.013,0.875-0.23,1.149-0.591l10-13.14c0.43-0.564,0.405-1.353-0.059-1.889l-4.245-4.912l3.969-2.768 c0.402-0.28,0.642-0.74,0.642-1.23V32.122c0-0.329-0.108-0.648-0.308-0.91L32.359,12.432c-0.034-0.045-0.081-0.074-0.12-0.115 c-0.059-0.062-0.115-0.124-0.184-0.176c-0.065-0.048-0.136-0.08-0.206-0.117c-0.051-0.027-0.095-0.064-0.15-0.085 c-0.015-0.006-0.03-0.005-0.045-0.01c-0.077-0.027-0.157-0.037-0.237-0.05c-0.071-0.012-0.14-0.029-0.211-0.03 c-0.071-0.002-0.141,0.011-0.213,0.019c-0.084,0.01-0.165,0.019-0.246,0.042c-0.02,0.006-0.04,0.004-0.06,0.01 c-0.046,0.015-0.081,0.046-0.125,0.065c-0.079,0.035-0.156,0.071-0.228,0.12c-0.061,0.041-0.113,0.089-0.166,0.138 c-0.04,0.036-0.086,0.061-0.122,0.102l-9.972,11.236c-0.38,0.429-0.483,1.037-0.265,1.567l2.253,5.472h-5.229 c-0.828,0-1.5,0.672-1.5,1.5v16.631c0,0.381,0.145,0.747,0.405,1.025l4.574,4.888l-4.779,8.292 c-0.302,0.523-0.26,1.177,0.106,1.657l10,13.14C25.914,78.115,26.337,78.333,26.789,78.345z M44,53.034l-4.691,3.271 c-0.349,0.243-0.577,0.623-0.63,1.044c-0.053,0.422,0.075,0.846,0.354,1.167l4.537,5.25L34.74,75.368l-2.073,0.061v-1.057V17.78 L44,32.629V53.034z M23.467,55.201c0.329-0.572,0.246-1.292-0.205-1.774l-4.929-5.267V33.622h5.969c0.5,0,0.968-0.25,1.246-0.665 c0.278-0.416,0.331-0.943,0.141-1.406l-2.749-6.677l6.728-7.581v33.247l-4.744-3.701c-0.655-0.51-1.597-0.393-2.105,0.26 c-0.51,0.653-0.394,1.596,0.26,2.105l6.59,5.141v11.88l-4.744-3.7c-0.655-0.51-1.597-0.393-2.105,0.26 c-0.51,0.653-0.394,1.596,0.26,2.105l6.59,5.14v4.343v1.057l-2.074-0.061l-8.962-11.776L23.467,55.201z"/>
<path d="M79.688,45.335l4.779-8.292c0.302-0.523,0.26-1.177-0.106-1.657l-10-13.141c-0.274-0.361-0.697-0.578-1.15-0.591 l-2.877-0.083v-8.229c0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5v8.229l-2.876,0.083c-0.453,0.013-0.876,0.229-1.15,0.591 l-10,13.141c-0.43,0.564-0.405,1.353,0.059,1.889l4.245,4.911l-3.969,2.768c-0.402,0.28-0.642,0.74-0.642,1.23v21.694 c0,0.329,0.108,0.648,0.308,0.91l14.333,18.779c0.075,0.099,0.162,0.185,0.256,0.26c0.014,0.011,0.03,0.018,0.044,0.028 c0.098,0.073,0.202,0.131,0.313,0.177c0.017,0.007,0.029,0.02,0.046,0.026c0.018,0.007,0.038,0.004,0.057,0.01 c0.153,0.052,0.312,0.087,0.475,0.087c0.147,0,0.29-0.029,0.429-0.071c0.017-0.005,0.034-0.003,0.051-0.008 c0.015-0.005,0.026-0.016,0.041-0.021c0.131-0.049,0.257-0.11,0.371-0.195c0.007-0.005,0.012-0.012,0.019-0.018 c0.074-0.057,0.146-0.119,0.21-0.191l9.972-11.236c0.38-0.429,0.483-1.037,0.265-1.567l-2.253-5.472h5.229 c0.828,0,1.5-0.672,1.5-1.5v-16.63c0-0.381-0.145-0.747-0.405-1.025L79.688,45.335z M56,46.966l4.691-3.271 c0.349-0.243,0.577-0.623,0.63-1.044c0.053-0.422-0.075-0.846-0.354-1.167l-4.537-5.25l8.829-11.602l2.073-0.06v1.057v56.591 L56,67.371V46.966z M81.667,66.378h-5.969c-0.5,0-0.968,0.25-1.246,0.665c-0.278,0.416-0.331,0.943-0.141,1.406l2.749,6.677 l-6.728,7.581V49.461l4.744,3.7c0.274,0.214,0.6,0.317,0.922,0.317c0.446,0,0.888-0.198,1.184-0.577 c0.51-0.653,0.394-1.596-0.26-2.105l-6.59-5.14v-11.88l4.744,3.7c0.274,0.214,0.6,0.317,0.922,0.317 c0.446,0,0.888-0.198,1.184-0.577c0.51-0.653,0.394-1.596-0.26-2.105l-6.59-5.14v-4.343v-1.057l2.074,0.06l8.962,11.777 l-4.836,8.391c-0.329,0.572-0.246,1.292,0.205,1.774l4.929,5.267V66.378z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -1,19 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="94px" height="79px" viewBox="0 0 94 79" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch Beta 3.2 (9960) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch Beta.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-HD-4" sketch:type="MSArtboardGroup" transform="translate(-312.000000, -434.000000)" stroke="#231F20" stroke-width="2">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(312.500000, 435.000000)">
<rect id="Rectangle-path" sketch:type="MSShapeGroup" x="0.832" y="21.276" width="91.002" height="55.248"></rect>
<rect id="Rectangle-path" sketch:type="MSShapeGroup" x="6.334" y="26.775" width="79.749" height="43.875"></rect>
<ellipse id="Oval" sketch:type="MSShapeGroup" cx="47.332" cy="3.624" rx="3" ry="3"></ellipse>
<path d="M46.207,5.025 L23.083,21.042" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M49.864,5.175 L71.44,20.895" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M6.334,48.9 L15.331,48.9 L15.331,35.649 L25.081,35.649 L25.081,48.9 L25.081,50.397 L43.456,50.397 L43.456,40.023 L62.083,40.023 L62.083,51.147 L75.958,51.147 L84.832,51.147" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

21
images/pens.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="130px" height="70px" viewBox="0 0 130 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch Beta 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
<title>pens</title>
<desc>Created with Sketch Beta.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="pens" sketch:type="MSArtboardGroup">
<g id="capped" sketch:type="MSLayerGroup" transform="translate(65.143695, 20.838603) scale(-1, 1) rotate(-90.000000) translate(-65.143695, -20.838603) translate(16.643695, -32.161397)">
<g id="Background"></g>
<g id="Pictograms" transform="translate(40.462213, 0.000000)" fill="#000000" sketch:type="MSShapeGroup">
<path d="M11.9353896,2.67942793 L11.9353896,1.83430371 C11.9353896,1.30610107 11.5018659,0.873935276 10.9720035,0.873935276 L1.55008813,0.873935276 C1.02022581,0.873935276 0.586702095,1.30610107 0.586702095,1.83430371 L0.586702095,37.7040648 C0.586702095,38.1554379 0.894985626,38.5299816 1.30924162,38.6260185 L1.30924162,101.667167 C1.30924162,102.070522 1.55972199,102.416255 1.91617482,102.56031 L1.91617482,104.173729 C1.91617482,104.433028 2.02214729,104.682724 2.20519063,104.865194 C2.53274188,105.172512 2.85065928,105.172512 3.53466336,105.162908 L4.07415954,105.153305 L8.91035743,105.162908 L9.23790868,105.162908 C9.70996784,105.162908 9.97008207,105.124494 10.2398302,104.865194 C10.4228735,104.682724 10.528846,104.433028 10.528846,104.173729 L10.5384798,102.579517 C10.9238342,102.454669 11.2032162,102.089729 11.2032162,101.667167 L11.2032162,38.6356221 C11.627106,38.5299816 11.9353896,38.1650416 11.9353896,37.7040648 L11.9353896,4.6001648 L12.8987756,4.6001648 L12.8987756,37.8865348 C12.8987756,38.4243411 13.3322993,38.8469032 13.8621616,38.8469032 C14.4016578,38.8469032 14.8255477,38.4243411 14.8255477,37.8865348 L14.8255477,3.63979637 C14.8255477,3.11159373 14.4016578,2.67942793 13.8621616,2.67942793 L11.9353896,2.67942793 Z M3.23601369,100.706799 L3.23601369,38.6644332 L9.27644412,38.6644332 L9.27644412,100.706799 L3.23601369,100.706799 Z M10.0086175,36.7436963 L2.51347416,36.7436963 L2.51347416,2.79467215 L10.0086175,2.79467215 L10.0086175,36.7436963 L10.0086175,36.7436963 Z" id="Shape"></path>
</g>
<g id="Guides"></g>
</g>
<g id="clicked" sketch:type="MSLayerGroup" transform="translate(65.121739, 45.950758) rotate(135.000000) translate(-65.121739, -45.950758) translate(22.350262, 2.839502)" fill="#000000">
<path d="M3.51676594,0 C3.32667048,0 3.0415273,0.0947500115 2.85143184,0.284250035 L0.665334096,2.55825031 C0.285143184,2.93725036 0.285143184,3.50575043 0.665334096,3.88475047 L5.4177205,8.71700106 L3.13657502,11.0857513 L3.13657502,11.0857513 L3.0415273,11.1805014 C2.66133638,11.5595014 2.66133638,12.1280015 3.0415273,12.5070015 L6.84343642,16.297002 L3.99200458,19.1395023 C3.61181367,19.5185024 3.61181367,20.0870024 3.99200458,20.4660025 L23.6668843,40.4582549 C23.8569797,40.6477549 24.0470752,40.742505 24.3322184,40.742505 L29.1796525,40.837255 L29.1796525,45.2905055 C29.1796525,45.5747555 29.2747002,45.7642556 29.4647957,45.9537556 L33.8369912,50.4070061 C34.2171821,50.7860062 34.7874685,50.7860062 35.1676594,50.4070061 C35.3577548,50.2175061 35.4528026,49.9332561 35.4528026,49.743756 C35.4528026,49.459506 35.3577548,49.270006 35.1676594,49.080506 L30.9855593,44.9115055 L30.9855593,40.742505 L31.0806071,40.837255 L31.0806071,40.837255 L62.6364528,72.5785088 C62.6364528,72.5785088 62.7315005,72.5785088 62.7315005,72.6732588 C62.7315005,72.6732588 62.7315005,72.7680088 62.8265482,72.7680088 L77.6539938,82.33776 C77.939137,82.52726 78.2242802,82.52726 78.5094234,82.43251 L83.5469529,85.1802604 C83.9271438,85.3697604 84.4023825,85.2750104 84.6875257,84.9907603 C84.8776211,84.8012603 84.9726689,84.5170103 84.9726689,84.3275102 C84.9726689,84.1380102 84.9726689,84.0432602 84.8776211,83.8537602 L82.121237,78.7372596 C82.121237,78.6425096 82.2162847,78.5477595 82.2162847,78.3582595 C82.2162847,78.1687595 82.121237,77.9792595 82.0261893,77.8845095 L72.5214165,62.9140076 C72.5214165,62.9140076 72.5214165,62.9140076 72.4263688,62.8192576 C72.4263688,62.8192576 72.4263688,62.7245076 72.331321,62.7245076 L12.8314433,2.55825031 C12.6413478,2.36875029 12.3562046,2.27400028 12.1661092,2.27400028 C11.880966,2.27400028 11.6908705,2.36875029 11.5007751,2.55825031 L9.02953416,5.02175061 L4.27714776,0.189500023 C4.08705231,0.0947500115 3.80190912,0 3.51676594,0 L3.51676594,0 Z M34.7874685,27.5722534 L27.7539366,34.6785042 L26.3282207,33.162504 L33.3617525,26.1510032 L34.7874685,27.5722534 L34.7874685,27.5722534 Z M38.9695685,31.7412539 L31.9360366,38.8475047 L29.0846048,36.0050044 L36.1181367,28.8987535 L38.9695685,31.7412539 L38.9695685,31.7412539 Z M43.1516685,35.9102544 L36.1181367,43.0165052 L33.2667048,40.1740049 L40.3002367,33.162504 L43.1516685,35.9102544 L43.1516685,35.9102544 Z M47.3337686,40.1740049 L40.3002367,47.2802557 L37.4488048,44.4377554 L44.4823367,37.3315045 L47.3337686,40.1740049 L47.3337686,40.1740049 Z M51.5158686,44.3430054 L44.4823367,51.4492563 L41.6309049,48.6067559 L48.6644368,41.500505 L51.5158686,44.3430054 L51.5158686,44.3430054 Z M31.9360366,24.729753 L24.9025047,31.7412539 L9.59982053,16.202252 L16.6333524,9.19075112 L31.9360366,24.729753 L31.9360366,24.729753 Z M12.1661092,4.73750058 L15.2076365,7.86425096 L8.26915234,14.7810018 L5.22762504,11.6542514 L12.1661092,4.73750058 L12.1661092,4.73750058 Z M24.7124093,38.7527547 L5.98800687,19.8027524 L8.17410461,17.6235021 L29.2747002,39.0370047 L24.7124093,38.7527547 L24.7124093,38.7527547 Z M45.8130049,52.7757564 L52.8465368,45.6695055 L54.177205,46.9960057 L47.1436731,54.0075066 L45.8130049,52.7757564 L45.8130049,52.7757564 Z M48.569389,55.5235067 L55.6029209,48.4172559 L70.5254142,63.4825077 L63.4918823,70.4940086 L48.569389,55.5235067 L48.569389,55.5235067 Z M80.2202825,78.2635095 L78.2242802,80.2532598 L65.012646,71.7257587 L71.6659869,64.9985079 L80.2202825,78.2635095 L80.2202825,78.2635095 Z M7.69886597,6.44300078 L6.84343642,7.29575089 L2.66133638,3.22150039 L3.51676594,2.36875029 L7.69886597,6.44300078 L7.69886597,6.44300078 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.4 KiB

18
images/watch.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="130px" height="70px" viewBox="0 0 130 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch Beta 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
<title>watch</title>
<desc>Created with Sketch Beta.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="watch" sketch:type="MSArtboardGroup">
<g sketch:type="MSLayerGroup" transform="translate(64.000000, 33.000000) scale(1, -1) rotate(90.000000) translate(-64.000000, -33.000000) translate(37.000000, -27.000000)">
<path d="M25.268,39.056 C13.572,39.056 4.056,48.572 4.056,60.268 C4.056,71.964 13.572,81.48 25.268,81.48 C36.964,81.48 46.48,71.964 46.48,60.268 C46.48,48.572 36.964,39.056 25.268,39.056 L25.268,39.056 Z M25.268,79.635 C14.588,79.635 5.901,70.947 5.901,60.268 C5.901,49.589 14.589,40.901 25.268,40.901 C35.947,40.901 44.635,49.589 44.635,60.268 C44.635,70.947 35.948,79.635 25.268,79.635 L25.268,79.635 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M49.724,55.657 C48.467,48.978 44.549,43.232 39.102,39.577 L39.102,5.378 C39.102,2.835 37.034,0.767 34.491,0.767 L16.045,0.767 C13.502,0.767 11.434,2.835 11.434,5.378 L11.434,39.577 C4.766,44.05 0.367,51.653 0.367,60.268 C0.367,68.883 4.766,76.487 11.434,80.959 L11.434,115.158 C11.434,117.701 13.502,119.769 16.045,119.769 L34.49,119.769 C37.033,119.769 39.101,117.701 39.101,115.158 L39.101,80.959 C44.548,77.304 48.466,71.558 49.723,64.879 L51.09,64.879 C52.615,64.879 53.857,63.638 53.857,62.112 L53.857,58.423 C53.858,56.898 52.617,55.657 51.091,55.657 L49.724,55.657 Z M16.046,2.611 L34.491,2.611 C36.016,2.611 37.258,3.852 37.258,5.378 L37.258,38.455 C33.699,36.492 29.613,35.368 25.269,35.368 C20.925,35.368 16.839,36.492 13.28,38.455 L13.28,5.378 C13.279,3.853 14.52,2.611 16.046,2.611 Z M34.49,117.925 L16.045,117.925 C14.52,117.925 13.278,116.684 13.278,115.158 L13.278,82.082 C16.837,84.045 20.923,85.169 25.267,85.169 C29.611,85.169 33.697,84.045 37.256,82.082 L37.256,115.158 C37.257,116.683 36.016,117.925 34.49,117.925 Z M25.268,83.324 C12.555,83.324 2.212,72.981 2.212,60.268 C2.212,47.555 12.555,37.212 25.268,37.212 C37.981,37.212 48.324,47.555 48.324,60.268 C48.324,72.981 37.981,83.324 25.268,83.324 L25.268,83.324 Z M52.013,62.113 C52.013,62.621 51.599,63.035 51.091,63.035 L50.005,63.035 C50.108,62.125 50.169,61.205 50.169,60.268 C50.169,59.331 50.107,58.411 50.005,57.501 L51.091,57.501 C51.599,57.501 52.013,57.915 52.013,58.423 L52.013,62.113 L52.013,62.113 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M26.806,44.666 C27.973,44.778 29.126,45.021 30.234,45.39 C30.331,45.422 30.428,45.437 30.526,45.437 C30.913,45.437 31.272,45.192 31.401,44.807 C31.561,44.322 31.3,43.8 30.818,43.64 C29.579,43.227 28.289,42.955 26.983,42.829 C26.491,42.8 26.026,43.151 25.976,43.66 C25.927,44.167 26.3,44.617 26.806,44.666 L26.806,44.666 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M34.979,45.674 C34.56,45.393 33.985,45.505 33.7,45.93 C33.417,46.353 33.533,46.926 33.956,47.209 C36.507,48.907 38.49,51.291 39.689,54.099 C39.838,54.451 40.179,54.659 40.538,54.659 C40.659,54.659 40.783,54.636 40.9,54.585 C41.368,54.385 41.587,53.843 41.386,53.375 C40.044,50.235 37.828,47.573 34.979,45.674 L34.979,45.674 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M32.1347656,44.5683594 L32.1347656,60.0185547 L23.7851563,68" id="Path-71" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup" transform="translate(27.959961, 56.284180) rotate(90.000000) translate(-27.959961, -56.284180) "></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -5,7 +5,7 @@
<!-- Basic Page Needs <!-- Basic Page Needs
--> -->
<meta charset="utf-8"> <meta charset="utf-8">
<title>Your Page Title Here</title> <title>Skeleton: Responsive CSS Boilerplate</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@ -33,6 +33,7 @@
<!-- Favicon <!-- Favicon
--> -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico">
<link rel="icon" type="image/png" href="images/favicon.png" />
</head> </head>
<body class="code-snippets-visible"> <body class="code-snippets-visible">
@ -41,20 +42,24 @@
--> -->
<div class="container"> <div class="container">
<section class="header"> <section class="header">
<h3 class="title">A dead simple, responsive boilerplate.</h3> <h2 class="title">A dead simple, responsive boilerplate.</h2>
<a class="button button-primary">Download</a> <a class="button button-primary">Download</a>
<div class="value-props row"> <div class="value-props row">
<div class="four columns offset-by-two"> <div class="four columns offset-by-two value-prop">
<img class="value-img" src="images/feathers.svg"> <img class="value-img" src="images/feather.svg">
Super light at less than a kb &amp; built with mobile in mind. Light as a feather at less than a kb &amp; built with mobile in mind.
<!-- Attr: http://thenounproject.com/term/feather/22073/ -->
</div> </div>
<div class="four columns"> <div class="four columns value-prop">
<img class="value-img" src="images/frame.svg"> <img class="value-img" src="images/pens.svg">
<!-- Attr: bottom pen - http://thenounproject.com/term/pen/32847/ -->
<!-- Attr: top pen - http://thenounproject.com/term/pen/21163/ -->
Styles designed to be a starting point, not a UI framework. Styles designed to be a starting point, not a UI framework.
</div> </div>
<div class="four columns"> <div class="four columns value-prop">
<img class="value-img" src="images/frame.svg"> <img class="value-img" src="images/watch.svg">
No compiling or installing necessary. Just vanilla CSS. <!-- Attr: http://thenounproject.com/term/watch/48012/ -->
Quick to start with zero compiling or installing necessary.
</div> </div>
</div> </div>
</section> </section>
@ -66,8 +71,8 @@
<!-- Why use Skeleton --> <!-- Why use Skeleton -->
<div class="docs-section"> <div class="docs-section">
<h6 class="docs-header">Is Skeleton for you?</h6> <h6 class="docs-header">Is Skeleton for you?</h6>
<p>You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, <u>this site is built on Skeleton and has less than 100 lines of custom CSS.</u></p> <p>You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, <u>this site is built on Skeleton and has just over 100 lines of custom CSS.</u></p>
<p>Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3</p> <p>Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3</p>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.getskeleton.com" data-text="Skeleton - A dead simple, responsive boilerplate." data-via="dhg" data-related="dhg">Tweet</a> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.getskeleton.com" data-text="Skeleton - A dead simple, responsive boilerplate." data-via="dhg" data-related="dhg">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.getskeleton.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=151131931646052" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:140px" allowTransparency="true"></iframe> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.getskeleton.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=151131931646052" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:140px" allowTransparency="true"></iframe>
@ -78,7 +83,7 @@
<!-- Grid --> <!-- Grid -->
<div class="docs-section"> <div class="docs-section">
<h6 class="docs-header">The grid</h6> <h6 class="docs-header">The grid</h6>
<p>The grid is just a <u>12-column fluid grid with a max width of 960px</u>, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser. </p> <p>The grid is a <u>12-column fluid grid with a max width of 960px</u>, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser. </p>
<div class="example-grid docs-example"> <div class="example-grid docs-example">
<div class="row"> <div class="row">
<div class="one column">One</div> <div class="one column">One</div>
@ -167,11 +172,11 @@
<!-- Typography --> <!-- Typography -->
<div class="row docs-section"> <div class="row docs-section">
<h6 class="docs-header">Typography</h6> <h6 class="docs-header">Typography</h6>
<p>Type is all set with the <code>rems</code>, so font-sizes and spacial relationships are responsively sized based on a single <code>&lt;html&gt;</code> font-size property. Everything is still base 10 though so, an <code>&lt;h1&gt;</code> is <code>5.0rem</code>, which just means <code>50px</code>.</p> <p>Type is all set with the <code>rems</code>, so font-sizes and spacial relationships can be responsively sized based on a single <code>&lt;html&gt;</code> font-size property. Out of the box, Skeleton never changes the <code>&lt;html&gt;</code> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <code>&lt;h1&gt;</code> with <code>5.0rem</code>font-size just means <code>50px</code>.</p>
<div class="docs-example"> <div class="docs-example">
<div class="row"> <div class="row">
<div class="six columns"> <div class="six columns">
<p><strong>The typography base</strong> is 15rem (15px) over a 1.6 line height (24px). Other type basics like <a href="#">anchors</a>, <strong>strong</strong>, <em>emphasis</em>, and <u>underline</u> are all obviously included.</p> <p><strong>The typography base</strong> is <a href="http://www.google.com/fonts/specimen/Raleway">Raleway</a> served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like <a href="#">anchors</a>, <strong>strong</strong>, <em>emphasis</em>, and <u>underline</u> are all obviously included.</p>
<p><strong>Headings</strong> create a family of distinct sizes each with specific <code>letter-spacing</code>, <code>line-height</code>, and <code>margins</code>.</p> <p><strong>Headings</strong> create a family of distinct sizes each with specific <code>letter-spacing</code>, <code>line-height</code>, and <code>margins</code>.</p>
</div> </div>
<div class="six columns"> <div class="six columns">
@ -214,7 +219,7 @@
<!-- Buttons --> <!-- Buttons -->
<div class="row docs-section"> <div class="row docs-section">
<h6 class="docs-header">Buttons</h6> <h6 class="docs-header">Buttons</h6>
<p>Buttons come in two basic flavors in Skeleton. The standard <code>&lt;button&gt;</code> element is plain, whereas the <code>.button-primary</code> button is vibrant and prominent.</p> <p>Buttons come in two basic flavors in Skeleton. The standard <code>&lt;button&gt;</code> element is plain, whereas the <code>.button-primary</code> button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a <code>.button</code> class.</p>
<div class="docs-example"> <div class="docs-example">
<div> <div>
<a class="button" href="#">Anchor button</a> <a class="button" href="#">Anchor button</a>
@ -254,7 +259,7 @@
<!-- Forms --> <!-- Forms -->
<div class="row docs-section"> <div class="row docs-section">
<h6 class="docs-header">Forms</h6> <h6 class="docs-header">Forms</h6>
<p>Forms are a huge pain, but hopefully these styles make it a bit easier.</p> <p>Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.</p>
<div class="docs-example docs-example-forms"> <div class="docs-example docs-example-forms">
<form> <form>
<div class="row"> <div class="row">
@ -377,7 +382,7 @@
<!-- Code --> <!-- Code -->
<div class="row docs-section"> <div class="row docs-section">
<h6 class="docs-header">Code</h6> <h6 class="docs-header">Code</h6>
<p>Code styling was kept super basic  basically just wrap something in a <code>&lt;code&gt;</code> tag and it will look just like that code tag just did. For blocks of code, wrap a <code>&lt;code&gt;</code> tag with a <code>&lt;pre&gt;</code> tag.</p> <p>Code styling is kept basic just wrap anything in a <code>&lt;code&gt;</code> and it will appear like <code>this</code>. For blocks of code, wrap a <code>&lt;code&gt;</code> with a <code>&lt;pre&gt;</code>.</p>
<div class="docs-example"> <div class="docs-example">
<pre><code>.some-class { <pre><code>.some-class {
background-color: red; background-color: red;
@ -402,7 +407,7 @@
<!-- Tables --> <!-- Tables -->
<div class="row docs-section"> <div class="row docs-section">
<h6 class="docs-header">Tables</h6> <h6 class="docs-header">Tables</h6>
<p>Only super basic styling for tabular data. Using properly formed table markup with <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> is important here.</p> <p>Be sure to use properly formed table markup with <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> when building a <code>table</code>.</p>
<div class="docs-example"> <div class="docs-example">
<table class="u-full-width"> <table class="u-full-width">
<thead> <thead>
@ -467,7 +472,7 @@
<!-- Queries --> <!-- Queries -->
<div class="row docs-section"> <div class="row docs-section">
<h6 class="docs-header">Media queries</h6> <h6 class="docs-header">Media queries</h6>
<p>Skeleton uses media queries to serve the scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries, the first is mobile-first style, meaning they target <code>min-width</code> so all the base styles are mobile, then queries are used to enhance for larger screen sizes. Mobile-first queries are how Skeleton's grid is styled. I've also provided the same set of queries with <code>max-width</code> if that's your preference. The sizes for the queries are:</p> <p>Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries. The first set is mobile-first, meaning it targets <code>min-width</code>. The other set is desktop-first, meaning it targets <code>max-width</code>. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:</p>
<div class="docs-example row"> <div class="docs-example row">
<div class="six columns"> <div class="six columns">
<ul> <ul>
@ -528,6 +533,45 @@
<!-- ————————————————————————————————————————————————————— --> <!-- ————————————————————————————————————————————————————— -->
</div>
<!-- Utilities and Misc. -->
<div class="row docs-section">
<h6 class="docs-header">Utilities</h6>
<p>Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.</p>
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<pre class="code-example">
<code class="code-example-body prettyprint">/* Utility Classes */
/* Make element full width */
.u-full-width {
width: 100%;
box-sizing: border-box; }
/* Make sure elements don't run outside containers (great for images in columns) */
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
/* Float either direction */
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }
/* Clear a float */
.u-cf {
content: "";
display: table;
clear: both; }
</code>
</pre>
<!-- ————————————————————————————————————————————————————— -->
</div> </div>
<!-- Examples --> <!-- Examples -->
@ -535,13 +579,19 @@
<h6 class="docs-header">Examples of Skeleton sites</h6> <h6 class="docs-header">Examples of Skeleton sites</h6>
</div> </div>
<!-- License & Log --> <!-- License -->
<div class="row docs-section"> <div class="row docs-section">
<h6 class="docs-header">License &amp; Log</h6> <h6 class="docs-header">License</h6>
<p>All parts of Skeleton are free to use and abuse under the <a href="http://opensource.org/licenses/mit-license.php">open-source MIT license</a>. More importantly, if you're into coding head over to the <a href="https://github.com/dhg/Skeleton">Github page</a> and contribute or fork this bad boy.</p> <p>All parts of Skeleton are free to use and abuse under the <a href="http://opensource.org/licenses/mit-license.php">open-source MIT license</a>. More importantly, if you're into coding head over to the <a href="https://github.com/dhg/Skeleton">Github page</a> and contribute or fork this bad boy.</p>
<p>Skeleton's version history is available <a href="#">on Github</a>.</p> <p>Skeleton's version history is available <a href="#">on Github</a>.</p>
</div> </div>
<!-- Colophon -->
<div class="row docs-section">
<h6 class="docs-header">Colophon</h6>
<p>Skeleton was built using <a href="http://www.sublimetext.com/3">Sublime Text 3</a> and designed with <a href="http://bohemiancoding.com/sketch/">Sketch</a>. The typeface <a href="http://www.google.com/fonts/specimen/Raleway">Raleway</a> was created by <a href="http://matt.cc/">Matt McInerney</a> and <a href="http://www.impallari.com/">Pablo Impallari</a>. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from <a href="thenounproject.com">The Noun Project</a>.<a href="http://thenounproject.com/term/feather/22073/"> Feather</a> by Zach VanDeHey, <a href="http://thenounproject.com/term/pen/21163/">Pen</a> (with cap) by Ed Harrison, <a href="http://thenounproject.com/term/pen/32847/">Pen</a> (with clicker) by Matthew Hall, and <a href="http://thenounproject.com/term/watch/48015/">Watch</a> by Julien Deveaux.</p>
</div>
<div class="code-toggler"> <div class="code-toggler">
<span class="code-toggle"></span> <span class="code-toggle"></span>
<span class="code-label"> <span class="code-label">

View File

@ -1,11 +1,14 @@
.container { .container {
max-width: 760px; } max-width: 760px; }
.header { .header {
margin-top: 18rem; margin-top: 6rem;
text-align: center; } text-align: center; }
.value-prop {
margin-top: 1rem;
}
.value-props { .value-props {
margin-top: 15rem; margin-top: 4rem;
margin-bottom: 10rem; } margin-bottom: 4rem; }
.docs-header { .docs-header {
text-transform: uppercase; text-transform: uppercase;
font-size: 1.4rem; font-size: 1.4rem;
@ -18,7 +21,7 @@
.value-img { .value-img {
display: block; display: block;
text-align: center; text-align: center;
margin: 0 auto 1rem;} margin: 2.5rem auto 0; }
.example-grid .column, .example-grid .column,
.example-grid .columns { .example-grid .columns {
background: #EEE; background: #EEE;
@ -99,6 +102,13 @@
display: none; } display: none; }
@media (min-width: 550px) { @media (min-width: 550px) {
.header {
margin-top: 18rem; }
.value-props {
margin-top: 9rem;
margin-bottom: 7rem; }
.value-img {
margin-bottom: 1rem; }
.example-grid .column, .example-grid .column,
.example-grid .columns { .example-grid .columns {
margin-bottom: 1.5rem; } margin-bottom: 1.5rem; }
@ -108,4 +118,4 @@
float: right; float: right;
margin-top: 12px; margin-top: 12px;
} }
} }

View File

@ -96,13 +96,23 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 300; font-weight: 300;
margin-top: 0; margin-top: 0;
margin-bottom: 2rem; } margin-bottom: 2rem; }
h1 { font-size: 5.0rem; line-height: 1.2; letter-spacing: -.1rem;} h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 4.2rem; line-height: 1.25; letter-spacing: -.1rem; } h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.6rem; line-height: 1.3; letter-spacing: -.1rem; } h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
h4 { font-size: 3.0rem; line-height: 1.35; letter-spacing: -.08rem; } h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 2.4rem; line-height: 1.5; letter-spacing: -.05rem; } h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
/* Larger than phablet */
@media (min-width: 550px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 3.0rem; }
h5 { font-size: 2.4rem; }
h6 { font-size: 1.5rem; }
}
/* Links /* Links
*/ */
@ -183,10 +193,19 @@ textarea,
select { select {
border: 1px solid #D1D1D1; border: 1px solid #D1D1D1;
height: 36px; height: 36px;
padding: 0 10px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
border-radius: 4px; border-radius: 4px;
box-shadow: none; box-shadow: none;
background: #fff; } background: #fff; }
/* Removes awkard default styles on some inputs */
input[type="email"],
input[type="search"],
input[type="text"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea { textarea {
min-height: 65px; min-height: 65px;
padding-top: 6px; padding-top: 6px;
@ -204,13 +223,11 @@ legend {
display: block; display: block;
font-weight: 600; font-weight: 600;
margin-bottom: .5rem; } margin-bottom: .5rem; }
input[disabled] {
cursor: not-allowed;
background-color: #EFEFEF; }
fieldset { fieldset {
border-width: 0; border-width: 0;
padding: 0; } padding: 0; }
input[type="checkbox"] { input[type="checkbox"],
input[type="radio"] {
display: inline; } display: inline; }
label > .label-body { label > .label-body {
font-weight: normal; font-weight: normal;
@ -279,7 +296,6 @@ select,
fieldset { fieldset {
margin-bottom: 1.5rem; } margin-bottom: 1.5rem; }
p, p,
hr,
pre, pre,
blockquote, blockquote,
form, form,
@ -293,17 +309,30 @@ form {
margin-bottom: 2.5rem; } margin-bottom: 2.5rem; }
/* Utilities /* Utilities
*/ */
.u-full-width { .u-full-width {
width: 100%; width: 100%;
box-sizing: border-box; } box-sizing: border-box; }
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
.u-pull-right { .u-pull-right {
float: right; } float: right; }
.u-pull-left { .u-pull-left {
float: left; } float: left; }
/* Misc
*/
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1;
}
/* Clearing /* Clearing
*/ */