crunch SVGs into the CSS

2023-08-27 17:01:27 +02:00 · 2023-08-27 17:01:27 +02:00 · dccfddaec1
commit dccfddaec1
parent cebc6edfe7
15 changed files with 102 additions and 24 deletions
--- a/content/about.tree
+++ b/content/about.tree
@ -18,7 +18,7 @@
        - daknus on SoundCloud

        % id = "01H89P3CH8PB76G26M4T8P6QDZ"
-        - limiter sometimes jokingly on Discord
+        + limiter sometimes jokingly on Discord

            % id = "01H89P3CH8Z4MXQ0C9EWV01DPX"
            + limitre, which is British for limiter
--- a/static/css/main.css
+++ b/static/css/main.css
@ -3,10 +3,26 @@
 :root {
    --background-color: rgb(255, 253, 246);
    --text-color: #55423e;
+    --link-color: #004ec8;
+    --link-color-visited: #6c2380;

    --shaded-background: rgba(0, 0, 0, 5%);
    --border-1: rgba(0, 0, 0, 15%);
    --border-2: rgba(0, 0, 0, 30%);
+    --hover: rgba(0, 0, 0, 15%);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: rgb(30, 40, 53);
+        --text-color: #d7cdbf;
+        --link-color: #93cce8;
+        --link-color-visited: #f7afde;
+
+        --shaded-background: #f7e5df0c;
+        --border-1: #f7e5df26;
+        --border-2: #f7e5df4d;
+    }
 }

 /* Article-style layout. Center everything and give it a maximum width */
