}
}
+@media (min-width: 800px) {
+ :root {
+ --default-flex-direction: row;
+ font-size: 14pt;
+ }
+}
+
+@media (max-width: 799px) {
+ :root {
+ --default-flex-direction: column;
+ font-size: 12pt;
+ }
+}
+
body {
background: var(--background-color);
color: var(--foreground-color);
font-family: "system-ui", sans-serif;
- /* font-weight: lighter; */
- font-size: 14pt;
}
a {
background: var(--light-background-color);
}
+@media screen and (min-width: 800px) {
+ .container .split {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .container .split.right-40 > :last-child {
+ width: 40%;
+ }
+}
+
+@media screen and (max-width: 799px) {
+ .container .split {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+
h1 {
min-width: 100px;
- font-size: 36pt;
+ font-size: 2.5rem;
}
h1, h2, h3, h4, h5, h6 {
/* Nagivation */
-.navbar-container {
- max-width: 1200px;
- width: 1200px;
- margin: 0 auto;
+@media screen and (min-width: 1200px) {
+ .navbar-container {
+ max-width: 1200px;
+ width: 1200px;
+ margin: 0 auto;
+ }
+}
+
+@media screen and (max-width: 1199px) {
+ .navbar-container {
+ width: 100%;
+ margin: 0 auto;
+ }
}
+
navbar {
background: var(--background-color);
color: var(--foreground-color);
padding: 0 12px;
display: flex;
- flex-direction: row;
+ flex-direction: var(--default-flex-direction);
justify-content: space-between;
align-items: center;
}
navbar div {
display: flex;
- flex-direction: row;
+ flex-direction: var(--default-flex-direction);
justify-content: center;
align-items: center;
}
-navbar span {
+navbar a span {
display: inline-block;
padding: 12px 24px;
}
-navbar span:hover {
+navbar a span:hover {
cursor: pointer;
background-color: var(--light-background-color);
}
text-decoration: none;
}
+@media (min-width: 1200px) {
+ #mobile-hamburger, .hamburger-piece {
+ display: none;
+ }
+}
+
+@media (max-width: 1199px) {
+ navbar div {
+ display: none;
+ }
+
+ navbar #mobile-hamburger:checked ~ div {
+ display: flex;
+ }
+
+ #mobile-hamburger {
+ opacity: 0%;
+ width: 32px;
+ height: 20px;
+ z-index: 100;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
+
+ .hamburger {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+
+ .hamburger-piece {
+ background-color: var(--foreground-color);
+ margin-bottom: 4px;
+ height: 4px;
+ width: 32px;
+ display: block;
+ border-radius: 3px;
+ }
+}
+
/* Footer */
.footer-container {
+ position: sticky;
+ bottom: 0;
display: flex;
- flex-direction: row;
+ flex-direction: var(--default-flex-direction);
}
.footer-container > * {
-
.panel-container {
display: flex;
- flex-direction: row;
+ flex-direction: var(--default-flex-direction);
justify-content: space-between;
width: 100%;
gap: 24px;
main {
min-height: 100vh;
- display: grid;
- grid-template-rows: auto 1fr auto;
}
main pre {
box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.2);
padding: 8px;
display: block;
+ overflow-y: scroll;
+ overflow-x: scroll;
+}
+
+pre code {
+ overflow-y: scroll;
+ overflow-x: scroll;
}
main blockquote {
margin-top: 8px;
}
-#logo:hover #path67 { transform: matrix(0.147954, 0, 0, 0.147954, 35, 9); }
-#logo:hover #path31 { transform: translate(21.5px, -2.5px) rotate(60deg); }
-#logo:hover #path1180 { transform: translate(34.25px, 7px) rotate(120deg); }
-#logo:hover #path537 { transform: translate(51.5px, 11.01px) rotate(150deg); }
-#logo:hover #path1062 { transform: translate(36px, 2px) rotate(90deg); }
-#logo :not(#layer2) path { transition: all 1s ease-in-out; }
+@media (min-width: 800px) {
+ #desktop_logo {
+ position: relative;
+ top: 6px;
+ width: 200px;
+ }
+
+ #mobile_logo {
+ display: none;
+ }
+
+ #desktop_logo:hover #path67 { transform: matrix(0.147954, 0, 0, 0.147954, 35, 9); }
+ #desktop_logo:hover #path31 { transform: translate(21.5px, -2.5px) rotate(60deg); }
+ #desktop_logo:hover #path1180 { transform: translate(34.25px, 7px) rotate(120deg); }
+ #desktop_logo:hover #path537 { transform: translate(51.5px, 11.01px) rotate(150deg); }
+ #desktop_logo:hover #path1062 { transform: translate(36px, 2px) rotate(90deg); }
+ #desktop_logo :not(#layer2) path { transition: all 1s ease-in-out; }
+}
+
+@media (max-width: 799px) {
+ #mobile_logo {
+ position: relative;
+ top: 6px;
+ width: 50px;
+ height: 50px;
+ }
+
+ #desktop_logo {
+ display: none;
+ }
+}
+
</div>
<div class="container">
-<div style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
+<div class="split right-40">
<div>
<h2>Overview</h2>
<br />
</ul>
</div>
- <pre class="hljs" style="overflow-y: scroll; width: 40%;"><code class="language-onyx">use core {println}
+ <pre class="hljs"><code class="language-onyx">use core {println}
main :: () {
f := factorial(10);
</div>
</div>
-<!--
-<div class="container light" id="install">
-<h2>Installation</h2>
-<br />
-<h3>Linux</h3>
- <p>
- Onyx is developed and tested on a Debian-based Linux system.
- As I am only one developer, I can only focus on so much. Most of my efforts go towards ensuring Onyx is stable on Linux-based distributions.
- This does include the Windows Subsystem for Linux (WSL), though that is not thoroughly tested.
- </p>
-
-
-<div style="padding-left: 24px">
- <h4>Debian / Ubuntu</h4>
- <p>
- Debian and Ubuntu will soon have the option of adding an APT repository for Onyx.
- </p>
-
- <h4>All Others</h4>
- <p>
- The best way to install Onyx on a Linux system is through directly cloning the Git repository and building it locally.
- You may want to configure the variables at the top of <code>settings.sh</code> to suit your environment.
- </p>
- <pre class="container light merge" style="margin-top: 8px">
-$ git clone https://github.com/onyx-lang/onyx --depth 1
-$ cd onyx
-$ # Configure the top of `./settings.sh` for your system
-$ ./build.sh</pre>
-</div>
-
-<h3>Windows</h3>
-
-<h3>MacOS</h3>
- <p>Currently, Onyx is not supported on MacOS.</p>
-
-</div>
--->
-
{{endblock}}
{{extends "pages/normal_page"}}
--- /dev/null
+<g id="layer2">
+<path
+ style="stroke-width:0.109606"
+ id="path274"
+ d="m -36.54513,-42.509588 0,19.809291 a 1.9061498,1.9061498 120 0 1 -0.953075,1.650774 l -17.155348,9.904645 a 1.9061498,1.9061498 180 0 1 -1.90615,0 l -17.155349,-9.904645 a 1.9061498,1.9061498 60 0 1 -0.953075,-1.650774 l 0,-19.80929 a 1.9061498,1.9061498 120 0 1 0.953075,-1.650775 l 17.155349,-9.904645 a 1.9061498,1.9061498 180 0 1 1.906149,0 l 17.155349,9.904645 a 1.9061498,1.9061498 60 0 1 0.953075,1.650774 z"
+ transform="matrix(0.30740531,0,0,0.30372816,23.782897,16.545361)" />
+</g>
+<g id="layer1">
+<path
+ id="path31"
+ style="fill:#4d4d4d;fill-rule:evenodd;stroke-width:0.0293746"
+ d="M 11.763289,3.914572 1.3881028,9.8522703 a 0.10746311,0.10746311 90.000426 0 0 -1.4e-6,0.1865377 l 4.9883072,2.854897 A 0.32624697,0.32624697 164.99998 0 0 6.8203814,12.774742 L 11.900221,4.0525466 A 0.10062399,0.10062399 45.217132 0 0 11.763289,3.914572 Z" />
+<path
+ id="path537"
+ style="fill:#333333;fill-rule:evenodd;stroke-width:0.029419"
+ d="M 12.162827,4.0018649 6.9729475,12.886067 a 0.0504192,0.0504192 45.290639 0 0 0.068524,0.06922 l 5.1227994,-2.923284 a 0.32119605,0.32119605 120.14455 0 0 0.162004,-0.2789709 l 0,-5.7069276 a 0.08771164,0.08771164 15.146085 0 0 -0.163448,-0.044243 z" />
+<path
+ id="path1180"
+ style="fill:#999999;fill-rule:evenodd;stroke-width:0.0295315"
+ d="m 1.0890783,3.6985577 v 5.6525366 a 0.22068576,0.22068576 30.240095 0 0 0.329423,0.1920375 L 11.783187,3.6743435 a 0.08679074,0.08679074 75.240095 0 0 -0.04276,-0.1623148 l -10.4648157,0 a 0.18652896,0.18652896 135 0 0 -0.186529,0.186529 z" />
+<path
+ id="path1062"
+ style="fill:#4d4d4d;fill-rule:evenodd;stroke-width:0.029571"
+ d="M 6.4864206,0.28046515 1.4340775,3.1336232 a 0.08682156,0.08682156 75.272862 0 0 0.042693,0.1624213 H 11.967016 a 0.04985456,0.04985456 104.72714 0 0 0.02452,-0.093265 L 6.8167272,0.28046515 a 0.33586257,0.33586257 6.6844583e-7 0 0 -0.3303066,0 z" />
+<path
+ style="fill:#ffffff;stroke-width:0.109606"
+ id="path67"
+ d="m 46.304138,13.61792 -1.100363,0.615114 -1.082886,-0.645386 0.01748,-1.2605 1.100363,-0.615113 1.082886,0.645385 z"
+ transform="matrix(0.14795386,0,0,0.14795386,5.4827192,1.6710591)" />
+</g>
<div class="navbar-container">
<navbar>
<a href="/">
- <svg width="200" height="50" viewBox="0 0 64 16" version="1.1" id="logo">
- <g id="layer2">
- <path
- style="stroke-width:0.109606"
- id="path274"
- d="m -36.54513,-42.509588 0,19.809291 a 1.9061498,1.9061498 120 0 1 -0.953075,1.650774 l -17.155348,9.904645 a 1.9061498,1.9061498 180 0 1 -1.90615,0 l -17.155349,-9.904645 a 1.9061498,1.9061498 60 0 1 -0.953075,-1.650774 l 0,-19.80929 a 1.9061498,1.9061498 120 0 1 0.953075,-1.650775 l 17.155349,-9.904645 a 1.9061498,1.9061498 180 0 1 1.906149,0 l 17.155349,9.904645 a 1.9061498,1.9061498 60 0 1 0.953075,1.650774 z"
- transform="matrix(0.30740531,0,0,0.30372816,23.782897,16.545361)" />
- </g>
- <g id="layer1">
- <path
- id="path31"
- style="fill:#4d4d4d;fill-rule:evenodd;stroke-width:0.0293746"
- d="M 11.763289,3.914572 1.3881028,9.8522703 a 0.10746311,0.10746311 90.000426 0 0 -1.4e-6,0.1865377 l 4.9883072,2.854897 A 0.32624697,0.32624697 164.99998 0 0 6.8203814,12.774742 L 11.900221,4.0525466 A 0.10062399,0.10062399 45.217132 0 0 11.763289,3.914572 Z" />
- <path
- id="path537"
- style="fill:#333333;fill-rule:evenodd;stroke-width:0.029419"
- d="M 12.162827,4.0018649 6.9729475,12.886067 a 0.0504192,0.0504192 45.290639 0 0 0.068524,0.06922 l 5.1227994,-2.923284 a 0.32119605,0.32119605 120.14455 0 0 0.162004,-0.2789709 l 0,-5.7069276 a 0.08771164,0.08771164 15.146085 0 0 -0.163448,-0.044243 z" />
- <path
- id="path1180"
- style="fill:#999999;fill-rule:evenodd;stroke-width:0.0295315"
- d="m 1.0890783,3.6985577 v 5.6525366 a 0.22068576,0.22068576 30.240095 0 0 0.329423,0.1920375 L 11.783187,3.6743435 a 0.08679074,0.08679074 75.240095 0 0 -0.04276,-0.1623148 l -10.4648157,0 a 0.18652896,0.18652896 135 0 0 -0.186529,0.186529 z" />
- <path
- id="path1062"
- style="fill:#4d4d4d;fill-rule:evenodd;stroke-width:0.029571"
- d="M 6.4864206,0.28046515 1.4340775,3.1336232 a 0.08682156,0.08682156 75.272862 0 0 0.042693,0.1624213 H 11.967016 a 0.04985456,0.04985456 104.72714 0 0 0.02452,-0.093265 L 6.8167272,0.28046515 a 0.33586257,0.33586257 6.6844583e-7 0 0 -0.3303066,0 z" />
- <path
- style="fill:#ffffff;stroke-width:0.109606"
- id="path67"
- d="m 46.304138,13.61792 -1.100363,0.615114 -1.082886,-0.645386 0.01748,-1.2605 1.100363,-0.615113 1.082886,0.645385 z"
- transform="matrix(0.14795386,0,0,0.14795386,5.4827192,1.6710591)" />
- </g>
+ <svg viewBox="0 0 64 16" version="1.1" id="desktop_logo">
+ {% partial "partials/logo_svg" %}
+ </svg>
+ <svg viewBox="0 0 16 16" version="1.1" id="mobile_logo">
+ {% partial "partials/logo_svg" %}
</svg>
</a>
+ <input type="checkbox" id="mobile-hamburger" />
+ <span class='hamburger'>
+ <span class='hamburger-piece'></span>
+ <span class='hamburger-piece'></span>
+ <span class='hamburger-piece'></span>
+ </span>
+
<div>
<a href="/"><span>Home</span></a>
<a target="_blank" href="/playground/"><span>Try Online</span></a>
projects / onyxlang.io.git / commitdiff