-
Notifications
You must be signed in to change notification settings - Fork 0
HTML CSS
color brand-main : #af0420 ou #96031c
green/yellow : rgb(190, 194,0)
TTH bleu: rgb(105, 150, 219) TTH pourpre: rgb(128, 17, 45)
We use Google fonts. The google webfonts helper let you choose your fonts and describes how to add in the pure.css. Fonts have been downloaded on the server in css/fonts directory, but may be used with a link to google font servers.
The .woff2 compression format is the next generation one with a 30% average gain over WOFF 1.0. Unfortunately, woff format are not supported by old browsers. We need thus to specify all formats this way to enable the best support.
Best advice is to stick with a few fonts.
-
Titles, headers and sidebar : Roboto Mono. This is a monospace and sans serif font.
-
Text: Bitter. This is a serif font.
/storage/tth_blog/pure-pelican-themes/pure-single-gabx/static/css/pure.css
----------------------------------------------------------
/* roboto-mono-700 - latin */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 700;
src: url('../fonts/roboto-mono-v4-latin-700.eot'); /* IE9 Compat Modes */
src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
url('../fonts/roboto-mono-v4-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-mono-v4-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-mono-v4-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-mono-v4-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-mono-v4-latin-700.svg#RobotoMono') format('svg'); /* Legacy iOS */
}
NOTE:
- please visit this link to understand the difference between HTML and CSS font style italic.
TTH logo has been created using Inkscape. Inkscape is an open-source vector graphics editor similar to Adobe Illustrator. What sets Inkscape apart is its use of Scalable Vector Graphics (SVG), an open XML-based W3C standard, as the native format.
NOTE:
- A png (Portable Network Graphics) file is a raster or bitmap image file format. A raster image is made up of a fixed number of pixels [or building blocks] that form a complete image.
The image cannot be enlarged without distortion occurring. (When you zoom in on a raster image, the pixels become visibly grainy.) Common raster image files include png, jpg and gif formats.
A svg (Scalable Vector Graphics) file is a vector image file format. A vector image uses geometric forms such as points, lines, curves and shapes (polygons) to represent different parts of the image as discrete objects. These forms can be individually edited. A vector image remains crisp and clear at any resolution or size.
To manage these contents, first and reliable possibility is to add this kind of line in the .html page:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
This has the advantage to point to the last version and avoid downloading/upgrading content. A downside is the potential latency this can bring to the site.
Another method is to download locally the content and use the npm bower package.
- Install bower in the current directory:
$ npm -g install bower
- Install a package with bower in the project root directory
$ cd /storage/tth_blog
$ bower install --save packageName
Bower components will be installed in the /storage/tth_blog/bower_components directory. A bower.json will be updated.
- Link in the html file:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
https://css-tricks.com/favicon-quiz/
#6996DB
[Sass]{http://sass-lang.com/guide} preprocessor lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. Run $ sass input.scss output.css.