Added all icons, working on implementing them into UI

This commit is contained in:
Daniel Scalzi 2017-09-12 16:52:20 -04:00
parent 6eb6177d4b
commit 5ed660d3ab
10 changed files with 98 additions and 4 deletions

View File

@ -77,7 +77,7 @@ body {
#main > #lower { #main > #lower {
height: 23%; height: 23%;
display: flex; display: flex;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
} }
#main > #upper > #left { #main > #upper > #left {
@ -247,11 +247,11 @@ body {
} }
#player_count { #player_count {
color: #635f5b; color: #949494;
font-family: 'Avenir Book'; font-family: 'Avenir Book';
font-size: 8px; font-size: 8px;
font-weight: 900; font-weight: 900;
text-shadow: 0px 0px 0px #635f5b; text-shadow: 0px 0px 20px #949494;
margin-left: 10px; margin-left: 10px;
} }
@ -279,4 +279,9 @@ body {
text-shadow: 0px 0px 0px #bebcbb; text-shadow: 0px 0px 0px #bebcbb;
font-size: 11px; font-size: 11px;
line-height: 24px; line-height: 24px;
}
#menu_img {
width: 20px;
height: auto;
} }

View File

@ -0,0 +1,7 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.87 13.97">
<defs>
<style>.cls-1{fill:none;stroke:#FFF;stroke-width:2px;}</style>
</defs>
<title>arrow</title>
<polyline class="cls-1" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
</svg>

After

Width:  |  Height:  |  Size: 298 B

View File

@ -0,0 +1,10 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 141.36 137.43">
<defs>
<style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}</style>
<clipPath id="clip-path"><rect class="cls-1" x="36.42" y="44.23" width="68.52" height="48.96"/></clipPath>
</defs>
<title>discord</title>
<g class="cls-2">
<path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,4 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.36 137.43">
<title>instagram</title>
<path d="M91.31,38.27H50a10.81,10.81,0,0,0-10.8,10.8V90.33A10.81,10.81,0,0,0,50,101.13H91.31a10.81,10.81,0,0,0,10.8-10.8V49.06A10.81,10.81,0,0,0,91.31,38.27Zm3.27,10.8v7.36H83.83V45.8h7.48A3.27,3.27,0,0,1,94.58,49.06Zm-23.9,10A10.64,10.64,0,1,1,60,69.7,10.66,10.66,0,0,1,70.68,59.05ZM91.31,93.6H50a3.27,3.27,0,0,1-3.27-3.27V63.6h6.86a18,18,0,0,0-1.13,6.1,18.17,18.17,0,1,0,36.35,0,18,18,0,0,0-1.13-6.1h6.86V90.33A3.27,3.27,0,0,1,91.31,93.6Z"/>
</svg>

After

Width:  |  Height:  |  Size: 585 B

View File

@ -0,0 +1,11 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 141.36 137.43">
<defs>
<style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}</style>
<clipPath id="clip-path"><rect class="cls-1" x="29.3" y="52.62" width="82.77" height="34.15"/></clipPath>
</defs>
<title>link</title>
<g class="cls-2">
<path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
<path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 875 B

View File

