CS-290
/
GoServer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

using svg images

This commit is contained in:
sessionm21 2018-06-02 21:07:38 -07:00
parent 228612168c
commit 8081f3a483
5 changed files with 257 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/css/main.css
View File

@ -23,36 +23,39 @@ body {
border-radius: 10px; }
.black-player .overlay:hover {
background-color: black; }
background-image: url("../svg/black.svg"); }
.white-player .overlay:hover {
background-color: white; }
background-image: url("../svg/white.svg"); }
.board-cell {
display: inline-block;
position: relative;
padding: 5.55556%; }
background-image: url("../svg/cross.svg");
background-size: 100%;
padding: 5.5555555556%; }
.board-cell .overlay {
position: absolute;
box-sizing: border-box;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 50%;
transition: background-color .25s; }
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-image: url("../svg/cross.svg");
transition: background-image .25s;
background-size: 100%; }
.board-cell.small {
padding: 5.55556%; }
padding: 5.5555555556%; }
.board-cell.medium {
padding: 3.84615%; }
padding: 3.8461538462%; }
.board-cell.large {
padding: 2.63158%; }
padding: 2.6315789474%; }
.black-cell .overlay {
background-color: black; }
background-image: url("../svg/black.svg"); }
.white-cell .overlay {
background-color: white; }
background-image: url("../svg/white.svg"); }
.split-wrapper {
display: flex;

59
public/svg/black.svg Normal file
View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="100"
width="100"
version="1.1"
id="svg4"
sodipodi:docname="black.svg"
inkscape:version="0.92.2 2405546, 2018-03-11">
<metadata
id="metadata10">
<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>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1159"
inkscape:window-height="719"
id="namedview6"
showgrid="false"
inkscape:zoom="2.36"
inkscape:cx="50"
inkscape:cy="50"
inkscape:window-x="307"
inkscape:window-y="38"
inkscape:window-maximized="0"
inkscape:current-layer="svg4" />
<circle
cx="50"
cy="50"
r="40"
stroke="black"
stroke-width="3"
fill="red"
id="circle2"
style="fill:#000000" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

58
public/svg/circle.svg Normal file
View File

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="100"
width="100"
version="1.1"
id="svg4"
sodipodi:docname="circle.svg"
inkscape:version="0.92.2 2405546, 2018-03-11">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1159"
inkscape:window-height="719"
id="namedview6"
showgrid="false"
inkscape:zoom="2.36"
inkscape:cx="50"
inkscape:cy="50"
inkscape:window-x="307"
inkscape:window-y="38"
inkscape:window-maximized="0"
inkscape:current-layer="svg4" />
<circle
cx="50"
cy="50"
r="40"
stroke="black"
stroke-width="3"
fill="red"
id="circle2"
style="fill:#000000" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

64
public/svg/cross.svg Normal file
View File

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="100"
width="100"
version="1.1"
id="svg14"
sodipodi:docname="crossB.svg"
inkscape:version="0.92.2 2405546, 2018-03-11">
<metadata
id="metadata20">
<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>
<defs
id="defs18" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1028"
id="namedview16"
showgrid="false"
inkscape:zoom="8.27"
inkscape:cx="50"
inkscape:cy="50"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg14" />
<line
x1="50"
y1="0"
x2="50"
y2="100"
style="stroke:rgb(0,0,0);stroke-width:2"
id="line10" />
<line
x1="0"
y1="50"
x2="100"
y2="50"
style="stroke:rgb(0,0,0);stroke-width:2"
id="line12" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

59
public/svg/white.svg Normal file
View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="100"
width="100"
version="1.1"
id="svg4"
sodipodi:docname="white.svg"
inkscape:version="0.92.2 2405546, 2018-03-11">
<metadata
id="metadata10">
<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>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1159"
inkscape:window-height="719"
id="namedview6"
showgrid="false"
inkscape:zoom="2.36"
inkscape:cx="50"
inkscape:cy="50"
inkscape:window-x="307"
inkscape:window-y="38"
inkscape:window-maximized="0"
inkscape:current-layer="svg4" />
<circle
cx="50"
cy="50"
r="40"
stroke="black"
stroke-width="3"
fill="red"
id="circle2"
style="fill:#ffffff" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB