Skip to content

Commit fb10bcd

Browse files
possumbilitiespossumbilities
authored
correct filepaths for wp inclusion
1 parent 87f7aee commit fb10bcd

File tree

3 files changed

+163
-38
lines changed

3 files changed

+163
-38
lines changed

‎src/chooser/css/chooser.css

+99-3
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@
5959
margin-bottom: -.125em;
6060
}
6161

62+
dl div {
63+
margin-bottom: .8em;
64+
}
65+
6266
dt, dd {
6367
display: inline-block;
6468
}
@@ -94,7 +98,8 @@ ol li:has(.disable) {
9498

9599
.tool header > .tool-icons {
96100
order: -1;
97-
margin: 1.8em 1em 0 0;
101+
/* margin: 1.8em 1em 0 0; */
102+
margin: 0 1em 0 0;
98103
}
99104

100105
.tool .tool-icons svg {
@@ -125,14 +130,103 @@ ol li:has(.disable) {
125130
color: lightgray;
126131
}
127132

128-
#tool-recommendation p {
133+
form#chooser > ol {
134+
position: relative;
135+
136+
list-style: none;
137+
counter-reset: chooser-counter;
138+
}
139+
140+
form#chooser > ol li {
141+
counter-increment: chooser-counter;
142+
}
143+
form#chooser > ol li::before {
144+
position: absolute;
145+
--size: 32px;
146+
left: calc(-1 * var(--size) - 25px);
147+
min-height: 2em;
148+
min-width: 2em;
149+
padding-top: .4em;
150+
box-sizing: border-box;
151+
152+
content: counter(chooser-counter);
153+
font-weight: bold;
154+
border-radius: 200px;
155+
background: var(--vocabulary-neutral-color-lighter-gray);
156+
color: black;
157+
text-align: center;
158+
vertical-align: middle;
159+
160+
}
161+
162+
form#chooser legend {
163+
font-weight: bold;
164+
}
165+
166+
form#chooser fieldset {
167+
margin-bottom: 1em;
168+
}
169+
170+
#tool-recommendation {
171+
margin-bottom: 4em;
172+
173+
font-family: 'Source Sans Pro';
174+
}
175+
176+
#tool-recommendation .tool {
177+
padding: 2em;
178+
179+
background: var(--vocabulary-brand-color-soft-turquoise);
180+
}
181+
182+
#tool-recommendation .tool a {
183+
--underline-background-color: var(--vocabulary-brand-color-soft-turquoise);
184+
}
185+
186+
#tool-recommendation h2 {
187+
/* font-size: 1.8em; */
188+
}
189+
190+
#tool-recommendation h3 {
191+
margin: 0;
192+
193+
font-family: 'Source Sans Pro';
129194
font-size: 1.4em;
130195
}
131196

132-
#mark-your-work p {
197+
#tool-recommendation h4 {
198+
margin: .2em;
199+
200+
font-family: 'Source Sans Pro';
133201
font-size: 1.4em;
134202
}
135203

