2312
themes/blowfish/exampleSite/content/docs/homepage-layout/a.svg
Normal file
After Width: | Height: | Size: 198 KiB |
|
@ -0,0 +1,574 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
|
||||
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
|
||||
<defs>
|
||||
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
|
||||
patternUnits="userSpaceOnUse">
|
||||
<g transform="scale(1.35)">
|
||||
<g>
|
||||
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
|
||||
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
|
||||
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
|
||||
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
|
||||
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
|
||||
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
|
||||
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
|
||||
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
|
||||
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
|
||||
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
|
||||
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
|
||||
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
|
||||
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
|
||||
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
|
||||
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
|
||||
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
|
||||
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
|
||||
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
|
||||
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
|
||||
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
|
||||
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
|
||||
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
|
||||
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
|
||||
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
|
||||
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
|
||||
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
|
||||
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
|
||||
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
|
||||
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
|
||||
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
|
||||
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
|
||||
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
|
||||
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
|
||||
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
|
||||
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
|
||||
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
|
||||
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
|
||||
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
|
||||
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
|
||||
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
|
||||
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
|
||||
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
|
||||
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
|
||||
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
|
||||
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
|
||||
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
|
||||
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
|
||||
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
|
||||
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
|
||||
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
|
||||
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
|
||||
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
|
||||
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
|
||||
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
|
||||
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
|
||||
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
|
||||
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
|
||||
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
|
||||
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
|
||||
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
|
||||
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
|
||||
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
|
||||
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
|
||||
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
|
||||
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
|
||||
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
|
||||
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
|
||||
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
|
||||
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
|
||||
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
|
||||
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
|
||||
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
|
||||
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
|
||||
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
|
||||
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
|
||||
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
|
||||
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
|
||||
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
|
||||
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
|
||||
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
|
||||
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
|
||||
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
|
||||
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
|
||||
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
|
||||
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
|
||||
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
|
||||
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
|
||||
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
|
||||
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
|
||||
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
|
||||
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
|
||||
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
|
||||
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
|
||||
</g>
|
||||
<g>
|
||||
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
|
||||
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
|
||||
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
|
||||
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
|
||||
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
|
||||
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
|
||||
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
|
||||
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
|
||||
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
|
||||
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
|
||||
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
|
||||
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
|
||||
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
|
||||
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
|
||||
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
|
||||
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
|
||||
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
|
||||
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
|
||||
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
|
||||
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
|
||||
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
|
||||
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
|
||||
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
|
||||
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
|
||||
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
|
||||
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
|
||||
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
|
||||
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
|
||||
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
|
||||
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
|
||||
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
|
||||
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
|
||||
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
|
||||
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
|
||||
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
|
||||
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
|
||||
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
|
||||
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
|
||||
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
|
||||
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
|
||||
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
|
||||
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
|
||||
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
|
||||
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
|
||||
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
|
||||
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
|
||||
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
|
||||
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
|
||||
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
|
||||
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
|
||||
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
|
||||
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
|
||||
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
|
||||
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
|
||||
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
|
||||
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
|
||||
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
|
||||
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
|
||||
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
|
||||
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
|
||||
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
|
||||
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
|
||||
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
|
||||
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
|
||||
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
|
||||
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
|
||||
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
|
||||
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
|
||||
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
|
||||
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
|
||||
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
|
||||
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
|
||||
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
|
||||
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
|
||||
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
|
||||
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
|
||||
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
|
||||
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
|
||||
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
|
||||
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
|
||||
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
|
||||
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
|
||||
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
|
||||
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
|
||||
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
|
||||
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
|
||||
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
|
||||
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
|
||||
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
|
||||
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
|
||||
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
|
||||
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
|
||||
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
|
||||
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
|
||||
</g>
|
||||
<g>
|
||||
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
|
||||
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
|
||||
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
|
||||
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
|
||||
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
|
||||
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
|
||||
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
|
||||
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
|
||||
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
|
||||
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
|
||||
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
|
||||
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
|
||||
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
|
||||
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
|
||||
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
|
||||
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
|
||||
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
|
||||
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
|
||||
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
|
||||
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
|
||||
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
|
||||
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
|
||||
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
|
||||
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
|
||||
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
|
||||
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
|
||||
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
|
||||
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
|
||||
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
|
||||
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
|
||||
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
|
||||
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
|
||||
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
|
||||
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
|
||||
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
|
||||
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
|
||||
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
|
||||
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
|
||||
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
|
||||
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
|
||||
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
|
||||
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
|
||||
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
|
||||
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
|
||||
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
|
||||
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
|
||||
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
|
||||
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
|
||||
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
|
||||
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
|
||||
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
|
||||
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
|
||||
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
|
||||
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
|
||||
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
|
||||
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
|
||||
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
|
||||
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
|
||||
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
|
||||
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
|
||||
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
|
||||
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
|
||||
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
|
||||
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
|
||||
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
|
||||
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
|
||||
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
|
||||
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
|
||||
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
|
||||
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
|
||||
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
|
||||
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
|
||||
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
|
||||
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
|
||||
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
|
||||
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
|
||||
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
|
||||
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
|
||||
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
|
||||
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
|
||||
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
|
||||
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
|
||||
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
|
||||
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
|
||||
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
|
||||
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
|
||||
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
|
||||
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
|
||||
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
|
||||
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
|
||||
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
|
||||
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
|
||||
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
|
||||
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
|
||||
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
|
||||
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
|
||||
</g>
|
||||
</g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
|
||||
</svg>
|
|
@ -0,0 +1,146 @@
|
|||
<svg id="canvas" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 600 600"><rect width="600" height="600" fill="transparent"></rect><mask id="mask" mask-type="alpha" maskUnits="userSpaceOnUse"><rect transform="translate(0, 0)" width="600" height="600" fill="white"></rect></mask><svg><path transform="translate(0, 0 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#03045e"></path></svg><svg><path transform="translate(0, 3600 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#90e0ef"></path></svg><svg><path transform="
|
||||
translate(0, 120)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#90e0ef"></path></svg><svg><path transform="translate(0, 10800 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="translate(0,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0V0z"></path><path transform="translate(0,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#03045e" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(0, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(0, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8"></circle></svg><svg><path transform="translate(0,360) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(0,360) translate(30,30) rotate(90) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(0, 25200 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(0, 480)
|
||||
" fill="
|
||||
#0077b6
|
||||
"></circle></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(0, 540)
|
||||
" fill="
|
||||
#90e0ef
|
||||
"></circle></svg><svg><path transform="translate(3600, 0 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#ade8f4"></path></svg><svg><path transform="
|
||||
translate(60, 60)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#48cae4"></path></svg><svg><path transform="
|
||||
translate(60, 120)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#90e0ef"></path></svg><svg><path transform="translate(3600, 10800 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><path transform="translate(3600, 14400 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#03045e"></path></svg><svg><path transform="
|
||||
translate(60, 300)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#00b4d8"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(60, 360)
|
||||
" fill="
|
||||
#03045e
|
||||
"></circle></svg><svg><path transform="translate(60,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0V0z"></path><path transform="translate(60,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(60,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(60,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(3600, 32400 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#03045e"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(120, 0)
|
||||
" fill="
|
||||
#00b4d8
|
||||
"></circle></svg><svg><path transform="translate(120,60) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0V0z"></path><path transform="translate(120,60) translate(30,30) rotate(180) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(120, 120)
|
||||
" fill="
|
||||
#00b4d8
|
||||
"></circle></svg><svg><path transform="translate(120, 180) translate(30,30) rotate(180) translate(-30,-30)" fill="#48cae4" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(120, 180) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a"></circle></svg><svg><path transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)" fill="#03045e" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)" fill="#00b4d8"></circle></svg><svg><path transform="translate(7200, 18000 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#90e0ef"></path></svg><svg><path transform="translate(7200, 21600 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(120, 420)
|
||||
" fill="
|
||||
#023e8a
|
||||
"></circle></svg><svg><path transform="
|
||||
translate(120, 480)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#48cae4"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(120, 540)
|
||||
" fill="
|
||||
#00b4d8
|
||||
"></circle></svg><svg><path transform="translate(10800, 0 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="
|
||||
translate(180, 60)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#023e8a"></path></svg><svg><path transform="translate(180,120) translate(30,30) rotate(90) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0V0z"></path><path transform="translate(180,120) translate(30,30) rotate(90) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
|
||||
translate(180, 180)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#0096c7"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(180, 240)
|
||||
" fill="
|
||||
#90e0ef
|
||||
"></circle></svg><svg><path transform="translate(180,300) translate(30,30) rotate(0) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(180,300) translate(30,30) rotate(0) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
|
||||
translate(180, 360)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#00b4d8"></path></svg><svg><path transform="
|
||||
translate(180, 420)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#90e0ef"></path></svg><svg><path transform="
|
||||
translate(180, 480)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#0077b6"></path></svg><svg><path transform="translate(10800, 32400 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#ade8f4"></path></svg><svg><path transform="translate(14400, 0 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#0077b6"></path></svg><svg><path transform="translate(240, 60) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(240, 60) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a"></circle></svg><svg><path transform="
|
||||
translate(240, 120)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#0096c7"></path></svg><svg><path transform="
|
||||
translate(240, 180)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#00b4d8"></path></svg><svg><path transform="translate(14400, 14400 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#caf0f8"></path></svg><svg><path transform="
|
||||
translate(240, 300)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#0096c7"></path></svg><svg><path transform="translate(240, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(240, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#ade8f4"></circle></svg><svg><path transform="translate(240,420) translate(30,30) rotate(270) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0V0z"></path><path transform="translate(240,420) translate(30,30) rotate(270) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(240,480) translate(30,30) rotate(180) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0V0z"></path><path transform="translate(240,480) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(240, 540)
|
||||
" fill="
|
||||
#90e0ef
|
||||
"></circle></svg><svg><path transform="translate(18000, 0 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#0077b6"></path></svg><svg><path transform="
|
||||
translate(300, 60)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#023e8a"></path></svg><svg><path transform="translate(18000, 7200 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#ade8f4"></path></svg><svg><path transform="
|
||||
translate(300, 180)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#caf0f8"></path></svg><svg><path transform="translate(300,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(300,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
|
||||
translate(300, 300)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#03045e"></path></svg><svg><path transform="translate(18000, 21600 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#48cae4"></path></svg><svg><path transform="
|
||||
translate(300, 420)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#90e0ef"></path></svg><svg><path transform="translate(18000, 28800 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><path transform="translate(300,540) translate(30,30) rotate(0) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0V0z"></path><path transform="translate(300,540) translate(30,30) rotate(0) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(360,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6" d="M60 0v60H0V0z"></path><path transform="translate(360,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(360, 60)
|
||||
" fill="
|
||||
#caf0f8
|
||||
"></circle></svg><svg><path transform="translate(360,120) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0V0z"></path><path transform="translate(360,120) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
|
||||
translate(360, 180)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#0077b6"></path></svg><svg><path transform="translate(360,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0V0z"></path><path transform="translate(360,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(360, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(360, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a"></circle></svg><svg><path transform="
|
||||
translate(360, 360)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#ade8f4"></path></svg><svg><path transform="translate(360,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(360,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(360, 480)
|
||||
" fill="
|
||||
#ade8f4
|
||||
"></circle></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(360, 540)
|
||||
" fill="
|
||||
#ade8f4
|
||||
"></circle></svg><svg><path transform="translate(420,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0V0z"></path><path transform="translate(420,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(25200, 3600 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#0096c7"></path></svg><svg><path transform="
|
||||
translate(420, 120)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#48cae4"></path></svg><svg><path transform="translate(420,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#0077b6" d="M60 0v60H0V0z"></path><path transform="translate(420,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(25200, 14400 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#48cae4"></path></svg><svg><path transform="translate(420,300) translate(30,30) rotate(180) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0V0z"></path><path transform="translate(420,300) translate(30,30) rotate(180) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(25200, 21600 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(420, 420)
|
||||
" fill="
|
||||
#023e8a
|
||||
"></circle></svg><svg><path transform="translate(420,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0V0z"></path><path transform="translate(420,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
|
||||
translate(420, 540)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#ade8f4"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(480, 0)
|
||||
" fill="
|
||||
#03045e
|
||||
"></circle></svg><svg><path transform="
|
||||
translate(480, 60)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#023e8a"></path></svg><svg><path transform="translate(28800, 7200 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="translate(480,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0V0z"></path><path transform="translate(480,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
|
||||
translate(480, 240)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#48cae4"></path></svg><svg><path transform="
|
||||
translate(480, 300)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#90e0ef"></path></svg><svg><path transform="translate(480, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#ade8f4" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(480, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#03045e"></circle></svg><svg><path transform="translate(480,420) translate(30,30) rotate(180) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0V0z"></path><path transform="translate(480,420) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(480, 480)
|
||||
" fill="
|
||||
#03045e
|
||||
"></circle></svg><svg><path transform="translate(28800, 32400 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="translate(540,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0V0z"></path><path transform="translate(540,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(540, 60) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 60) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6"></circle></svg><svg><path transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)" fill="#90e0ef" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7"></circle></svg><svg><path transform="translate(32400, 10800 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#90e0ef"></path></svg><svg><path transform="translate(540, 240) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 240) translate(30,30) rotate(90) translate(-30,-30)" fill="#0077b6"></circle></svg><svg><path transform="
|
||||
translate(540, 300)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#023e8a"></path></svg><svg><path transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)" fill="#00b4d8" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)" fill="#00b4d8"></circle></svg><svg><path transform="
|
||||
translate(540, 420)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#0077b6"></path></svg><svg><path transform="
|
||||
translate(540, 480)
|
||||
" d="M0 0h60v60H0z" fill="
|
||||
#48cae4"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
|
||||
translate(540, 540)
|
||||
" fill="
|
||||
#0096c7
|
||||
"></circle></svg></svg>
|
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 737 KiB |
After Width: | Height: | Size: 811 KiB |
After Width: | Height: | Size: 892 KiB |
After Width: | Height: | Size: 499 KiB |
After Width: | Height: | Size: 509 KiB |
After Width: | Height: | Size: 504 KiB |
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: "Homepage Layout"
|
||||
date: 2020-08-13
|
||||
draft: false
|
||||
description: "Configuring the homepage layout in the Blowfish theme."
|
||||
slug: "homepage-layout"
|
||||
tags: ["homepage", "layouts", "docs"]
|
||||
series: ["Documentation"]
|
||||
series_order: 5
|
||||
---
|
||||
|
||||
Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.
|
||||
|
||||
The layout of the homepage is controlled by the `homepage.layout` setting in the `params.toml` configuration file. Additionally, all layouts have the option to include a listing of [recent articles](#recent-articles).
|
||||
|
||||
## Profile layout
|
||||
|
||||
The default layout is the profile layout, which is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-profile.png"/>
|
||||
|
||||
The author information is provided in the languages configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Language Configuration]({{< ref "configuration##language-and-i18n" >}}) sections for parameter details.
|
||||
|
||||
Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.
|
||||
|
||||
To enable the Profile layout, set `homepage.layout = "profile"` in the `params.toml` configuration file.
|
||||
|
||||
## Page layout
|
||||
|
||||
The page layout is simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-page.png"/>
|
||||
|
||||
To enable the Page layout, set `homepage.layout = "page"` in the `params.toml` configuration file.
|
||||
|
||||
## Hero layout
|
||||
|
||||
The hero layout brings together ideas from the profile and card layouts. This one not only displays information on the author of the site but it also loads your markdown beneath it.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-hero.png"/>
|
||||
|
||||
To enable the Hero layout, set `homepage.layout = "hero"` and `homepage.homepageImage` in the `params.toml` configuration file.
|
||||
|
||||
## Background layout
|
||||
|
||||
The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-background.png"/>
|
||||
|
||||
To enable the Background layout, set `homepage.layout = "background"` and `homepage.homepageImage` in the `params.toml` configuration file.
|
||||
|
||||
## Card layout
|
||||
|
||||
The card layout is an extension of the page layout. It provides the same level of flexibility by also displaying your markdown content and adds a card image to display visual content.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-card.png"/>
|
||||
|
||||
To enable the Card layout, set `homepage.layout = "card"` and `homepage.homepageImage` in the `params.toml` configuration file.
|
||||
|
||||
|
||||
## Custom layout
|
||||
|
||||
If the built-in homepage layouts aren't sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.
|
||||
|
||||
To enable the Custom layout, set `homepage.layout = "custom"` in the `params.toml` configuration file.
|
||||
|
||||
With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
|
||||
|
||||
To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles/main.html` partial.
|
||||
|
||||
As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the [GitHub repo](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) to see how it works.
|
||||
|
||||
## Recent articles
|
||||
|
||||
All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showRecent` setting to `true` in the `params.toml` configuration file.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-list.png"/>
|
||||
|
||||
The articles listed in this section are derived from the `mainSections` setting which allows for whatever content types you are using on your website. For instance, if you had content sections for _posts_ and _projects_ you could set this setting to `["posts", "projects"]` and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: `["blog"]`.
|
||||
|
||||
## Thumbnails
|
||||
|
||||
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
|
||||
|
||||
[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
|
||||
|
||||
## Card Gallery
|
||||
|
||||
Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: "Homepage Layout"
|
||||
date: 2020-08-13
|
||||
draft: false
|
||||
description: "Configuring the homepage layout in the Blowfish theme."
|
||||
slug: "homepage-layout"
|
||||
tags: ["homepage", "layouts", "docs"]
|
||||
series: ["Documentation"]
|
||||
series_order: 5
|
||||
---
|
||||
|
||||
Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.
|
||||
|
||||
The layout of the homepage is controlled by the `homepage.layout` setting in the `params.toml` configuration file. Additionally, all layouts have the option to include a listing of [recent articles](#recent-articles).
|
||||
|
||||
## Profile layout
|
||||
|
||||
The default layout is the profile layout, which is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-profile.png"/>
|
||||
|
||||
The author information is provided in the languages configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Language Configuration]({{< ref "configuration##language-and-i18n" >}}) sections for parameter details.
|
||||
|
||||
Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.
|
||||
|
||||
To enable the Profile layout, set `homepage.layout = "profile"` in the `params.toml` configuration file.
|
||||
|
||||
## Page layout
|
||||
|
||||
The page layout is simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-page.png"/>
|
||||
|
||||
To enable the Page layout, set `homepage.layout = "page"` in the `params.toml` configuration file.
|
||||
|
||||
## Hero layout
|
||||
|
||||
The hero layout brings together ideas from the profile and card layouts. This one not only displays information on the author of the site but it also loads your markdown beneath it.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-hero.png"/>
|
||||
|
||||
To enable the Hero layout, set `homepage.layout = "hero"` and `homepage.homepageImage` in the `params.toml` configuration file.
|
||||
|
||||
## Background layout
|
||||
|
||||
The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-background.png"/>
|
||||
|
||||
To enable the Background layout, set `homepage.layout = "background"` and `homepage.homepageImage` in the `params.toml` configuration file.
|
||||
|
||||
## Card layout
|
||||
|
||||
The card layout is an extension of the page layout. It provides the same level of flexibility by also displaying your markdown content and adds a card image to display visual content.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-card.png"/>
|
||||
|
||||
To enable the Card layout, set `homepage.layout = "card"` and `homepage.homepageImage` in the `params.toml` configuration file.
|
||||
|
||||
|
||||
## Custom layout
|
||||
|
||||
If the built-in homepage layouts aren't sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.
|
||||
|
||||
To enable the Custom layout, set `homepage.layout = "custom"` in the `params.toml` configuration file.
|
||||
|
||||
With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
|
||||
|
||||
To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles/main.html` partial.
|
||||
|
||||
As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the [GitHub repo](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) to see how it works.
|
||||
|
||||
## Recent articles
|
||||
|
||||
All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showRecent` setting to `true` in the `params.toml` configuration file.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-list.png"/>
|
||||
|
||||
The articles listed in this section are derived from the `mainSections` setting which allows for whatever content types you are using on your website. For instance, if you had content sections for _posts_ and _projects_ you could set this setting to `["posts", "projects"]` and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: `["blog"]`.
|
||||
|
||||
## Thumbnails
|
||||
|
||||
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
|
||||
|
||||
[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
|
||||
|
||||
## Card Gallery
|
||||
|
||||
Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: "Homepage Layout"
|
||||
date: 2020-08-13
|
||||
draft: false
|
||||
description: "Configuring the homepage layout in the Blowfish theme."
|
||||
slug: "homepage-layout"
|
||||
tags: ["homepage", "layouts", "docs"]
|
||||
series: ["Documentation"]
|
||||
series_order: 5
|
||||
---
|
||||
|
||||
Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.
|
||||
|
||||
The layout of the homepage is controlled by the `homepage.layout` setting in the `params.toml` configuration file. Additionally, all layouts have the option to include a listing of [recent articles](#recent-articles).
|
||||
|
||||
## Profile layout
|
||||
|
||||
The default layout is the profile layout, which is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-profile.png"/>
|
||||
|
||||
The author information is provided in the languages configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Language Configuration]({{< ref "configuration##language-and-i18n" >}}) sections for parameter details.
|
||||
|
||||
Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.
|
||||
|
||||
To enable the Profile layout, set `homepage.layout = "profile"` in the `params.toml` configuration file.
|
||||
|
||||
## Page layout
|
||||
|
||||
The page layout is simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-page.png"/>
|
||||
|
||||
To enable the Page layout, set `homepage.layout = "page"` in the `params.toml` configuration file.
|
||||
|
||||
## Hero layout
|
||||
|
||||
The hero layout brings together ideas from the profile and card layouts. This one not only displays information on the author of the site but it also loads your markdown beneath it.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-hero.png"/>
|
||||
|
||||
To enable the Hero layout, set `homepage.layout = "hero"` and `homepage.homepageImage` in the `params.toml` configuration file.
|
||||
|
||||
## Background layout
|
||||
|
||||
The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-background.png"/>
|
||||
|
||||
To enable the Background layout, set `homepage.layout = "background"` and `homepage.homepageImage` in the `params.toml` configuration file.
|
||||
|
||||
## Card layout
|
||||
|
||||
The card layout is an extension of the page layout. It provides the same level of flexibility by also displaying your markdown content and adds a card image to display visual content.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-card.png"/>
|
||||
|
||||
To enable the Card layout, set `homepage.layout = "card"` and `homepage.homepageImage` in the `params.toml` configuration file.
|
||||
|
||||
|
||||
## Custom layout
|
||||
|
||||
If the built-in homepage layouts aren't sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.
|
||||
|
||||
To enable the Custom layout, set `homepage.layout = "custom"` in the `params.toml` configuration file.
|
||||
|
||||
With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
|
||||
|
||||
To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles/main.html` partial.
|
||||
|
||||
As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the [GitHub repo](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) to see how it works.
|
||||
|
||||
## Recent articles
|
||||
|
||||
All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showRecent` setting to `true` in the `params.toml` configuration file.
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-list.png"/>
|
||||
|
||||
The articles listed in this section are derived from the `mainSections` setting which allows for whatever content types you are using on your website. For instance, if you had content sections for _posts_ and _projects_ you could set this setting to `["posts", "projects"]` and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: `["blog"]`.
|
||||
|
||||
## Thumbnails
|
||||
|
||||
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
|
||||
|
||||
[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
|
||||
|
||||
## Card Gallery
|
||||
|
||||
Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.
|
|
@ -0,0 +1,91 @@
|
|||
---
|
||||
title: "主页布局"
|
||||
date: 2020-08-13
|
||||
draft: false
|
||||
description: "在 Blowfish 主题中设置主页布局。"
|
||||
slug: "homepage-layout"
|
||||
tags: ["主页", "布局", "文档"]
|
||||
series: ["部署教程"]
|
||||
series_order: 5
|
||||
---
|
||||
|
||||
Blowfish 提供了一个完全灵活的主页布局。你可以选择两种主要模板,并提供了额外的参数来帮助调整设计。当然,你也可以提供自己的模板,完全控制主页的内容。
|
||||
|
||||
主页布局由 `params.toml` 配置文件中的 `homepage.layout` 参数来控制的。此外所有布局都默认包括 [最近文章](#recent-articles)。
|
||||
|
||||
## 个人资料布局 (profile)
|
||||
|
||||
默认的布局是 profile 布局,这非常适合个人网站和博客。它将作者的详细信息置于中心位置,并附带了头像和社交平台的链接。
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-profile.png"/>
|
||||
|
||||
作者信息是在语言配置文件中提供的。具体的参数详情,请参考[快速入门]({{< ref "getting-started" >}})和[语言配置]({{< ref "configuration##language-and-i18n" >}})的内容。
|
||||
|
||||
此外,主页内容中提供的任何 Markdown 都会显示在作者资料的下方。这对使用短代码显示简介或其他主页的自定义内容提供了更多的灵活性。
|
||||
|
||||
如果想要启用 profile 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "profile"`。
|
||||
|
||||
## 页面布局(page)
|
||||
|
||||
页面布局只会简单的显示你的 Markdown 内容,这种方式非常适合静态网站,并提供了很多灵活性。
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-page.png"/>
|
||||
|
||||
如果想要启用 page 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "page"`。
|
||||
|
||||
## 英雄布局(hero)
|
||||
|
||||
英雄布局(hearo)组合了个人资料布局(profile)和卡片布局(card)。它不仅显示了网站作者的个人信息,还在个人资料下方加载了你的 markdown 内容。
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-hero.png"/>
|
||||
|
||||
如果想要启用 hero 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "hero"`。
|
||||
|
||||
## 背景布局(background)
|
||||
|
||||
背景布局(background)相对于英雄布局(hero)更叫平滑。和英雄布局(hero)类似,它也显示了网站作者的信息,并在其下方加载 markdown 内容。
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-background.png"/>
|
||||
|
||||
如果想要启用 background 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "background"` 和 `homepage.homepageImage` 。
|
||||
|
||||
## 卡片布局(card)
|
||||
|
||||
卡片模板(card)是在页面布局上的扩展,它同样提供了灵活性。在显示了你的 markdown 内容的同时,展示了一个卡片组件中的图像。
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-card.png"/>
|
||||
|
||||
如果想要启用 card 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "card"` 和 `homepage.homepageImage` 。
|
||||
|
||||
## 自定义布局(custom)
|
||||
|
||||
如果以上几个布局还没有满足你的需求,你还可以自己创建自定义布局。这样你可以基于一个空白的画布,来完全控制页面上的内容。
|
||||
|
||||
如果想要启用 custom 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "custom"` 。
|
||||
|
||||
配置好参数后,在 `layouts/partials/home` 目录下创建一个 `custom.html` 文件。 `custom.html` 文件中定义的任何内容都会被放置在网站主页的内容区域。你可以使用 HTML、Tailwind 或 Hugo 模板函数来定义你的布局。
|
||||
|
||||
如果你想在自定义布局上添加 [最近文章](#recent-articles),请使用 `recent-articles/main.html` 中的内容。
|
||||
|
||||
如果你想在网站[主页]({{< ref "/" >}})使用自定义布局来实现在个人资料和页面布局之间的切换。这里的[GitHub 仓库](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html)有一个例子可以参考。
|
||||
|
||||
## 最近文章
|
||||
|
||||
所有的主页布局都可以在主要内容下方显示最近文章。如果想要启用此功能,只需要在 `params.toml` 配置文件中将 `homepage.showRecent` 参数设置为 `true` 即可。
|
||||
|
||||
<img class="thumbnailshadow" src="img/home-list.png"/>
|
||||
|
||||
这部分会列举出你在 `mainSections` 参数中设置的文章列表,此参数允许你使用网站上的任何内容类型。例如,如果你想在最新文章中展示 _posts_ 和 _projects_ 内容中的文章,你可以将此值设置为 `["posts", "projects"]`,这两个部分中的所有文章都会填充到最近文章列表中。Blowfish 主题期望这个参数是一个数组,如果你只想设置一个部分的所有文章,你可以设置为 `["blog"]` 即可。
|
||||
|
||||
## 缩略图
|
||||
|
||||
Blowfish 为你的文章提供了视觉支持。如果你熟悉 Hugo 的文章结构,只需要在你的文章对应的文件夹中防止一个以`feature*`开头的图像文件即可,图像类型几乎支持所有格式,更推荐使用`.png` 或者 `.jpg`。这样一来,Blowfish 将会在你的网站内使用该图片作为缩略图,并用在社交媒体平台上的 <a target="_blank" href="https://oembed.com/">oEmbed</a> 卡片中。
|
||||
|
||||
[这是]({{< ref "thumbnails" >}})有更多详细内容,并且有一个便于理解的[示例]({{< ref "thumbnail_sample" >}})。
|
||||
|
||||
## 卡片画廊
|
||||
|
||||
Blowfish 支持将标准的文章列表显示为卡片画廊,你可以在主页的最近文章和网站上的文章列表中配置这个选项。
|
||||
- 对于主页可以使用 `homepage.cardView` 和 `homepage.cardViewScreenWidth` 参数
|
||||
- 对于列表页可以使用 `list.cardView` 和 `list.cardViewScreenWidth` 参数
|
||||
请查看 [配置文件]({{< ref "configuration" >}}) 以获取更多信息。
|
|
@ -0,0 +1,24 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative" width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
|
||||
<defs>
|
||||
<pattern id="pid-0.1520523902861448" x="0" y="0" width="665.6" height="665.6" patternUnits="userSpaceOnUse">
|
||||
<g transform="scale(2.6)"><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#93dbe9" stroke-width="10" transform="translate(0 -36.57142857142857)">
|
||||
<animateTransform attributeName="transform" type="translate" values="256 -36.57142857142857;0 -36.57142857142857;256 -36.57142857142857" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="0s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
|
||||
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#689cc5" stroke-width="10" transform="translate(0 0)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 0;256 0;0 0" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-1.4285714285714284s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
|
||||
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#5e6fa3" stroke-width="10" transform="translate(0 36.57142857142857)">
|
||||
<animateTransform attributeName="transform" type="translate" values="256 36.57142857142857;0 36.57142857142857;256 36.57142857142857" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-2.8571428571428568s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
|
||||
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#3b4368" stroke-width="10" transform="translate(0 73.14285714285714)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 73.14285714285714;256 73.14285714285714;0 73.14285714285714" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-4.285714285714286s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
|
||||
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#191d3a" stroke-width="10" transform="translate(0 109.71428571428571)">
|
||||
<animateTransform attributeName="transform" type="translate" values="256 109.71428571428571;0 109.71428571428571;256 109.71428571428571" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-5.7142857142857135s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
|
||||
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#d9dbee" stroke-width="10" transform="translate(0 146.28571428571428)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 146.28571428571428;256 146.28571428571428;0 146.28571428571428" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-7.142857142857142s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
|
||||
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#b3b7e2" stroke-width="10" transform="translate(0 182.85714285714286)">
|
||||
<animateTransform attributeName="transform" type="translate" values="256 182.85714285714286;0 182.85714285714286;256 182.85714285714286" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-8.571428571428571s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
|
||||
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#93dbe9" stroke-width="10" transform="translate(0 219.42857142857142)">
|
||||
<animateTransform attributeName="transform" type="translate" values="0 219.42857142857142;256 219.42857142857142;0 219.42857142857142" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="0s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
|
||||
</path></g>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.1520523902861448)"></rect>
|
||||
</svg>
|
After Width: | Height: | Size: 5.6 KiB |