Initial commit

css/main.css

@@ -0,0 +1,199 @@
+body {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+html {
+  height: -webkit-fill-available;
+}
+
+main {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.main-window {
+  width: 100%;
+  min-height: 100vh;
+  padding: 2em 2em 0 3em;
+}
+
+.window-active {
+  display: block;
+}
+
+.window-hidden {
+  display: none;
+}
+
+.form-actors-number {
+  width: 4em;
+}
+
+.paddivs div {
+  margin-bottom: 1em;
+}
+
+select.form-intent {
+  min-width: 6.5em;
+  max-width: 62em;
+}
+
+select.form-willingness {
+  min-width: 9em;
+  max-width: 62em;
+}
+
+select.form-capability {
+  min-width: 9em;
+  max-width: 62em;
+}
+
+select.form-novelty {
+  min-width: 9em;
+  max-width: 62em;
+}
+
+.grid-square {
+  border: 1px solid black;
+  font-size: 1.5em;
+  font-weight: bolder;
+}
+
+.grid-container div {
+  text-align: center;
+  padding: 1em;
+}
+
+.grid-container .intent {
+  writing-mode: sideways-lr;
+  text-orientation: sideways;
+}
+
+.grid-container .capability {
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 5fr 5fr 5fr 5fr 5fr;
+  grid-template-rows: 3fr 3fr 3fr 3fr 3fr 1fr 1fr;
+  gap: 1px 1px;
+  grid-template-areas:
+    "intent intent-five one-five two-five three-five four-five five-five"
+    "intent intent-four one-four two-four three-four four-four five-four"
+    "intent intent-three one-three two-three three-three four-three five-three"
+    "intent intent-two one-two two-two three-two four-two five-two"
+    "intent intent-one one-one two-one three-one four-one five-one"
+    "intent . capability-one capability-two capability-three capability-four capability-five"
+    ". capability capability capability capability capability capability";
+}
+.intent { grid-area: intent; }
+.capability { grid-area: capability; }
+
+.intent-one { grid-area: intent-one }
+.intent-two { grid-area: intent-two }
+.intent-three { grid-area: intent-three }
+.intent-four { grid-area: intent-four }
+.intent-five { grid-area: intent-five }
+.capability-one { grid-area: capability-one }
+.capability-two { grid-area: capability-two }
+.capability-three { grid-area: capability-three }
+.capability-four { grid-area: capability-four }
+.capability-five { grid-area: capability-five }
+
+.one-one { grid-area: one-one; background-color: #deebf7; }
+.one-two { grid-area: one-two; background-color: #deebf7; }
+.one-three { grid-area: one-three; background-color: #e2f0d9; }
+.one-four { grid-area: one-four; background-color: #e2f0d9; }
+.one-five { grid-area: one-five; background-color: #fff2cc; }
+.two-five { grid-area: two-five; background-color: #fbe5d6; }
+.two-four { grid-area: two-four; background-color: #fff2cc; }
+.two-three { grid-area: two-three; background-color: #e2f0d9; }
+.two-two { grid-area: two-two; background-color: #e2f0d9; }
+.two-one { grid-area: two-one; background-color: #deebf7; }
+.three-one { grid-area: three-one; background-color: #e2f0d9; }
+.four-one { grid-area: four-one; background-color: #e2f0d9; }
+.five-one { grid-area: five-one; background-color: #fff2cc; }
+.three-two { grid-area: three-two; background-color: #e2f0d9; }
+.four-two { grid-area: four-two; background-color: #fff2cc; }
+.five-two { grid-area: five-two; background-color: #fbe5d6; }
+.three-three { grid-area: three-three; background-color: #fff2cc; }
+.five-three { grid-area: five-three; background-color: #fbe5d6; }
+.four-three { grid-area: four-three; background-color: #fbe5d6; }
+.three-four { grid-area: three-four; background-color: #fbe5d6; }
+.four-four { grid-area: four-four; background-color: #fbe5d6; }
+.five-four { grid-area: five-four; background-color: #fec6c6; }
+.three-five { grid-area: three-five; background-color: #fbe5d6; }
+.four-five { grid-area: four-five; background-color: #fec6c6; }
+.five-five { grid-area: five-five; background-color: #fec6c6; }
+
+.b-example-divider {
+  flex-shrink: 0;
+  width: 1.5rem;
+  min-height: 100vh;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.bi {
+  vertical-align: -.125em;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+.dropdown-toggle { outline: 0; }
+
+.nav-flush .nav-link {
+  border-radius: 0;
+}
+
+.btn-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: .25rem .5rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, .65);
+  background-color: transparent;
+  border: 0;
+}
+.btn-toggle:hover,
+.btn-toggle:focus {
+  color: rgba(0, 0, 0, .85);
+  background-color: #d2f4ea;
+}
+
+.btn-toggle::before {
+  width: 1.25em;
+  line-height: 0;
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  transition: transform .35s ease;
+  transform-origin: .5em 50%;
+}
+
+.btn-toggle[aria-expanded="true"] {
+  color: rgba(0, 0, 0, .85);
+}
+.btn-toggle[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+
+.btn-toggle-nav a {
+  display: inline-flex;
+  padding: .1875rem .5rem;
+  margin-top: .125rem;
+  margin-left: 1.25rem;
+  text-decoration: none;
+}
+.btn-toggle-nav a:hover,
+.btn-toggle-nav a:focus {
+  background-color: #d2f4ea;
+}
+
+.scrollarea {
+  overflow-y: auto;
+}
+
+.fw-semibold { font-weight: 600; }
+.lh-tight { line-height: 1.25; }