From 37db10481ee89718ca68ddd118ca0942dcb47dd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= Date: Tue, 5 Jul 2022 17:10:27 +0200 Subject: [PATCH] Website theming Some styling & theming, including a new icon. Probably not the final color scheme, but better than the "this looks like default Bootstrap" blue color. --- web/flamenco-io-site/static/brand.svg | 31 ++++ web/flamenco-io-site/static/custom.css | 154 ++++++++++++++++++ .../static/favicon/favicon-16x16.png | Bin 0 -> 802 bytes .../static/favicon/favicon-32x32.png | Bin 0 -> 1304 bytes .../static/favicon/favicon.svg | 31 ++++ 5 files changed, 216 insertions(+) create mode 100644 web/flamenco-io-site/static/brand.svg create mode 100644 web/flamenco-io-site/static/custom.css create mode 100644 web/flamenco-io-site/static/favicon/favicon-16x16.png create mode 100644 web/flamenco-io-site/static/favicon/favicon-32x32.png create mode 100644 web/flamenco-io-site/static/favicon/favicon.svg diff --git a/web/flamenco-io-site/static/brand.svg b/web/flamenco-io-site/static/brand.svg new file mode 100644 index 00000000..26175b72 --- /dev/null +++ b/web/flamenco-io-site/static/brand.svg @@ -0,0 +1,31 @@ + + + +image/svg+xml diff --git a/web/flamenco-io-site/static/custom.css b/web/flamenco-io-site/static/custom.css new file mode 100644 index 00000000..c00b9ac8 --- /dev/null +++ b/web/flamenco-io-site/static/custom.css @@ -0,0 +1,154 @@ +/* Global customization */ + +:root { + --code-max-height: 60rem; +} + +/* Light mode theming */ +:root, +:root[color-theme="light"] { + --header-background: #513c6b; + --header-font-color: #ffffff; + + --body-background: #ffffff; + --body-font-color: #343a40; + + --mark-color: #ffab00; + + --button-background: #7d6897; + --button-border-color: #513c6b; + + --link-color: #513c6b; + --link-color-visited: #c54e8a; + + --code-background: #f5f6f8; + --code-accent-color: #e3e7eb; + --code-accent-color-lite: #eff1f3; + --code-font-color: #5f5f5f; + + --code-copy-background: #f5f6f8; + --code-copy-font-color: #6b7784; + --code-copy-border-color: #adb4bc; + --code-copy-success-color: #a170e2; + + --accent-color: #e9ecef; + --accent-color-lite: #f8f9fa; + + --control-icons: #b2bac1; + + --footer-background: #2f333e; + --footer-font-color: #ffffff; + --footer-link-color: #ffcc5c; + --footer-link-color-visited: #ffcc5c; +} +@media (prefers-color-scheme: light) { + :root { + --header-background: #513c6b; + --header-font-color: #ffffff; + + --body-background: #ffffff; + --body-font-color: #343a40; + + --mark-color: #ffab00; + + --button-background: #7d6897; + --button-border-color: #513c6b; + + --link-color: #518169; + --link-color-visited: #c54e8a; + + --code-background: #f5f6f8; + --code-accent-color: #e3e7eb; + --code-accent-color-lite: #eff1f3; + --code-font-color: #5f5f5f; + + --code-copy-background: #f5f6f8; + --code-copy-font-color: #6b7784; + --code-copy-border-color: #adb4bc; + --code-copy-success-color: #a170e2; + + --accent-color: #e9ecef; + --accent-color-lite: #f8f9fa; + + --control-icons: #b2bac1; + + --footer-background: #2f333e; + --footer-font-color: #ffffff; + --footer-link-color: #ffcc5c; + --footer-link-color-visited: #ffcc5c; + } +} + +/* Dark mode theming */ +:root[color-theme="dark"] { + --header-background: #513c6b; + --header-font-color: #ffffff; + + --body-background: #343a40; + --body-font-color: #ced3d8; + + --mark-color: #ffab00; + + --button-background: #7d6897; + --button-border-color: #513c6b; + + --link-color: #a170e2; + --link-color-visited: #c27a9e; + + --code-background: #2f353a; + --code-accent-color: #262b2f; + --code-accent-color-lite: #2b3035; + --code-font-color: #b9b9b9; + + --code-copy-background: #343a40; + --code-copy-font-color: #6b7784; + --code-copy-border-color: #6b7784; + --code-copy-success-color: #37905c; + + --accent-color: #2b3035; + --accent-color-lite: #2f353a; + + --control-icons: #b2bac1; + + --footer-background: #2f333e; + --footer-font-color: #ffffff; + --footer-link-color: #ffcc5c; + --footer-link-color-visited: #ffcc5c; +} +@media (prefers-color-scheme: dark) { + :root { + --header-background: #513c6b; + --header-font-color: #ffffff; + + --body-background: #343a40; + --body-font-color: #ced3d8; + + --mark-color: #ffab00; + + --button-background: #7d6897; + --button-border-color: #513c6b; + + --link-color: #a170e2; + --link-color-visited: #c27a9e; + + --code-background: #2f353a; + --code-accent-color: #262b2f; + --code-accent-color-lite: #2b3035; + --code-font-color: #b9b9b9; + + --code-copy-background: #343a40; + --code-copy-font-color: #6b7784; + --code-copy-border-color: #6b7784; + --code-copy-success-color: #37905c; + + --accent-color: #2b3035; + --accent-color-lite: #2f353a; + + --control-icons: #b2bac1; + + --footer-background: #2f333e; + --footer-font-color: #ffffff; + --footer-link-color: #ffcc5c; + --footer-link-color-visited: #ffcc5c; + } +} diff --git a/web/flamenco-io-site/static/favicon/favicon-16x16.png b/web/flamenco-io-site/static/favicon/favicon-16x16.png new file mode 100644 index 0000000000000000000000000000000000000000..c8af1dabb1049609f62e16bb71d9251bfb399e6a GIT binary patch literal 802 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstU$g(vPY0F z14ES>14Ba#1H&(%P{RubhEf9thF1v;3|2E37{m+a>nb7Y0C_!?s=uFcOJd{ z@CQiOOV{27nTt1>x6X9zo>#SQ_xVT9e*gWu>*}4D*=t^W{9L_mk4w*d_r8Ub_8kB8 z{l~`h*W>4|{rUUP>HANr*6w!bnrqTLJ!0mnC+|M4Ide62;fAk2e;v4aKW^^Ya}S>_ zJ8^O0(eqE=f4uti<;QP7UVZxV@87@WCogqwKm7T}&!4}4m#*6J`t#R6fB()qe71b` z&ZqA`#eM(B0t^Ddk{~}|aI$+WfBaiw;=2uOo^O{u`gL?eStwAFG0EHAh4DX=?mZxf zv%n*=n1O-+ItVjfGmf(d3bL1Y`ns||V`mjIwai}VycZ~R($mE;MB;L)|J9;H0U|cy z-WycdIb5Ukf)sWLFFCq)$Cv;6TZ<3#@NdZ9ZJf<;Ag8ST^3x)#H)d=uGgWq9Y>J*H z!K_wkAi(o-+LMVA6{$S+E{ir+IB0AVuc`a{S^MDRl_k%lFTQ7H-Mll#?kI1Z#XJ|`~6a!iyu}vRX#JZpS{>^TI)uYeNnGx@7G-= zvg@|IK>zY*QD3w|s>Rw)fBn`UrpvoIz-)VeV$v_+q+hppUjJRb^t42;eWkw#&{L`< zt`Q|Ei6yC4$wjF^iowXh$Vk_~T-U%f#L&#j)Y!_@T-(6N%D`Y!zQz(14Y~O#nQ4`{ zH9R(&AOX}M39=zLKdq!Zu_%?Hyu4g5GcUV1Ik6yBFTW^#_B$IXpdtoOS3j3^P6o{-0J10mKu9TT z7JyVV0P|r0;AsF@kZ-pJ90mZz_dgcwfe^m_|E7ZAj<>Qqy~8hLQ=eB=dcFShszZqqA>pb^+FE=av52Prh~(%S6%Py1w3Y8YNoYp(Kz zxIDUhQB?-F^||!D3W9WceU*3spU)r^R;D#P?wOElVC}GcmQ=zzlz;0tzHsQnM_8+4 ziuzA78u){f)CPg)^_oI~XyVgi!6Okimln;s=Xt$4u)Lo2d@#Q50R(IFnmdx%E%L>s zRE_{kp(WmV_-1ZSq7soRZIfoMso zQm8d&t9Wiy=KL4MU(<8TO4aGx+-oge8W?VWJ5l{?;N|4BPN!c~C_@>Xg_TwQfW(!` z^!cNRIAfvaN7>#-V~2duBg%kd#B_L4){RB~;{iURHvl8*EWw*b4@7kv(7i#^^o zZ8olhhJ=>t2DX4m2=pc;1#C5_={`xlA3VS67E^Vz{6zIej;({!24nk%A#)DrfN`3v zf23xnLP8dk1jV@OI}F}f)2Wh)nD&fMExBwZ8bEP^cS%MOIkAd_=o2q@$7Py!jNzkF zRsP3ld{4RRGJLGMX=@I&K1w08?g%k0s>yX1{ct0OZB*>La0p-jK07IH=du|2E8pUd z!4({71Cvo%Fy51!Uvh~^wPtV6Y}|q$xA-(quVrM%D0*L`4+Rji+DgOR_E3hj;x1aI z;nCg?P80*1o~)^1Oz3H|>$|EPUeb*-vi(iT7M{l~`K?jTPn8(Q9CutEC+`*-gMQS-x?7^mW(J}; zS2TNMvi?jsp^W48rlblQu9S|t4s9-JyjWpdIj`W!o244vN6PHBjbV3Zo{d59;26YX zp8x!d{qeoE(v~jzYo`YlEa}k4{)A^Rbnv&;Aq)#TLoLaE5U zTgJ1J^PnB_tKS;imFACIJAOruV^@ktNXohJlt_F;awGx(gT`R?p>g}r*kH$lc&rm1 zi?c^#@M!dnMBBQ52`(g_i;c?oZ-E?BYKaK8txX6@j7mulPmToX>FN7p6XGvMgp(up WCniVVT0CrpkO0ZUkJ$8cSk6Cj8N+%2 literal 0 HcmV?d00001 diff --git a/web/flamenco-io-site/static/favicon/favicon.svg b/web/flamenco-io-site/static/favicon/favicon.svg new file mode 100644 index 00000000..26175b72 --- /dev/null +++ b/web/flamenco-io-site/static/favicon/favicon.svg @@ -0,0 +1,31 @@ + + + +image/svg+xml