benkyd/mmc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements...

Browse Source 
added icons from original doc (they still need minifying).
removed highlight demo.
added shift-toggle for opacity.
added escape to end editing.
This commit is contained in:
Rich Boakes
2023-09-20 17:06:51 +01:00
parent 2dab4a6377
commit dc258bbd0d
14 changed files with 201 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

8
README.md
View File

@@ -3,3 +3,11 @@ https://creativecommons.org/licenses/by-sa/3.0/
Designed by Strategyzer AG & Steve Blank
This version by Rich Boakes, University of Portsmouth.
# UI Notes
* Click in any of the boxes to add text.
* To allow for some boxes to be highlighted when demonstrating: a shift-click will toggle each box into a semi-transparent state.
* When editing text in a box it will be highlighted with a purple edge.
* Pressing escape will end any onging edits and remove focus from the current box.

19
i/be.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="34px" height="32px" viewBox="0 0 34 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Group@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Acr173651137319424-1305585">
<g id="Group" transform="translate(1.000000, 1.000000)">
<g id="Group-4" transform="translate(10.004200, 10.329400)">
<path d="M1.241,1.0019 C0.809,1.0059 0.461,1.3599 0.465,1.7919 C0.465,1.7949 0.465,1.7969 0.465,1.7999 C0.484,2.2349 0.841,2.5789 1.277,2.5829 C1.713,2.5749 2.061,2.2149 2.053,1.7779 L2.053,1.7779 C2.038,1.3519 1.696,1.0099 1.27,0.9949" id="Fill-1" fill="#000000"></path>
<path d="M1.241,1.0019 C0.809,1.0059 0.461,1.3599 0.465,1.7919 C0.465,1.7949 0.465,1.7969 0.465,1.7999 C0.484,2.2349 0.841,2.5789 1.277,2.5829 C1.713,2.5749 2.061,2.2149 2.053,1.7779 L2.053,1.7779 C2.038,1.3519 1.696,1.0099 1.27,0.9949" id="Stroke-3" stroke="#000000" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<polyline id="Stroke-5" stroke="#000000" stroke-width="1.25" points="11.1877 21.3401 3.9807 21.3401 3.9807 18.3081"></polyline>
<line x1="7.0993" y1="25.4213" x2="11.1873" y2="21.3403" id="Stroke-7" stroke="#000000" stroke-width="1.25" stroke-linecap="round"></line>
<path d="M3.981,18.308 L1.674,18.308 C0.75,18.308 -1.13686838e-13,17.559 -1.13686838e-13,16.634 C-1.13686838e-13,16.388 0.054,16.145 0.158,15.923 L4.872,7.106 C7.689,1.998 12.546,0 17.309,0 C25.48,-0.001 32.104,6.622 32.106,14.792 C32.107,22.963 25.484,29.588 17.313,29.589 C13.492,29.589 9.819,28.111 7.063,25.464" id="Stroke-9" stroke="#000000" stroke-width="1.25" stroke-linecap="square"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

11
i/bs.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="29px" viewBox="0 0 32 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Stroke 1@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g id="Acr1736511373194243240783" stroke="#000000" stroke-width="1.25">
<path d="M16.1781582,27.2298727 L3.2451582,13.8968727 C0.916158202,11.6168727 0.334158202,8.0908727 1.8051582,5.1828727 C3.7481582,1.4008727 8.3901582,-0.0911273004 12.1721582,1.8528727 C12.8691582,2.2108727 13.5071582,2.6728727 14.0651582,3.2228727 L16.1781582,5.1498727 L18.2911582,3.2228727 C21.3241582,0.2368727 26.2041582,0.2748727 29.1901582,3.3078727 C29.1901582,3.3088727 29.1911582,3.3098727 29.1911582,3.3098727 C29.7251582,3.8648727 30.1751582,4.4968727 30.5251582,5.1828727 C32.0061582,8.0868727 31.4341582,11.6158727 29.1111582,13.9028727 L16.1781582,27.2298727 Z" id="Stroke-1"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

