JasTobi/WeihnachtsKalenderMelly
3
0
Fork 0
Code Issues 3 Pull Requests Releases 4 Activity

bibi update

Browse Source
This commit is contained in:
Illg
2022-12-12 19:29:11 +01:00
parent 130fd1ee7b
commit e08cbd536c
51 changed files with 905 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/sass/_kalender.sass
View File

@@ -5,7 +5,7 @@ $marginLeftRight: 5px // abstand linker und rechter rand
$marginTop: 5px
$marginBetween: 5px // abstand zwischen den Tueren
$doorBorderSize: 1px
//$doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
$doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
/* ********************************
@@ -14,9 +14,10 @@ $doorBorderSize: 1px
position: relative
text-align: center
width: $kalenderWidth
//height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
border: 1px solid black
background: #fff url("../inc/bg/baum2.jpg") no-repeat
//background: #fff url("../inc/bg/baum2.jpg") no-repeat
background: #90C145
/*background-size: $backgroundWidth
background-size: $backgroundSize
background-position: $bgPosition
@@ -24,8 +25,8 @@ $doorBorderSize: 1px
div
position: absolute
border: $doorBorderSize solid darkred
//width: $doorWidth
//height: $doorWidth
width: $doorWidth
height: $doorWidth
overflow: hidden
background: #fff
@@ -33,33 +34,49 @@ $doorBorderSize: 1px
padding-top: 1.5rem
font-weight: bold
padding: 1rem
color: #E8690F
a
text-decoration: none
#hiddenTuer
margin: 1rem
max-height: auto
text-decoration: none
span
position: absolute
display: inline-block
top: 1rem
left: 1rem
top: 0.5rem
left: 1.1rem
font-size: 1rem
width: 1.2rem
height: 1.2rem
color: #FFF
background: #CD0000
width: 6rem
height: 6rem
color: darkred
background-size: cover
text-align: left
text-shadow: 1px 1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, -1px -1px 1px #fff
//text-shadow: 0px 0px 2px darkred
//background-position: 2.4rem
//padding-right: 3rem
//background-origin: padding-box
//background: no-repeat
.left
position: absolute
left: 0
top: 0
//width: #{$doorWidth+50}
//height: $doorWidth
width: #{$doorWidth+50}
height: $doorWidth
display: block
border: none
background: #fff url("../inc/bg/baum2.jpg") no-repeat
//background: #fff url("../inc/bg/baum2.jpg") no-repeat
/*background-size: $backgroundWidth
background-size: $backgroundSize
margin-left: $bgPosition
a
&:hover .left, &:focus .left
//left: #{-($doorWidth+60)}
left: #{-($doorWidth+60)}
.left
display: block
@@ -72,14 +89,11 @@ $doorBorderSize: 1px
@for $row from 0 through 5
@for $col from 0 through 3
//$leftCalc: $marginLeftRight+($doorWidth+$marginBetween+2*$doorBorderSize)*$col
//s$topCalc: $marginTop+($doorWidth+$marginBetween+2*$doorBorderSize)*$row
$leftCalc: $marginLeftRight+($doorWidth+$marginBetween+2*$doorBorderSize)*$col
$topCalc: $marginTop+($doorWidth+$marginBetween+2*$doorBorderSize)*$row
#ak#{$row*4+$col+1}
//left: #{$leftCalc}
//top: #{$topCalc}
left: #{$leftCalc}
top: #{$topCalc}
.left
//background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
#hiddenTuer
margin: 1rem
max-height: auto

47
src/sass/_nav2.sass
View File

@@ -1,11 +1,11 @@
// Navigation Variables
$content-width: 100%
$content-width: 1000px
$breakpoint: 799px
$nav-height: 70px
$nav-background: hsl(0,0%,100%,0.5)
$nav-font-color: darkred
$nav-font-color: darkgreen
$link-hover-color: Lightgrey
$nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
$nav-background2: url("../inc/bg/christmas-banner-6739203.jpg") 0 86% no-repeat
// Blauer klik Hintergrund entfernen
*:focus
@@ -25,7 +25,7 @@ $nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
border-radius: 0 0 2rem 2rem
background-size: 100%
border-bottom: 4px ridge darkgreen
background-size: 100%
// Logo and branding
.brand
@@ -37,9 +37,10 @@ $nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
font-size: 1.4em
font-weight: bold
text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
margin-top: -0.5rem
a,
a:visited
color: $nav-font-color
color: darkred
text-decoration: none
@@ -50,33 +51,41 @@ $nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
// Navigation
nav
nav
display: block
float: right
font-weight: bold
text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
//text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
padding-right: 1rem
margin: 2rem 1rem 0 0
border-radius: 2rem
background: hsl(0,0%,100%,0.7)
ul
list-style: none
margin: 0
margin: 0
padding: 0
background-color: $nav-background
li
float: left
position: relative
padding: 0
a,
a:visited
display: block
padding: 0 20px
line-height: $nav-height
padding: 0.5rem 0.5rem
//line-height: $nav-height
color: $nav-font-color
text-decoration: none
&:hover, &:active, &.active
//background: $link-hover-color
color: red
transform: scale(1.1)
//transform: scale(1.1)
&:not(:only-child):after
padding-left: 4px
padding-left: 10px
content: '▾'
// Dropdown list
@@ -96,7 +105,7 @@ nav
z-index: 1
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20)
margin-top: 4px
font-weight: bold
font-weight: bold
/* Mobile navigation */
@@ -112,6 +121,8 @@ nav
@media only screen and (max-width: 798px)
// Hamburger nav visible on mobile only
.brand
margin: auto 0
.nav-mobile
display: block
@@ -119,6 +130,8 @@ nav
width: 100%
padding: $nav-height 0 15px 0
text-shadow: none
margin: 0px
background: none
ul
display: none
border: 4px ridge darkgreen
@@ -126,12 +139,14 @@ nav
li
float: none
padding-top: 0
a
padding: 15px
line-height: 20px
background: none
line-height: 15px
ul li a
padding-left: 30px
//padding-left: 30px
.nav-dropdown
@@ -159,7 +174,7 @@ nav
border-radius: 1px
height: 5px
width: 35px
background: $nav-font-color
background: black
position: absolute
display: block
content: ''

