mirror of
https://github.com/QubesOS/qubes-doc.git
synced 2024-12-11 00:34:31 -05:00
94 lines
2.8 KiB
Markdown
94 lines
2.8 KiB
Markdown
---
|
|
layout: doc
|
|
title: Style-guide
|
|
permalink: /doc/style-guide/
|
|
---
|
|
|
|
Style Guide
|
|
===========
|
|
|
|
## Fonts
|
|
|
|
Currently Qubes OS is using the following fonts for our website, branding, and other public facing (non-OS) materials. The OS itself uses what is normal for a user's desktop environment of choice.
|
|
|
|
<div class="styleguide">
|
|
{% for font in site.data.styleguide.fonts %}
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-6 focus">
|
|
<div class="font {{font.class}}">Custom Qubes Font</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-6">
|
|
<strong>Family:</strong> {{font.family}}<br>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
---
|
|
|
|
## Colors
|
|
|
|
The following **grayscale** colors are currently used on the Qubes website and documentation, and they will eventually match colors within the OS itself.
|
|
|
|
<div class="styleguide">
|
|
{% for color in site.data.styleguide.colors %}
|
|
{% if color.type == "grayscale" %}
|
|
<div class="swatch more-bottom more-right">
|
|
<div class="color add-bottom bg-{{color.class}}"></div>
|
|
<strong class="add-bottom">{{color.name}}</strong>
|
|
<code>#{{color.hex}}</code>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
The following **colors** are currently being used on the Qubes website and documentation, and they will eventually match the colors within the OS itself!
|
|
|
|
<div class="styleguide">
|
|
{% for color in site.data.styleguide.colors %}
|
|
{% if color.type == "colors" %}
|
|
<div class="swatch more-bottom more-right">
|
|
<div class="color add-bottom bg-{{color.class}}"></div>
|
|
<strong class="add-bottom">{{color.name}}</strong>
|
|
<code>#{{color.hex}}</code>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
---
|
|
|
|
## Icons
|
|
|
|
Currently, all the icons on the Qubes-OS.org website are generated using [FontAwesome](http://fortawesome.github.io/Font-Awesome/).
|
|
|
|
*As more custom work is done to generate icons for the operating system itself, they will be added here!*
|
|
|
|
---
|
|
|
|
## Logos
|
|
|
|
The following is a collection of various sizes & versions of the Qubes logo used both in the OS itself and on our website. All of these files are licensed GPLv2 and the source can be [downloaded here](https://github.com/QubesOS/qubes-artwork).
|
|
|
|
<div class="styleguide">
|
|
{% for logo in site.data.styleguide.logos %}
|
|
{% for version in logo.versions %}
|
|
<div class="row more-bottom">
|
|
<div class="col-lg-4 col-md-4">
|
|
<div class="focus">
|
|
<img class="logo" src="{{version.path}}{{logo.image}}">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 col-md-8">
|
|
<p>
|
|
<strong>Image:</strong> {{logo.image}}<br>
|
|
<strong>Size:</strong> {{version.size}}<br>
|
|
<strong>Format:</strong> {{version.format}}<br>
|
|
<strong>Download:</strong> <a href="{{version.path}}{{logo.image}}" target="_blank">this image</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|