Commodore Logo Original design sketch reproduction
<section class="main">
<div class="info">
<p>DESIGNER<br>Chris Yaneff</p>
<p>CONTRACTOR<br>Commodore</p>
<p>DATE<br>1965</p>
</div>
<section class="logoBigContainer">
<div class="below"></div>
<div class="above"></div>
<div class="lips"></div>
<div class="diagonal"><i class="j"></i></div>
</section>
<i class="hlE"><span></span></i>
<i class="hlG"><span></span></i>
<i class="hl10"><span></span></i>
<i class="hlH"><span></span></i>
<i class="vlC1"><span></span></i>
<i class="vlC2"><span></span></i>
<i class="vlD1"><span></span></i>
<i class="vlD2"><span></span></i>
<i class="vlB"><span></span></i>
<i class="vlF"><span></span></i>
<i class="vlI"><span></span></i>
<div class="reference">
<h2 class="reference__title">REFERENCE</h2>
<div class="reference__col">
<p>B = 0.034 x A</p>
<p>C = 0.166 x A</p>
<p>D = 0.30 x A</p>
</div>
<div class="reference__col">
<p>E = 0.364 x A</p>
<p>F = 0.52 x A</p>
<p>G = 0.53 x A</p>
</div>
<div class="reference__col">
<p>H = 0.636 x A</p>
<p>I = 0.97 x A</p>
<p>J = 90 °</p>
</div>
</div>
<div class="logoSmall">
<div class="lips"></div>
</div>
</setion>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
$sand: #e7e7e7;
$mine: #303030;
$b: 2px solid $mine;
@mixin limitTo($value) {
max-height: $value;
max-width: $value;
}
@mixin colorize($bg: transparent, $fg: transparent) {
background-color: $bg;
color: $fg;
}
@mixin size($w, $h) {
width: $w;
height: $h;
}
@mixin pos($t: auto, $r: auto, $b: auto, $l: auto) {
top: $t;
right: $r;
bottom: $b;
left: $l;
position: absolute;
}
@mixin circle($w, $h, $top, $left) {
@include size($w, $h);
@include pos($t: $top, $l: $left);
border-radius: 100%;
}
@mixin show-pseudo {
content: "";
position: absolute;
}
@mixin line($x, $y, $l, $label, $labelPos, $dir: 'horizontal') {
@include pos($t: $y, $l: $x);
@include size($l, 2px);
&:before,
&:after {
@include show-pseudo;
@include size(2px, 8px);
background-color: $mine;
}
&:before {
@include pos($t: -3px, $l: -2px);
}
&:after {
@include pos($t: -3px, $r: -2px);
}
> span:before {
content: $label;
font-size: 12px;
left: 50%;
position: absolute;
transform: translateX(-50%);
@if $labelPos == 'above' {
top: -15px;
} @elseif $labelPos == 'below' {
top: 5px;
}
}
@if $dir == 'vertical' {
transform-origin: left center;
transform: rotate(90deg);
> span:before {
transform: rotate(-90deg) translateY(-33%);
}
}
}
body, html {
@include size(100%, 100%);
@include colorize($sand, $mine);
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif;
font-weight: 600;
}
.main {
@include limitTo(656px);
border: $b;
box-sizing: border-box;
flex: 0 0 80vw;
height: 80vw;
position: relative;
background-color: $sand;
}
.logoBigContainer {
@include size(55.2%, 54%);
@include pos($t: 22%, $l: 22%);
border: $b;
overflow: hidden;
&:before,
&:after {
@include show-pseudo;
@include size(100%, 16.6%);
@include pos($t: 30.6%, $l: 0);
border-style: solid;
border-color: $mine;
border-width: 2px 0 2px 0;
z-index: 9;
}
&:after {
@include pos($t: 51.5%, $l: 0);
}
> .below {
font-size: 5em;
&:before {
@include show-pseudo;
@include circle(98%, 99.5%, -1px, -1px);
border: $b;
box-shadow: inset 0 0 0 .98em $sand, inset 0 0 0 calc(.98em + 2px) $mine, inset 0 0 0 2px $mine;
background-color: $sand;
}
}
> .above {
@include size(63.5%, 100%);
@include pos($t: 0, $l: 0);
border-right: 2px solid $mine;
overflow: hidden;
z-index: 5;
font-size: 5em;
&:before {
@include show-pseudo;
@include circle(56% + 98%, 99.5%, -1px, -1px);
border: 2px solid transparent;
box-shadow: inset 0 0 0 .98em rgba($sand, .5), inset 0 0 0 calc(.98em + 2px) $mine, inset 0 0 0 2px $mine;
}
}
> .lips {
@include size(36%, 38%);
@include pos($t: 31%, $l: 64%);
z-index: 0;
overflow: hidden;
&:before,
&:after {
@include show-pseudo;
@include size(100%, 50%);
@include pos($b: 55%, $l: -20%);
background-color: rgba($mine, .45);
transform: skewX(-45deg)
}
&:after {
@include pos($b: -5%, $l: -20%);
transform: skewX(45deg)
}
}
> .diagonal {
@include size(10%, 10%);
@include pos($t: 39.5%, $l: 81%);
background-color: transparent;
transform-origin: left bottom;
border-style: solid;
border-color: $mine;
border-width: 2px 2px 0 0;
border-top-right-radius: 100%;
z-index: 99;
transform: rotate(45deg);
&:before,
&:after {
@include show-pseudo;
@include pos($t: -800px, $l: 0);
@include size(2px, 1600px);
background-color: $mine;
}
&:after {
@include pos($b: 0, $l: -800px);
@include size(1600px, 2px);
}
}
}
.info {
@include size(100%, 58px);
display: table;
font-size: 12px;
letter-spacing: .5px;
border-bottom: 2px solid $mine;
> * + * {
border-left: 2px solid lighten($mine, 20);
}
> * {
display: table-cell;
vertical-align: middle;
padding-left: 22px;
line-height: 1.8;
}
> *:first-child {
width: 41%;
}
> *:nth-child(2) {
width: 40%;
}
> *:last-child {
width: 19%;
padding-left: 8%;
}
}
.reference {
@include pos($b: 2%, $l: 5%);
display: table;
position: absolute;
font-size: 13px;
&__title {
display: table-row;
letter-spacing: .5px;
font-size: 12px;
height: 22px;
}
&__col {
display: table-cell;
line-height: 1.6;
padding-right: 15px;
}
}
i {
position: absolute;
background-color: $mine;
border: 0;
margin: 0;
padding: 0;
content: 'C';
}
.j {
@include pos($b: 0, $l: 0);
@include size(42%, 43%);
background-color: transparent;
border-style: solid;
border-color: $mine;
border-width: 2px 2px 0 0;
&:before {
@include pos($t: -40%, $l: -80%);
content: 'J';
font-size: 12px;
transform-origin: left bottom;
transform: rotate(-45deg);
}
}
.hlE { @include line(58%, 15%, 20%, 'E', 'above'); }
.hlG { @include line(35%, 18%, 29%, 'G', 'above'); }
.hl10 { @include line(22.5%, 79.5%, 56%, '10', 'below'); }
.hlH { @include line(22.5%, 83%, 35%, 'H', 'below'); }
.vlC1 { @include line(13.5%, 39%, 9%, 'C', 'below', 'vertical'); }
.vlC2 { @include line(13.5%, 50.5%, 9%, 'C', 'below', 'vertical'); }
.vlD1 { @include line(81%, 22.5%, 16.5%, 'D', 'above', 'vertical'); }
.vlD2 { @include line(81%, 59.5%, 16.5%, 'D', 'above', 'vertical'); }
.vlB { @include line(81%, 48.5%, 1.5%, 'B', 'above', 'vertical'); }
.vlF { @include line(86.5%, 35%, 28.5%, 'F', 'above', 'vertical'); }
.vlI { @include line(18.5%, 22.5%, 53.5%, 'I', 'below', 'vertical'); }
.logoSmall {
@include pos($b: 0, $r: 0);
@include size(22%, 22%);
border-style: solid;
border-width: 2px 0 0 2px;
border-color: $mine;
background: $sand;
font-size: 1em;
&:before {
@include show-pseudo;
@include circle(61%, 61%, 19%, 18%);
box-shadow: inset 0 0 0 1.2em $mine;
}
&:after {
@include show-pseudo;
@include size(42%, 100%);
@include pos($t: 0, $r: 0);
background-color: $sand;
}
> .lips {
@include size(25%, 24%);
@include pos($t: 37%, $l: 58%);
z-index: 0;
overflow: hidden;
z-index: 999;
&:before,
&:after {
@include show-pseudo;
@include size(100%, 50%);
@include pos($b: 55%, $l: -20%);
background-color: $mine;
transform: skewX(-45deg)
}
&:after {
@include pos($b: -5%, $l: -20%);
transform: skewX(45deg)
}
}
}