From b7e6129dc2add9bf75a0fa6d3bd61c3fd71851b2 Mon Sep 17 00:00:00 2001 From: jamband Date: Sun, 15 Oct 2023 09:30:41 +0000 Subject: [PATCH] deploy: 900f508f0d56df0eb6d599360723eecfee071b6d --- 404.html | 8 ++++---- _astro/{index.0663cb95.css => index.72d145cd.css} | 2 +- _astro/index.81cb2998.css | 1 + about/index.html | 8 ++++---- accent-color/index.html | 8 ++++---- center-an-element/index.html | 8 ++++---- contact/index.html | 8 ++++---- details/index.html | 10 ++++++---- dialog/index.html | 8 ++++---- flexbox/index.html | 8 ++++---- focus-within/index.html | 8 ++++---- grids/index.html | 8 ++++---- img/index.html | 8 ++++---- index.html | 3 ++- introduction/index.html | 7 ++++--- mask-image/index.html | 8 ++++---- position/index.html | 7 ++++--- subgrid/index.html | 8 ++++---- text-underline/index.html | 8 ++++---- transition/index.html | 8 ++++---- 20 files changed, 74 insertions(+), 68 deletions(-) rename _astro/{index.0663cb95.css => index.72d145cd.css} (73%) create mode 100644 _astro/index.81cb2998.css diff --git a/404.html b/404.html index 1f73796..5b08579 100644 --- a/404.html +++ b/404.html @@ -1,7 +1,7 @@ -not found ･ jamband/denene - -

not found

this page does not exist.

