diff options
Diffstat (limited to 'site/src/assets')
| -rw-r--r-- | site/src/assets/Hydroroll-small.svg | 61 | ||||
| -rw-r--r-- | site/src/assets/base.css | 86 | ||||
| -rw-r--r-- | site/src/assets/main.css | 35 |
3 files changed, 182 insertions, 0 deletions
diff --git a/site/src/assets/Hydroroll-small.svg b/site/src/assets/Hydroroll-small.svg new file mode 100644 index 0000000..242c16c --- /dev/null +++ b/site/src/assets/Hydroroll-small.svg @@ -0,0 +1,61 @@ +<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 193.2 193.2" + viewBox="0 0 193.2 193.2" xmlns:xlink="http://www.w3.org/1999/xlink" width="193.2" height="193.2"> + + <defs> + <g id="1"> + <path d="M43.21,112.8c-1.44,0.57-3.07-0.13-3.64-1.56c-0.28-0.69-0.26-1.44,0-2.08c2.24-5.61,1.78-11.23,1.36-16.84l-0.85-8.42 + c-0.21-2.81-0.3-5.61-0.23-8.42c0.16-5.61,1.17-11.23,1.14-16.84c-0.02-5.61-0.29-11.23-1.43-16.84c-0.29-1.44,0.64-2.84,2.08-3.13 + c1.44-0.29,2.84,0.64,3.13,2.08c0.07,0.35,0.07,0.72,0,1.05c-1.13,5.61-1.41,11.23-1.42,16.84c-0.03,5.61,0.98,11.23,1.14,16.84 + c0.08,2.81-0.02,5.61-0.23,8.42l-0.85,8.42c-0.41,5.61-0.88,11.23,1.36,16.84C45.35,110.6,44.65,112.23,43.21,112.8z" + fill="black" /> + + </g> + <g id="2"> + <path d="M53.19,137.35 + c0.04,1.07-0.8,1.98-1.87,2.02c-1.07,0.04-1.98-0.8-2.02-1.87c0-0.05,0-0.1,0-0.14c0.25-6.89,1.81-13.79,1.27-20.68 + c-0.36-6.89-1.94-13.79-1.83-20.68c-0.08-6.89,1.96-13.79,1.84-20.68c0.05-3.45-0.2-6.89-0.55-10.34 + c-0.32-3.45-0.57-6.89-0.74-10.34c-0.05-1.07,0.78-1.99,1.85-2.04c1.07-0.05,1.99,0.78,2.04,1.85c0,0.06,0,0.13,0,0.19 + c-0.16,3.45-0.42,6.89-0.74,10.34c-0.35,3.45-0.59,6.89-0.55,10.34c-0.11,6.89,1.92,13.79,1.84,20.68 + c0.11,6.89-1.47,13.79-1.83,20.68C51.38,123.57,52.94,130.46,53.19,137.35z" fill="black" /> + + </g> + <g id="3"> + <path d="M60.94,168.46c-1.44,0.34-2.88-0.54-3.22-1.98 + c-0.1-0.42-0.09-0.85,0-1.24c1.23-5.14,1.54-10.29,1.63-15.43c0.09-5.14-0.6-10.29-1.03-15.43c-1.05-10.29,0.54-20.58,1.09-30.86 + c0.79-10.29-1.71-20.57-0.66-30.86c1.37-10.29,1.28-20.58-1.03-30.86c-0.32-1.44,0.58-2.86,2.02-3.19s2.86,0.58,3.19,2.02 + c0.09,0.39,0.08,0.8,0,1.17c-2.3,10.29-2.4,20.58-1.03,30.86c1.06,10.29-1.44,20.57-0.66,30.86c0.55,10.29,2.14,20.58,1.09,30.86 + c-0.44,5.14-1.12,10.29-1.03,15.43c0.09,5.14,0.4,10.29,1.63,15.43C63.26,166.67,62.37,168.12,60.94,168.46z" + fill="black" /> + + </g> + <g id="4"> + <path d="M71.74,103.51 + c-0.45,8.15-1.96,16.29-1.79,24.44c0,4.07,0.4,8.15,0.72,12.22c0.31,4.07,0.5,8.15,0.66,12.22c0.04,1.07-0.8,1.98-1.87,2.02 + c-1.07,0.04-1.98-0.8-2.02-1.87c0-0.05,0-0.1,0-0.15c0.16-4.07,0.35-8.15,0.66-12.22c0.32-4.07,0.72-8.15,0.72-12.22 + c0.18-8.15-1.34-16.29-1.79-24.44c-0.2-4.07-0.23-8.15,0.27-12.22c0.46-4.07,1.27-8.15,1.48-12.22c0.74-8.15-1.65-16.29-1.34-24.44 + c0.04-1.07,0.95-1.91,2.02-1.87c1.02,0.04,1.83,0.87,1.87,1.87c0.31,8.15-2.08,16.29-1.34,24.44c0.22,4.07,1.02,8.15,1.48,12.22 + C71.97,95.36,71.94,99.44,71.74,103.51z" fill="black" /> + + </g> + + <mask id="holes"> + <rect width="193.2" height="193.2" fill="white" /> + <use xlink:href="#1" x="0" y="0"></use> + <use xlink:href="#1" x="108.8601" y="0"></use> + <use xlink:href="#2" x="0" y="0"></use> + <use xlink:href="#2" x="90.71" y="0"></use> + <use xlink:href="#3" x="0" y="0"></use> + <use xlink:href="#3" x="18.1403" y="0"></use> + <use xlink:href="#3" x="36.2818" y="0"></use> + <use xlink:href="#3" x="54.4218" y="0"></use> + <use xlink:href="#3" x="72.57" y="0"></use> + <use xlink:href="#4" x="0" y="0"></use> + <use xlink:href="#4" x="18.1454" y="0"></use> + <use xlink:href="#4" x="36.2885" y="0"></use> + <use xlink:href="#4" x="54.4354" y="0"></use> + </mask> + </defs> + <g mask="url(#holes)"> + <circle cx="96.6" cy="96.6" r="96.6" fill="white" /> + </g> +</svg>
\ No newline at end of file diff --git a/site/src/assets/base.css b/site/src/assets/base.css new file mode 100644 index 0000000..8816868 --- /dev/null +++ b/site/src/assets/base.css @@ -0,0 +1,86 @@ +/* color palette from <https://github.com/vuejs/theme> */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: + color 0.5s, + background-color 0.5s; + line-height: 1.6; + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/site/src/assets/main.css b/site/src/assets/main.css new file mode 100644 index 0000000..e8667cd --- /dev/null +++ b/site/src/assets/main.css @@ -0,0 +1,35 @@ +@import './base.css'; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} |
