From 6637852136186e0f86ce872af85322cb404d5a67 Mon Sep 17 00:00:00 2001 From: Mikel Aramendia Date: Fri, 25 Oct 2024 07:39:34 +0200 Subject: [PATCH] Added footer --- assets/favicon.png | Bin 0 -> 516 bytes assets/footer-logo.png | Bin 0 -> 5249 bytes index.html | 125 +++++++++++++++------------- styles.css | 184 +++++++++++++++++++++++------------------ 4 files changed, 171 insertions(+), 138 deletions(-) create mode 100644 assets/favicon.png create mode 100644 assets/footer-logo.png diff --git a/assets/favicon.png b/assets/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..0bb8c24bf2be265bfc54ef3f496f34dfa96d7f19 GIT binary patch literal 516 zcmV+f0{i`mP)pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10g*{W zK~y-6rPI%gO>r2<@z=w(u`oi-OiVVor9}CWnr@BNki`@e84EQl%^x6TAzOP3r8J6# zSlEo2g)&O9^JBzB5>uqeSQz5=SlsWaV`714b)M7r`#$gI`~95A%=H-bZ#5N}Ia-?M zSU~<^@g6+G+tP1^C8c?TlQ@Vu?7#tR!^;BSi+$)Xkl8w50gvzv=kN}<@dB5y8)t9_ zD{#EhssM?rSc@67@FOCoF@(`#b|3q3Z!tijPT>Q3Fr1ke5IBLch0-bP1|s4iZs9a;;xO8nuB~kq zvtLFS$N9|s6cH1dxdj8bffHI!%p6BAR$@Djm9LKBJvQQV z-Jr_BWVt$-*%cA0000pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H16b?y5 zK~#90?VWkNT~&3*e=C77gjpg8h+&F|7K(ypDwBXH1w_HBQ2LR11`8D`3OIla6|qnd z1T00gi~>TaGDBOTAehP=#xRp$f&@YmlCOWP^UBS+>rD5ad)|9__xJg{KizuRp+G~*d=%bH5`skyNkqFEC5m-jj=!SUdqc@mmW`D~1F%$scuO$6U(%QY^s*gtT zq@=yf?B4VbSpqOw{hPnAVX~P`NH?|#0I-~->5Z_|N7Go|%x1JUj0!p}(hxI!G>^7> zTlQwpmGpeQy!6pyd{EM&MV-nDz|&^7Zg>3j(IkM!Bz?H3U-Sv+V+5i9y{{3#Ur5?n z(ggYI_a#X;OS;X>-W^QdN&{Gtc04xNd<|s)s{+>r*KGig09!ZA(_;Z2E0!79l>h)^ zf%Sk5fN@=|Vi*AUFz`ao%^$#AVDAR`YE}S%&4G!)?9|u?f&GAm&ZG=12|Q8a<_};t zZe?wPw`K$Y7zLbGV)1veki8LrZ&bMX1Nd!2yfr2OWp4fe?gy5vb)|y{;K^W(j{|!H zy8_o{T!)V~z+3MH0NA3!%^$$2wXb#%fGd7!ya}w@(#L??gMJ4$z+Wi==yn_Ujg0n( zCC!kuv7|An-;MxI$vdJf3;b=enxv&AEhA|ONpmE6?Nvq2(ug{p-l$v0${P!e zk#w-6BPFfT+6kB>=~PLVn;G4+TmqE*1mIh}G#(22of7mrt|Tuj0EYl~$w1o3;NBb z<*5P|2mUYUw{OPW+XA;$xF~hv1>h(uJZZqXz?_Qn9GQ&$b_YCusRD1M1R!zQ$$W1~ z8r$->ruBt$+XcVBL5qDLS>wE*Unzm6Av?fm+`?BD(}A^;vEzXMEHUOG z;OoFDWfopyeTxB~$AzKj_5Css?Q|l#s{v;MlY#lk_-Vj@09&N`9vIAZPC)aPpx@Rd z`Dx4&I1ab)6=C`S^SF}tVnP2qflrrNY^MNL2hPTowk*s8zC|?!Y*BJ7p2Ujr*Moi+ z2mN*}$wMgt=-MH~%%;ls=cmcPVG*vEw2_(J0qi8{7D-u8^rMnKWoBEM*{{3hFArum z#mo+u@6|7r>nCZ9lJp%(7f|v*%gpAQ+1q(tO0wAVy?-qZA<1Ho15TE-gWO27n4~F^ zZXHngfW0JLtk_p=wxp9J{lLuTmYFw^=ym0a-qMnmlJo~NySXC&FH71RxJc3k3IA#A zCuv3COJ+8^3jJXPdgKs-AC6=hbDjk@DM4d-U>|({{Za-kfU~;bb1C3wIkc|>x_WSM zohFUw6L3+`Z)kl2N;0#Jq{|h*ac+{dftlTtGk$a63P~?Zx=7MjlwnU#a5%7RC%l^3 zOf%a{(xH;(1zmQLbap4Sha!3|0QdpNwen9w8kb4h)y&?=7`q8@hot|Kv_}Sw%&9A~ zx&V^%j6Ed16a0J-a7-8EBmE!}=v9NZx4M|O7}WR)z%7Bl&v=zyNQPz&EC*abybmse zA9i;Y7T{$&Vw3b7V6zTsem0;t4H)0jXEWkY<{CMqTjv-YpTHEY^D=JGHDqYiz$fv; znlg9|-z%SsA37ZaY}W~|1?$)yH$s!mja%?!9aU%#T3o==z#jt|S7r3yiTL{p@GIbb71rHz0J~)H z`sEJkEeU)#)@_pS^7dAo&feJvyPH$ zy*!xX#xCeB6asKVFt*Jo11wAY^gc-T7V!&|a~vtc&#CBOnZeHn0qwbzbRr4p4T=EN zW(o#Yk`$faUl_C?|bQtsx}Exs)2*63nXftgK`bYH4@k%a!R zL7n*lJ`>Qp-^?CvZNS~4jta*A(99l5H{w2b-^-czIk~^VWVxT+Sb4m_wvskeoab;; zNmm2go7tQk+C{ij9{kdZoh8*~if$Zq9vys1Fz)D}-|j)bnb8x8Yxr4iTMtm+F@(Em zT}bve^MYzur;YymX*XWYqJvKi!(9i!_pE7b5cG=@DV!PfTNL-Ni*P;_&g6l=#?K8R zbai$>eArdWk1$1N`04<-r|N2{=GP_tA=Ph;r09bGG-x|Wak9#9n%RL>Qm&ZU-SYUn z=-ByGx;s<2HE8STlyERmml7Cd5WC0B=BL^=m6UdteAvv=g0hID;{%#kNIInx1{3{a z&)}y|$iLg2B8vAPHW}4=DFD%DW7DARwxDe*Nh_t=W=T4_n;=OuyHW0(lE&_x(v%0L zq!IZP4oTD{0MV;Dx-e1Ry2ur5m!R!JGkc*DS25bGl9G0+qEn?#2MQ@7e*!P+|25@K2tqIN?T481n$iu%{v4Yw|+y>~5!F>|LtR9KoBAtU^8EP~= z_Y!ppz|uk6n?YNlpd<=eT2SUo`tPjCalgaIB;79QN#KZFZaq&x8f{N4u)L(-$$b(Z z0Yxk6R1l{OTF&R z>NPc@&>&>Xp01; z>?d%@p)LW4q&>QLGP7$`pwUbEUo9vAlC-Nb1R$Y%hon0S=nBs(@X1v397zub-P7Av zBt4s=H%jd%n{$Rs{9s+5favMzW-okQ&~_jl;ww*-oYv!28^93UvuUWc2CA96C|{RJLNgq@wLzE|QxX9Yse17ug~n2-+g!R&+gvBzh?T zAMcb{QrIZ1FiO(Nc%W%zB-_F(<@tA7F;!k7FOA5*FEU$4>l|?c@Pyixo^^oq31Jm{ zTkX4xMI~JWY+r>?atwNtq>Z9^(pgJ!AI2SnzP}0D%DySO2CzMFIPgVE=1A&fl1}{r zZVbkCl^-AYhkz!y@7*bs2$leL1D?sC^Sj7oOPs>3O-aPPpwsDP<^!PuT)=0pKLDP9 zvK902xQUNs&}-ZwZqkZ}vo zPC7m4|Fxj+Zb83E9j-M~0B|STEKlf}K-=LNgCGDO3&zbZHEBNGCGdn%b>a;mI+_;l zZIs3gyr5>f?=?Z+(>q*ekpSeyP0j)~PSI=DE7;5)l9ZPIF^Ziqs?eP!PcGe26mEd0 zByDD9ZH^qcD_0bOdse#QW^yri3i@7F3zscOwy1eoNfwv%W4ee;`hU<}T)@%6*ypI} zXcW)so8{YAgn4-EeHhP==l_qQnw|&REPcTDg1&9ZvMa2u&?gXA0#C%_Cn9X!(sxh- zLslk^@BjO%7bItnWs-|OHRB?rF$a(3YjaR-p}8y`;TxeXnh1{)jxvt6=?N9qRoW>O zkBN+uNS@NtXV8K}e-ey;l8lI-PJw4B-4Zw>xfqjyS8OIm&(oHTJ}_OyaiK6xU^A>k{BMN&=-hvAApCib<0HI^#gbo2rF*mj-gSQ+P&1U{i0X^@=DVJ z+?1l%NY$`BoFk8vO;^f11bEcU+R~$U3p}O#2jm_)YsgO|w~z;L7OnMmNnbIuR|2|g z%Zps4x3jY)9T)__)QaTBMXvG#m?rmMtY@-7ayrcuxH|B9KyN-Z*3reyzeP`X7T&>A z%4Fp&9ETT!jBr?uYsj+%E5)LXr7R95$BNgbbKXEf znpZp#WfbuYeu`My?HgDN7t#yyZ0BuGsg$z>jt6!C)~6tI7(+<_61r#Q+?0RE3sH7T z`+ywU;7`syc>cn|nmc$&nP?XS@Dvr&z~ENKS5q|Rwn_s+}1{}4Im+JZR^7lMhv&A=6Sp5mkMqvBFeE1u&pIt?7a6kH*!!rSL_=nY^x zerA%!@DTufn>3MjW#vIUBiLyCMxBv!A?D(a4~<9F06S;ggaJH)m$$1*ce5OtML3ZT zgH~y9mFHw4$j_s5^6yfSeEcona3Rts?5=pa0$ zY#rFYV7^95$4-=|hfCvOc?sE#oArd`ag^I^N8tmmHG`U`=`bp?%aI#M%uenpviR((BT( zi9|=%sY6=&tWUh1`a(c&IpCkECmU#|_ze)bj#mP%>~4qK@5`3Gc@6h7n1EMUJC8Uu z{Qz=LA8DX^_ToYK$toY0^jK2kxL4Sr;P(gR9z(x~l3@=iP;DESmGeIj zQJ%hG4P1Fmqodb+jXX7C2N;c8$;x6nHGFf28gRqXjrgbOMH+g|7x2`WC2$=1F?g*v zf9pCIIn+Qs2`p+sSpn$Umo53WZYk+BxsfNr^^!J9(zqUJp+UN_w2uEK4MmWmq0OKgA z=Gn)PLtC-V2xa{N`dB#7<`2;S1dMR>1z?1uF90JPWtG5JC7sYqM*657-%)uV%lAbI5L zx3S|KfCYFxZ~n&7gc1m>h9_+9HQoi%^?{=KX8@}P{Wf92tQ@^UIDePdct|UOpHVY~ z6-P_@Vu|^emGs%5-yVwV7}kxf`FoDR5`dQ*oa?2M^GE%nwqBvhxw1hsp8z92TS#5F z6Iimu{Ff3We8NM$s(3wjig5leuW|3AgKJ=N4aGHk>%g0mp3KYPm&}iuJ)6^Kl%%!Q zLnSb8{!T&3=-@%EZ);}HD6To!4F{SbXu&AUpJLjd3p^E4e@NVN=^wAXB?roa@B=zy0Y=oUYn#AOE?L#SB3EWG4 zAy}9&S$ PulseRoots: Electronic Music Styles Tree +
+
-
-

