From 6eaf1fb7fa41dc409e0a4e5e643602dcb0914dca Mon Sep 17 00:00:00 2001 From: Nachtfalter Date: Wed, 2 Apr 2014 19:16:01 +0200 Subject: [PATCH] split the header images into single ones --- css/banner.styl | 49 ++++++++++++++++++++++++++++++++++++++++ css/layout.styl | 5 ++-- html/layout.ect | 12 +++++++++- public/css/clonkspot.css | 44 ++++++++++++++++++++++++++++++++++++ 4 files changed, 106 insertions(+), 4 deletions(-) create mode 100644 css/banner.styl diff --git a/css/banner.styl b/css/banner.styl new file mode 100644 index 0000000..f734901 --- /dev/null +++ b/css/banner.styl @@ -0,0 +1,49 @@ +#banner { + position: relative + margin-left: 272px +} + +.cut-origin { + margin-left: -643px +} + +.cut-medieval { + margin-left: -550px +} + +.cut-cmc { + margin-left: -451px +} + +.cut-fantasy { + margin-left: -353px +} + +.cut-mars { + margin-left: -247px +} + +.cut-western { + margin-top: 20px + margin-left: -148px +} + +.snow { + position: absolute + margin-top: 0px + margin-left: -600px + height: 50px + + -webkit-animation: winter 1s linear infinite +} + + +[class^="cut"] { + top: 8px + position: absolute +} + +@-webkit-keyframes winter { + 0% { bottom: 0px } + 100% { bottom: -50px } +} \ No newline at end of file diff --git a/css/layout.styl b/css/layout.styl index 32ad297..cc034d8 100644 --- a/css/layout.styl +++ b/css/layout.styl @@ -32,6 +32,7 @@ header { text-decoration: none } + nav { background: #D4D4D4 white-space: nowrap @@ -92,6 +93,4 @@ footer { a:hover { color: white } -} - - +} \ No newline at end of file diff --git a/html/layout.ect b/html/layout.ect index ec18101..116c592 100644 --- a/html/layout.ect +++ b/html/layout.ect @@ -6,11 +6,21 @@ <% content 'head' %> +
- header + + diff --git a/public/css/clonkspot.css b/public/css/clonkspot.css index c91d494..a19d623 100644 --- a/public/css/clonkspot.css +++ b/public/css/clonkspot.css @@ -1,3 +1,47 @@ +#banner { + position: relative; + margin-left: 272px; +} +.cut-origin { + margin-left: -643px; +} +.cut-medieval { + margin-left: -550px; +} +.cut-cmc { + margin-left: -451px; +} +.cut-fantasy { + margin-left: -353px; +} +.cut-mars { + margin-left: -247px; +} +.cut-western { + margin-top: 20px; + margin-left: -148px; +} +.snow { + position: absolute; + margin-top: 0px; + margin-left: -600px; + height: 50px; + -webkit-animation: winter 1s linear infinite; +} +[class^="cut"] { + top: 8px; + position: absolute; +} +@-webkit-keyframes winter { + 0% { + bottom: 0px; + } + + 100% { + bottom: -50px; + } +} + /* Clonkspot CSS */ html { background: #b3b3b3 url("/images/bg.jpg") no-repeat;