diff --git a/dist/ef19487056b129c8f3eda17f9543ab70.css b/dist/ef19487056b129c8f3eda17f9543ab70.css index 0e71528..d701ba0 100644 --- a/dist/ef19487056b129c8f3eda17f9543ab70.css +++ b/dist/ef19487056b129c8f3eda17f9543ab70.css @@ -4,7 +4,7 @@ body { margin: 0; padding: 0; - background: #f1f1f1; + background: #f8f8f8; font-family: sans-serif; } main { @@ -58,9 +58,37 @@ h12 { .container { width: calc( 100% - 10em); - max-width: 60em; + max-width: 90em; margin: 0 auto; } +.alert-primary { + border-radius: 2px; + background-color: #3498db; + border: 1px solid #2980b9; + padding: 1rem; + color: white; } + +.alert-danger { + border-radius: 2px; + background-color: #e74c3c; + border: 1px solid #c0392b; + padding: 1rem; + color: white; } + +.alert-warning { + border-radius: 2px; + background-color: #f1c40f; + border: 1px solid #f39c12; + padding: 1rem; + color: white; } + +.alert-success { + border-radius: 2px; + background-color: #2ecc71; + border: 1px solid #27ae60; + padding: 1rem; + color: white; } + div[class^="col-"] { padding: 1rem 0; text-align: center; } @@ -142,7 +170,7 @@ div[class^="col-"] { margin-left: 100%; } header { - background: #dfdfdf; + background: #f1f1f1; text-align: center; position: fixed; height: 30px; @@ -190,7 +218,7 @@ nav { top: 100%; width: 100%; left: 0; - background: #dfdfdf; + background: #f1f1f1; display: none; transform: scale(1, 0); transform-origin: top; @@ -209,11 +237,11 @@ nav a { text-decoration: none; font-size: 1.2rem; text-transform: uppercase; - color: white; + color: #2e2e2e; opacity: 0; } nav a:hover { - color: #000; } + color: #a5a5a5; } .nav-toggle:checked ~ nav { display: block; @@ -229,11 +257,8 @@ nav a:hover { header { display: grid; grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; } - .nav-logo { - grid-column: 2 / span 1; } nav { all: unset; - grid-column: 3 / 4; display: flex; align-items: center; } nav a { diff --git a/dist/ef19487056b129c8f3eda17f9543ab70.js b/dist/ef19487056b129c8f3eda17f9543ab70.js index e595cee..5da0295 100644 --- a/dist/ef19487056b129c8f3eda17f9543ab70.js +++ b/dist/ef19487056b129c8f3eda17f9543ab70.js @@ -149,7 +149,7 @@ function Module() { module.bundle.Module = Module; if (!module.bundle.parent && typeof WebSocket !== 'undefined') { - var ws = new WebSocket('ws://localhost:58854/'); + var ws = new WebSocket('ws://localhost:63342/'); ws.onmessage = function(event) { var data = JSON.parse(event.data); diff --git a/dist/index.html b/dist/index.html index 97d7fcf..4d48311 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,13 +8,13 @@
-

Logo

+

Logo

-
-
+
+

Alert Elements

+
test
+
test
+
test
+
test
+

CSS Grid

12

diff --git a/src/index.html b/src/index.html index 3754f38..86de385 100644 --- a/src/index.html +++ b/src/index.html @@ -8,13 +8,13 @@
-

Logo

+

Logo

-
-
+
+

Alert Elements

+
test
+
test
+
test
+
test
+

CSS Grid

12

diff --git a/src/scss/main.sass b/src/scss/main.sass index f461431..4776470 100644 --- a/src/scss/main.sass +++ b/src/scss/main.sass @@ -1,7 +1,17 @@ -$primBG: rgb(241, 241, 241) +$primBG: rgb(248, 248, 248) $columns: 12 -$navBG: #dfdfdf +$navBG: #f1f1f1 $navgap: 1em +$navdefcolor: #2e2e2e +$navhovcolor: #a5a5a5 +$primary: #3498db +$primary_dark: #2980b9 +$danger: #e74c3c +$danger_dark: #c0392b +$warning: #f1c40f +$warning_dark: #f39c12 +$success: #2ecc71 +$success_dark: #27ae60 * box-sizing: border-box body @@ -28,8 +38,33 @@ main // Container .container width: calc( 100% - 10em ) - max-width: 60em + max-width: 90em margin: 0 auto +// Alert +.alert-primary + border-radius: 2px + background-color: $primary + border: 1px solid $primary_dark + padding: 1rem + color: white +.alert-danger + border-radius: 2px + background-color: $danger + border: 1px solid $danger_dark + padding: 1rem + color: white +.alert-warning + border-radius: 2px + background-color: $warning + border: 1px solid $warning_dark + padding: 1rem + color: white +.alert-success + border-radius: 2px + background-color: $success + border: 1px solid $success_dark + padding: 1rem + color: white // Grid div[class^="col-"] padding: 1rem 0 @@ -101,10 +136,10 @@ nav a text-decoration: none font-size: 1.2rem text-transform: uppercase - color: white + color: $navdefcolor opacity: 0 nav a:hover - color: #000 + color: $navhovcolor .nav-toggle:checked ~ nav display: block transform: scale(1,1) @@ -117,11 +152,8 @@ nav a:hover header display: grid grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr - .nav-logo - grid-column: 2 / span 1 nav all: unset - grid-column: 3 / 4 display: flex align-items: center nav a