Treemap Format

+
+
+

Treemap Format

-

Explore a comprehensive collection of electronic music genres, presented in a treemap format. The map starts at the broad "Electronic Music" category, then descends into the main "Families" (Ambient, Techno, House, etc.), and further branches into specific styles and substyles.

- -

Families

-

Each genre is categorized into broader families such as Ambient, Techno, House, and Trance. These families represent shared characteristics and influences across genres.

- -

Styles and Substyles

-

Within each family, the treemap showcases distinct styles and their substyles. Each of these has its own unique sound and historical significance, making it easy to navigate through the world of electronic music.

- -

Clicking on a style or substyle will reveal more detailed information, including a brief description and a sample track to help you explore and understand each genre.

- -

Note on Classification

-

This treemap represents one way to categorize electronic music genres. Other classifications could group styles differently, based on cultural, historical, or sonic perspectives.

- -

Note on Listening to Example Tracks

-

If you want to listen to the full example tracks, please make sure you're logged into Spotify in your browser. If you're not logged in, you'll only be able to hear a short sample of the song, lasting just a few seconds.

+

Explore a comprehensive collection of electronic music genres, presented in a treemap format. The map starts at the broad "Electronic Music" category, then descends into the main "Families" (Ambient, Techno, House, etc.), and further branches into specific styles and substyles.

