Steev/steevcss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor update

Browse Source
This commit is contained in:
steevLP
2021-01-28 02:19:03 +01:00
parent 093b6c8e8c
commit e0ec96562d
5 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/index.html
View File

@ -26,31 +26,32 @@
<main>
<div class="container">
<h1 style="text-align: center;">Alert Elements</h1>
<div class="alert-primary"> test </div>
<div class="alert-danger"> test </div>
<div class="alert-warning"> test </div>
<div class="alert-primary"> test </div><br>
<div class="alert-danger"> test </div><br>
<div class="alert-warning"> test </div><br>
<div class="alert-success"> test </div>
<br>
<h1 style="text-align: center;">Alert Elements</h1>
<h1 style="text-align: center;">Notification Elements</h1>
<div class="notification-primary">
<h2 class="notification-primary-head">ein kleiner test satz</h2>
<h2>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>
<h2>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>
<h2>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>
<h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<h1 style="text-align: center;">CSS Grid</h1>
<div class="row">
<div class="col-12 display"><h1>12</h1></div>
@ -69,5 +70,7 @@
</div>
</div>
</main>
<br><br><br>
<br><br><br>
</body>
</html>

27
src/scss/main.sass
View File

@ -18,32 +18,26 @@ body
margin: 0
padding: 0
background: $primBG
font-family: sans-serif
// Nav Overlapping fix
font-family: sans-serifs
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: 0
// Dev Classes
.dev
border: 1px solid black
.display
background-color: lightcoral
border: 1px solid red
text-align: center
// Container
.container
width: calc( 100% - 10em )
max-width: 90em
margin: 0 auto
// Alert
.alert-primary
border-radius: 2px
background-color: $primary
@ -71,9 +65,11 @@ main
.notification-primary
width: 100%;
display: flex
padding: 5px
border: 2px solid $primary
border-radius: 2px
.notification-primary h2
border-right: 0.3rem solid $primary
border-radius: 2px
padding: 5px
margin-right: 5px;
min-width: 70px
@ -82,9 +78,11 @@ main
.notification-danger
width: 100%;
display: flex
padding: 5px
border: 2px solid $danger
border-radius: 2px
.notification-danger h2
border-right: 0.3rem solid $danger
border-radius: 2px
padding: 5px
margin-right: 5px;
min-width: 70px
@ -93,9 +91,11 @@ main
.notification-warning
width: 100%;
display: flex
padding: 5px
border: 2px solid $warning
border-radius: 2px
.notification-warning h2
border-right: 0.3rem solid $warning
border-radius: 2px
padding: 5px
margin-right: 5px;
min-width: 70px
@ -104,9 +104,11 @@ main
.notification-success
width: 100%;
display: flex
padding: 5px
border: 2px solid $success
border-radius: 2px
.notification-success h2
border-right: 0.3rem solid $success
border-radius: 2px
padding: 5px
margin-right: 5px;
min-width: 70px
@ -116,7 +118,6 @@ main
line-height: 30pt
font-size: 15pt
word-wrap: break-word
// Grid
div[class^="col-"]
padding: 1rem 0
.row
@ -127,7 +128,6 @@ div[class^="col-"]
flex: 0 0 100% / $columns * $i
.col-offset-#{$i}
margin-left: 100% / $columns * $i
// Navigation
header
background: $navBG
text-align: center
@ -214,7 +214,6 @@ nav a:hover
margin-left: $navgap
margin-bottom: 0
list-style: none
// Left sided Navbar for more custumisation
.nav-logo-left
grid-column: 2 / span 1
.nav-left