19
i/de.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="39px" height="30px" viewBox="0 0 39 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Group@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Acr173651137319424835489" stroke="#000000" stroke-width="1.25">
<g id="Group" transform="translate(1.000000, 1.000000)">
<path d="M12.1743,19.4785 C14.4153,19.4785 16.2323,21.2955 16.2323,23.5365 C16.2323,25.7775 14.4153,27.5945 12.1743,27.5945 C9.9333,27.5945 8.1163,25.7775 8.1163,23.5365 C8.1163,21.2955 9.9333,19.4785 12.1743,19.4785 Z" id="Stroke-1" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M30.03,19.4785 C32.271,19.4785 34.088,21.2955 34.088,23.5365 C34.088,25.7775 32.271,27.5945 30.03,27.5945 C27.789,27.5945 25.972,25.7775 25.972,23.5365 C25.972,21.2955 27.789,19.4785 30.03,19.4785 Z" id="Stroke-3" stroke-linecap="round" stroke-linejoin="round"></path>
<polyline id="Stroke-5" stroke-linecap="square" points="12.9859 16.232 12.9859 -2.84217094e-14 37.3349 -2.84217094e-14 37.3349 22.725 34.0879 22.725"></polyline>
<line x1="16.2324" y1="22.725" x2="25.9714" y2="22.725" id="Stroke-7" stroke-linecap="square"></line>
<path d="M7.2855,24.3482 L0.0005,24.3482 L0.0005,12.9852 C4.7385,5.9862 2.9075,6.4922 6.4925,6.4922 L12.9855,6.4922" id="Stroke-9" stroke-linecap="square"></path>
<line x1="0" y1="21.1018" x2="8.116" y2="21.1018" id="Stroke-11" stroke-linecap="square"></line>
<path d="M0,13.7972 L6.493,13.7972 C7.389,13.7972 8.116,13.0702 8.116,12.1742 L8.116,6.4922" id="Stroke-13" stroke-linecap="square"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

18
i/if.svg Normal file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="33px" height="34px" viewBox="0 0 33 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Acr173651137319424-950093" stroke="#000000" stroke-width="1.25">
<g id="Group" transform="translate(1.000000, 1.000000)">
<path d="M4.893,32.1537 L16.776,13.2807 C17.366,12.5087 18.471,12.3617 19.243,12.9527 C19.367,13.0467 19.477,13.1577 19.572,13.2807 L31.454,32.1537 L4.893,32.1537 Z" id="Stroke-1"></path>
<path d="M4.893,32.1537 L0,32.1537 L4.893,24.4647 C5.235,24.0397 5.745,23.7847 6.291,23.7657 C6.836,23.7847 7.347,24.0397 7.689,24.4647 L8.598,26.2827" id="Stroke-3"></path>
<path d="M11.1209,22.2616 L14.3969,25.0326 C14.9519,25.5016 15.7739,25.4666 16.2879,24.9526 L17.1849,24.0556 C17.7309,23.5096 18.6159,23.5096 19.1619,24.0556 L20.0599,24.9526 C20.5739,25.4666 21.3959,25.5016 21.9509,25.0326 L25.2339,22.2616" id="Stroke-5"></path>
<line x1="18.1737" y1="12.582" x2="18.1737" y2="5.68434189e-14" id="Stroke-7"></line>
<path d="M18.1737,0.0003 L25.8627,0.0003 C26.2487,0.0003 26.5617,0.3133 26.5617,0.6993 L26.5617,6.2913 C26.5617,6.6773 26.2487,6.9903 25.8627,6.9903 L18.1737,6.9903" id="Stroke-9"></path>
<path d="M26.5616,2.7962 L30.0566,2.7962 C30.4426,2.7962 30.7556,3.1092 30.7556,3.4952 L30.7556,9.0872 C30.7556,9.4732 30.4426,9.7862 30.0566,9.7862 L25.8626,9.7862 C25.4766,9.7862 25.1636,9.4732 25.1636,9.0872 L25.1636,6.9902" id="Stroke-11"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

11
i/ka.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="35px" viewBox="0 0 17 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Stroke 1@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g id="Acr173651137319424825277" stroke="#000000" stroke-width="1.25">
<polygon id="Stroke-1" points="2.32 31.36 6.26 16.847 1 16.847 4.96 1 15.52 1 8.927 11.56 15.527 11.56"></polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 659 B

14
i/kp.svg Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Group@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g id="Acr173651137319424-276973" stroke="#000000" stroke-width="1.25">
<g id="Group" transform="translate(1.000000, 1.000000)">
<path d="M19.261911,25.7035599 C15.984911,30.5175599 9.42591104,31.7635599 4.61191104,28.4855599 C-0.202088956,25.2085599 -1.44808896,18.6495599 1.82891104,13.8355599 C5.10591104,9.02155994 11.665911,7.77555994 16.479911,11.0535599 C18.400911,12.3615599 19.836911,14.2685599 20.562911,16.4765599" id="Stroke-1"></path>
<path d="M11.050411,4.61445994 C14.326411,-0.200540055 20.885411,-1.44854006 25.700411,1.82745994 C30.514411,5.10345994 31.762411,11.6624599 28.486411,16.4774599 C25.211411,21.2924599 18.652411,22.5394599 13.837411,19.2644599 C11.914411,17.9564599 10.478411,16.0494599 9.75241104,13.8414599" id="Stroke-3"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