+ +

Families

+

Each genre is categorized into broader families such as Ambient, Techno, House, and Trance. These families represent shared characteristics and influences across genres.

+ +

Styles and Substyles

+

Within each family, the treemap showcases distinct styles and their substyles. Each of these has its own unique sound and historical significance, making it easy to navigate through the world of electronic music.

+ +

Clicking on a style or substyle will reveal more detailed information, including a brief description and a sample track to help you explore and understand each genre.

+ +

Note on Classification

+

This treemap represents one way to categorize electronic music genres. Other classifications could group styles differently, based on cultural, historical, or sonic perspectives.

+ +

Note on Listening to Example Tracks

+

If you want to listen to the full example tracks, please make sure you're logged into Spotify in your browser. If you're not logged in, you'll only be able to hear a short sample of the song, lasting just a few seconds.

-

Contact

-

Thank you for visiting, and I hope you enjoy exploring the world of electronic music.

- -

If you have any suggestions, improvement proposals, if you've found any errors, or just want to say 'Hi!', feel free to write to me.

- +

Contact

+

Thank you for visiting, and I hope you enjoy exploring the world of electronic music.

+ +

If you have any suggestions, improvement proposals, if you've found any errors, or just want to say 'Hi!', feel free to write to me.

+
- - - - -
- -

