diff options
| -rw-r--r-- | .zs/layout.html | 5 | ||||
| -rw-r--r-- | assets/css/main.css | 25 | ||||
| -rw-r--r-- | assets/triangle.svg | 22 |
3 files changed, 50 insertions, 2 deletions
diff --git a/.zs/layout.html b/.zs/layout.html index 7fd44b4..1c83ff0 100644 --- a/.zs/layout.html +++ b/.zs/layout.html @@ -24,7 +24,10 @@ </head> <body> - <div id="lower"></div> + <div id="deco"> + <div id="rainbow"></div> + <div id="features"></div> + </div> <div id="upper"> <nav> <ul> diff --git a/assets/css/main.css b/assets/css/main.css index c940d99..c1954f0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -40,6 +40,7 @@ body { font-family: "Aporetic", "Open Sans", sans-serif; background-color: var(--bg); + background-repeat: repeat; color: var(--fg); display: flex; gap: var(--padding-big); @@ -49,7 +50,29 @@ body { position: relative; } -#lower { +#deco { + overflow: hidden; + position: fixed; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: -1; +} + +#features { + content: ""; + width: 200%; + height: 200%; + background-image: url("/assets/triangle.svg"); + position: absolute; + transform: translate(-50%, -50%) rotate(22.5deg); + left: 50%; + top: 50%; + z-index: -2; +} + +#rainbow { --bar-size: 0.3em; position: absolute; z-index: -1; diff --git a/assets/triangle.svg b/assets/triangle.svg new file mode 100644 index 0000000..87439fc --- /dev/null +++ b/assets/triangle.svg @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="48" + height="48" + viewBox="0 0 12.7 12.7" + version="1.1" + id="svg1" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs1" /> + <g + id="layer1"> + <path + style="fill:#0c1116;fill-opacity:1;stroke:none;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16;stroke-opacity:1" + id="path1" + d="m 5.6178411,3.720292 -3.8741438,0 1.9370719,-3.35510698 z" + transform="matrix(0.81953592,0,0,0.94631856,3.3334774,4.4169186)" /> + </g> +</svg> |