21
i/kr.svg Normal file
View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Group@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Acr173651137319424-2370987" stroke="#000000" stroke-width="1.25">
<g id="Group" transform="translate(1.000000, 1.000000)">
<path d="M29.9416,29.7395809 C29.9416,26.2395809 27.1046,23.4025809 23.6046,23.4025809 C20.1046,23.4025809 17.2676,26.2395809 17.2676,29.7395809 L29.9416,29.7395809 Z" id="Stroke-1" stroke-linecap="square"></path>
<path d="M27.4772,16.7240809 C27.4772,18.8630809 25.7432,20.5970809 23.6042,20.5970809 C21.4662,20.5970809 19.7322,18.8630809 19.7322,16.7240809 C19.7322,14.5850809 21.4662,12.8510809 23.6042,12.8510809 C25.7432,12.8510809 27.4772,14.5850809 27.4772,16.7240809 Z" id="Stroke-3" stroke-linecap="round" stroke-linejoin="round"></path>
<polyline id="Stroke-5" stroke-linecap="square" points="15.626 20.2582809 9.877 20.2582809 9.877 16.5702809 2.84217094e-14 16.5702809 2.84217094e-14 29.7392809 17.268 29.7392809"></polyline>
<polygon id="Stroke-7" stroke-linecap="square" points="7.9015 16.5703809 1.9755 16.5703809 3.0625 6.18938093 7.0135 6.18938093"></polygon>
<line x1="3.261" y1="10.4170809" x2="7.286" y2="10.4170809" id="Stroke-9" stroke-linecap="square"></line>
<path d="M5.2732,3.15198093 C11.3802,-4.99101907 17.4872,5.86598093 23.5942,0.437980933 C16.1302,10.6159809 10.7022,-0.241019067 5.2732,3.15198093 Z" id="Stroke-11" stroke-linecap="square" stroke-linejoin="bevel"></path>
<line x1="3.9525" y1="25.2006809" x2="6.0045" y2="25.2006809" id="Stroke-13" stroke-linecap="square"></line>
<line x1="10.1086" y1="25.2006809" x2="12.1606" y2="25.2006809" id="Stroke-15" stroke-linecap="square"></line>
<line x1="3.9525" y1="21.1092809" x2="6.0045" y2="21.1092809" id="Stroke-17" stroke-linecap="square"></line>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

18
i/mb.svg Normal file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="34px" height="35px" viewBox="0 0 34 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Group@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Acr1736511373194241467691" stroke="#000000" stroke-width="1.25">
<g id="Group" transform="translate(1.000000, 1.000000)">
<path d="M7.0844,9.9123 C7.0844,11.4753 8.3514,12.7413 9.9134,12.7413 C11.4764,12.7413 12.7434,11.4753 12.7434,9.9123 C12.7434,8.3493 11.4764,7.0833 9.9134,7.0833 C8.3514,7.0833 7.0844,8.3493 7.0844,9.9123 Z" id="Stroke-1" stroke-linecap="round" stroke-linejoin="round"></path>
<line x1="5.68434189e-14" y1="-2.84217094e-14" x2="9.195" y2="9.195" id="Stroke-3" stroke-linecap="square"></line>
<polyline id="Stroke-5" stroke-linecap="square" points="2.8505 3.6734 3.0015 14.5854 20.7425 32.3274 32.1685 20.9014 14.4585 3.1904 3.4885 2.8424"></polyline>
<line x1="16.9518" y1="16.9649" x2="15.7298" y2="15.7429" id="Stroke-7" stroke-linecap="square"></line>
<path d="M18.988,14.9287 L16.007,17.9097 C15.404,18.5127 15.404,19.4897 16.007,20.0927 C16.449,20.5417 17.123,20.6717 17.701,20.4187 L21.081,18.3907 C21.861,18.0447 22.772,18.3967 23.118,19.1757 C23.379,19.7667 23.246,20.4567 22.783,20.9067 L19.802,23.8877" id="Stroke-9" stroke-linecap="square"></path>
<line x1="23.0604" y1="23.0734" x2="21.8384" y2="21.8514" id="Stroke-11" stroke-linecap="square"></line>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

