commit fonctionne ou pas ?
This commit is contained in:
val
@@ -0,0 +1,43 @@
|
||||
// The font filenames and folders are normalized.
|
||||
// Using TTF, WOFF and WOFF2
|
||||
|
||||
@mixin font-face($font, $weight, $style) {
|
||||
$src: null;
|
||||
|
||||
@if $weight == bold and $style == normal {
|
||||
$src: '../fonts/' + $font + '/' + $font + '-bold/' + $font + '-bold';
|
||||
} @else if $weight == normal and $style == italic {
|
||||
$src: '../fonts/' + $font + '/' + $font + '-italic/' + $font + '-italic';
|
||||
} @else if $weight == bold and $style == italic {
|
||||
$src: '../fonts/' + $font + '/' + $font + '-bold-italic/' + $font + '-bold-italic';
|
||||
} @else if $weight == normal and $style == normal {
|
||||
$src: '../fonts/' + $font + '/' + $font + '-regular/' + $font + '-regular';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $font; // font name, first letter capitalized
|
||||
font-weight: unquote($weight); // bold or normal
|
||||
font-style: unquote($style); // italic or normal
|
||||
src: url($src + '.ttf') format('truetype'),
|
||||
url($src + '.woff') format('woff'),
|
||||
url($src + '.woff2') format('woff2');
|
||||
}
|
||||
}
|
||||
|
||||
// Import fonts
|
||||
|
||||
@include font-face('Lato', 'bold', 'normal');
|
||||
@include font-face('Lato', 'normal', 'italic');
|
||||
@include font-face('Lato', 'bold', 'italic');
|
||||
@include font-face('Lato', 'normal', 'normal');
|
||||
|
||||
@include font-face('Syne', 'bold', 'normal');
|
||||
@include font-face('Syne', 'normal', 'normal');
|
||||
|
||||
@include font-face('Avara', 'bold', 'italic');
|
||||
@include font-face('ManifontGrotesk', 'bold', 'italic');
|
||||
@include font-face('ManifontGrotesk', 'normal', 'italic');
|
||||
@include font-face('PlayfairDisplay', 'normal', 'italic');
|
||||
@include font-face('Rumeur', 'bold', 'normal');
|
||||
@include font-face('Moche', 'bold', 'normal');
|
||||
@include font-face('Redaction50', 'bold', 'normal');
|
||||
@@ -0,0 +1,47 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
a, a:active, a:focus, a:visited {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
// VARIABLES
|
||||
// typography - most used fonts
|
||||
$mainFont: Lato, Sans-serif;
|
||||
$titleFont: Syne, Sans-serif;
|
||||
// typography - utilité fonts
|
||||
@mixin publique-font {
|
||||
font-family: PlayfairDisplay, serif;
|
||||
font-style: italic;
|
||||
}
|
||||
@mixin sociale-font {
|
||||
font-family: ManifontGrotesk, sans-serif;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@mixin culturelle-font {
|
||||
font-family: Avara, serif;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
// typography - index fonts
|
||||
@mixin figures-libres-font {
|
||||
font-family: Syne, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
@mixin logiciels-libres-font {
|
||||
font-family: Rumeur, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
@mixin commanditaires-font {
|
||||
font-family: Moche, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
@mixin projets-font {
|
||||
font-family: Redaction50, serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// typography - general sizes
|
||||
$currentSize: 1.2em;
|
||||
$smallSize: 0.95em;
|
||||
$tinySize: 0.75em;
|
||||
$currentLineHeight: 1.25em;
|
||||
$titleLineHeight: 1.1em;
|
||||
// typography - sizes mobile
|
||||
$titleFontSizeMobile: 1.8em;
|
||||
$bigFontSizeMobile: 2.2em;
|
||||
// typography - sizes desktop
|
||||
$bigFontSizeDesktop: 3.8em;
|
||||
// typography - pictograms
|
||||
$pictoInlineWidth: 12px;
|
||||
$pictoInlineHeight: 10px;
|
||||
$pictoSmallWidth: 25px;
|
||||
$pictoSmallHeight: 23px;
|
||||
$pictoLargeWidth: 45px;
|
||||
$pictoLargeHeight: 37px;
|
||||
$pictoExtraLargeWidth: 60px;
|
||||
$pictoExtraLargeHeight: 54px;
|
||||
|
||||
// colors - theme colors
|
||||
$mainColor: #0b1117;
|
||||
$mainColorSoft: #1f2429;
|
||||
$bgColor: #f5f5f5;
|
||||
// colors - gradient
|
||||
$bgGradientToBottom: linear-gradient(to bottom, #{$bgColor}, #{$bgColor}00);
|
||||
$bgGradientToLeft: linear-gradient(to left, #{$bgColor}, #{$bgColor}00);
|
||||
// colors - opacity
|
||||
$transparency: 0.4;
|
||||
// layout - general
|
||||
$navHeight: 7vh;
|
||||
$sectionSpacing: 30px;
|
||||
// layout - mobile
|
||||
$bodyMarginMobile: 3vw;
|
||||
$navGradientHeightMobile: 4vh;
|
||||
$footerHeightMobile: 7vh;
|
||||
// layout - desktop
|
||||
$navGradientHeightDesktop: 2vh;
|
||||
$bodyWidth: 65vw;
|
||||
$maxBodyWidth: 1300px;
|
||||
$footerHeightDesktop: 5vh;
|
||||
$marginTopShortContent: 7vh;
|
||||
$footerHeightDesktop: 4vh;
|
||||
|
||||
// transition
|
||||
@mixin transition-ease-out($transitions...) {
|
||||
$unfoldedTransitions: ();
|
||||
@each $transition in $transitions {
|
||||
$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
|
||||
}
|
||||
transition: $unfoldedTransitions;
|
||||
}
|
||||
@function unfoldTransition ($transition) {
|
||||
$property: all;
|
||||
$duration: .4s;
|
||||
$defaultProperties: ($property, $duration, ease-out);
|
||||
|
||||
$unfoldedTransition: ();
|
||||
@for $i from 1 through length($defaultProperties) {
|
||||
$p: null;
|
||||
@if $i <= length($transition) {
|
||||
$p: nth($transition, $i)
|
||||
} @else {
|
||||
$p: nth($defaultProperties, $i)
|
||||
}
|
||||
$unfoldedTransition: append($unfoldedTransition, $p);
|
||||
}
|
||||
|
||||
@return $unfoldedTransition;
|
||||
}
|
||||
// animation
|
||||
@keyframes arrowIndex {
|
||||
30% { transform: translateY(0px); }
|
||||
50% { transform: translateY(20px); }
|
||||
70% { transform: translateY(0px); }
|
||||
}
|
||||
// media queries - tablet
|
||||
$minScreenWidthS: 576px;
|
||||
// media queries - small desktop
|
||||
$minScreenWidthM: 996px;
|
||||
// media queries - large desktop
|
||||
$minScreenWidthL: 1500px;
|
||||
Reference in New Issue
Block a user