Use wrapper class for app styling (#125)

pull/127/head
Matt (IPv4) Cowley 2019-11-19 18:39:45 +00:00 committed by Bálint Szekeres
parent 27208f2559
commit c9f81d72e1
8 changed files with 83 additions and 70 deletions

View File

@ -58,7 +58,7 @@
"build:js:app:prod": "npm run build:js:app -- --production", "build:js:app:prod": "npm run build:js:app -- --production",
"build:js:app:watch": "nodemon -q -C -x 'npm run build:js:app' -w 'resources/js/' -e '*'", "build:js:app:watch": "nodemon -q -C -x 'npm run build:js:app' -w 'resources/js/' -e '*'",
"build:scss": "node-sass resources/scss/app.scss public/assets/css/app.min.css", "build:scss": "node-sass resources/scss/style.scss public/assets/css/app.min.css",
"build:scss:prod": "npm run build:scss -- --output-style=compressed", "build:scss:prod": "npm run build:scss -- --output-style=compressed",
"build:scss:watch": "npm run build:scss -- --watch", "build:scss:watch": "npm run build:scss -- --watch",

View File

@ -18,7 +18,10 @@
<link rel="preload" as="font" href="https://fonts.gstatic.com/s/quicksand/v9/6xKodSZaM9iE8KbpRA_pkHEYT8L_FYzokA.woff2" type="font/woff2" crossorigin="anonymous"> <link rel="preload" as="font" href="https://fonts.gstatic.com/s/quicksand/v9/6xKodSZaM9iE8KbpRA_pkHEYT8L_FYzokA.woff2" type="font/woff2" crossorigin="anonymous">
</head> </head>
<body> <body>
<div id="app" ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController" ng-class="['layout-' + layout]" ng-include="'partials/index.html'" onload="init()" ng-csp></div> <div class="do-app">
<div id="app" ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController"
ng-class="['layout-' + layout]" ng-include="'partials/index.html'" onload="init()" ng-csp></div>
</div>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-3084378-31"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3084378-31"></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];

7
resources/scss/_app.scss Normal file
View File

@ -0,0 +1,7 @@
#app {
display: flex;
flex-direction: column;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

View File

@ -1,7 +1,9 @@
#app { body {
display: flex; padding: 0;
flex-direction: column; margin: 0;
min-height: 100vh; font-size: 1rem;
-webkit-font-smoothing: antialiased; font-weight: 400;
-moz-osx-font-smoothing: grayscale; line-height: 1.5;
color: #212529;
text-align: left;
} }

View File

@ -0,0 +1,39 @@
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-Regular.woff2') format('woff2'),
url('../fonts/Sailec-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-Bold.woff2') format('woff2'),
url('../fonts/Sailec-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-Light.woff2') format('woff2'),
url('../fonts/Sailec-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-Medium.woff2') format('woff2'),
url('../fonts/Sailec-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-LightItalic.woff2') format('woff2'),
url('../fonts/Sailec-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}

View File

@ -1,20 +0,0 @@
@import 'variables';
@import 'vendor/bootstrap';
@import 'vendor/highlight-js';
@import 'vendor/angular-tooltips';
@import 'vendor/notie';
@import 'typography';
@import 'body';
@import 'header';
@import 'steps';
@import 'main';
@import 'codes';
@import 'sidebar';
@import 'footer';
@import 'utilities';
@import 'layout/do';

View File

@ -1,45 +1,3 @@
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-Regular.woff2') format('woff2'),
url('../fonts/Sailec-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-Bold.woff2') format('woff2'),
url('../fonts/Sailec-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-Light.woff2') format('woff2'),
url('../fonts/Sailec-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-Medium.woff2') format('woff2'),
url('../fonts/Sailec-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Sailec';
src: url('../fonts/Sailec-LightItalic.woff2') format('woff2'),
url('../fonts/Sailec-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
#app.layout-do { #app.layout-do {
font-family: 'Sailec', sans-serif; font-family: 'Sailec', sans-serif;

24
resources/scss/style.scss Normal file
View File

@ -0,0 +1,24 @@
@import 'variables';
@import 'body';
@import 'fonts';
.do-app {
@import 'vendor/bootstrap';
@import 'vendor/highlight-js';
@import 'vendor/angular-tooltips';
@import 'vendor/notie';
@import 'typography';
@import 'app';
@import 'header';
@import 'steps';
@import 'main';
@import 'codes';
@import 'sidebar';
@import 'footer';
@import 'utilities';
@import 'layout/do';
}