Skip to content

Commit 132a396

Browse files
willnorriswillnorris
committed
update colors and tweak detail layout
Signed-off-by: Will Norris <[email protected]>
1 parent 31b1ce1 commit 132a396

File tree

3 files changed

+59
-50
lines changed

3 files changed

+59
-50
lines changed

‎static/base.css

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
/* 2 */
1717
border-style: solid;
1818
/* 2 */
19-
border-color: #E6E4E2;
19+
border-color: rgba(238, 235, 234);
2020
/* 2 */
2121
}
2222

@@ -354,15 +354,15 @@ textarea {
354354
input::-moz-placeholder, textarea::-moz-placeholder {
355355
opacity: 1;
356356
/* 1 */
357-
color: #B6B0AD;
357+
color: rgba(175, 172, 171);
358358
/* 2 */
359359
}
360360

361361
input::placeholder,
362362
textarea::placeholder {
363363
opacity: 1;
364364
/* 1 */
365-
color: #B6B0AD;
365+
color: rgba(175, 172, 171);
366366
/* 2 */
367367
}
368368

@@ -424,7 +424,7 @@ video {
424424
-moz-appearance: none;
425425
appearance: none;
426426
background-color: #fff;
427-
border-color: #9F9995;
427+
border-color: rgba(112, 110, 109);
428428
border-width: 1px;
429429
border-radius: 0px;
430430
padding-top: 0.5rem;
@@ -442,20 +442,20 @@ video {
442442
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
443443
--tw-ring-offset-width: 0px;
444444
--tw-ring-offset-color: #fff;
445-
--tw-ring-color: #4D78C8;
445+
--tw-ring-color: rgba(63, 93, 179);
446446
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
447447
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
448448
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
449-
border-color: #4D78C8;
449+
border-color: rgba(63, 93, 179);
450450
}
451451

452452
input::-moz-placeholder, textarea::-moz-placeholder {
453-
color: #9F9995;
453+
color: rgba(112, 110, 109);
454454
opacity: 1;
455455
}
456456

457457
input::placeholder,textarea::placeholder {
458-
color: #9F9995;
458+
color: rgba(112, 110, 109);
459459
opacity: 1;
460460
}
461461

@@ -473,7 +473,7 @@ input::placeholder,textarea::placeholder {
473473
}
474474

475475
select {
476-
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239F9995' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
476+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgba(112%2c 110%2c 109)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
477477
background-position: right 0.5rem center;
478478
background-repeat: no-repeat;
479479
background-size: 1.5em 1.5em;
@@ -508,9 +508,9 @@ select {
508508
flex-shrink: 0;
509509
height: 1rem;
510510
width: 1rem;
511-
color: #4D78C8;
511+
color: rgba(63, 93, 179);
512512
background-color: #fff;
513-
border-color: #9F9995;
513+
border-color: rgba(112, 110, 109);
514514
border-width: 1px;
515515
--tw-shadow: 0 0 #0000;
516516
}
@@ -529,7 +529,7 @@ select {
529529
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
530530
--tw-ring-offset-width: 2px;
531531
--tw-ring-offset-color: #fff;
532-
--tw-ring-color: #4D78C8;
532+
--tw-ring-color: rgba(63, 93, 179);
533533
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
534534
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
535535
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -607,7 +607,7 @@ select {
607607
--tw-ring-inset: ;
608608
--tw-ring-offset-width: 0px;
609609
--tw-ring-offset-color: #fff;
610-
--tw-ring-color: rgb(74 125 221 / 0.5);
610+
--tw-ring-color: rgb(75 112 204 / 0.5);
611611
--tw-ring-offset-shadow: 0 0 #0000;
612612
--tw-ring-shadow: 0 0 #0000;
613613
--tw-shadow: 0 0 #0000;
@@ -654,7 +654,7 @@ select {
654654
--tw-ring-inset: ;
655655
--tw-ring-offset-width: 0px;
656656
--tw-ring-offset-color: #fff;
657-
--tw-ring-color: rgb(74 125 221 / 0.5);
657+
--tw-ring-color: rgb(75 112 204 / 0.5);
658658
--tw-ring-offset-shadow: 0 0 #0000;
659659
--tw-ring-shadow: 0 0 #0000;
660660
--tw-shadow: 0 0 #0000;
@@ -1193,6 +1193,11 @@ select {
11931193
margin-bottom: 0.5rem;
11941194
}
11951195

1196+
.my-4 {
1197+
margin-top: 1rem;
1198+
margin-bottom: 1rem;
1199+
}
1200+
11961201
.mx-4 {
11971202
margin-left: 1rem;
11981203
margin-right: 1rem;
@@ -1328,27 +1333,27 @@ select {
13281333

13291334
.border-gray-200 {
13301335
--tw-border-opacity: 1;
1331-
border-color: rgb(230 228 226 / var(--tw-border-opacity));
1336+
border-color: rgb(238 235 234 / var(--tw-border-opacity));
13321337
}
13331338

13341339
.border-gray-300 {
13351340
--tw-border-opacity: 1;
1336-
border-color: rgb(214 210 204 / var(--tw-border-opacity));
1341+
border-color: rgb(218 214 213 / var(--tw-border-opacity));
13371342
}
13381343

13391344
.border-blue-500 {
13401345
--tw-border-opacity: 1;
1341-
border-color: rgb(74 125 221 / var(--tw-border-opacity));
1346+
border-color: rgb(75 112 204 / var(--tw-border-opacity));
13421347
}
13431348

13441349
.bg-gray-100 {
13451350
--tw-bg-opacity: 1;
1346-
background-color: rgb(246 244 242 / var(--tw-bg-opacity));
1351+
background-color: rgb(247 245 244 / var(--tw-bg-opacity));
13471352
}
13481353

13491354
.bg-blue-500 {
13501355
--tw-bg-opacity: 1;
1351-
background-color: rgb(74 125 221 / var(--tw-bg-opacity));
1356+
background-color: rgb(75 112 204 / var(--tw-bg-opacity));
13521357
}
13531358

13541359
.p-2 {
@@ -1448,17 +1453,17 @@ select {
14481453

14491454
.text-gray-500 {
14501455
--tw-text-opacity: 1;
1451-
color: rgb(159 153 149 / var(--tw-text-opacity));
1456+
color: rgb(112 110 109 / var(--tw-text-opacity));
14521457
}
14531458

14541459
.text-gray-700 {
14551460
--tw-text-opacity: 1;
1456-
color: rgb(71 70 69 / var(--tw-text-opacity));
1461+
color: rgb(46 45 45 / var(--tw-text-opacity));
14571462
}
14581463

14591464
.text-blue-600 {
14601465
--tw-text-opacity: 1;
1461-
color: rgb(77 120 200 / var(--tw-text-opacity));
1466+
color: rgb(63 93 179 / var(--tw-text-opacity));
14621467
}
14631468

14641469
.text-white {
@@ -1468,36 +1473,36 @@ select {
14681473

14691474
.placeholder\:text-gray-400::-moz-placeholder {
14701475
--tw-text-opacity: 1;
1471-
color: rgb(182 176 173 / var(--tw-text-opacity));
1476+
color: rgb(175 172 171 / var(--tw-text-opacity));
14721477
}
14731478

14741479
.placeholder\:text-gray-400::placeholder {
14751480
--tw-text-opacity: 1;
1476-
color: rgb(182 176 173 / var(--tw-text-opacity));
1481+
color: rgb(175 172 171 / var(--tw-text-opacity));
14771482
}
14781483

14791484
.hover\:border-blue-600:hover {
14801485
--tw-border-opacity: 1;
1481-
border-color: rgb(77 120 200 / var(--tw-border-opacity));
1486+
border-color: rgb(63 93 179 / var(--tw-border-opacity));
14821487
}
14831488

14841489
.hover\:bg-gray-100:hover {
14851490
--tw-bg-opacity: 1;
1486-
background-color: rgb(246 244 242 / var(--tw-bg-opacity));
1491+
background-color: rgb(247 245 244 / var(--tw-bg-opacity));
14871492
}
14881493

14891494
.hover\:bg-blue-600:hover {
14901495
--tw-bg-opacity: 1;
1491-
background-color: rgb(77 120 200 / var(--tw-bg-opacity));
1496+
background-color: rgb(63 93 179 / var(--tw-bg-opacity));
14921497
}
14931498

14941499
.hover\:fill-blue-500:hover {
1495-
fill: #4a7ddd;
1500+
fill: rgba(75, 112, 204);
14961501
}
14971502

14981503
.hover\:text-blue-500:hover {
14991504
--tw-text-opacity: 1;
1500-
color: rgb(74 125 221 / var(--tw-text-opacity));
1505+
color: rgb(75 112 204 / var(--tw-text-opacity));
15011506
}
15021507

15031508
.hover\:underline:hover {
@@ -1506,7 +1511,7 @@ select {
15061511

15071512
.disabled\:bg-gray-100:disabled {
15081513
--tw-bg-opacity: 1;
1509-
background-color: rgb(246 244 242 / var(--tw-bg-opacity));
1514+
background-color: rgb(247 245 244 / var(--tw-bg-opacity));
15101515
}
15111516

15121517
.group:hover .group-hover\:visible {
@@ -1515,7 +1520,7 @@ select {
15151520

15161521
.group:hover .group-hover\:text-gray-700 {
15171522
--tw-text-opacity: 1;
1518-
color: rgb(71 70 69 / var(--tw-text-opacity));
1523+
color: rgb(46 45 45 / var(--tw-text-opacity));
15191524
}
15201525

15211526
@media (min-width: 768px) {

‎tailwind.config.js

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,30 @@ module.exports = {
33
theme: {
44
colors: {
55
blue: {
6-
50: "rgba(228, 233, 240, 0.15)",
7-
100: "rgba(220, 233, 242, 0.6)",
8-
200: "rgba(43, 123, 185, 0.15)",
9-
300: "#80bdff",
10-
500: "#4a7ddd",
11-
600: "#4D78C8",
12-
700: "#496495",
13-
800: "#2A4067",
6+
0: "rgba(240, 245, 255)",
7+
50: "rgba(206, 222, 253)",
8+
100: "rgba(173, 199, 252)",
9+
200: "rgba(133, 170, 245)",
10+
300: "rgba(108, 148, 236)",
11+
400: "rgba(90, 130, 222)",
12+
500: "rgba(75, 112, 204)",
13+
600: "rgba(63, 93, 179)",
14+
700: "rgba(50, 73, 148)",
15+
800: "rgba(37, 53, 112)",
16+
900: "rgba(25, 34, 74)",
1417
},
1518
gray: {
16-
50: "#faf9f8",
17-
100: "#f6f4f2",
18-
200: "#E6E4E2",
19-
300: "#D6D2CC",
20-
400: "#B6B0AD",
21-
500: "#9F9995",
22-
600: "#666361",
23-
700: "#474645",
24-
800: "#343433",
25-
900: "#242424",
19+
0: "rgba(250, 249, 248)",
20+
50: "rgba(249, 247, 246)",
21+
100: "rgba(247, 245, 244)",
22+
200: "rgba(238, 235, 234)",
23+
300: "rgba(218, 214, 213)",
24+
400: "rgba(175, 172, 171)",
25+
500: "rgba(112, 110, 109)",
26+
600: "rgba(68, 67, 66)",
27+
700: "rgba(46, 45, 45)",
28+
800: "rgba(35, 34, 34)",
29+
900: "rgba(31, 30, 30)",
2630
},
2731
white: '#fff',
2832
current: 'currentColor',

‎tmpl/detail.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h2 class="text-xl font-bold pb-2">Link Details</h2>
2626
<dd>{{.Link.LastEdit.Format "Jan _2, 2006 3:04pm MST"}}</dd>
2727
</dl>
2828

29-
<button type=submit class="py-2 px-4 my-2 rounded-md bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600">Update</button>
29+
<button type=submit class="py-2 px-4 my-4 rounded-md bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600">Update</button>
3030
</form>
3131

3232
{{ else }}

0 commit comments

Comments
 (0)