@import url("variables.css");@import url("faq.css");@import url("metricslist.css");.blog___module { .blog-hero-apitype-link { display:flex; align-items:center; .logo { --w:calc(var(--gutter) * 3); margin-right:var(--gutter); display:inline-block; height:var(--w); width:var(--w); background-size:contain; background-position:center; background-repeat:no-repeat; } @container app-container (max-width:800px) { flex-direction:column; text-align:center; } } .blog-summary-con{ background-color:var(--accentBackgroundColor); padding:var(--gutter); border-radius:var(--inputBorderRadius); border:1px var(--brandColor) solid; > * { &:first-child{ margin-top:0px; } &:last-child{ margin-bottom:0px; } } } .blog-pros-cons-con{ --prosColor:#2fa962; --consColor:#e05a57; display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); margin-bottom:var(--gutter); > .pros, > .cons { --c:var(--prosColor); background-color:color-mix(in srgb, var(--c) 6%, white); border:1px color-mix(in srgb, var(--c) 35%, white) solid; border-top:4px var(--c) solid; border-radius:var(--inputBorderRadius); padding:var(--gutter); h4 { margin-top:0px; color:var(--c); text-transform:uppercase; letter-spacing:0.05em; } ul { list-style:none; padding-left:0px; margin-left:0px; margin-bottom:0px; li { position:relative; padding-left:1.6em; margin-bottom:var(--gutter-half); &:last-child { margin-bottom:0px; } &:before { content:'\2713'; position:absolute; /* centre the 1.3em badge on the li's first 1.5-line-height line (badge font is 0.8em of the li) */ left:0px; top:calc((1.5em / 0.8 - 1.3em) / 2); width:1.3em; height:1.3em; line-height:1.3em; text-align:center; font-size:0.8em; font-weight:bold; color:white; background-color:var(--c); border-radius:50%; } } } } > .cons { --c:var(--consColor); ul li:before { content:'\2715'; } } @container app-container (max-width:800px) { grid-template-columns:1fr; } } .blog-callout-con{ margin-bottom:var(--gutter); background-color:var(--accentBackgroundColor); padding:var(--gutter); border-radius:var(--inputBorderRadius); border:1px var(--brandColor) solid; > * { &:first-child{ margin-top:0px; } &:last-child{ margin-bottom:0px; } } } /* A formula laid out as chips, e.g. Profit = Revenue - Costs */ .blog-formula-con{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--gutter-half); margin-bottom:var(--gutter); padding:var(--gutter); background-color:var(--lightGray); border:1px var(--accentBackgroundColor) solid; border-radius:var(--inputBorderRadius); .term{ padding:var(--gutter-quarter) var(--gutter-half); background-color:var(--white); border:1px var(--inputBorderColor) solid; border-radius:var(--inputBorderRadius); font-weight:600; white-space:nowrap; &.result{ color:var(--white); background-color:var(--brandColor); border-color:var(--brandColor); } } .op{ color:var(--gray); font-size:calc(var(--fontSize) * 1.25); font-weight:bold; } } /* Worked example of a calculation, laid out like a statement */ .blog-calc-con{ margin-bottom:var(--gutter); border:1px var(--accentBackgroundColor) solid; border-top:4px var(--brandColor) solid; border-radius:var(--inputBorderRadius); background-color:var(--white); box-shadow:0px 2px 8px color-mix(in srgb, var(--shadowColor) 6%, transparent); overflow:hidden; .calc-title{ padding:var(--gutter-half) var(--gutter); background-color:var(--lightGray); color:var(--gray); font-size:var(--fontSizeSmall); font-weight:bold; text-transform:uppercase; letter-spacing:0.05em; } .calc-row{ display:flex; justify-content:space-between; gap:var(--gutter); padding:var(--gutter-half) var(--gutter); border-bottom:1px var(--accentBackgroundColor) solid; > :last-child{ font-variant-numeric:tabular-nums; white-space:nowrap; } &.cost{ color:var(--gray); } &.subtotal{ font-weight:bold; border-bottom:2px var(--fontColor) solid; } &.total{ color:var(--brandColor); font-size:calc(var(--fontSize) * 1.25); font-weight:800; border-bottom:none; } } .calc-margin{ padding:var(--gutter-half) var(--gutter) var(--gutter) var(--gutter); .calc-margin-label{ display:flex; justify-content:space-between; margin-bottom:var(--gutter-quarter); } .calc-margin-bar{ height:var(--gutter-half); border-radius:var(--gutter-half); background-color:var(--accentBackgroundColor); overflow:hidden; > div{ height:100%; border-radius:var(--gutter-half); background-color:var(--brandColor); } } } } .api-types-con { display:grid; grid-gap:calc(var(--gutter)); grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); .api-item-con { padding:var(--gutter-half); justify-content:flex-start; margin-left:var(--gutter-half); margin-right:var(--gutter-half); cursor:pointer; text-decoration:none; text-align:center; margin-bottom:var(--gutter); border:1px var(--brandColor) solid; background-color:var(--bodyBackgroundColor); border-radius:var(--inputBorderRadius); &:hover { opacity:0.8; } .img { margin-bottom:var(--gutter-half); width:50px; height:50px; background-size:contain; display:block; margin-left:auto; margin-right:auto; background-repeat:no-repeat; background-position:center; } .title { font-size:var(--fontSizeSmall); color:var(--fontColor); } } } .blog___home___module { } .blog___article___module { --blogFontSize:20px; --codeBackgroundColor:#fffefb; font-size:var(--blogFontSize); line-height:1.5; .author-con{ --imageWidth:calc(var(--gutter) * 4); display:flex; align-items:center; margin-bottom:var(--gutter); .img{ display:inline-block; border-radius:50%; background-size:cover; background-repeat:no-repeat; background-position:center; width:var(--imageWidth); height:var(--imageWidth); margin-right:var(--gutter); } .name-con{ line-height:1.5; font-size:var(--fontSize); .name{ text-transform:uppercase; color:var(--gray); display:block; } .title{ font-size:smaller; .btn-linkedin{ display:inline-block; margin-left:0.5em; padding-left:0.5em; border-left:1px var(--gray) solid; } } } } ul, ol{ margin-left:var(--gutter-double); &.metrics-list { margin-left:0px; } } /* The .step count is a little funky because I can apply the same class to h3 and h4, and nesting either becomes a problem with respect to resets etc. I can/should duplicate this CSS later so that each h3/h4 are handled separately (even if they look the same) */ h3:not(.step){ counter-reset:current-step; } h3, h4{ &.step { --margin:1em; --w:3em; counter-increment:current-step; position:relative; &:before { position:absolute; left:calc((var(--w) + var(--margin)) * -1); top:50%; margin-top:calc(var(--w) * -0.5); width:var(--w); height:var(--w); line-height:var(--w); text-align:center; font-weight:normal; border-radius:50%; background-color:var(--brandColor); color:var(--brandColorOffset); font-size:smaller; content:counter(current-step); display:inline-block; margin-right:1em; vertical-align:middle; visibility:visible; } @container app-container (max-width:1100px) { margin-left:calc(var(--w)); } @container app-container (max-width:900px) { margin-top:calc(var(--w) + var(--gutter)); text-align:center; &:before{ top:0%; left:50%; transform:translateX(-50%) translateY(-100%); margin-top:0px; } } } } section { background-color:var(--accentBackgroundColor); padding-top:calc(var(--gutter) * 2); padding-bottom:calc(var(--gutter) * 2); width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; padding-left:calc((100vw - var(--pageMaxWidth)) / 2); padding-right:calc((100vw - var(--pageMaxWidth)) / 2); > h3, h4 { &:first-child{ margin-top:0px; } } @container app-container (max-width:800px) { padding-left:var(--gutter); padding-right:var(--gutter); } } iframe.youtube{ border:none; width:100%; height:100%; aspect-ratio:16/9; margin-bottom:var(--gutter); } .hero-con { .img-con { flex:1 1 50%; .img{ max-width:100%; } &:before{ visibility:hidden; } &:after { /* visibility:visible; content:''; position:absolute; inset:0; background:radial-gradient( ellipse 50% 50% at center, transparent 0%, transparent 80%, white 95% ); pointer-events:none; z-index:1; */ } } } h4 { font-size:var(--blogFontSize); } .carousel { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr) ); grid-column-gap:var(--gutter); scale:1; transition:all var(--transitionDefaultDuration) var(--transitionDefaultStyle); > * { border-width:var(--gutter-quarter); &:hover { scale:3; } } } .table-con { overflow-x:auto; margin-bottom:var(--gutter); table.rpt { margin-bottom:0px; border-collapse:collapse; } } table.rpt { &.list{ tr{ td:first-child{ white-space:nowrap; font-weight:bold; } } } &.database { th { background-color:var(--lightGray); } th, td { padding:var(--gutter-quarter); border-bottom:1px solid var(--gray); } } th, td { &.highlight { background-color:pink; } } th { border-bottom:1px var(--gray) solid; } td { border-bottom:1px var(--gray) dashed; } } aside { font-size:var(--fontSize); > h4, h5 { font-size:var(--fontSize); margin-bottom:0px; } display:block; border-left:4px var(--gray) solid; padding-left:var(--gutter); margin-bottom:var(--gutter); } figure{ img{ width:100%; box-shadow:none; border:none; border-radius:0px; border-bottom:1px var(--gray) solid; margin-bottom:0px; } figcaption{ padding:var(--gutter) var(--gutter-half); background-color:var(--lightGray); blockquote{ margin:0px; padding:0px; font-style:italic; &:before, &:after{ content:'"'; visibility:visible; } } label{ display:block; text-transform:uppercase; font-size:var(--fontSizeSmall); } } } img, figure { display:block; margin-left:auto; margin-right:auto; max-width:100%; margin-bottom:calc(var(--gutter) * 2); border:var(--gutter) var(--bodyBackgroundColor) solid; border-radius:var(--inputBorderRadius); box-shadow:5px 5px 15px 5px var(--shadowColor); @container app-container (min-width:600px) { &.small { max-width:400px; } &.very-small { max-width:200px; } &.right { float:right; margin-left:var(--gutter); } &.left { float:left; margin-right:var(--gutter); } } } code{ padding:4px; background-color:var(--codeBackgroundColor); box-shadow:0px 0px 1px 1px var(--shadowColor); border-radius:var(--inputBorderRadius); } pre { overflow-x:auto; white-space:pre; word-wrap:normal; background-color:var(--codeBackgroundColor); padding:var(--gutter); border-radius:var(--inputBorderRadius); box-shadow:5px 5px 15px 5px var(--shadowColor); border-radius:var(--inputBorderRadius); margin-bottom:calc(var(--gutter) * 2); position:relative; display:block; font-size:smaller; &:after{ content:''; visibility:visible; width:var(--gutter-double); z-index:1; position:absolute; top:0; right:0; bottom:0; background:linear-gradient(to right, transparent, var(--codeBackgroundColor)); } code { border:none; box-shadow:none; padding:0px; margin:0px; display:block; white-space:pre; background-color:transparent; } } }}/* Cache CSSParserMiddleware_www.synchub.io_/Pages/styles/blog.css_False_HTML_32610280941 28 Oct 13:21:35Z */