61
src/sass/_other.sass
View File

@@ -1,12 +1,15 @@
.titel
display: inline-block
/*background: url("../inc/teet/red navigation.png") no-repeat
background-size: 100%
background-position: 0px -63px
img
//display: inline-block
//margin: 0 25%
//background: url("../inc/teet/red navigation.png") no-repeat
//background-size: 100%
//background-position: 0px -63px
> img
display: inline-block
max-width: 210px
margin-top: 10px
margin-top: 15px
h3
//text-decoration: underline
@@ -74,7 +77,7 @@ button
border-radius: 5px
background: linear-gradient(to bottom, #fefffd,#e7e9ea)
font-weight: bold
padding: 5px 10px 5px 10px
//padding: 5px 10px 5px 10px
color: black
@@ -82,10 +85,7 @@ button
color: black
text-decoration: none
padding: 0 0.5rem 0 0
img
//max-width: 10rem
padding-right: 0.5rem
.pList
padding-bottom: 0.5rem
@@ -95,6 +95,7 @@ button
img
max-width: 1.5rem
padding-right: 0.5rem
button
display: inline-flex
@@ -103,7 +104,32 @@ button
margin-bottom: auto
margin-top: auto
padding: 0.5rem
.LFilme
display: inline-block
max-width: 80%
#film
padding: 0.5rem
float: left
p:first-child
border-bottom: 2px solid gray
padding-bottom: 1rem
img
max-width: 3rem
#FCover
max-width: 10rem
border: 3px solid darkred
button
padding: 0 0.5rem 0 0.5rem
margin-bottom: auto
margin-top: auto
.üList
display: inline-block
@@ -158,4 +184,13 @@ button
width: 9rem
height: 9rem
border: 3px solid darkred
object-fit: cover
object-fit: cover
.neu
//display: inline-block
border: 1px solid red
padding: 0.5rem
font-weight: bold
color: darkred
background: gainsboro

46
src/sass/_tueren.sass
View File

@@ -4,17 +4,53 @@
h3
color: darkred
text-decoration: underline
margin-top: 3rem
margin-top: 3.8rem
#txt
display: inline-block
color: darkred
font-family: Verdana, Arial, Helvetica, sans-serif
border: 4px ridge red
background: hsla(0, 0%, 100%, 0.4) url("../inc/bg/20201222_065407.png") -1px -5px no-repeat
background-size: 101%
padding: 0 1.5rem 1.5rem 1.5rem
border: 4px ridge #90C145
background: hsla(0, 0%, 100%, 0.5) url("../inc/bg/1667917199713.png") -1px -5px no-repeat
background-size: 100%
//background: hsla(0, 0%, 100%, 0.5)
padding: 0 1.5rem 0 1.5rem
width: 75%
u
color: darkgreen
#bibi
color: grey
u
color: grey
span
color: grey
margin: 1rem 0 0 0
.schneei
#SRechts
display: inline-block
margin: -5px 8px 0 0
z-index: 5
width: 7rem
float: right
padding: 0
//border: 1px solid red
position: relative
#txt
clip-path: polygon(381px 0%, 100% 150px, 100% 100%, 0% 100%, 0% 0%)
margin-top: -140px
z-index: 0
img
display: inline-block
margin: 1rem 0 0 0
width: 50%
p
font-weight: 500

18
src/sass/main.sass
View File

@@ -13,23 +13,7 @@ body
/*background-color: #e2e4e6
background-color: hsla(190, 50%, 80%, 0.7)
header
margin: auto
/*background-color: Lightgrey
background: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
background-size: 100%
border-bottom: 4px ridge darkgreen
border-radius: 0 0 $headerRadios $headerRadios
text-align: center
padding: 20px
box-shadow: -1px -1px 5px silver, 1px 1px 5px black
h1
color: red
text-decoration: underline
font-size: 1.5rem
font-weight: bold
text-shadow: 1px 1px 1px black
footer
position: fixed