@ -0,0 +1,21 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.01 75.87">
<defs>
<style>.cls-1{fill:#fff;stroke:#231f20;}.cls-1,.cls-3{stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#231f20;}.cls-3{fill:none;stroke:#000;}</style>
</defs>
<title>news</title>
<path class="cls-1" d="M595.44,341.38v-48a1,1,0,0,0-1-1l-19.15-.23V269.51a1,1,0,0,0-1-1H520.43v72.87" transform="translate(-517.43 -265.51)"/>
<rect class="cls-2" x="12.46" y="12.36" width="35.25" height="18.06"/>
<path class="cls-3" d="M585.07,281.23" transform="translate(-517.43 -265.51)"/>
<path class="cls-3" d="M557.94,281.23" transform="translate(-517.43 -265.51)"/>
<line class="cls-3" x1="12.46" y1="39.19" x2="67.64" y2="39.19"/>
<line class="cls-3" x1="12.46" y1="50.92" x2="67.64" y2="50.92"/>
<line class="cls-3" x1="12.46" y1="62.65" x2="67.64" y2="62.65"/>
<path class="cls-3" d="M585.07,295.38" transform="translate(-517.43 -265.51)"/>
<path class="cls-3" d="M557.94,293" transform="translate(-517.43 -265.51)"/>
<path class="cls-1" d="M598.23,279.63" transform="translate(-517.43 -265.51)"/>
<path class="cls-1" d="M594.43,291.44" transform="translate(-517.43 -265.51)"/>
<polygon class="cls-2" points="79.83 25.04 74.98 29.87 55.01 5.93 59.63 1.12 79.83 25.04"/>
<polygon class="cls-2" points="57.87 9.02 57.87 26.69 77.02 26.91 57.87 9.02"/>
<path class="cls-1" d="M826.95,281.7" transform="translate(-517.43 -265.51)"/>
<path class="cls-1" d="M823.15,293.51" transform="translate(-517.43 -265.51)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,10 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 141.36 137.43">
<defs>
<style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}</style>
<clipPath id="clip-path"><rect class="cls-1" x="45.65" y="42.62" width="49.58" height="52.43"/></clipPath>
</defs>
<title>settings</title>
<g class="cls-2">
<path d="M70.44,75a6.19,6.19,0,1,1,5.84-6.18A6,6,0,0,1,70.44,75M91.67,63.71h-5A18.4,18.4,0,0,0,85.19,60l3.48-3.68a3.93,3.93,0,0,0,0-5.32l-1.4-1.48a3.43,3.43,0,0,0-5,0l-3.48,3.68A16.34,16.34,0,0,0,75,51.59V46.38a3.68,3.68,0,0,0-3.56-3.76h-2a3.68,3.68,0,0,0-3.56,3.76v5.21a16.23,16.23,0,0,0-3.77,1.64l-3.48-3.68a3.43,3.43,0,0,0-5,0L52.21,51a3.93,3.93,0,0,0,0,5.32L55.69,60a18.21,18.21,0,0,0-1.48,3.67h-5a3.67,3.67,0,0,0-3.56,3.76v2.1a3.68,3.68,0,0,0,3.56,3.76h4.84a18.46,18.46,0,0,0,1.64,4.3l-3.48,3.68a3.93,3.93,0,0,0,0,5.32l1.4,1.48a3.43,3.43,0,0,0,5,0l3.48-3.68a16.36,16.36,0,0,0,3.77,1.64v5.21a3.67,3.67,0,0,0,3.56,3.76h2A3.67,3.67,0,0,0,75,91.29V86.08a16.48,16.48,0,0,0,3.77-1.64l3.48,3.68a3.43,3.43,0,0,0,5,0l1.4-1.48a3.93,3.93,0,0,0,0-5.32l-3.48-3.68a18.45,18.45,0,0,0,1.63-4.3h4.85a3.68,3.68,0,0,0,3.56-3.76v-2.1a3.67,3.67,0,0,0-3.56-3.76"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 9.8 KiB

View File

@ -0,0 +1,10 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 141.36 137.43">
<defs>
<style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}</style>
<clipPath id="clip-path"><rect class="cls-1" x="38.29" y="45.86" width="70.16" height="48.48"/></clipPath>
</defs>
<title>youtube</title>
<g class="cls-2">
<path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 654 B

View File

@ -40,7 +40,10 @@
<div id="center"> <div id="center">
<div class="bot_wrapper"> <div class="bot_wrapper">
<div id="content"> <div id="content">
<button id="menu_button">MENU</button> <button id="menu_button">
<img src="assets/images/icons/arrow.svg" id="menu_img"/>
&#10;MENU
</button>
</div> </div>
</div> </div>
</div> </div>