Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement dark mode #229

Merged
merged 5 commits into from
Sep 7, 2020
Merged

Implement dark mode #229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5f1a025
Implement dark mode
septatrix Jun 14, 2020
aa682de
Deduplicate inline svg
septatrix Jun 19, 2020
ab0937d
Inline svg banner
septatrix Jun 19, 2020
796d900
Fix missing href tag
septatrix Jun 20, 2020
966fd7b
Implement dark-mode logo-variant
septatrix Sep 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,11 +146,39 @@
</head>
<body>
<div id="content">
<img src="media/insect.svg" title="insect - scientific calculator" alt="insect - scientific calculator">
<svg id="insect-logo" width="260" height="128" viewBox="0 0 77.391 38.1">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#f72d4b"/>
<stop offset=".312" stop-color="#b1076f"/>
<stop offset="1" stop-color="#078af4"/>
</linearGradient>
<linearGradient href="#a" id="b" x1="-2996.72" x2="-1559.018" y1="4654.921" y2="4200.613" gradientTransform="matrix(.09408 0 0 .09408 -16454.439 2288.328)" gradientUnits="userSpaceOnUse" />
<linearGradient href="#a" id="c" x1="-12403.771" x2="-12550.984" y1="16503.461" y2="9437.118" gradientTransform="matrix(.0249 0 0 .0249 -16447.602 2300.046)" gradientUnits="userSpaceOnUse" />
</defs>
<g stroke-width="2.058" aria-label="nsect" fill="currentColor">
<path d="M28.215 28.178q-.052-.42-.105-1.21-.026-.815-.079-1.815l-.052-2.13-.053-2.104q-.026-1-.079-1.79-.026-.814-.105-1.235 0-.027-.026-.132 0-.105-.027-.237v-.21-.158q.395-.315.658-.21.29.105.473.473.185.342.263.868.08.526.106 1.052.052.526.052.974v.605q.053-.448.158-1.053.105-.605.316-1.236.21-.631.5-1.236.315-.631.762-1.105.447-.473 1-.736.578-.263 1.315-.21 1.157.052 1.894.63.762.58 1.183 1.552.447.974.632 2.236.21 1.263.263 2.683.078 1.42.052 2.893-.026 1.447-.026 2.788-.237.053-.474.185-.236.105-.394.078-.158 0-.237-.21-.052-.237.053-.894l.079-1.447q.079-1 .052-2.21 0-1.21-.131-2.498-.132-1.289-.5-2.341-.342-1.078-1-1.736-.657-.684-1.71-.684-1.078.447-1.814 1.684-.71 1.236-1.157 2.893-.421 1.657-.632 3.603-.184 1.92-.21 3.762-.053-.027-.21-.027h-.316l-.316-.052q-.131-.027-.158-.053zM39.894 26.179q.473 0 .868.184.42.184.815.421.395.21.79.395.42.157.894.157.552 0 1.13-.184.605-.21 1.105-.552.5-.368.816-.868.315-.526.315-1.131.027-.184 0-.447 0-.263-.158-.526-.157-.29-.526-.526-.368-.263-1.078-.395-.684-.131-1.736-.131-1.052-.027-2.604.184-.394 0-.763-.21-.368-.237-.657-.553-.29-.342-.474-.71-.184-.395-.184-.737 0-1.026.421-1.657.447-.657 1.131-1.026.684-.394 1.526-.552.841-.158 1.71-.158.394 0 .894.053.526.026.946.21.448.158.737.526.316.369.316 1.026-.053.447-.158.552-.08.08-.263-.052-.158-.158-.395-.421-.237-.263-.579-.5-.315-.263-.789-.394-.447-.132-1.025 0-.605 0-1.21.131-.605.105-1.105.395-.473.29-.79.789-.288.5-.288 1.262 0 .395.341.553.369.131.947.131.605 0 1.342-.026.763-.053 1.552-.053t1.525.132q.737.105 1.289.473.579.342.894 1 .316.657.237 1.71 0 .762-.447 1.446-.42.684-1.105 1.21-.657.5-1.473.79-.815.288-1.578.21-.316-.027-.868-.158-.526-.158-1.052-.421-.5-.263-.868-.631-.368-.395-.368-.921zM49.047 22.128q0-.789.342-1.736.342-.973.92-1.788.606-.842 1.342-1.394.763-.579 1.578-.579.447 0 .868.184.447.184.842.5.42.29.736.684.342.368.526.789.184.42.184.815.027.395-.21.684l-5.55 1.026q-.105.026-.184.263-.079.21-.131.552-.053.342-.106.763l-.052.79q-.027.368-.027.683v.447q0 .737.342 1.21.369.447.921.684.552.237 1.236.316.71.079 1.394.079.684 0 1.29-.053.604-.053.999-.053 0 .106-.08.237-.078.132-.183.263l-.21.21q-.106.08-.132.106-.21.052-.658.158-.42.078-.92.157-.474.08-.895.132-.42.053-.578.053-.816.157-1.42-.027-.606-.184-1.027-.631-.42-.447-.683-1.078-.263-.658-.395-1.394-.132-.737-.158-1.526 0-.79.08-1.526zm3.814-4.497q-.237 0-.631.263-.369.236-.71.631-.316.368-.553.815-.21.421-.131.737.684.079 1.42-.026.736-.106 1.341-.316.605-.237 1-.526.394-.316.368-.631 0-.316-.5-.553-.473-.263-1.604-.394zM57.753 23.812q0-.973.316-2.157.315-1.184.92-2.183.605-1.026 1.5-1.71.894-.684 2.078-.684.605-.079.973.132.368.184.552.605.21.42.263.973.08.526.08 1.105.025.552 0 1.052 0 .473.052.789h-.658q-.026-.158-.105-.737-.053-.605-.21-1.236-.158-.631-.448-1.13-.263-.5-.762-.5-.737 0-1.394.578-.632.579-1.105 1.394-.474.816-.763 1.683-.29.868-.29 1.447.027.658.185 1.447.158.763.5 1.394.368.631.946 1.026.58.394 1.42.236.632 0 1.21-.263.58-.263 1.132-.552.552-.29 1.104-.552.58-.263 1.21-.263 0 .683-.5 1.21-.5.5-1.236.815-.71.315-1.525.473-.79.158-1.342.158-.894 0-1.657-.368-.736-.368-1.288-.973-.553-.632-.868-1.447-.29-.842-.29-1.762zM70.878 18.762q-.237-.08-.657-.053-.395 0-.868.053-.447.026-.868.079-.421.052-.71.052-.132 0-.185-.368-.026-.395-.105-1.052l3.709-.263q.079-.92.105-1.315.026-.395 0-.658 0-.29-.026-.631v-1.131q.684-.105 1.026-.053.368.027.5.184.13.158.104.474 0 .29-.078.736-.053.447-.106 1.079-.026.631.053 1.42l3.156-.105v1.289q-.21 0-.657.026-.447.026-.973.053-.5.026-.947.052-.421.026-.632.105-.21.947-.447 2.026-.236 1.078-.315 2.13-.08 1.052.052 1.973.132.894.658 1.5.526.578 1.499.815.973.21 2.578-.158-.053.394-.316.657-.237.237-.579.395-.315.131-.683.21-.369.053-.658.053-1.341 0-2.13-.474-.79-.5-1.184-1.288-.395-.79-.5-1.789-.105-1.026-.079-2.078.053-1.052.158-2.078.105-1.026.105-1.867z"/>
</g>
<path fill="url(#b)" d="M-16670.852 2763.415c-16.3-1.43-37.895-7.418-51.413-14.252-8.155-4.124-17.496-9.574-22.327-13.026l-3.088-2.206.201-2.422c.287-3.457 2.792-8.218 10.199-19.382 8.26-12.449 9.631-14.258 23.313-30.747 12.318-14.848 13.878-16.369 21.395-20.864 17.59-10.517 35.173-11.494 48.418-2.69 5.093 3.387 9.665 8.601 12.292 14.019 4.284 8.836 10.321 29.043 12.71 42.542.86 4.862 1.038 7.438 1.025 14.917-.02 9.864-.627 13.465-3.163 18.667-1.621 3.325-5.486 7.348-8.716 9.07-3.411 1.818-8.857 3.226-12.479 3.226-1.662 0-3.878.378-5.465.933-5.933 2.074-14.769 2.929-22.902 2.215z" transform="matrix(-.07746 .10711 .10711 .07746 -1566.412 1603.983)"/>
<path fill="url(#c)" d="M-16763.593 2726.152c-1.583-1.808-4.938-32.508-6.528-39.277-11.029-46.945-17.561-83.504-19.662-114.696-.358-5.3-1.602-23.231-1.245-27.141 1.123-12.306 3.317-19.813 6.809-25.21 3.629-5.61 14.242-10.246 18.969-7.918 4.293 2.113 10.662 9.821 14.369 19.195 2.47 6.243 4.12 11.926 7.307 24.097 1.98 7.561 4.723 9.867 6.043 12.04 15.299 19.518 29.721 25.944 47.625 46.056 5.421 10.56 8.647 19.04 2.348 28.193-4.611 6.99-15.108 19.066-20.092 24.196-13.159 25.9-11.931 13.275-19.703 23.574-2.284 3.025-4.712 6.412-6.158 8.288-7.137 9.26-10.744 18.458-13.31 24.248-1.641 3.705-5.093 11.134-5.228 11.284-8.714-5.528-7.808-2.464-11.544-6.93z" transform="matrix(-.07746 .10711 .10711 .07746 -1566.412 1603.983)"/>
<g fill="currentColor">
<path d="M7.653 30.363c-.992-1.482-1.212-3.383-.587-5.084.518-1.407 1.576-2.593 3.07-3.48-1.415.006-2.403-.121-2.96-.486l-.038-.026c-1.32-.922-1.637-4.094-1.945-7.163-.186-1.861-.397-3.97-.816-4.496a28.057 28.057 0 00-.515-.626C2.326 7.156-.244 4.067.957 1.987 2.27.1 4.734.397 8.278 2.865c3.855 2.684 9.21 8.113 15.523 15.725.015-.104.03-.201.041-.286-.425-.155-.712-.45-.7-.784.01-.365.374-.665.872-.777-.2-.866-.846-1.776-1.474-2.66-.845-1.181-1.896-2.05-1.669-3.573a.648.648 0 01.11-.433.67.67 0 01.938-.167.672.672 0 01.168.938c-.17.242-.557.282-.826.205.085 1.174.867 1.786 1.594 2.806.621.87 1.26 1.766 1.508 2.66.727-1.474 1.518-1.989 2.016-2.766.623-.976.986-1.522.966-2.396-.163.006-.513.034-.655-.067a.793.793 0 01-.197-1.108.793.793 0 011.104-.197c.314.219.405.622.26.963-.323 2.032-.453 1.921-1.15 3.017-.495.772-1.284 1.284-2.006 2.75.643.082 1.129.452 1.116.887-.008.314-.282.581-.679.72.119.594.208 1.438.398 2.137.353 1.29-.11 7.248-.51 7.597-.223.14-.51-.695-.774-1.86-.039.247-.079.472-.114.662-.065.27-1.653 6.54-4.76 8.535-1.729 2.29-3.99 2.563-6.544.786-1.626-1.136-3.322-3.037-5.18-5.816zm.032-26.647C4.704 1.641 2.727 1.258 1.832 2.54c-.817 1.418 1.645 4.377 2.829 5.8.198.239.38.454.528.64.58.728.771 2.389 1.036 5.04.243 2.434.577 5.768 1.505 6.417l-.296.425.31-.416c.637.418 2.84.348 5.156.199.904-.197 3.044-.332 5.23-.345 1.91-.083 3.639-.056 4.839.26.221.036.42.075.592.12l.066-.67C17.1 12.068 11.59 6.435 7.685 3.716zm10.916 30.982l.06-.083.087-.053c2.803-1.711 4.368-7.893 4.377-7.921.324-1.807.54-3.94.428-4.705a1.772 1.772 0 01-.199-.134 2.796 2.796 0 00-.695-.262c-.988-.137-2.618-.21-4.295-.213-1.199.05-2.47.141-3.686.23-.568.041-1.101.08-1.61.113-2.574.737-4.358 2.145-5.029 3.966a4.615 4.615 0 00.474 4.149c.659.982 2.656 3.968 4.913 5.541 2.128 1.483 3.772 1.282 5.174-.628z"/>
<path d="M8.661 6.976c-.136 1.075-1.267 2.121-2.323 1.518-.95-.527-1.44-1.84-1.827-2.707-.243-.548-2.82-1.48-1.717-2.694C3.9 1.881 6.54 4.163 7.295 4.816c.675.542 1.499 1.244 1.366 2.16zM12.355 16.097c2.422.631 4.968 1.087 7.36 1.91.425.15-1.007 1.247-2.208 1.283-1.069.08-7.945 1.012-9.06-.367-1.115-1.38-.56-2.91.979-3.345.946-.275 1.992.268 2.929.52zM15.704 15.001c-1.15-.62-2.22-1.499-3.21-2.267-1.05-.76-1.98-1.539-2.655-2.667-.676-1.13.712-2.311.712-2.311s7.057 6.97 8.698 8.315c-.81.534-2.828-.658-3.545-1.07zM8.616 11.118c-1.077.606-1.974-.016-1.438-1.254s2.85.408 1.438 1.254zM9.329 14.463c-.535.74-1.024-.012-1.024-.012l-.048-.387c.069-.937 1.84-.594 1.072.4zM7.504 12.834c.05-.68 1.337-.432.78.29-.39.538-.745-.009-.745-.009zM8.428 15.71c-.389.538-.743-.008-.743-.008l-.038-.282c.05-.68 1.337-.432.781.29zM6.894 11.78c-.238.328-.455-.005-.455-.005l-.02-.172c.029-.415.816-.263.475.177zM6.994 12.547c-.237.328-.453-.006-.453-.006l-.023-.171c.03-.417.815-.264.476.177zM7.085 13.33c-.238.327-.455-.008-.455-.008l-.022-.17c.03-.415.815-.265.477.177zM7.105 14.276c-.237.328-.454-.005-.454-.005l-.021-.172c.032-.414.817-.263.475.177zM7.933 14.04c-.237.328-.455-.006-.455-.006l-.021-.172c.03-.416.815-.264.476.178zM7.707 12.01c-.237.328-.452-.005-.452-.005l-.022-.172c.03-.414.815-.262.474.177zM9.276 12.232c.147-.427 2.102.868 2.618 1.188.61.335 1.3.78 1.836 1.22-.962.372-2.417-.416-3.356-.666-.521-.166-1.45-1.039-1.098-1.742zM10.599 29.432c-.592-.214-1.526-1.677-1.102-3.195.426-1.516 1.083-1.936 2.075-2.498 1.913-1.172 4.733-1.535 6.927-1.547 1.02-.009 2.042.2 3.096.214-1.813 1.034-2.846 2.901-4.463 4.182-1.532 1.237-4.367 3.612-6.533 2.844z"/>
<path d="M10.132 30.374c-.012-.987 4.177 1.155 5.544.81 1.368-.342 2.326-1.363 3.347-1.743.766-.246 1.585-.285 1.631.758.04 1.201-.6 1.86-1.317 2.779-.642.815-1.823 1.743-2.603 2.275-1.607.923-6.584-3.47-6.602-4.88z"/>
<path d="M14.787 30.018c-.24-.568 3.358-3.281 4.822-4.567.486-.45 2.39-2.962 2.906-2.056.429.735-.247 3.392-.808 3.946-.697.668-6.678 3.244-6.92 2.677z"/>
</g>
<g fill="none" stroke="currentColor">
<path stroke-width=".32902091" d="M25.306 20.195s.837.578 1.292.802c.5.246 1.37.835 1.563.59"/>
<path stroke-width=".32902091" d="M25.399 21.757c.97-1.49 1.248-1.828 1.997-1.263.328.246.776.38.776.38"/>
<path stroke-width=".32214703" d="M25.237 22.618s.552.81.87 1.18c.695.81 1.97 2.4 2.255 2.268M24.931 22.338s.777.596 1.183.868c.68.456 1.868 1.487 2.1 1.276"/>
</g>
</svg>
<p class="desc">high precision scientific calculator with full support for physical units.</p>
<div id="terminal"></div>
</div>
<a href="https://github.com/sharkdp/insect" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#272822; color:#ECF0F1; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<a href="https://github.com/sharkdp/insect" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
</a>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
Expand Down
32 changes: 31 additions & 1 deletion web/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
html, body {
html {
font-family: 'Exo 2', sans-serif;
background-color: #ECF0F1;
}

.github-corner svg {
fill: #272822;
color: #ECF0F1;
}

body {
font-size: 1.2em;
margin: 0px;
Expand Down Expand Up @@ -102,3 +107,28 @@ p.desc {
/* Github Badge */

.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}

@media (prefers-color-scheme: dark) {
html {
background: #1A1A1A;
color: #ECF0F1;
}

.github-corner svg {
fill: #ECF0F1;
color: #1A1A1A;
}

#terminal {
box-shadow: 0px 3px 8px #121212;
}

#insect-logo {
color: black;
filter: drop-shadow(0 0 10px #ECF0F1);
}

#insect-logo > path {
display: none;
}
}
Loading