← back to home
\ No newline at end of file diff --git a/_astro/index.0663cb95.css b/_astro/index.72d145cd.css similarity index 73% rename from _astro/index.0663cb95.css rename to _astro/index.72d145cd.css index d6e527e..a09a8a7 100644 --- a/_astro/index.0663cb95.css +++ b/_astro/index.72d145cd.css @@ -1 +1 @@ -@charset "UTF-8";*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}a,button{cursor:revert}ol,ul,menu{list-style:none}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}progress,summary{all:revert}:focus{outline:revert}::marker{content:revert}:root{--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;--gray-100: 236 239 244;--gray-400: 183 180 199;--gray-600: 53 51 60;--gray-700: 36 34 43;--gray-800: 19 17 26;--gray-900: 2 0 9;--pink-300: 215 134 178;--blue-300: 147 197 253;--outline: 0 0 0 .125rem rgb(var(--gray-400))}html{line-height:1.5;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}body{background-color:rgb(var(--gray-800));color:rgb(var(--gray-400));cursor:default;font-family:system-ui,Arial,sans-serif;font-size:1.0625rem;line-height:inherit}h1{color:rgb(var(--gray-100));font-size:3rem;font-weight:700;line-height:1.2}h2{color:rgb(var(--gray-100));font-size:2rem;font-weight:600;line-height:1.2}a{color:rgb(var(--pink-300));cursor:default;display:inline-block;text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.25em}button{border-radius:.25rem;font-weight:700;padding:.5rem 1.1rem}main{display:flex;flex-direction:column;gap:4rem;margin:0 auto;padding:7.25rem 1rem;width:100%}@media (min-width: 768px){main{width:768px}}fieldset{border:1px solid rgb(var(--gray-600));border-radius:.25rem;padding:1rem}legend{font-weight:700;padding:0 1rem}label{display:inline-block;margin-bottom:.2rem;margin-left:.1rem}input[type=text],input[type=password]{background:rgb(var(--gray-900));border:1px solid rgb(var(--gray-600));border-radius:.25rem;display:block;padding:.5rem 1rem}input[type=checkbox],input[type=radio]{appearance:auto;height:15px;width:15px}input[type=range]{appearance:auto}::placeholder{color:rgb(var(--gray-400) / 40%)}pre{background:rgb(var(--gray-700));border-radius:.25rem;color:rgb(var(--gray-100) / 90%);display:block;font-family:var(--font-mono);font-size:.9rem;margin-bottom:.5rem;overflow-x:auto;padding:.75rem 1rem;white-space:pre}:not(pre)>code{background:rgb(var(--gray-600));border-radius:.25em;color:rgb(var(--gray-100) / 90%);font-family:var(--font-mono);font-size:.85rem;padding:.075rem .25rem;white-space:nowrap;word-wrap:break-word}dialog{background:rgb(var(--gray-700));border:1px solid rgb(var(--gray-600));border-radius:.25rem;color:rgb(var(--gray-400));width:90%}@media (min-width: 768px){dialog{width:35rem}}html:has(dialog[open]){overflow:hidden}dialog::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}._container_1isma_1{align-items:center;background-color:rgb(var(--gray-700));bottom:0;box-shadow:0 0 .1rem .05rem rgb(var(--gray-900));display:flex;justify-content:center;padding:.5rem 0;position:fixed;width:100%;z-index:100}._navigation_1isma_14{display:flex;flex-direction:row;gap:1rem}@media (min-width: 768px){._navigation_1isma_14{gap:2rem}}._link_1isma_26{border-radius:.25rem;color:rgb(var(--gray-400));padding:.5rem 1.5rem;text-decoration:none}._link_1isma_26:active{background-color:rgb(var(--gray-600));color:rgb(var(--gray-100))}._container_mardz_1{background-color:rgb(var(--gray-700));box-shadow:0 .05rem .1rem rgb(var(--gray-900));font-family:var(--font-mono);position:fixed;width:100%;z-index:100}._navigation_mardz_10{align-items:center;display:flex;justify-content:center;padding:.5rem 1rem}._link_mardz_17{border-radius:.25rem;padding:.5rem 1.5rem;text-decoration:none}._link_mardz_17:active{background-color:rgb(var(--gray-600))}._account_mardz_27{color:rgb(var(--gray-100));font-size:.85rem;font-weight:700}._repository_mardz_33{color:rgb(var(--pink-300));font-weight:700} +@charset "UTF-8";*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}a,button{cursor:revert}ol,ul,menu{list-style:none}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}progress,summary{all:revert}:focus{outline:revert}::marker{content:revert}:root{--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;--gray-100: 236 239 244;--gray-400: 183 180 199;--gray-600: 53 51 60;--gray-700: 36 34 43;--gray-800: 19 17 26;--gray-900: 2 0 9;--pink-300: 215 134 178;--blue-300: 147 197 253;--outline: 0 0 0 .125rem rgb(var(--gray-400))}html{line-height:1.5;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}body{background-color:rgb(var(--gray-800));color:rgb(var(--gray-400));cursor:default;font-family:system-ui,Arial,sans-serif;font-size:1.0625rem;line-height:inherit}h1{color:rgb(var(--gray-100));font-size:3rem;font-weight:700;line-height:1.2}h2{color:rgb(var(--gray-100));font-size:2rem;font-weight:600;line-height:1.2}a{color:rgb(var(--pink-300));cursor:default;display:inline-block;text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.25em}button{border-radius:.25rem;font-weight:700;padding:.5rem 1.1rem}main{display:flex;flex-direction:column;gap:4rem;margin:0 auto;padding:7.25rem 1rem;width:100%}@media (min-width: 768px){main{width:768px}}fieldset{border:1px solid rgb(var(--gray-600));border-radius:.25rem;padding:1rem}legend{font-weight:700;padding:0 1rem}label{display:inline-block;margin-bottom:.2rem;margin-left:.1rem}input[type=text],input[type=password]{background:rgb(var(--gray-900));border:1px solid rgb(var(--gray-600));border-radius:.25rem;display:block;padding:.5rem 1rem}input[type=checkbox],input[type=radio]{appearance:auto;height:15px;width:15px}input[type=range]{appearance:auto}::placeholder{color:rgb(var(--gray-400) / 40%)}pre{background:rgb(var(--gray-700));border-radius:.25rem;color:rgb(var(--gray-100) / 90%);display:block;font-family:var(--font-mono);font-size:.9rem;margin-bottom:.5rem;overflow-x:auto;padding:.75rem 1rem;white-space:pre}:not(pre)>code{background:rgb(var(--gray-600));border-radius:.25em;color:rgb(var(--gray-100) / 90%);font-family:var(--font-mono);font-size:.85rem;padding:.075rem .25rem;white-space:nowrap;word-wrap:break-word}dialog{background:rgb(var(--gray-700));border:1px solid rgb(var(--gray-600));border-radius:.25rem;color:rgb(var(--gray-400));width:90%}@media (min-width: 768px){dialog{width:35rem}}html:has(dialog[open]){overflow:hidden}dialog::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} diff --git a/_astro/index.81cb2998.css b/_astro/index.81cb2998.css new file mode 100644 index 0000000..ee0220c --- /dev/null +++ b/_astro/index.81cb2998.css @@ -0,0 +1 @@ +._container_1eku0_1{display:inline-block}._button_1eku0_5{border-radius:.25rem;color:rgb(var(--gray-400));list-style:none;padding:.5rem .9rem;white-space:nowrap}._button_1eku0_5::-webkit-details-marker{display:none}._container_1eku0_1[open] ._button_1eku0_5{box-shadow:var(--outline);color:rgb(var(--gray-100))}._container_1eku0_1[open] ._button_1eku0_5:before{background:transparent;content:" ";cursor:initial;display:block;inset:0;position:fixed;z-index:10}._menu_1eku0_32{background:rgb(var(--gray-700));border-radius:.25rem;box-shadow:.1rem .1rem .1rem rgb(var(--gray-900));display:flex;flex-direction:column;margin:.5rem 0 0 -.2rem;min-width:10rem;padding:.25rem 0;position:absolute;z-index:20}._label_1eku0_45{align-items:center;display:flex;gap:.25rem}._dots_1eku0_51{align-items:center;display:flex;padding:.15rem 0}._icon_1eku0_57{height:1.25rem;width:1.25rem}._container_194pm_1{border-bottom:1px solid rgb(var(--gray-600));margin:.25rem 0}._container_6rtc2_1{align-items:center;color:rgb(var(--gray-400));display:inline-flex;padding:.5rem 1.1rem;text-decoration:none}._container_6rtc2_1:focus,._container_6rtc2_1:active{background:rgb(var(--gray-600));color:rgb(var(--gray-100))}._icon_6rtc2_15{height:1rem;margin-left:.1rem;vertical-align:-.125em;width:1rem}._container_flm53_1{align-items:center;color:rgb(var(--gray-400));display:inline-flex;padding:.5rem 1.1rem;text-decoration:none}._container_flm53_1:focus,._container_flm53_1:active{background:rgb(var(--gray-600));color:rgb(var(--gray-100))}._toolsContainer_5q2ib_1{display:flex;flex-direction:column;gap:.5rem}._tools_5q2ib_1{border:1px solid rgb(var(--gray-600));border-radius:.25rem;padding:.25rem .5rem}._tools_5q2ib_1[open]{color:rgb(var(--gray-100));padding-bottom:.5rem}._toolsSummary_5q2ib_18{padding:.25rem 0}._toolsContent_5q2ib_22{background:rgb(var(--gray-700));border-radius:.25rem;color:rgb(var(--gray-400));padding:1rem}._toolsTool_5q2ib_29{color:rgb(var(--gray-100));font-weight:700}._dropdowns_5q2ib_34{display:flex;gap:1rem;margin-top:1rem}._dropdown_5q2ib_34{background:rgb(var(--gray-700));border:1px solid rgb(var(--gray-600))} diff --git a/about/index.html b/about/index.html index 14dbc0d..8f78353 100644 --- a/about/index.html +++ b/about/index.html @@ -1,8 +1,8 @@ -about ･ jamband/denene - -

