fix wordwrapping bug and added notification elements
This commit is contained in:
parent
f5615b66e5
commit
093b6c8e8c
13
README.md
13
README.md
@ -1,6 +1,8 @@
|
||||
# steevcss
|
||||
my own collection of html, css and javascript code combined to a webframework
|
||||
1. GridSystem 24 Elemente
|
||||
|
||||
## Feature List
|
||||
1. GridSystem 12 Elemente [Implemented]
|
||||
2. Code Preview
|
||||
3. SlideShow
|
||||
4. Navigations [Implemented]
|
||||
@ -14,4 +16,11 @@ my own collection of html, css and javascript code combined to a webframework
|
||||
12. general styled images (rounded borders)
|
||||
13. Dropdowns
|
||||
14. colored sections (a full length area with defined background-color)
|
||||
15. Alert Sections (Sections colored as their meaning with text inside)
|
||||
15. Alert Sections [Implemented]
|
||||
|
||||
## Stuff i already found
|
||||
1. responsiveness is a bit messy
|
||||
2. images in navbar are completely messed up
|
||||
3. the colors may need a tweak
|
||||
4. mobile toggle button needs to be bigger
|
||||
5. revert back to standard font collection with verdana in it
|
||||
88
dist/ef19487056b129c8f3eda17f9543ab70.css
vendored
88
dist/ef19487056b129c8f3eda17f9543ab70.css
vendored
@ -10,43 +10,45 @@ body {
|
||||
main {
|
||||
z-index: 980;
|
||||
position: relative;
|
||||
top: 5.5em; }
|
||||
top: 5.5em;
|
||||
width: 100%;
|
||||
word-break: break-all; }
|
||||
|
||||
h1 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h2 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h3 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h4 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h5 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h6 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h7 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h8 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h9 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h10 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h11 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
h12 {
|
||||
margin: 10px; }
|
||||
margin: 0; }
|
||||
|
||||
.dev {
|
||||
border: 1px solid black; }
|
||||
@ -89,9 +91,65 @@ h12 {
|
||||
padding: 1rem;
|
||||
color: white; }
|
||||
|
||||
.notification-primary {
|
||||
width: 100%;
|
||||
display: flex; }
|
||||
|
||||
.notification-primary h2 {
|
||||
border-right: 0.3rem solid #3498db;
|
||||
border-radius: 2px;
|
||||
padding: 5px;
|
||||
margin-right: 5px;
|
||||
min-width: 70px;
|
||||
height: auto;
|
||||
display: flex; }
|
||||
|
||||
.notification-danger {
|
||||
width: 100%;
|
||||
display: flex; }
|
||||
|
||||
.notification-danger h2 {
|
||||
border-right: 0.3rem solid #e74c3c;
|
||||
border-radius: 2px;
|
||||
padding: 5px;
|
||||
margin-right: 5px;
|
||||
min-width: 70px;
|
||||
height: auto;
|
||||
display: flex; }
|
||||
|
||||
.notification-warning {
|
||||
width: 100%;
|
||||
display: flex; }
|
||||
|
||||
.notification-warning h2 {
|
||||
border-right: 0.3rem solid #f1c40f;
|
||||
border-radius: 2px;
|
||||
padding: 5px;
|
||||
margin-right: 5px;
|
||||
min-width: 70px;
|
||||
height: auto;
|
||||
display: flex; }
|
||||
|
||||
.notification-success {
|
||||
width: 100%;
|
||||
display: flex; }
|
||||
|
||||
.notification-success h2 {
|
||||
border-right: 0.3rem solid #2ecc71;
|
||||
border-radius: 2px;
|
||||
padding: 5px;
|
||||
margin-right: 5px;
|
||||
min-width: 70px;
|
||||
height: auto;
|
||||
display: flex; }
|
||||
|
||||
.notification-body {
|
||||
line-height: 30pt;
|
||||
font-size: 15pt;
|
||||
word-wrap: break-word; }
|
||||
|
||||
div[class^="col-"] {
|
||||
padding: 1rem 0;
|
||||
text-align: center; }
|
||||
padding: 1rem 0; }
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
|
||||
2
dist/ef19487056b129c8f3eda17f9543ab70.js
vendored
2
dist/ef19487056b129c8f3eda17f9543ab70.js
vendored
@ -149,7 +149,7 @@ function Module() {
|
||||
module.bundle.Module = Module;
|
||||
|
||||
if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
|
||||
var ws = new WebSocket('ws://localhost:63342/');
|
||||
var ws = new WebSocket('ws://localhost:50893/');
|
||||
ws.onmessage = function(event) {
|
||||
var data = JSON.parse(event.data);
|
||||
|
||||
|
||||
20
dist/index.html
vendored
20
dist/index.html
vendored
@ -31,6 +31,26 @@
|
||||
<div class="alert-warning"> test </div>
|
||||
<div class="alert-success"> test </div>
|
||||
<br>
|
||||
<h1 style="text-align: center;">Alert Elements</h1>
|
||||
<div class="notification-primary">
|
||||
<h2 class="notification-primary-head">ein kleiner test satz</h2>
|
||||
<span class="notification-body">Funktion test des objektes</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="notification-danger">
|
||||
<h2 class="notification-danger-head">ein kleiner test satz</h2>
|
||||
<span class="notification-body">Funktion test des objektes</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="notification-warning">
|
||||
<h2 class="notification-warning-head">ein kleiner test satz</h2>
|
||||
<span class="notification-body">Funktion test des objektes</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="notification-success">
|
||||
<h2 class="notification-success-head">ein kleiner test satz</h2>
|
||||
<span class="notification-body">Funktion test des objektes</span>
|
||||
</div>
|
||||
<h1 style="text-align: center;">CSS Grid</h1>
|
||||
<div class="row">
|
||||
<div class="col-12 display"><h1>12</h1></div>
|
||||
|
||||
@ -31,6 +31,26 @@
|
||||
<div class="alert-warning"> test </div>
|
||||
<div class="alert-success"> test </div>
|
||||
<br>
|
||||
<h1 style="text-align: center;">Alert Elements</h1>
|
||||
<div class="notification-primary">
|
||||
<h2 class="notification-primary-head">ein kleiner test satz</h2>
|
||||
<span class="notification-body">Funktion test des objektes</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="notification-danger">
|
||||
<h2 class="notification-danger-head">ein kleiner test satz</h2>
|
||||
<span class="notification-body">Funktion test des objektes</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="notification-warning">
|
||||
<h2 class="notification-warning-head">ein kleiner test satz</h2>
|
||||
<span class="notification-body">Funktion test des objektes</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="notification-success">
|
||||
<h2 class="notification-success-head">ein kleiner test satz</h2>
|
||||
<span class="notification-body">Funktion test des objektes</span>
|
||||
</div>
|
||||
<h1 style="text-align: center;">CSS Grid</h1>
|
||||
<div class="row">
|
||||
<div class="col-12 display"><h1>12</h1></div>
|
||||
|
||||
@ -24,10 +24,13 @@ main
|
||||
z-index: 980
|
||||
position: relative
|
||||
top: 5.5em
|
||||
width: 100%
|
||||
word-break: break-all
|
||||
|
||||
// header classes margin fix
|
||||
@for $i from 1 through 12
|
||||
h#{$i}
|
||||
margin: 10px
|
||||
margin: 0
|
||||
// Dev Classes
|
||||
.dev
|
||||
border: 1px solid black
|
||||
@ -65,10 +68,57 @@ main
|
||||
border: 1px solid $success_dark
|
||||
padding: 1rem
|
||||
color: white
|
||||
.notification-primary
|
||||
width: 100%;
|
||||
display: flex
|
||||
.notification-primary h2
|
||||
border-right: 0.3rem solid $primary
|
||||
border-radius: 2px
|
||||
padding: 5px
|
||||
margin-right: 5px;
|
||||
min-width: 70px
|
||||
height: auto
|
||||
display: flex
|
||||
.notification-danger
|
||||
width: 100%;
|
||||
display: flex
|
||||
.notification-danger h2
|
||||
border-right: 0.3rem solid $danger
|
||||
border-radius: 2px
|
||||
padding: 5px
|
||||
margin-right: 5px;
|
||||
min-width: 70px
|
||||
height: auto
|
||||
display: flex
|
||||
.notification-warning
|
||||
width: 100%;
|
||||
display: flex
|
||||
.notification-warning h2
|
||||
border-right: 0.3rem solid $warning
|
||||
border-radius: 2px
|
||||
padding: 5px
|
||||
margin-right: 5px;
|
||||
min-width: 70px
|
||||
height: auto
|
||||
display: flex
|
||||
.notification-success
|
||||
width: 100%;
|
||||
display: flex
|
||||
.notification-success h2
|
||||
border-right: 0.3rem solid $success
|
||||
border-radius: 2px
|
||||
padding: 5px
|
||||
margin-right: 5px;
|
||||
min-width: 70px
|
||||
height: auto
|
||||
display: flex
|
||||
.notification-body
|
||||
line-height: 30pt
|
||||
font-size: 15pt
|
||||
word-wrap: break-word
|
||||
// Grid
|
||||
div[class^="col-"]
|
||||
padding: 1rem 0
|
||||
text-align: center
|
||||
.row
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user