204+
#tool-recommendation p {
205+
font-size: 1.2em;
206+
}
207+
208+
#tool-recommendation a {
209+
font-weight: 700;
210+
}
211+
212+
#tool-recommendation .conditions-definitions {
213+
margin-bottom: 2em;
214+
215+
font-family: 'Source Sans Pro';
216+
}
217+
218+
#tool-recommendation .conditions-definitions dt {
219+
font-weight: 700;
220+
}
221+
222+
#mark-your-work {
223+
/* border-top: 1px solid var(--vocabulary-neutral-color-lighter-gray); */
224+
}
225+
226+
#mark-your-work p {
227+
font-size: 1.2em;
228+
}
229+
136230
details {
137231
font-family: 'Source Sans Pro';
138232

@@ -183,6 +277,8 @@ body.chooser-page .content {
183277

184278
}
185279

280+
281+
186282
@media (max-width: 705px) {
187283
.content {
188284
display: block;

‎src/chooser/js/chooser.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -296,12 +296,12 @@ function renderMarkingFormats(state) {
296296
//document.querySelector('#mark-your-work .plain-text.mark').appendChild(templateContent);
297297

298298
// set contents of rich text mark
299-
let ccSVG = '<svg><use href="../../vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use></svg>';
300-
let bySVG = '<svg><use href="../../vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use></svg>';
301-
let saSVG = '<svg><use href="../../vocabulary/svg/cc/icons/cc-icons.svg#cc-sa"></use></svg>';
302-
let ncSVG = '<svg><use href="../../vocabulary/svg/cc/icons/cc-icons.svg#cc-nc"></use></svg>';
303-
let ndSVG = '<svg><use href="../../vocabulary/svg/cc/icons/cc-icons.svg#cc-nd"></use></svg>';
304-
let zeroSVG = '<svg><use href="../../vocabulary/svg/cc/icons/cc-icons.svg#cc-zero"></use></svg>';
299+
let ccSVG = '<svg><use href="/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use></svg>';
300+
let bySVG = '<svg><use href="/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use></svg>';
301+
let saSVG = '<svg><use href="/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-sa"></use></svg>';
302+
let ncSVG = '<svg><use href="/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-nc"></use></svg>';
303+
let ndSVG = '<svg><use href="/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-nd"></use></svg>';
304+
let zeroSVG = '<svg><use href="/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-zero"></use></svg>';
305305

306306
const currentTool = state.props.tool;
307307
switch (currentTool) {

‎src/static-templates/static-chooser.php

+58-29
Original file line numberDiff line numberDiff line change
@@ -404,8 +404,10 @@
404404
</div>
405405

406406
<dl class="conditions-definitions">
407-
<dt class="icon-attach cc-zero">CC0</dt>
408-
<dd>This work has been marked as dedicated to the public domain.</dd>
407+
<div>
408+
<dt class="icon-attach cc-zero">CC0</dt>
409+
<dd>This work has been marked as dedicated to the public domain.</dd>
410+
</div>
409411
</dl>
410412

411413
<a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=chooser-v2">See the License Deed</a>
@@ -430,8 +432,10 @@
430432
</div>
431433

432434
<dl class="conditions-definitions">
433-
<dt class="icon-attach cc-by">BY</dt>
434-
<dd>Credit must be given to you, the creator.</dd>
435+
<div>
436+
<dt class="icon-attach cc-by">BY</dt>
437+
<dd>Credit must be given to you, the creator.</dd>
438+
</div>
435439
</dl>
436440

437441
<a href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v2">See the License Deed</a>
@@ -459,11 +463,15 @@
459463
</div>
460464

461465
<dl class="conditions-definitions">
462-
<dt class="icon-attach cc-by">BY</dt>
463-
<dd>Credit must be given to you, the creator.</dd>
466+
<div>
467+
<dt class="icon-attach cc-by">BY</dt>
468+
<dd>Credit must be given to you, the creator.</dd>
469+
</div>
464470

465-
<dt class="icon-attach cc-sa">SA</dt>
466-
<dd>Adaptations must be shared under the same terms.</dd>
471+
<div>
472+
<dt class="icon-attach cc-sa">SA</dt>
473+
<dd>Adaptations must be shared under the same terms.</dd>
474+
</div>
467475
</dl>
468476

469477
<a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v2">See the License Deed</a>
@@ -491,11 +499,16 @@
491499
</div>
492500

493501
<dl class="conditions-definitions">
494-
<dt class="icon-attach cc-by">BY</dt>
495-
<dd>Credit must be given to you, the creator.</dd>
496502

497-
<dt class="icon-attach cc-nd">ND</dt>
498-
<dd>No derivatives or adaptations of your work are permitted.</dd>
503+
<div>
504+
<dt class="icon-attach cc-by">BY</dt>
505+
<dd>Credit must be given to you, the creator.</dd>
506+
</div>
507+
508+
<div>
509+
<dt class="icon-attach cc-nd">ND</dt>
510+
<dd>No derivatives or adaptations of your work are permitted.</dd>
511+
</div>
499512
</dl>
500513

501514
<a href="https://creativecommons.org/licenses/by-nd/4.0/?ref=chooser-v2">See the License Deed</a>
@@ -523,14 +536,18 @@
523536
</div>
524537

525538
<dl class="conditions-definitions">
526-
<dt class="icon-attach cc-by">BY</dt>
527-
<dd>Credit must be given to you, the creator.</dd>
539+
<div>
540+
<dt class="icon-attach cc-by">BY</dt>
541+
<dd>Credit must be given to you, the creator.</dd>
542+
</div>
528543

529-
<dt class="icon-attach cc-nc">NC</dt>
530-
<dd>
531-
Only noncommercial use of your work is permitted.
532-
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
533-
</dd>
544+
<div>
545+
<dt class="icon-attach cc-nc">NC</dt>
546+
<dd>
547+
Only noncommercial use of your work is permitted.
548+
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
549+
</dd>
550+
</div>
534551

535552

536553
</dl>
@@ -563,17 +580,23 @@
563580
</div>
564581

565582
<dl class="conditions-definitions">
566-
<dt class="icon-attach cc-by">BY</dt>
567-
<dd>Credit must be given to you, the creator.</dd>
583+
<div>
584+
<dt class="icon-attach cc-by">BY</dt>
585+
<dd>Credit must be given to you, the creator.</dd>
586+
</div>
568587

588+
<div>
569589
<dt class="icon-attach cc-nc">NC</dt>
570590
<dd>
571591
Only noncommercial use of your work is permitted.
572592
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
573593
</dd>
594+
</div>
574595

575-
<dt class="icon-attach cc-sa">SA</dt>
576-
<dd>Adaptations must be shared under the same terms.</dd>
596+
<div>
597+
<dt class="icon-attach cc-sa">SA</dt>
598+
<dd>Adaptations must be shared under the same terms.</dd>
599+
</div>
577600
</dl>
578601

579602
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v2">See the License Deed</a>
@@ -604,17 +627,23 @@
604627
</div>
605628

606629
<dl class="conditions-definitions">
607-
<dt class="icon-attach cc-by">BY</dt>
608-
<dd>Credit must be given to you, the creator.</dd>
630+
<div>
631+
<dt class="icon-attach cc-by">BY</dt>
632+
<dd>Credit must be given to you, the creator.</dd>
633+
</div>
609634

635+
<div>
610636
<dt class="icon-attach cc-nc">NC</dt>
611-
<dd>
637+
<dd>
612638
Only noncommercial use of your work is permitted.
613639
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
614-
</dd>
640+
</dd>
641+
</div>
615642

616-
<dt class="icon-attach cc-nd">ND</dt>
617-
<dd>No derivatives or adaptations of your work are permitted.</dd>
643+
<div>
644+
<dt class="icon-attach cc-nd">ND</dt>
645+
<dd>No derivatives or adaptations of your work are permitted.</dd>
646+
</div>
618647
</dl>
619648

620649
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v2">See the License Deed</a>

0 commit comments

Comments
 (0)