@ -71,7 +87,7 @@ h1 {
    --recursive-casl: 0.0;
    --recursive-wght: 900;

-    font-size: 2.5rem;
+    font-size: 3.5rem;
 }

 h2 {
@ -150,11 +166,11 @@ img {
 /* Fix the default blue and ugly purple links normally have */

 a {
-    color: #004ec8;
+    color: var(--link-color);
 }

 a:visited {
-    color: #6c2380;
+    color: var(--link-color-visited);
 }

 /* Make blockquotes a bit prettier */
--- a/static/css/tree.css
+++ b/static/css/tree.css
@ -48,12 +48,14 @@
 }

 .tree li>div:first-child:hover {
-    border-bottom: 1px solid rgba(0, 0, 0, 15%);
+    border-bottom: 1px solid var(--border-1);
    margin-bottom: -1px;
 }

 .tree details>summary {
-    background-image: url('../svg/expand.svg');
+    background-image:
+        /* expand */
+        url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtNyA1di0zaC0ydjNoLTN2MmgzdjNoMnYtM2gzdi0yeiIgZmlsbD0iIzU1NDIzZSIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
    background-repeat: no-repeat;
    background-position: var(--tree-icon-position);
    padding-left: var(--tree-icon-space);
@ -63,15 +65,17 @@
    padding-bottom: var(--tree-hover-expansion);
    border-radius: 8px;

-    background-color: rgba(0, 0, 0, 0%);
+    background-color: transparent;
 }

 .tree details>summary:hover {
-    background-color: rgba(0, 0, 0, 5%);
+    background-color: var(--shaded-background);
 }

 .tree li>div {
-    background-image: url('../svg/leaf.svg');
+    background-image:
+        /* leaf */
+        url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIGZpbGw9IiM1NTQyM2UiIGZpbGwtb3BhY2l0eT0iLjUiIHI9IjIiLz48L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: var(--tree-icon-position);
    padding-left: var(--tree-icon-space);
@ -79,14 +83,16 @@
 }

 .tree details[open]>summary {
-    background-image: url('../svg/collapse.svg');
+    background-image:
+        /* collapse */
+        url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMgNmg2IiBzdHJva2U9IiM1NTQyM2UiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
 }

@media (hover: none) {

    .tree li>div:first-child,
    .tree li>details>summary:first-child {
-        border-bottom: 1px solid rgba(0, 0, 0, 15%);
+        border-bottom: 1px solid var(--border-1);
    }

    .tree details>summary {
@ -132,11 +138,15 @@


 .tree .icon-permalink {
-    background-image: url("../svg/permalink.svg");
+    background-image:
+        /* permalink */
+        url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcuNjU2ODYgMiAxLjQxNDIxIDEuNDE0MjJjLjY4MDUxLjY4MDUxIDEuMDY0NTMgMS41NDUyMSAxLjE1MjEzIDIuNDMzNjIuODg4NC4wODc2IDEuNzUzMS40NzE2NSAyLjQzMzcgMS4xNTIxNmwxLjQxNDIgMS40MTQyMmMxLjU2MjEgMS41NjIwOSAxLjU2MjEgNC4wOTQ3OCAwIDUuNjU2ODhzLTQuMDk0NzkgMS41NjIxLTUuNjU2ODggMGwtMS40MTQyMi0xLjQxNDJjLS42ODA1MS0uNjgwNi0xLjA2NDU2LTEuNTQ1My0xLjE1MjE2LTIuNDMzNy0uODg4NDEtLjA4NzYtMS43NTMxMS0uNDcxNjItMi40MzM2Mi0xLjE1MjEzbC0xLjQxNDIyLTEuNDE0MjFjLTEuNTYyMDk0LTEuNTYyMS0xLjU2MjA5NC00LjA5NDc2IDAtNS42NTY4NiAxLjU2MjEtMS41NjIwOTQgNC4wOTQ3Ni0xLjU2MjA5NCA1LjY1Njg2IDB6bS42MTggNy42ODkwN2MtLjE0NDMuMDg1MjItLjI5MjgxLjE2MDYxLS40NDQ1NS4yMjYxNi4wMjA4My40ODI1Ny4yMTU0Ni45NTg5Ny41ODM5MSAxLjMyNzM3bDEuNDE0MjEgMS40MTQzYy43ODEwNy43ODEgMi4wNDczNy43ODEgMi44Mjg0NyAwIC43ODEtLjc4MTEuNzgxLTIuMDQ3NCAwLTIuODI4NDdsLTEuNDE0My0xLjQxNDIxYy0uMzY4NC0uMzY4NDUtLjg0NDgtLjU2MzA4LTEuMzI3MzctLjU4MzkxLS4wNjU1NS4xNTE3My0uMTQwOTMuMzAwMjQtLjIyNjE2LjQ0NDU0bDEuODQ2NDMgMS44NDY0NS0xLjQxNDIgMS40MTQyem0tLjYxOC00Ljg2MDY0Yy4zNjg0NC4zNjg0NS41NjMwOC44NDQ4OC41ODM5MSAxLjMyNzQyLS4xNTE3NC4wNjU1NC0uMzAwMjQuMTQwOTMtLjQ0NDU0LjIyNjE1bC0xLjkxNzU0LTEuOTE3NTMtMS40MTQyMSAxLjQxNDIxIDEuOTE3NTMgMS45MTc1M2MtLjA4NTIzLjE0NDMxLS4xNjA2MS4yOTI4Mi0uMjI2MTYuNDQ0NTYtLjQ4MjU0LS4wMjA4My0uOTU4OTctLjIxNTQ3LTEuMzI3NDItLjU4MzkxbC0xLjQxNDIxLTEuNDE0MjJjLS43ODEwNS0uNzgxMDUtLjc4MTA1LTIuMDQ3MzcgMC0yLjgyODQyczIuMDQ3MzctLjc4MTA1IDIuODI4NDIgMHoiIGZpbGw9IiM1NTQyM2UiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
 }

 .tree .icon-go {
-    background-image: url("../svg/go.svg");
+    background-image:
+        /* go */
+        url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjU4NTggNy0yLjI5Mjg5LTIuMjkyODkgMS40MTQyMS0xLjQxNDIyIDQuNzA3MDggNC43MDcxMS00LjcwNzA4IDQuNzA3MS0xLjQxNDIxLTEuNDE0MiAyLjI5Mjg5LTIuMjkyOWgtNy41ODU4di0yeiIgZmlsbD0iIzU1NDIzZSIvPjwvc3ZnPg==");
 }

 .tree a.navigate {
@ -154,8 +164,40 @@

 .tree :target>details>summary,
 .tree :target>div {
-    border-bottom: 1px dashed rgba(0, 0, 0, 30%);
+    border-bottom: 1px dashed var(--border-2);
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
 }
+
+@media (prefers-color-scheme: dark) {
+    .tree details>summary {
+        background-image:
+            /* expand */
+            url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtNyA1di0zaC0ydjNoLTN2MmgzdjNoMnYtM2gzdi0yeiIgZmlsbD0iI2Q3Y2RiZiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
+    }
+
+    .tree li>div {
+        background-image:
+            /* leaf */
+            url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIGZpbGw9IiNkN2NkYmYiIGZpbGwtb3BhY2l0eT0iLjUiIHI9IjIiLz48L3N2Zz4=');
+    }
+
+    .tree details[open]>summary {
+        background-image:
+            /* collapse */
+            url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMgNmg2IiBzdHJva2U9IiNkN2NkYmYiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
+    }
+
+    .tree .icon-permalink {
+        background-image:
+            /* permalink */
+            url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcuNjU2ODYgMiAxLjQxNDIxIDEuNDE0MjJjLjY4MDUxLjY4MDUxIDEuMDY0NTMgMS41NDUyMSAxLjE1MjEzIDIuNDMzNjIuODg4NC4wODc2IDEuNzUzMS40NzE2NSAyLjQzMzcgMS4xNTIxNmwxLjQxNDIgMS40MTQyMmMxLjU2MjEgMS41NjIwOSAxLjU2MjEgNC4wOTQ3OCAwIDUuNjU2ODhzLTQuMDk0NzkgMS41NjIxLTUuNjU2ODggMGwtMS40MTQyMi0xLjQxNDJjLS42ODA1MS0uNjgwNi0xLjA2NDU2LTEuNTQ1My0xLjE1MjE2LTIuNDMzNy0uODg4NDEtLjA4NzYtMS43NTMxMS0uNDcxNjItMi40MzM2Mi0xLjE1MjEzbC0xLjQxNDIyLTEuNDE0MjFjLTEuNTYyMDk0LTEuNTYyMS0xLjU2MjA5NC00LjA5NDc2IDAtNS42NTY4NiAxLjU2MjEtMS41NjIwOTQgNC4wOTQ3Ni0xLjU2MjA5NCA1LjY1Njg2IDB6bS42MTggNy42ODkwN2MtLjE0NDMuMDg1MjItLjI5MjgxLjE2MDYxLS40NDQ1NS4yMjYxNi4wMjA4My40ODI1Ny4yMTU0Ni45NTg5Ny41ODM5MSAxLjMyNzM3bDEuNDE0MjEgMS40MTQzYy43ODEwNy43ODEgMi4wNDczNy43ODEgMi44Mjg0NyAwIC43ODEtLjc4MTEuNzgxLTIuMDQ3NCAwLTIuODI4NDdsLTEuNDE0My0xLjQxNDIxYy0uMzY4NC0uMzY4NDUtLjg0NDgtLjU2MzA4LTEuMzI3MzctLjU4MzkxLS4wNjU1NS4xNTE3My0uMTQwOTMuMzAwMjQtLjIyNjE2LjQ0NDU0bDEuODQ2NDMgMS44NDY0NS0xLjQxNDIgMS40MTQyem0tLjYxOC00Ljg2MDY0Yy4zNjg0NC4zNjg0NS41NjMwOC44NDQ4OC41ODM5MSAxLjMyNzQyLS4xNTE3NC4wNjU1NC0uMzAwMjQuMTQwOTMtLjQ0NDU0LjIyNjE1bC0xLjkxNzU0LTEuOTE3NTMtMS40MTQyMSAxLjQxNDIxIDEuOTE3NTMgMS45MTc1M2MtLjA4NTIzLjE0NDMxLS4xNjA2MS4yOTI4Mi0uMjI2MTYuNDQ0NTYtLjQ4MjU0LS4wMjA4My0uOTU4OTctLjIxNTQ3LTEuMzI3NDItLjU4MzkxbC0xLjQxNDIxLTEuNDE0MjJjLS43ODEwNS0uNzgxMDUtLjc4MTA1LTIuMDQ3MzcgMC0yLjgyODQyczIuMDQ3MzctLjc4MTA1IDIuODI4NDIgMHoiIGZpbGw9IiNkN2NkYmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
+    }
+
+    .tree .icon-go {
+        background-image:
+            /* go */
+            url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjU4NTggNy0yLjI5Mjg5LTIuMjkyODkgMS40MTQyMS0xLjQxNDIyIDQuNzA3MDggNC43MDcxMS00LjcwNzA4IDQuNzA3MS0xLjQxNDIxLTEuNDE0MiAyLjI5Mjg5LTIuMjkyOWgtNy41ODU4di0yeiIgZmlsbD0iI2Q3Y2RiZiIvPjwvc3ZnPg==");
+    }
+}
--- a/static/svg/collapse.svg
+++ b/static/svg/collapse.svg
@ -1,3 +0,0 @@
-<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-    <line x1="3" y1="6" x2="9" y2="6" stroke="currentColor" stroke-width="2" stroke-opacity="0.3" />
-</svg>
--- a/static/svg/dark/collapse.svg
+++ b/static/svg/dark/collapse.svg
@ -0,0 +1,3 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+    <line x1="3" y1="6" x2="9" y2="6" stroke="#d7cdbf" stroke-width="2" stroke-opacity="0.5" />
+</svg>
--- a/static/svg/dark/expand.svg
+++ b/static/svg/dark/expand.svg
@ -1,4 +1,4 @@
 <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V2H5V5H2V7H5V10H7V7H10V5H7Z" fill="currentColor"
-        fill-opacity="0.3" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V2H5V5H2V7H5V10H7V7H10V5H7Z" fill="#d7cdbf"
+        fill-opacity="0.5" />
 </svg>
--- a/static/svg/dark/go.svg
+++ b/static/svg/dark/go.svg
@ -1,5 +1,5 @@
 <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
    <path
        d="M10.5858 7L8.29291 4.70711L9.70712 3.29289L14.4142 8L9.70712 12.7071L8.29291 11.2929L10.5858 9H3V7H10.5858Z"
-        fill="currentColor" />
+        fill="#d7cdbf" />
 </svg>
--- a/static/svg/dark/leaf.svg
+++ b/static/svg/dark/leaf.svg
@ -0,0 +1,3 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="6" cy="6" r="2" fill="#d7cdbf" fill-opacity="0.5" />
+</svg>
--- a/static/svg/dark/permalink.svg
+++ b/static/svg/dark/permalink.svg
@ -1,5 +1,5 @@
 <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd"
        d="M7.65686 2L9.07107 3.41422C9.75158 4.09473 10.1356 4.95943 10.2232 5.84784C11.1116 5.93544 11.9763 6.31949 12.6569 7L14.0711 8.41422C15.6332 9.97631 15.6332 12.509 14.0711 14.0711C12.509 15.6332 9.97631 15.6332 8.41422 14.0711L7 12.6569C6.31949 11.9763 5.93544 11.1116 5.84784 10.2232C4.95943 10.1356 4.09473 9.75158 3.41422 9.07107L2 7.65686C0.437906 6.09476 0.437906 3.5621 2 2C3.5621 0.437906 6.09476 0.437906 7.65686 2ZM8.27486 9.68907C8.13056 9.77429 7.98205 9.84968 7.83031 9.91523C7.85114 10.3978 8.04577 10.8742 8.41422 11.2426L9.82843 12.6569C10.6095 13.4379 11.8758 13.4379 12.6569 12.6569C13.4379 11.8758 13.4379 10.6095 12.6569 9.82843L11.2426 8.41422C10.8742 8.04577 10.3978 7.85114 9.91523 7.83031C9.84968 7.98204 9.7743 8.13055 9.68907 8.27485L11.5355 10.1213L10.1213 11.5355L8.27486 9.68907ZM7.65686 4.82843C8.0253 5.19688 8.21994 5.67331 8.24077 6.15585C8.08903 6.22139 7.94053 6.29678 7.79623 6.382L5.87869 4.46447L4.46448 5.87868L6.38201 7.79621C6.29678 7.94052 6.2214 8.08903 6.15585 8.24077C5.67331 8.21994 5.19688 8.0253 4.82843 7.65686L3.41422 6.24264C2.63317 5.46159 2.63317 4.19527 3.41422 3.41422C4.19527 2.63317 5.46159 2.63317 6.24264 3.41422L7.65686 4.82843Z"
-        fill="currentColor" />
+        fill="#d7cdbf" />
 </svg>
--- a/static/svg/leaf.svg
+++ b/static/svg/leaf.svg
@ -1,3 +0,0 @@
-<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="6" cy="6" r="2" fill="currentColor" fill-opacity="0.3" />
-</svg>
--- a/static/svg/light/collapse.svg
+++ b/static/svg/light/collapse.svg
@ -0,0 +1,3 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+    <line x1="3" y1="6" x2="9" y2="6" stroke="#55423e" stroke-width="2" stroke-opacity="0.5" />
+</svg>
--- a/static/svg/light/expand.svg
+++ b/static/svg/light/expand.svg
@ -0,0 +1,4 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V2H5V5H2V7H5V10H7V7H10V5H7Z" fill="#55423e"
+        fill-opacity="0.5" />
+</svg>
--- a/static/svg/light/go.svg
+++ b/static/svg/light/go.svg
@ -0,0 +1,5 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M10.5858 7L8.29291 4.70711L9.70712 3.29289L14.4142 8L9.70712 12.7071L8.29291 11.2929L10.5858 9H3V7H10.5858Z"
+        fill="#55423e" />
+</svg>
--- a/static/svg/light/leaf.svg
+++ b/static/svg/light/leaf.svg
@ -0,0 +1,3 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="6" cy="6" r="2" fill="#55423e" fill-opacity="0.5" />
+</svg>
--- a/static/svg/light/permalink.svg
+++ b/static/svg/light/permalink.svg
@ -0,0 +1,5 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        d="M7.65686 2L9.07107 3.41422C9.75158 4.09473 10.1356 4.95943 10.2232 5.84784C11.1116 5.93544 11.9763 6.31949 12.6569 7L14.0711 8.41422C15.6332 9.97631 15.6332 12.509 14.0711 14.0711C12.509 15.6332 9.97631 15.6332 8.41422 14.0711L7 12.6569C6.31949 11.9763 5.93544 11.1116 5.84784 10.2232C4.95943 10.1356 4.09473 9.75158 3.41422 9.07107L2 7.65686C0.437906 6.09476 0.437906 3.5621 2 2C3.5621 0.437906 6.09476 0.437906 7.65686 2ZM8.27486 9.68907C8.13056 9.77429 7.98205 9.84968 7.83031 9.91523C7.85114 10.3978 8.04577 10.8742 8.41422 11.2426L9.82843 12.6569C10.6095 13.4379 11.8758 13.4379 12.6569 12.6569C13.4379 11.8758 13.4379 10.6095 12.6569 9.82843L11.2426 8.41422C10.8742 8.04577 10.3978 7.85114 9.91523 7.83031C9.84968 7.98204 9.7743 8.13055 9.68907 8.27485L11.5355 10.1213L10.1213 11.5355L8.27486 9.68907ZM7.65686 4.82843C8.0253 5.19688 8.21994 5.67331 8.24077 6.15585C8.08903 6.22139 7.94053 6.29678 7.79623 6.382L5.87869 4.46447L4.46448 5.87868L6.38201 7.79621C6.29678 7.94052 6.2214 8.08903 6.15585 8.24077C5.67331 8.21994 5.19688 8.0253 4.82843 7.65686L3.41422 6.24264C2.63317 5.46159 2.63317 4.19527 3.41422 3.41422C4.19527 2.63317 5.46159 2.63317 6.24264 3.41422L7.65686 4.82843Z"
+        fill="#55423e" />
+</svg>