@import url("variables.css");@import url("faq.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; } } .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); } .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); } img { 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_32603250405 25 Mar 06:02:01Z */