17
i/vp.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="31px" height="34px" viewBox="0 0 31 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Group@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Acr1736511373194249935101" stroke="#000000" stroke-width="1.25">
<g id="Group" transform="translate(1.000000, 1.000000)">
<line x1="14.6430703" y1="30.4600982" x2="14.6430703" y2="8.50109818" id="Stroke-1" stroke-linecap="square"></line>
<path d="M21.5820352,5.05097958 C19.5370352,6.65297958 17.1910352,7.82697958 14.6820352,8.50097958 C15.3550352,5.99197958 16.5280352,3.64497958 18.1320352,1.60097958 C20.2770352,-0.544020423 21.4920352,-0.212020423 22.4510352,0.736979577 C23.4100352,1.68597958 23.7270352,2.90597958 21.5820352,5.05097958 Z" id="Stroke-3"></path>
<path d="M7.7039223,5.05097958 C9.7489223,6.65297958 12.0949223,7.82697958 14.6039223,8.50097958 C13.9309223,5.99197958 12.7579223,3.64497958 11.1539223,1.60097958 C9.0089223,-0.544020423 7.7939223,-0.212020423 6.8349223,0.736979577 C5.8769223,1.68597958 5.5589223,2.90597958 7.7039223,5.05097958 Z" id="Stroke-5" stroke-linecap="square"></path>
<polygon id="Stroke-7" stroke-linecap="square" points="2.44 31.4632053 26.839 31.4632053 26.839 16.8242053 2.44 16.8242053"></polygon>
<polygon id="Stroke-9" stroke-linecap="square" points="0 16.8242053 29.279 16.8242053 29.279 9.50420528 0 9.50420528"></polygon>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

21
index.html
View File

@@ -4,19 +4,20 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Your Layout</title>
<script defer src="script.js"></script>
<title>Portsmouth MMC</title>
<div class="grid-container">
<header>The Mission Model Canvas</header>
<div class="grid-item" id="kp"><h2>Key Partners</h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="ka"><h2>Key Activities</h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="vp"><h2>Value Propositions</h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item hi" id="bs"><h2>Buy-in Support</h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item hi" id="be"><h2>Beneficiaries</h2><section class="e" contenteditable="true" autofocus></section></div>
<div class="grid-item" id="kr"><h2>Key Resources</h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item hi" id="de"><h2>Deployment</h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="mb"><h2>Mission Budget/Cost</h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="if"><h2>Mission Achievement/Impact Factors</h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="kp"><h2>Key Partners <img src="i/kp.svg" alt=""></h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="ka"><h2>Key Activities <img src="i/ka.svg" alt=""></h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="vp"><h2>Value Propositions <img src="i/vp.svg" alt=""></h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="bs"><h2>Buy-in Support <img src="i/bs.svg" alt=""></h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="be"><h2>Beneficiaries <img src="i/be.svg" alt=""></h2><section class="e" contenteditable="true" autofocus></section></div>
<div class="grid-item" id="kr"><h2>Key Resources <img src="i/kr.svg" alt=""></h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="de"><h2>Deployment <img src="i/de.svg" alt=""></h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="mb"><h2>Mission Budget/Cost <img src="i/mb.svg" alt=""></h2><section class="e" contenteditable="true"></section></div>
<div class="grid-item" id="if"><h2>Mission Achievement/Impact Factors <img src="i/if.svg" alt=""></h2><section class="e" contenteditable="true"></section></div>
<footer>
<p>This work is licensed under the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)</a>
<p><span>Designed by:</span> Strategyzer AG & Steve Blank. Built for the web by Uni. of Portsmouth.

18
script.js Normal file
View File

@@ -0,0 +1,18 @@
const gridItems = document.querySelectorAll('.grid-item');
function toggleItem(event) {
if (event.metaKey || event.shiftKey) {
const toggleThis = event.target.closest('.grid-item');
toggleThis?.classList.toggle('lo');
}
}
for (const item of gridItems) {
item.addEventListener('click', toggleItem);
}
document.addEventListener('keydown', event => {
if (event.key === 'Escape') {
document.activeElement.blur();
}
});

17
styles.css
View File

@@ -90,10 +90,25 @@ footer span {
height: 100%;
outline: none;
}
h2 {
padding-bottom: 0.5em;
font-size: clamp(1.4dvw, 1rem, 1rem);
}
h2 img {
height: 1em;
float: right;
}
.hi {
box-shadow: inset 0 0.25em 0.5em #F7F;
box-shadow: inset 0 0 1em #F0F7;
}
.lo {
opacity: 0.5
}
.grid-item:has(*:focus) {
box-shadow: inset 0 0 1em #F0F7;
}