PulseRoots @ Github

- -

Background image by: Kiryl @ Unsplash

- -

Logo by: ibrandify @ Flaticon

- +
+ + diff --git a/styles.css b/styles.css index 87b3cf3..be19084 100644 --- a/styles.css +++ b/styles.css @@ -14,10 +14,12 @@ body { #header-container { background: linear-gradient(to right, #222, #333, #444); + box-shadow: 0 0 10px rgba(0,0,0,0.3); display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; + margin-bottom: 40px; } #logo { @@ -38,36 +40,20 @@ body { transform: rotate(10deg) scale(1.1); } -#social-share { - color: #fff; - margin-left: auto; - display: flex; - gap: 15px; - align-items: center; -} - -#social-share i { - color: #fff; - font-size: 20px; - transition: color 0.3s ease; -} - -#social-share i:hover { - color: #a7a7a7; -} - #main-container { margin: 20px; display: flex; gap: 20px; flex-direction: row; + flex-wrap: wrap; } #tooltip { max-width: 350px; - min-width: 300px; + min-width: 250px; text-align: left; background-color: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 10px rgba(0,0,0,0.3); border-radius: 10px; padding-left: 30px; padding-right: 30px; @@ -76,6 +62,14 @@ body { color: #333; } +#spotify-login-link { + color: #333 +} + +#spotify-login-link:visited { + color: #686868 +} + h1 { font-size: 24px; color: #fff; @@ -87,8 +81,7 @@ p { } #treemap { - max-width: 1200px; - min-width: 300px; + min-width: 250px; height: auto; background-color: rgba(255, 255, 255, 0.7); border-radius: 10px; @@ -96,6 +89,7 @@ p { padding-right: 25px; padding-top: 10px; padding-bottom: 10px; + box-shadow: 0 0 10px rgba(0,0,0,0.3); } .node text { @@ -111,22 +105,13 @@ p { .clickable-node text:hover { cursor: pointer; } -#link { - color: #333; - font-size: 14px; -} - -#link:visited { - color: #7e7e7e; -} - #info-panel { position: fixed; bottom: 0; left: 0; height: auto; width: 90%; - max-width: 450px; + max-width: 500px; background-color: #dbdbdb; padding: 20px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); @@ -135,56 +120,97 @@ p { border-top-right-radius: 10px; } - #info-panel.visible { - transform: translateY(0); - } - - #info-content { - margin-bottom: 15px; - } - - #close-panel-container { - display: flex; - justify-content: flex-end; - cursor: pointer; - } - - form { - margin-top: 30px; - display: flex; - flex-direction: column; - gap: 10px; - } +#info-panel.visible { + transform: translateY(0); +} - input, textarea { - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 16px; - font-family: "Aleo", serif; - } +#info-content { + margin-bottom: 15px; +} - textarea { - min-height: 100px; - } +#close-panel-container { + display: flex; + justify-content: flex-end; +} - #submitbutton { - background-color: #333; - color: #fff; - border: none; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease; - font-family: "Aleo", serif; - } +#close-panel-container i { + cursor: pointer; +} - #submitbutton:hover { - background-color: #a7a7a7; - color: #fff; - } +form { + margin-top: 30px; + display: flex; + flex-direction: column; + gap: 10px; +} + +input, textarea { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 16px; + font-family: "Aleo", serif; +} - .social-share i { - color: #333; - font-size: 24px; - } \ No newline at end of file +textarea { + min-height: 100px; +} + +#submitbutton { + background-color: #333; + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + font-family: "Aleo", serif; +} + +#submitbutton:hover { + background-color: #a7a7a7; + color: #fff; +} + +footer { + background: linear-gradient(to right, #222, #333, #444); color: #fff; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + padding: 20px 50px; + font-size: 14px; + color: white; + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 20px; + margin-top: 50px; +} + +footer a { + color: white; + text-decoration: none; +} + +footer i { + margin-right: 10px; +} + +#logoandlinks { + display: flex; + flex-direction: row; + align-items: center; + gap: 20px; +} + +#footer-logo { + display: flex; + min-width: 50px; +} + +#social-share i { + font-size: 25px; + transition: color 0.3s ease; +} + +#social-share i:hover { + color: #a7a7a7; +} \ No newline at end of file