Skip to content

Commit fba9478

Browse files
sydsetersydseter
authored
Merge pull request #1425 from OWASP/cumulus-css-adjustments
Fix css styling for the Cumulus cars
2 parents 4dcea89 + 6c14563 commit fba9478

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+201
-17
lines changed

‎copi.owasp.org/assets/css/cards.scss‎

Lines changed: 201 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1251,28 +1251,27 @@ $wildcard-mobile-color: rgb(251, 182, 124);
12511251
padding-left: 20px;
12521252
display: grid;
12531253
grid-template-columns: [left-start] 24px [left-end category-start] 120px [category-end];
1254-
grid-template-rows: [header-start] 26px [header-end content-start] 213px [content-end];
1254+
grid-template-rows: [header-start] 26px [header-end content-start] 225px [content-end];
12551255
grid-template-areas:
12561256
"header header"
12571257
"content content";
1258-
column-gap: 9px;
1259-
row-gap: 5px;
1258+
background-position: 10px 10px;
1259+
background-size: 200px 293px;
12601260

12611261
.left-value {
1262+
12621263
display: grid;
12631264
position: unset;
12641265
padding: unset;
1265-
margin: unset;
12661266
justify-items: start;
12671267
grid-area: header;
1268-
12691268
color: rgb(35, 31, 32);
12701269
font-family: "Josefin Sans Bold";
12711270
font-size: 40px;
12721271
font-weight: 600;
12731272
text-align: center;
12741273
line-height: 14px;
1275-
1274+
margin-top: 5px;
12761275
}
12771276

