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: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: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">
</head>
<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>
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 {
display: flex;
flex-direction: column;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
body {
padding: 0;
margin: 0;
font-size: 1rem;
font-weight: 400;
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 {
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';
}