about

denene is my private playground for html and css.

this website is an open source project. see github jamband/denene diff --git a/accent-color/index.html b/accent-color/index.html index 9020ad7..e6b25ef 100644 --- a/accent-color/index.html +++ b/accent-color/index.html @@ -1,10 +1,10 @@ -accent-color ･ jamband/denene - -

accent-color

the accent-color css property sets the accent color for user-interface controls generated by some elements.

#1
50%50%
#2
50%50%

browser support

chromefirefoxsafari
accent-color939215.4
← back to home

<dialog>

the <dialog> html element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or diff --git a/flexbox/index.html b/flexbox/index.html index 9302630..82abf3c 100644 --- a/flexbox/index.html +++ b/flexbox/index.html @@ -1,10 +1,10 @@ -flexbox ･ jamband/denene - -

flexbox

flexbox is a one-dimensional layout method for arranging items in rows or columns. items flex (expand) to fill additional space or shrink to fit into smaller spaces. this article explains all the fundamentals.

rowe.g. navigation header

homeaboutcontact

columne.g. side navigation

homeaboutcontact

grids and flexbox

the basic difference between css grid layout and css flexbox layout is diff --git a/focus-within/index.html b/focus-within/index.html index ca5c69c..a84f417 100644 --- a/focus-within/index.html +++ b/focus-within/index.html @@ -1,10 +1,10 @@ -:focus-within ･ jamband/denene - -

:focus-within

the :focus-within css pseudo-class matches an element if the element or any of its descendants are focused. in other words, it represents an element that is itself matched by the :focus diff --git a/grids/index.html b/grids/index.html index d951c01..8b0b155 100644 --- a/grids/index.html +++ b/grids/index.html @@ -1,10 +1,10 @@ -grids ･ jamband/denene - -

grids

css grid layout is a two-dimensional layout system for the web. it lets you lay content out in rows and columns. it has many features that make building complex layouts straightforward. this article will explain all diff --git a/img/index.html b/img/index.html index fff1211..3f584c1 100644 --- a/img/index.html +++ b/img/index.html @@ -1,10 +1,10 @@ -<img> ･ jamband/denene - -

<img>

the <img> html element embeds an image into the document. use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content diff --git a/index.html b/index.html index ddc5370..f66a0e9 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ -jamband/denene +jamband/denene

