github.com/KyaXTeam/consul@v1.4.5/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss (about)

     1  .g-text-asset {
     2    text-align: center;
     3  
     4    @media (min-width: 768px) {
     5      align-content: space-between;
     6      display: flex;
     7      justify-content: center;
     8      margin: 0 (-$site-gutter-padding);
     9      text-align: left;
    10    }
    11  
    12    &.reverse {
    13      flex-direction: row-reverse;
    14  
    15      & > div:first-child > div {
    16        margin-left: auto;
    17  
    18        @media (min-width: 768px) {
    19          padding: 0 24px 0 0;
    20        }
    21  
    22        @media (min-width: 992px) {
    23          padding-right: 32px;
    24        }
    25      }
    26    }
    27  
    28    &.large {
    29      margin-bottom: -56px;
    30  
    31      @media (min-width: 768px) {
    32        margin-bottom: -96px;
    33      }
    34  
    35      @media (min-width: 992px) {
    36        margin-bottom: -120px;
    37      }
    38  
    39      & > div:last-child {
    40        justify-content: unset;
    41      }
    42  
    43      picture > img,
    44      img {
    45        width: 145%;
    46      }
    47    }
    48  
    49    & > div {
    50      @media (min-width: 768px) {
    51        align-items: center;
    52        margin: 0 auto;
    53        display: flex;
    54        padding: 0 $site-gutter-padding;
    55        width: 50%;
    56      }
    57  
    58      &:first-child {
    59        margin-bottom: 32px;
    60  
    61        @media (min-width: 768px) {
    62          margin-bottom: 0;
    63        }
    64  
    65        & > div {
    66          @media (min-width: 768px) {
    67            margin-left: 0;
    68            max-width: 454px;
    69            padding: 0 0 0 24px;
    70          }
    71  
    72          @media (min-width: 992px) {
    73            padding-left: 32px;
    74          }
    75  
    76          & a {
    77            color: #1563ff;
    78  
    79            &:focus,
    80            &:hover {
    81              color: #2c72fe;
    82  
    83              & path {
    84                fill: #2c72fe;
    85              }
    86            }
    87  
    88            & svg {
    89              margin-left: 10px;
    90            }
    91          }
    92        }
    93      }
    94  
    95      &:last-child {
    96        justify-content: center;
    97      }
    98  
    99      & > img,
   100      picture > img {
   101        width: 100%;
   102  
   103        &.shadow {
   104          box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
   105        }
   106      }
   107  
   108      & > svg {
   109        max-width: 100%;
   110      }
   111  
   112      &.code-sample > div {
   113        box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
   114        color: $white;
   115        margin: 0;
   116        text-align: left;
   117        width: 100%;
   118  
   119        span {
   120          background: #252937;
   121          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
   122          display: block;
   123          height: 32px;
   124  
   125          @media (min-width: 768px) {
   126            height: 40px;
   127          }
   128        }
   129  
   130        .code {
   131          background: #1e212a;
   132          font-size: 1.4rem;
   133          overflow: auto;
   134          padding: 16px 24px 32px;
   135          width: 100%;
   136  
   137          code {
   138            background: #1e212a;
   139            border-radius: 0;
   140            color: $white;
   141            font-size: 1.2rem;
   142            white-space: pre;
   143  
   144            @media (min-width: 992px) {
   145              font-size: 1.4rem;
   146            }
   147  
   148            &.keyword {
   149              color: #be5580;
   150            }
   151          }
   152        }
   153      }
   154  
   155      &.logos {
   156        justify-content: center;
   157  
   158        & > div {
   159          align-items: center;
   160          display: flex;
   161          flex-direction: column;
   162  
   163          & img,
   164          picture {
   165            margin: 30px 0;
   166  
   167            @media (max-width: 767px) {
   168              margin: 15px 0;
   169              max-width: 51%;
   170            }
   171          }
   172        }
   173      }
   174    }
   175  
   176    h3 {
   177      margin: 0 0 16px 0;
   178  
   179      @media (min-width: 768px) {
   180        margin-top: 16px;
   181      }
   182    }
   183  
   184    li {
   185      font-size: 1.6rem;
   186      list-style-type: none;
   187      margin: 16px;
   188      text-align: left;
   189  
   190      @media (min-width: 768px) {
   191        margin: 16px 0;
   192      }
   193  
   194      @media (min-width: 992px) {
   195        font-size: 1.8rem;
   196      }
   197  
   198      &:before {
   199        background-position: center;
   200        background-repeat: no-repeat;
   201        background-size: 100%;
   202        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22"><path fill="#CA2171" d="M21.293 1.298L11 11.591 8.707 9.298a1 1 0 1 0-1.414 1.414l3 3a.997.997 0 0 0 1.414 0l11-11a1 1 0 1 0-1.414-1.414M22 10.075v.93a10.925 10.925 0 0 1-3.227 7.777A10.926 10.926 0 0 1 11 22h-.007C4.929 21.996-.003 17.058 0 10.993a10.927 10.927 0 0 1 3.226-7.776A10.927 10.927 0 0 1 10.999 0h.008c1.551 0 3.055.32 4.47.952a1 1 0 1 1-.815 1.826A8.926 8.926 0 0 0 11.006 2H11a8.938 8.938 0 0 0-6.36 2.632A8.938 8.938 0 0 0 2 10.994c-.003 4.963 4.032 9.003 8.995 9.006H11c2.401 0 4.66-.935 6.36-2.633A8.936 8.936 0 0 0 20 11.005v-.93a1 1 0 1 1 2 0"/></svg>');
   203        content: '';
   204        display: block;
   205        float: left;
   206        height: 24px;
   207        margin: 4px 0 0 -40px;
   208        width: 24px;
   209      }
   210    }
   211  }