Add page: Media (#483)

Co-authored-by: Beta Ziliani <[email protected]>

_includes/media/color_sample.html

@@ -1,5 +1,5 @@
-<div class="color-item col s4">
-  <div class="color-sample {{ include.class }}"></div>
-  <span class="color-name small">{{ include.color }}</span>
-  <span class="color-name small">{{ include.hex }}</span>
+<div class="card card--borderless">
+  <div class="color-sample" style="--color-sample-color: {{ include.hex }};{% if include.color == 'Black' %} --color-sample-border: #000;{% endif %}"></div>
+  <span class="name">{{ include.color }}</span>
+  <code class="low-key">{{ include.hex }}</code>
 </div>

_includes/media/font_sample.html

@@ -1,6 +1,4 @@
-<div class="font-item row">
-  <div class="col s12">
-    <span class="font-name small">{{ include.name }}</span>
-    <span class="{{ include.class }} font-sample">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz‘?’“!”(%)[#]{@}/$<-+÷=>®©$€£¥¢:;,.*</span>
-  </div>
+<div>
+  <span class="label">{{ include.name }}</span>
+  <div style="font-family: '{{ include.name }}'; word-break: break-all;">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz‘?’“!”(%)[#]{@}/$<-+÷=>®©$€£¥¢:;,.*</div>
 </div>

_includes/media/gallery_item.html

@@ -1,4 +1,4 @@
-<a href="/assets/{{ include.img }}"><div class="logo"><div class="border">
+<div class="card">
   <img src="/assets/{{ include.img }}" />
-  <span class="media-name small">{{ include.name }}</span>
-</div></div></a>
+  <a href="/assets/{{ include.img }}" class="name">{{ include.name }}</a>
+</div>

_pages/media.md

@@ -0,0 +1,89 @@
+---
+title: Media
+description: |
+  As the language and the community continues to grow it is important to have
+  basic understanding about how and for what purposes the Crystal brand and
+  associated works can be used.
+---
+
+## Assets
+
+We’ve put together some assets and guidelines to help you determine the best way
+to use our brand and logos.
+
+### Logo
+
+
+> **NOTE:** Important
+> Make sure to follow the [guidelines](#guidelines) described below when using any of this material.
+
+<div class="cards-list">
+  {% include media/gallery_item.html img="media/crystal_logo.svg" name="Logo" %}
+  {% include media/gallery_item.html img="media/crystal_logo-stacked_version.svg" name="Logo stacked" %}
+  {% include media/gallery_item.html img="media/crystal_icon.svg" name="Icon" %}
+</div>
+
+<div class="link-item">
+  <a href="/media/crystal-media-kit-6e57ec7.zip">
+    {% include icons/download.svg %}
+    Download all assets in a zip file
+  </a>
+</div>
+
+### Color
+
+<div class="cards-list">
+  {% include media/color_sample.html color="Black" hex="#000" %}
+  {% include media/color_sample.html color="White" hex="#FFF" %}
+  {% include media/color_sample.html color="Gray" hex="#777" %}
+</div>
+
+### Font
+
+{% include media/font_sample.html name="Roboto" %}
+{% include media/font_sample.html name="Roboto Medium" %}
+{% include media/font_sample.html name="Roboto Mono" %}
+
+<div class="link-item">
+  <a href="https://fonts.google.com/selection?query=robot&selection.family=Roboto+Mono:500|Roboto:400,500" target="_blank">
+    {% include icons/font-download.svg %}
+    Get them from Google Fonts
+  </a>
+</div>
+
+<hr />
+
+## Guidelines
+
+**What can you do with the Crystal logos and brand?**
+
+<ul class="yes">
+  <li>Print them on any merchandise you want, as long as you don’t sell it.</li>
+  <li>Use them in presentations, papers and talks. </li>
+  <li>Use them to advertise something you’ve created with Crystal.</li>
+  <li>Use them in blog posts, articles or news about Crystal.</li>
+  <li>Use them for educational purposes, as long as it’s available for free. </li>
+</ul>
+
+**Don’t do these things with the Crystal logos and brand:**
+
+<ul class="no">
+  <li>Change their colors, dimensions or add your own text.</li>
+  <li>Sell Crystal artwork or merchandise without permission.</li>
+  <li>Integrate your own logo with Crystal logos.</li>
+  <li>Use the Crystal logos as your brand, company or app image.</li>
+  <li>Use the logo in a way that could suggest sponsorship or endorsement by Crystal.</li>
+</ul>
+
+**Don’t hesitate to contact us if:**
+
+* You want permission to sell Crystal merchandise.
+* You want to use these logos for commercial purposes.
+* You have questions about the use of Crystal brand and logos.
+
+<div class="link-item">
+  <a href="mailto:[email protected]">
+    {% include icons/alternate-mail.svg %}
+    [email protected]
+  </a>
+</div>

_sass/_utilities.scss

@@ -32,3 +32,19 @@
   padding: 0 0.75em;
   font-weight: 400;
 }
+
+.label {
+  font-size: 90%;
+  font-weight: 200;
+  color: var(--lighter-text);
+}
+
+ul,
+li {
+  &.yes {
+    list-style-image: url("/assets/icons/check.svg");
+  }
+  &.no {
+    list-style-image: url("/assets/icons/close.svg");
+  }
+}

_sass/base/_typography.scss

@@ -91,7 +91,10 @@ pre,
   font-family: var(--code-font);
   margin: 0;
   font-size: 80%;
-  background-color: var(--code-bg);
+
+  &:not(.low-key) {
+    background-color: var(--code-bg);
+  }
 }
 
 pre > code {

_sass/components/_card.scss

@@ -1,5 +1,7 @@
 .card {
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 20%), 0 1px 3px 0 rgb(0 0 0 / 10%);
+  &:not(.card--borderless) {
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 20%), 0 1px 3px 0 rgb(0 0 0 / 10%);
+  }
   padding: var(--padding-xs);
   display: flex;
   flex-direction: column;
@@ -33,7 +35,9 @@
   > .name {
     font-weight: 500;
     font-size: 112.5%;
-    margin-block-end: auto;
+    &:not(:last-child) {
+      margin-block-end: auto;
+    }
 
     --link-color: currentcolor;
 

_sass/elements/_color-sample.scss

@@ -0,0 +1,9 @@
+.color-sample {
+  --color-sample-border: var(--light-gray);
+  border-radius: 50%;
+  width: 72px;
+  height: 72px;
+  border: 2px solid var(--color-sample-border);
+  margin: 10px auto;
+  background-color: var(--color-sample-color);
+}

_sass/main.scss

@@ -21,6 +21,7 @@
 
 @layer components {
   @import "elements/avatar-list";
+  @import "elements/color-sample";
   @import "elements/hex";
   @import "elements/table";