Git-Mirrors/qubes-doc
1
0
Fork 0
mirror of https://github.com/QubesOS/qubes-doc.git synced 2025-08-08 06:32:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Move all developer documentation to main index

Browse source 
QubesOS/qubes-issues#2070
This commit is contained in:
Andrew David Wong 2016-06-20 13:56:20 -07:00
parent 254f5e71a0
commit aadb35d62f
No known key found for this signature in database
GPG key ID: 8CE137352A019A17
39 changed files with 46 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

93
basics_dev/style-guide.md Normal file
View file

@ -0,0 +1,93 @@
---
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 users 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, documentation, and 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, documentation, and 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>