12781277
.category {
@@ -1325,7 +1324,7 @@ $wildcard-mobile-color: rgb(251, 182, 124);
13251324

13261325
.description {
13271326
font-family: "Josefin Sans Regular";
1328-
font-size: 17px;
1327+
font-size: 18px;
13291328
line-height: 1.3em;
13301329
text-align: center;
13311330
position: unset;
@@ -1336,44 +1335,229 @@ $wildcard-mobile-color: rgb(251, 182, 124);
13361335

13371336

13381337
&.access-secrets {
1339-
background: no-repeat -2px 3px url("/images/cumulus/secrets-and-access.png") rgb(239, 134, 101);
1340-
background-size: 203px 287px;
13411338

13421339
.left-bar {
13431340
color: rgb(244, 206, 200);
13441341
}
1342+
&.n2 {
1343+
background: url("/images/cumulus/secrets-and-access-2.png") no-repeat rgb(239, 134, 101);
1344+
}
1345+
&.n3 {
1346+
background: url("/images/cumulus/secrets-and-access-3.png") no-repeat rgb(239, 134, 101);
1347+
}
1348+
&.n4 {
1349+
background: url("/images/cumulus/secrets-and-access-4.png") no-repeat rgb(239, 134, 101);
1350+
}
1351+
&.n5 {
1352+
background: url("/images/cumulus/secrets-and-access-5.png") no-repeat rgb(239, 134, 101);
1353+
}
1354+
&.n6 {
1355+
background: url("/images/cumulus/secrets-and-access-6.png") no-repeat rgb(239, 134, 101);
1356+
}
1357+
&.n7 {
1358+
background: url("/images/cumulus/secrets-and-access-7.png") no-repeat rgb(239, 134, 101);
1359+
}
1360+
&.n8 {
1361+
background: url("/images/cumulus/secrets-and-access-8.png") no-repeat rgb(239, 134, 101);
1362+
}
1363+
&.n9 {
1364+
background: url("/images/cumulus/secrets-and-access-9.png") no-repeat rgb(239, 134, 101);
1365+
}
1366+
&.n10 {
1367+
background: url("/images/cumulus/secrets-and-access-x.png") no-repeat rgb(239, 134, 101);
1368+
}
1369+
&.nJ {
1370+
background: url("/images/cumulus/secrets-and-access-j.png") no-repeat rgb(239, 134, 101);
1371+
}
1372+
&.nQ {
1373+
background: url("/images/cumulus/secrets-and-access-q.png") no-repeat rgb(239, 134, 101);
1374+
}
1375+
&.nK {
1376+
background: url("/images/cumulus/secrets-and-access-k.png") no-repeat rgb(239, 134, 101);
1377+
}
1378+
&.nA {
1379+
background: url("/images/cumulus/secrets-and-access-a.png") no-repeat rgb(239, 134, 101);
1380+
}
13451381
}
13461382

13471383
&.delivery {
1348-
background: no-repeat -2px 3px url("/images/cumulus/delivery.png") rgb(87, 193, 235);
1349-
background-size: 203px 287px;
13501384
.left-bar {
13511385
color: rgb(293, 228, 241);
13521386
}
1387+
&.n2 {
1388+
background: url("/images/cumulus/delivery-2.png") no-repeat rgb(87, 193, 235);
1389+
}
1390+
&.n3 {
1391+
background: url("/images/cumulus/delivery-3.png") no-repeat rgb(87, 193, 235);
1392+
}
1393+
&.n4 {
1394+
background: url("/images/cumulus/delivery-4.png") no-repeat rgb(87, 193, 235);
1395+
}
1396+
&.n5 {
1397+
background: url("/images/cumulus/delivery-5.png") no-repeat rgb(87, 193, 235);
1398+
}
1399+
&.n6 {
1400+
background: url("/images/cumulus/delivery-6.png") no-repeat rgb(87, 193, 235);
1401+
}
1402+
&.n7 {
1403+
background: url("/images/cumulus/delivery-7.png") no-repeat rgb(87, 193, 235);
1404+
}
1405+
&.n8 {
1406+
background: url("/images/cumulus/delivery-8.png") no-repeat rgb(87, 193, 235);
1407+
}
1408+
&.n9 {
1409+
background: url("/images/cumulus/delivery-9.png") no-repeat rgb(87, 193, 235);
1410+
}
1411+
&.n10 {
1412+
background: url("/images/cumulus/delivery-x.png") no-repeat rgb(87, 193, 235);
1413+
}
1414+
&.nJ {
1415+
background: url("/images/cumulus/delivery-j.png") no-repeat rgb(87, 193, 235);
1416+
}
1417+
&.nQ {
1418+
background: url("/images/cumulus/delivery-q.png") no-repeat rgb(87, 193, 235);
1419+
}
1420+
&.nK {
1421+
background: url("/images/cumulus/delivery-k.png") no-repeat rgb(87, 193, 235);
1422+
}
1423+
&.nA {
1424+
background: url("/images/cumulus/delivery-a.png") no-repeat rgb(87, 193, 235);
1425+
}
13531426
}
13541427

13551428
&.recovery {
1356-
background: no-repeat -2px 3px url("/images/cumulus/recovery.png") rgb(69, 176, 147);
1357-
background-size: 203px 287px;
13581429
.left-bar {
13591430
color: rgb(188, 224, 214);
13601431
}
1432+
&.n2 {
1433+
background: url("/images/cumulus/recovery-2.png") no-repeat rgb(69, 176, 147);
1434+
}
1435+
&.n3 {
1436+
background: url("/images/cumulus/recovery-3.png") no-repeat rgb(69, 176, 147);
1437+
}
1438+
&.n4 {
1439+
background: url("/images/cumulus/recovery-4.png") no-repeat rgb(69, 176, 147);
1440+
}
1441+
&.n5 {
1442+
background: url("/images/cumulus/recovery-5.png") no-repeat rgb(69, 176, 147);
1443+
}
1444+
&.n6 {
1445+
background: url("/images/cumulus/recovery-6.png") no-repeat rgb(69, 176, 147);
1446+
}
1447+
&.n7 {
1448+
background: url("/images/cumulus/recovery-7.png") no-repeat rgb(69, 176, 147);
1449+
}
1450+
&.n8 {
1451+
background: url("/images/cumulus/recovery-8.png") no-repeat rgb(69, 176, 147);
1452+
}
1453+
&.n9 {
1454+
background: url("/images/cumulus/recovery-9.png") no-repeat rgb(69, 176, 147);
1455+
}
1456+
&.n10 {
1457+
background: url("/images/cumulus/recovery-x.png") no-repeat rgb(69, 176, 147);
1458+
}
1459+
&.nJ {
1460+
background: url("/images/cumulus/recovery-j.png") no-repeat rgb(69, 176, 147);
1461+
}
1462+
&.nQ {
1463+
background: url("/images/cumulus/recovery-q.png") no-repeat rgb(69, 176, 147);
1464+
}
1465+
&.nK {
1466+
background: url("/images/cumulus/recovery-k.png") no-repeat rgb(69, 176, 147);
1467+
}
1468+
&.nA {
1469+
background: url("/images/cumulus/recovery-a.png") no-repeat rgb(69, 176, 147);
1470+
}
13611471
}
13621472

13631473
&.monitoring {
1364-
background: no-repeat -2px 3px url("/images/cumulus/monitoring.png") rgb(243, 179, 93);
1365-
background-size: 203px 287px;
13661474
.left-bar {
13671475
color: rgb(248, 227, 193);
13681476
}
1477+
&.n2 {
1478+
background: url("/images/cumulus/monitoring-2.png") no-repeat rgb(243, 179, 93);
1479+
}
1480+
&.n3 {
1481+
background: url("/images/cumulus/monitoring-3.png") no-repeat rgb(243, 179, 93);
1482+
}
1483+
&.n4 {
1484+
background: url("/images/cumulus/monitoring-4.png") no-repeat rgb(243, 179, 93);
1485+
}
1486+
&.n5 {
1487+
background: url("/images/cumulus/monitoring-5.png") no-repeat rgb(243, 179, 93);
1488+
}
1489+
&.n6 {
1490+
background: url("/images/cumulus/monitoring-6.png") no-repeat rgb(243, 179, 93);
1491+
}
1492+
&.n7 {
1493+
background: url("/images/cumulus/monitoring-7.png") no-repeat rgb(243, 179, 93);
1494+
}
1495+
&.n8 {
1496+
background: url("/images/cumulus/monitoring-8.png") no-repeat rgb(243, 179, 93);
1497+
}
1498+
&.n9 {
1499+
background: url("/images/cumulus/monitoring-9.png") no-repeat rgb(243, 179, 93);
1500+
}
1501+
&.n10 {
1502+
background: url("/images/cumulus/monitoring-x.png") no-repeat rgb(243, 179, 93);
1503+
}
1504+
&.nJ {
1505+
background: url("/images/cumulus/monitoring-j.png") no-repeat rgb(243, 179, 93);
1506+
}
1507+
&.nQ {
1508+
background: url("/images/cumulus/monitoring-q.png") no-repeat rgb(243, 179, 93);
1509+
}
1510+
&.nK {
1511+
background: url("/images/cumulus/monitoring-k.png") no-repeat rgb(243, 179, 93);
1512+
}
1513+
&.nA {
1514+
background: url("/images/cumulus/monitoring-a.png") no-repeat rgb(243, 179, 93);
1515+
}
13691516
}
13701517

13711518
&.resources {
1372-
background: no-repeat -2px 3px url("/images/cumulus/resources.png") rgb(153, 115, 179);
1373-
background-size: 203px 287px;
13741519
.left-bar {
13751520
color: rgb(217, 199, 224);
13761521
}
1522+
&.n2 {
1523+
background: url("/images/cumulus/resources-2.png") no-repeat rgb(153, 115, 179);
1524+
}
1525+
&.n3 {
1526+
background: url("/images/cumulus/resources-3.png") no-repeat rgb(153, 115, 179);
1527+
}
1528+
&.n4 {
1529+
background: url("/images/cumulus/resources-4.png") no-repeat rgb(153, 115, 179);
1530+
}
1531+
&.n5 {
1532+
background: url("/images/cumulus/resources-5.png") no-repeat rgb(153, 115, 179);
1533+
}
1534+
&.n6 {
1535+
background: url("/images/cumulus/resources-6.png") no-repeat rgb(153, 115, 179);
1536+
}
1537+
&.n7 {
1538+
background: url("/images/cumulus/resources-7.png") no-repeat rgb(153, 115, 179);
1539+
}
1540+
&.n8 {
1541+
background: url("/images/cumulus/resources-8.png") no-repeat rgb(153, 115, 179);
1542+
}
1543+
&.n9 {
1544+
background: url("/images/cumulus/resources-9.png") no-repeat rgb(153, 115, 179);
1545+
}
1546+
&.n10 {
1547+
background: url("/images/cumulus/resources-x.png") no-repeat rgb(153, 115, 179);
1548+
}
1549+
&.nJ {
1550+
background: url("/images/cumulus/resources-j.png") no-repeat rgb(153, 115, 179);
1551+
}
1552+
&.nQ {
1553+
background: url("/images/cumulus/resources-q.png") no-repeat rgb(153, 115, 179);
1554+
}
1555+
&.nK {
1556+
background: url("/images/cumulus/resources-k.png") no-repeat rgb(153, 115, 179);
1557+
}
1558+
&.nA {
1559+
background: url("/images/cumulus/resources-a.png") no-repeat rgb(153, 115, 179);
1560+
}
13771561
}
13781562

13791563
}

‎copi.owasp.org/priv/static/images/cumulus/delivery-2.png‎

2.37 KB

‎copi.owasp.org/priv/static/images/cumulus/delivery-3.png‎

2.38 KB

‎copi.owasp.org/priv/static/images/cumulus/delivery-4.png‎

2.26 KB

‎copi.owasp.org/priv/static/images/cumulus/delivery-5.png‎

2.59 KB

‎copi.owasp.org/priv/static/images/cumulus/delivery-6.png‎

2.43 KB

‎copi.owasp.org/priv/static/images/cumulus/delivery-7.png‎

2.17 KB

‎copi.owasp.org/priv/static/images/cumulus/delivery-8.png‎

2.51 KB

‎copi.owasp.org/priv/static/images/cumulus/delivery-9.png‎

2.32 KB

‎copi.owasp.org/priv/static/images/cumulus/delivery-a.png‎

2.5 KB

0 commit comments

Comments
 (0)