Walidoux/next-app-boilerplate
Template
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

fix(styles/fonts/project): add fonts + change styles + edit default project name

Browse Source
This commit is contained in:
Walid
2022-03-11 15:58:28 +01:00
parent d737e9355c
commit c86ad0b732
60 changed files with 196 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
styles/abstracts/_mixins.scss
View File

@ -8,25 +8,18 @@
@mixin element-invisible($enforce: true) {
$important: if($enforce, "!important", null);
position: absolute #{$important};
width: 1px #{$important};
height: 1px #{$important};
padding: 0 #{$important};
overflow: hidden #{$important};
clip: rect(0, 0, 0, 0) #{$important};
white-space: nowrap #{$important};
border: 0 #{$important};
max-height: 0 #{$important};
opacity: 0 #{$important};
visibility: hidden #{$important};
transition: $default-transition;
}
@mixin element-invisible-off($enforce: true) {
@mixin element-invisible-off($value-visibility: 100px, $enforce: true) {
$important: if($enforce, "!important", null);
position: static #{$important};
width: auto #{$important};
height: auto #{$important};
overflow: visible #{$important};
clip: auto #{$important};
white-space: normal #{$important};
max-height: #{$value-visibility} #{$important};
opacity: 1 #{$important};
visibility: visible #{$important};
}
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {

19
styles/base/_helpers.scss
View File

@ -11,25 +11,6 @@
padding: 20px;
}
%vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
%horizontal-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
%absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
%button {
outline: none;
border: none;

5
styles/base/_root.scss
View File

@ -15,3 +15,8 @@
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
max-width: 100vw;
}

179
styles/fonts.scss Normal file
View File

@ -0,0 +1,179 @@
@font-face {
font-family: Poppins-Italic;
src: url("/fonts/Poppins-Italic.woff2") format("woff2"),
url("/fonts/Poppins-Italic.woff") format("woff"),
url("/fonts/Poppins-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Poppins-Light-Italic;
src: url("/fonts/Poppins-LightItalic.woff2") format("woff2"),
url("/fonts/Poppins-LightItalic.woff") format("woff"),
url("/fonts/Poppins-LightItalic.ttf") format("truetype");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Poppins-SemiBold;
src: url("/fonts/Poppins-SemiBold.woff2") format("woff2"),
url("/fonts/Poppins-SemiBold.woff") format("woff"),
url("/fonts/Poppins-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins-Thin;
src: url("/fonts/Poppins-Thin.woff2") format("woff2"),
url("/fonts/Poppins-Thin.woff") format("woff"),
url("/fonts/Poppins-Thin.ttf") format("truetype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins-Medium-Italic;
src: url("/fonts/Poppins-MediumItalic.woff2") format("woff2"),
url("/fonts/Poppins-MediumItalic.woff") format("woff"),
url("/fonts/Poppins-MediumItalic.ttf") format("truetype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Poppins-Regular;
src: url("/fonts/Poppins-Regular.woff2") format("woff2"),
url("/fonts/Poppins-Regular.woff") format("woff"),
url("/fonts/Poppins-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins-Extra-Bold-Italic;
src: url("/fonts/Poppins-ExtraBoldItalic.woff2") format("woff2"),
url("/fonts/Poppins-ExtraBoldItalic.woff") format("woff"),
url("/fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Poppins-Extra-Light-Italic;
src: url("/fonts/Poppins-ExtraLightItalic.woff2") format("woff2"),
url("/fonts/Poppins-ExtraLightItalic.woff") format("woff"),
url("/fonts/Poppins-ExtraLightItalic.ttf") format("truetype");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Poppins-Light;
src: url("/fonts/Poppins-Light.woff2") format("woff2"),
url("/fonts/Poppins-Light.woff") format("woff"),
url("/fonts/Poppins-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins-Medium;
src: url("/fonts/Poppins-Medium.woff2") format("woff2"),
url("/fonts/Poppins-Medium.woff") format("woff"),
url("/fonts/Poppins-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins-Semi-Bold-Italic;
src: url("/fonts/Poppins-SemiBoldItalic.woff2") format("woff2"),
url("/fonts/Poppins-SemiBoldItalic.woff") format("woff"),
url("/fonts/Poppins-SemiBoldItalic.ttf") format("truetype");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Poppins-Extra-Light;
src: url("/fonts/Poppins-ExtraLight.woff2") format("woff2"),
url("/fonts/Poppins-ExtraLight.woff") format("woff"),
url("/fonts/Poppins-ExtraLight.ttf") format("truetype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins-Thin-Italic;
src: url("/fonts/Poppins-ThinItalic.woff2") format("woff2"),
url("/fonts/Poppins-ThinItalic.woff") format("woff"),
url("/fonts/Poppins-ThinItalic.ttf") format("truetype");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Poppins-Black;
src: url("/fonts/Poppins-Black.woff2") format("woff2"),
url("/fonts/Poppins-Black.woff") format("woff"),
url("/fonts/Poppins-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins;
src: url("/fonts/Poppins-BoldItalic.woff2") format("woff2"),
url("/fonts/Poppins-BoldItalic.woff") format("woff"),
url("/fonts/Poppins-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Poppins-Bold;
src: url("/fonts/Poppins-Bold.woff2") format("woff2"),
url("/fonts/Poppins-Bold.woff") format("woff"),
url("/fonts/Poppins-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Poppins-Black-Italic;
src: url("/fonts/Poppins-BlackItalic.woff2") format("woff2"),
url("/fonts/Poppins-BlackItalic.woff") format("woff"),
url("/fonts/Poppins-BlackItalic.ttf") format("truetype");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: Poppins-Extra-Bold;
src: url("/fonts/Poppins-ExtraBold.woff2") format("woff2"),
url("/fonts/Poppins-ExtraBold.woff") format("woff"),
url("/fonts/Poppins-ExtraBold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}