Skip to content

Commit c24da18

Browse files
adamschwartzadamschwartz
committedApr 14, 2020
add bgp hijack diagram
1 parent f5159a6 commit c24da18

File tree

7 files changed

+431
-77
lines changed

7 files changed

+431
-77
lines changed
 

Diff for: ‎design/cloud-icon.svg

+4
Loading

Diff for: ‎design/icons.sketch

8.08 KB
Binary file not shown.

Diff for: ‎design/laptop-icon.svg

+4
Loading

Diff for: ‎design/server-icon.svg

+4
Loading

Diff for: ‎public/index.css

+228-3
Original file line numberDiff line numberDiff line change
@@ -88,15 +88,23 @@ summary:not([is-focus-visible]) {
8888
}
8989
}
9090

91+
9192
.Column {
9293
width: 42em;
9394
max-width: 100%;
94-
margin: auto;
95-
padding: 3em 1em;
95+
margin-left: auto;
96+
margin-right: auto;
97+
padding-left: 1em;
98+
padding-right: 1em;
99+
}
100+
101+
.Column-is-section {
102+
padding-top: 3em;
103+
padding-bottom: 3em;
96104
}
97105

98106
@media (max-width: 414px) {
99-
.Column {
107+
.Column-is-section {
100108
padding-top: 1.75em;
101109
padding-bottom: 1.75em;
102110
}
@@ -507,6 +515,223 @@ h1, h2 {
507515
}
508516
}
509517

518+
519+
.Diagram---header {
520+
position: absolute;
521+
font-size: 1.25em;
522+
margin-top: 4rem;
523+
line-height: 2rem;
524+
margin-left: .25em;
525+
z-index: 10;
526+
}
527+
528+
.Diagram {
529+
position: relative;
530+
--grid-line-color: rgba(var(--gray-8-rgb), .8);
531+
--grid-line-thickness: 1px;
532+
--grid-size: 2em;
533+
--grid-height: 20em;
534+
--grid-width: 60em;
535+
--grid-positions-count: 5;
536+
--grid-positions-unit: calc(var(--grid-width) / (var(--grid-positions-count) + 1));
537+
height: calc(var(--grid-height) + var(--grid-line-thickness));
538+
margin-left: auto;
539+
margin-right: auto;
540+
width: 100%;
541+
overflow: hidden;
542+
pointer-events: none;
543+
user-select: none;
544+
}
545+
546+
.Diagram--surface {
547+
position: absolute;
548+
top: 0;
549+
bottom: 0;
550+
left: calc(50vw - var(--grid-width) / 2);
551+
width: calc(var(--grid-width) + var(--grid-line-thickness));
552+
background-image:
553+
linear-gradient(
554+
to bottom,
555+
var(--grid-line-color) var(--grid-line-thickness),
556+
transparent var(--grid-line-thickness)
557+
),
558+
linear-gradient(
559+
to right,
560+
var(--grid-line-color) var(--grid-line-thickness),
561+
transparent var(--grid-line-thickness)
562+
);
563+
background-size: var(--grid-size) var(--grid-size);
564+
}
565+
566+
.Diagram [position="1"] { left: calc(var(--grid-positions-unit) * 1); }
567+
.Diagram [position="2"] { left: calc(var(--grid-positions-unit) * 2); }
568+
.Diagram [position="3"] { left: calc(var(--grid-positions-unit) * 3); }
569+
.Diagram [position="4"] { left: calc(var(--grid-positions-unit) * 4); }
570+
.Diagram [position="5"] { left: calc(var(--grid-positions-unit) * 5); }
571+
572+
.Diagram--node {
573+
position: absolute;
574+
top: calc(var(--grid-height) / 2);
575+
--background: var(--gray-4);
576+
transition: opacity 1s ease, transform 1s ease;
577+
}
578+
579+
.Diagram--node[path="sad"] {
580+
--background: var(--red-4);
581+
}
582+
583+
.Diagram[path="sad"] .Diagram--node[path="sad"] {
584+
transform: translate3d(0, calc(2 * var(--grid-size)), 0);
585+
}
586+
587+
.Diagram[path="sad"] .Diagram--node[path="happy"] {
588+
transform: translate3d(0, calc(-2 * var(--grid-size)), 0);
589+
}
590+
591+
.Diagram--node-circle {
592+
position: absolute;
593+
--size: 1.5em;
594+
width: var(--size);
595+
height: var(--size);
596+
left: calc(-1 * var(--size) / 2);
597+
top: calc(-1 * var(--size) / 2);
598+
background: var(--background);
599+
border: .25em solid #fff;
600+
border-radius: 100%;
601+
}
602+
603+
.Diagram[path="sad"] .Diagram--node[path="happy"] {
604+
transform: translate3d(0, calc(-2 * var(--grid-size)), 0);
605+
}
606+
607+
.Diagram--node-icon {
608+
position: absolute;
609+
top: -68px;
610+
width: 73px;
611+
height: 50px;
612+
margin-left: -36px;
613+
--color: var(--gray-4);
614+
--background: #fff;
615+
transition: opacity 1s ease;
616+
}
617+
618+
.Diagram--node-label {
619+
position: absolute;
620+
top: calc(var(--grid-size) / 2);
621+
left: calc(-1 * var(--grid-positions-unit) / 2);
622+
right: calc(-1 * var(--grid-positions-unit) / 2);
623+
text-align: center;
624+
line-height: var(--grid-size);
625+
text-shadow: 0 0 .5em #fff, 0 0 .5em #fff, 0 0 .25em #fff;
626+
transition: opacity 1s ease;
627+
}
628+
629+
.Diagram--node-label-question-mark {
630+
margin-left: .3125em;
631+
font-size: .8em;
632+
}
633+
634+
.Diagram[path="happy"] .Diagram--node[path="sad"] .Diagram--node-icon,
635+
.Diagram[path="happy"] .Diagram--node[path="sad"] .Diagram--node-label {
636+
opacity: 0;
637+
}
638+
639+
.Diagram[path="sad"] .Diagram--node[path="happy"] .Diagram--node-icon,
640+
.Diagram[path="sad"] .Diagram--node[path="happy"] .Diagram--node-label,
641+
.Diagram[path="sad"] .Diagram--node[path="both"][position="5"] .Diagram--node-icon,
642+
.Diagram[path="sad"] .Diagram--node[path="both"][position="5"] .Diagram--node-label {
643+
opacity: .4;
644+
}
645+
646+
.Diagram--edge {
647+
position: absolute;
648+
top: calc(var(--grid-height) / 2);
649+
--background: var(--gray-7);
650+
--line-thickness: 6px;
651+
--delay: 0s;
652+
transition: opacity 1s ease, transform 1s ease;
653+
}
654+
655+
.Diagram [position="2"] { --delay: 0.75s }
656+
.Diagram [position="3"] { --delay: 1.50s }
657+
.Diagram [position="4"] { --delay: 2.25s }
658+
.Diagram [position="5"] { --delay: 3.00s }
659+
660+
.Diagram--edge-line {
661+
position: absolute;
662+
top: 50%;
663+
width: calc(2 * var(--line-thickness) + var(--grid-positions-unit));
664+
height: var(--line-thickness);
665+
left: calc(-1 * var(--line-thickness));
666+
top: calc(-1 * var(--line-thickness) / 2);
667+
border-radius: 99em;
668+
background: var(--background);
669+
}
670+
671+
.Diagram--edge[path="sad"] {
672+
--background: #f8b5ab;
673+
}
674+
675+
.Diagram[path="sad"] .Diagram--edge[path="switch"] {
676+
transform: translate3d(0, 0, 0) rotate(22deg);
677+
}
678+
679+
.Diagram[path="sad"] .Diagram--edge[path="sad"] {
680+
transform: translate3d(0, calc(2 * var(--grid-size)), 0);
681+
}
682+
683+
.Diagram[path="sad"] .Diagram--edge[path="happy"] {
684+
transform: translate3d(0, calc(-2 * var(--grid-size)), 0);
685+
}
686+
687+
.Diagram[path="sad"] .Diagram--edge[path="happy"][position="4"] {
688+
transform: translate3d(0, calc(-2 * var(--grid-size)), 0) rotate(22deg);
689+
}
690+
691+
.Diagram--edge-data {
692+
position: absolute;
693+
height: 10px;
694+
width: 20px;
695+
background: var(--gray-0);
696+
border-radius: 2px;
697+
margin-left: -10px;
698+
top: -5px;
699+
left: 0;
700+
animation: diagram-edge-data-pulse 5s var(--delay) linear infinite;
701+
}
702+
703+
.Diagram[path="happy"] .Diagram--edge[path="sad"] .Diagram--edge-data,
704+
.Diagram[path="sad"] .Diagram--edge[path="happy"] .Diagram--edge-data {
705+
visibility: hidden;
706+
}
707+
708+
@keyframes diagram-edge-data-pulse {
709+
0% {
710+
opacity: 0;
711+
transform: translate3d(0, 0, 0) scale(.5);
712+
}
713+
714+
3% {
715+
opacity: 1;
716+
transform: translate3d(calc(var(--grid-positions-unit) * .2), 0, 0) scale(1);
717+
}
718+
719+
12.5% {
720+
opacity: 1;
721+
transform: translate3d(calc(var(--grid-positions-unit) * .8), 0, 0) scale(1);
722+
}
723+
724+
16%, 100% {
725+
opacity: 0;
726+
transform: translate3d(var(--grid-positions-unit), 0, 0) scale(.5);
727+
}
728+
}
729+
730+
.Diagram---footer {
731+
text-align: center;
732+
}
733+
734+
510735
.FAQItem summary {
511736
font-size: 1.5em;
512737
padding: 0 .6em;

0 commit comments

Comments
 (0)
Please sign in to comment.