CodePen

HTML

            
              <div class="plone-logo">
  <div class="plone-circle">
    <div class="plone-circle-inner">
      <div class="plone-dot-1"></div>
      <div class="plone-dot-2"></div>
      <div class="plone-dot-3"></div>
    </div>
  </div>
  <div class="plone-text">Plone</div>
</div>
            
          
!
via HTML Inspector

CSS

            
              @ploneLogoSize: 200px;
@ploneLogoFgColor: #0083be;
@ploneLogoBgColor: #ffffff;
@ploneLogoRatio: 0.797;

.plone-logo {
  background: @ploneLogoBgColor;
  position: relative;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  
  .plone-text {
    color: @ploneLogoFgColor;
    float: left;
    font-style: normal;
    font-size: @ploneLogoRatio * @ploneLogoSize;
    line-height: @ploneLogoSize;
    margin-left: @ploneLogoSize * 0.135;
  }

  .plone-circle {
    float: left;
    display: block;
    position: relative;
    width: @ploneLogoSize;
    height: @ploneLogoSize;
    background-color: @ploneLogoFgColor;
    border-radius: @ploneLogoSize / 2;
    
    .plone-circle-inner {
      display: block;
      position: absolute;
      width: @ploneLogoSize * @ploneLogoRatio;
      height: @ploneLogoSize * @ploneLogoRatio;
      background-color: @ploneLogoBgColor;
      border-radius: @ploneLogoSize * @ploneLogoRatio / 2;
      top: @ploneLogoSize * (1 - @ploneLogoRatio) / 2;
      left: @ploneLogoSize * (1 - @ploneLogoRatio) / 2;    

      .plone-dot(@x, @y) {
        display: block;
        position: absolute;
        width: @ploneLogoSize * (1 - @ploneLogoRatio);
        height: @ploneLogoSize * (1 - @ploneLogoRatio);
        background-color: @ploneLogoFgColor;
        border-radius: @ploneLogoSize * (1 - @ploneLogoRatio) / 2;
        top: @y;
        left: @x;
      }

      .plone-dot-1 {
        .plone-dot((0.328 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize,
                   (0.180 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize);
      }
      .plone-dot-2 {
        .plone-dot((0.547 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize,
                   (0.391 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize);
      }
      .plone-dot-3 {
        .plone-dot((0.328 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize,
                   (0.609 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize);
      }
    
   }
  } 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................