\ No newline at end of file diff --git a/introduction/index.html b/introduction/index.html index bebc2eb..bafcccf 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -1,8 +1,9 @@ -introduction ･ jamband/denene -

introduction

1

+._container_1isma_1{align-items:center;background-color:rgb(var(--gray-700));bottom:0;box-shadow:0 0 .1rem .05rem rgb(var(--gray-900));display:flex;justify-content:center;padding:.5rem 0;position:fixed;width:100%;z-index:100}._navigation_1isma_14{display:flex;flex-direction:row;gap:1rem}@media (min-width: 768px){._navigation_1isma_14{gap:2rem}}._link_1isma_26{border-radius:.25rem;color:rgb(var(--gray-400));padding:.5rem 1.5rem;text-decoration:none}._link_1isma_26:active{background-color:rgb(var(--gray-600));color:rgb(var(--gray-100))}._container_mardz_1{background-color:rgb(var(--gray-700));box-shadow:0 .05rem .1rem rgb(var(--gray-900));font-family:var(--font-mono);position:fixed;width:100%;z-index:100}._navigation_mardz_10{align-items:center;display:flex;justify-content:center;padding:.5rem 1rem}._link_mardz_17{border-radius:.25rem;padding:.5rem 1.5rem;text-decoration:none}._link_mardz_17:active{background-color:rgb(var(--gray-600))}._account_mardz_27{color:rgb(var(--gray-100));font-size:.85rem;font-weight:700}._repository_mardz_33{color:rgb(var(--pink-300));font-weight:700} +

introduction

1

this site does not use cookies. it uses html and css, and a little javascript. it's an experimental site to think about what we can do in such a situation. diff --git a/mask-image/index.html b/mask-image/index.html index 21d39f4..fff4a70 100644 --- a/mask-image/index.html +++ b/mask-image/index.html @@ -1,10 +1,10 @@ -mask-image ･ jamband/denene - -

mask-image

the mask-image css property sets the image that is used as mask layer for an element. by default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. this can be diff --git a/position/index.html b/position/index.html index 4afea9a..1bd2820 100644 --- a/position/index.html +++ b/position/index.html @@ -1,10 +1,11 @@ -position ･ jamband/denene -

position

the position css property sets how an element is +._container_1isma_1{align-items:center;background-color:rgb(var(--gray-700));bottom:0;box-shadow:0 0 .1rem .05rem rgb(var(--gray-900));display:flex;justify-content:center;padding:.5rem 0;position:fixed;width:100%;z-index:100}._navigation_1isma_14{display:flex;flex-direction:row;gap:1rem}@media (min-width: 768px){._navigation_1isma_14{gap:2rem}}._link_1isma_26{border-radius:.25rem;color:rgb(var(--gray-400));padding:.5rem 1.5rem;text-decoration:none}._link_1isma_26:active{background-color:rgb(var(--gray-600));color:rgb(var(--gray-100))}._container_mardz_1{background-color:rgb(var(--gray-700));box-shadow:0 .05rem .1rem rgb(var(--gray-900));font-family:var(--font-mono);position:fixed;width:100%;z-index:100}._navigation_mardz_10{align-items:center;display:flex;justify-content:center;padding:.5rem 1rem}._link_mardz_17{border-radius:.25rem;padding:.5rem 1.5rem;text-decoration:none}._link_mardz_17:active{background-color:rgb(var(--gray-600))}._account_mardz_27{color:rgb(var(--gray-100));font-size:.85rem;font-weight:700}._repository_mardz_33{color:rgb(var(--pink-300));font-weight:700} +

position

the position css property sets how an element is positioned in a document. the top, right, bottom, and left properties determine the final location of positioned elements.

overlay contents

an example of an overlay images using diff --git a/subgrid/index.html b/subgrid/index.html index 0306d2c..012cf90 100644 --- a/subgrid/index.html +++ b/subgrid/index.html @@ -1,10 +1,10 @@ -subgrid ･ jamband/denene - -

subgrid

when you add display: grid to a grid container, only the direct children become grid items and can then be placed on the grid you created. the children of these items display in normal flow.

diff --git a/text-underline/index.html b/text-underline/index.html index 6b7b3a2..c4d17cf 100644 --- a/text-underline/index.html +++ b/text-underline/index.html @@ -1,10 +1,10 @@ -text underline ･ jamband/denene - -

text underline

the text-decoration shorthand css property sets the appearance of decorative lines on text. it is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and diff --git a/transition/index.html b/transition/index.html index 8580686..62b3130 100644 --- a/transition/index.html +++ b/transition/index.html @@ -1,10 +1,10 @@ -transition ･ jamband/denene - -

transition

css transitions is a module of css that lets you create gradual transitions between the values of specific css properties. the behavior of these transitions can be controlled by specifying their timing function,