From 5f0838d1a147535bbe7310c3a7e1190c287ccfef Mon Sep 17 00:00:00 2001 From: Astro Date: Tue, 12 Nov 2013 00:16:21 +0100 Subject: [PATCH] redesign with grouped navigation on top of page --- Makefile | 6 +- content/navigation.xml | 44 +++-- content/static/style/default.css | 163 ++++++++--------- content/static/style/old.css | 293 ------------------------------- xsl/common.xsl | 90 +++++----- xsl/portal2items.xsl | 3 + xsl/xhtml5.xsl | 46 ++--- 7 files changed, 173 insertions(+), 472 deletions(-) delete mode 100644 content/static/style/old.css diff --git a/Makefile b/Makefile index 1af3bc72c..95efe6218 100644 --- a/Makefile +++ b/Makefile @@ -239,16 +239,16 @@ portal/items-sorted.xml: portal/items.xml $(STYLE) $(call xml_process) build/portal.html : NOINPUTVALID:=true -build/portal.html: portal/items-sorted.xml $(STYLE) +build/portal.html: portal/items-sorted.xml $(STYLE) $(CALENDAR_SUMMARY) $(call xml_process) # Pages: -build/%.html: content/pages/%.xml $(STYLE) $(NAVIGATION) $(WWW_CCC_DE_UPDATES) $(CALENDAR_SUMMARY) $(DATESTAMP) news.xml +build/%.html: content/pages/%.xml $(STYLE) $(NAVIGATION) $(DATESTAMP) news.xml $(call xml_process) # News: build/news/%.html : BASEURL="../" -build/news/%.html: content/news/%.xml $(STYLE) $(NAVIGATION) $(WWW_CCC_DE_UPDATES) $(CALENDAR_SUMMARY) $(DATESTAMP) +build/news/%.html: content/news/%.xml $(STYLE) $(NAVIGATION) $(DATESTAMP) $(call xml_process) # Datenspuren diff --git a/content/navigation.xml b/content/navigation.xml index 0a04dddba..cdb234147 100644 --- a/content/navigation.xml +++ b/content/navigation.xml @@ -5,22 +5,30 @@ When changing the position of these files in the navigation sidebar, please adjust the #navigation li:nth-child(...) rules in the CSS file. --> - news - whois - space - themenabende - events - schule - - kontakt - mailingliste - muc - wiki - - radio - podcast - pentamusic - - shop - warez + + news + whois + space + schule + + + calendar + themenabende + events + + + kontakt + mailingliste + muc + wiki + + + radio + podcast + pentamusic + + + shop + warez + diff --git a/content/static/style/default.css b/content/static/style/default.css index a843f152a..a8b02d2af 100644 --- a/content/static/style/default.css +++ b/content/static/style/default.css @@ -1,10 +1,8 @@ /* -- General -- */ body { - font: 0.8em Verdana, Arial, sans-serif; - background-image: url(../images/background.png); - text-align: center; - min-width: 1024px; - /* max-width: 1280px; margin: 0 auto; */ + font: Verdana, Arial, sans-serif; + margin: 0; + padding: 0; } pre { @@ -32,58 +30,59 @@ pre { } #logo { - margin: 2em 2em 0 2em; - height: 150px; - background: url(../images/c3d2_blue.jpg); + margin: 0; + padding: 0; + position: absolute; + top: 0; + height: 159px; + left: 0; + right: 0; + background-image: url(../images/c3d2_blue.jpg); text-align: left; - border-top-left-radius: 30px; - -moz-border-radius-topleft: 30px; - -webkit-border-top-left-radius: 30px; - border-top-right-radius: 30px; - -moz-border-radius-topright: 30px; - -webkit-border-top-right-radius: 30px; } #logo h1 { - position: relative; - top: 47px; - left: 23px; + /* position: relative; */ + /* top: 47px; */ + /* left: 23px; */ padding: 65px 0 0 0; + max-width: 960px; + margin: 47px auto 0; overflow: hidden; background-image: url(../images/logo.png); background-repeat: no-repeat; height: 0px !important; } -/* -- Body -- */ -#body { - display: block; - border: thin solid #ccc; - border-top: none; - background-color: white; - margin: 0 2em 0 2em; - background: #fff url(../images/background_bottom.png) no-repeat left bottom; -} - /* -- Navigation -- */ #navigation { - float: left; text-align: left; - width: 14em; margin: 0; padding: 0 1em; - padding-top: 100px; - background: url(../images/ck.png) top center no-repeat; + padding-top: 159px; + background: -moz-linear-gradient(top, #113 0%, #222 100%) no-repeat; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#113), color-stop(100%,#222)) no-repeat; + background: -webkit-linear-gradient(top, #113 0%,#222 100%) no-repeat; + background: -o-linear-gradient(top, #113 0%,#222 100%) no-repeat; + background: -ms-linear-gradient(top, #113 0%,#222 100%) no-repeat; + background: linear-gradient(top, #113 0%, #222 100%) no-repeat; + background-color: #222; +} + +#navgroups { + display: block; + max-width: 960px; + margin: 0 auto; } #navigation ul { - list-style-type: square; - list-style-image: url(../images/bullet.png); + display: inline-block; + list-style-type: none; font-size: small; - padding-left: 2em; - padding-top: 0.2em; - border-top: #ebc63c 1px solid; + margin: 0.5em 0; + padding: 0 5em 0 0; + vertical-align: top; } #navigation li { @@ -96,25 +95,28 @@ pre { } #navigation a { - color: #676767; + color: #ddd; text-decoration: none; - font-weight: bold; } #navigation a:hover { + color: white; text-decoration: underline; } /* -- Content -- */ #content { text-align: left; - border-left: #ccc 1.1px dashed; - border-right: #ccc 1.1px dashed; line-height: 1.3em; - padding: 2em; + margin: 0 auto; + padding: 2em 0 4em; min-height: 300px; min-width: 30em; - margin: 0 24em 0 16em; + max-width: 960px; +} +#content.portalcontainer { + max-width: inherit; + padding: 0 0 4em; } #content p { @@ -154,6 +156,7 @@ pre { margin-bottom: 1em; margin-top: 0px; color: #333; + text-align: center; } #content h3 { @@ -234,10 +237,9 @@ p.new_comment a:before { /* -- Sidebar right -- */ #rsidebar { - width: 24em; float: right; margin: 0; - padding: 0; + padding: 0.5em 0.5em 1em 1em; font-size: small; text-align: left; } @@ -299,38 +301,6 @@ p.new_comment a:before { text-decoration: none; } -/* -- Upcoming -- */ -#upcoming { - padding: 0 1em 0 2em; -} - -#upcoming h2 { - font-size: 1.2em; - border-top: #ebc63c 1px solid; - padding-top: 5%; -} - -#upcoming ul { - list-style-type: none; - font-size: small; - margin-left: -2em; -} - -#upcoming ul li { - line-height: 1.5em; - margin-top: .5em; -} - -#upcoming a { - color: #666; - text-decoration: none; - font-style: italic; -} - -#upcoming a:hover { - text-decoration: underline; -} - /* -- footer -- */ #footer { clear: both; @@ -434,21 +404,24 @@ abbr.dtstart, abbr.dtend { /* -- Portal -- */ #portal { - text-align: center; white-space-collapsing: discard; } #portal article { display: inline-block; - text-align: left; -} -#portal article > a { - display: block; position: relative; width: 14.5em; height: 14.5em; overflow: hidden; + text-align: left; + vertical-align: middle; + margin: 0 -0.3em 0 0; +} +#portal article > a { + display: block; border-bottom: none; margin: 0; + width: 14.5em; + height: 14.5em; } #portal article > a:hover { margin: 0; @@ -477,7 +450,7 @@ abbr.dtstart, abbr.dtend { transition: top 0.3s ease-out; letter-spacing: 0; } -#portal a:hover h3 { +#portal article:hover h3 { top: 0; transition: top 0.1s ease-in; } @@ -487,7 +460,7 @@ abbr.dtstart, abbr.dtend { transition: bottom 0.3s ease-out; letter-spacing: 0; } -#portal a:hover .footer { +#portal article:hover .footer { bottom: 0; transition: bottom 0.1s ease-in; } @@ -503,7 +476,7 @@ abbr.dtstart, abbr.dtend { color: #333; text-shadow: -1px 0 1.5px white, 0 1px 1.5px white, 1px 0 1.5px white, 0 -1px 1.5px white; } -#portal a:hover h4 { +#portal article:hover h4 { color: black; } #portal .wiki h4 { @@ -521,6 +494,24 @@ abbr.dtstart, abbr.dtend { content: ']]'; } +/* -- Upcoming -- */ + +#portal .upcoming h3 a { + color: white; +} + +#portal .upcoming ul { + list-style-type: none; + font-size: small; + margin-top: 2em; + margin-left: -2em; +} + +#portal .upcoming ul li { + line-height: 1.5em; + margin-top: .5em; +} + /* -- Calendar -- */ table.calendar { table-layout: fixed; @@ -716,10 +707,6 @@ a[href$="xcal.xml"]:before { content: url(../images/mime/calendar.png); padding-right: 0.3em; } -a[href$="calendar.html"]:before { - content: url(../images/mime/calendar.png); - padding-right: 0.3em; -} #news h2 a:before { content: url(../images/mime/feed.png); padding-right: 0.3em; diff --git a/content/static/style/old.css b/content/static/style/old.css deleted file mode 100644 index 24a882f17..000000000 --- a/content/static/style/old.css +++ /dev/null @@ -1,293 +0,0 @@ -body { - padding: 2%; - font: 120% Verdana, Arial, sans-serif; - background-image: url(../images/background.png); - text-align: center; -} - -a[href ^=https] { - padding-left: 16px; - margin-left: 2px; - background: url(../images/secure.png) no-repeat; -} - -pre { - border: thin dotted #ccc; - margin-left: 20px; - margin-right: 20px; - background-color: #fafafa; - padding: 1em; -} - -#page { - float: left; - max-width: 1200px; - min-width: 800px; -} - -#body { - display: table; - float: left; - max-width: 100% !important; - width: 100% !important; -} - -#logo::before { - background: transparent url(../images/top-right.png) scroll no-repeat top right; - margin-bottom: -20px; - height: 30px; - display: block; - border: none; - content: url(../images/top-left.png); - padding: 0; - line-height: 0.1; - font-size: 1px; -} - -#logo { - height: 150px; - background: url(../images/c3d2_blue.jpg); - text-align: left; -} -#logo h1 { - position: relative; - top: 23px; - left: 23px; - padding: 65px 0 0 0; - overflow: hidden; - background-image: url(../images/logo.png); - background-repeat: no-repeat; - height: 0px !important; - height /**/:65px; -} -#navigation { - text-align: left; - display: table-cell; - margin-left: 0px; - width: 12%; - padding: 0.5em; - margin-top: 10px; - padding-top: 100px; - background: url(../images/ck.png) top center no-repeat; -} - -#navigation form { - padding: 0.2em 0 0.2em 0; - margin: 1em 0.3em 0 0.3em; - border-top: #ebc63c 1px solid; - border-bottom: #ebc63c 1px solid; - text-align: center; -} -#navigation input[type =text] { - width: 80%; -} -#navigation ul { - list-style-type: square; - list-style-image: url(../images/bullet.png); - font-size: small; - margin-left: 0; -} -#navigation li { - line-height: 2em; -} -#navigation a { - color: #676767; - text-decoration: none; - font-weight: bold; -} -#navigation a:hover { - text-decoration: underline; -} - -#content { - display: table-cell; - text-align: left; - width: 50%; - border-left: #ccc 1.1px dashed; - border-right: #ccc 1.1px dashed; - font-size: 75%; - line-height: 1.3em; - padding: 0 2em; -} - -#content p { - margin: 1.5em 1em; -} - -#content a { - text-decoration: none; - border-bottom: #ebc63c 1px solid; - color: #555; -} -#content a:hover { - border-width: 2px; -} - -#content h1, -#content h2, -#content h3, -#content h4, -#content h5 { - letter-spacing: 3px; - margin: 0px; - background-color: transparent; - font-weight: bold; -} -#content h2 { - font-size: 200%; - margin-bottom: 1em; - margin-top: 0px; - color: #333; -} -#content h3 { - font-size: 150%; - margin-top: 30px; - color: #555; -} -#content h4 { - font-size: 120%; -} - - -#news { - text-align: left; - display: table-cell; - margin-right: 1em; - width: 10%; - background: url(../images/pesthoernchen.png) top center no-repeat; - padding: 1em; - padding-top: 90px; - margin-top: 10px; - - font-size: small; -} -#news h2 { - font-size: 1.2em; - border-top: #ebc63c 1px solid; - padding-top: 5%; -} -#news ul { - list-style-type: circle; - list-style-image: url(../images/star.png); - font-size: small; - margin-left: -1em; - max-width: 10em !important; -} -#news ul li { - line-height: 1.5em; -} -#news a { - color: #666; - text-decoration: none; - font-style: italic; -} -#news a:hover { - text-decoration: underline; -} - - -#footer { - text-align: center; - font-size: small; - border: #ccc 1px solid; - border-top: none; - background: #fff url(../images/background_bottom.png) no-repeat left bottom; -} -#footer ul, #footer li { - display: inline; - list-style-type: none; -} -#footer li a { - margin: 0 1em; - color: #676767; - text-decoration: none; - font-weight: bold; -} -#footer li a img { - border: none; -} -.hidden { - color: white; - font-size: xx-small; - clear: both; -} -#update { - font: xx-small sans-serif; - letter-spacing: 0.8px; - color: #666; -} - - -#content hr.news { - visibility: hidden; - clear: both; -} - -#content div.news { - padding: 1em; - margin: 0; - margin-bottom: 0.5em; -} -.news_author { - font-size: small; - font-style: italic; - margin-left: 1em; - font-weight: bold; -} -#content h3.news { - border-bottom: #ebc63c 3px solid; - padding: 0px; - line-height: 1.1em; - font-size: 130%; -} -#content h3.news a { - border: none; -} - -/* some little helpers */ -img.left { - float: left; - margin-right: 1em; -} -img.right { - float: right; - margin-left: 1em; -} - -dt { - font-weight: bold; - font-style: italic; - margin-left: 2em; - margin-top: 0.5em; - color: #555; -} - -dt:after { - content: ":"; -} - -dl { - font-size: 90%; - margin-top: 2em; - margin-bottom: 3em; -} - -dt.main { - font-style: normal; - font-size: 100%; - margin-left: 1em; - margin-top: 1em; - color: #000; -} - -dt.main:after, dt.main:before { - content: ""; -} - -dd, dt { - font-size: 95%; -} - -dd { - margin-left: 4em; -} diff --git a/xsl/common.xsl b/xsl/common.xsl index a391f4414..4e06fcd5c 100644 --- a/xsl/common.xsl +++ b/xsl/common.xsl @@ -184,15 +184,17 @@ - + +
    + + + + + + + +
+ @@ -237,46 +239,40 @@ - -
-

- Kalender -

-
- + + + + + + + +
  • + + + + : + + + + + + + + + + + + + +
    • +     + +     diff --git a/xsl/portal2items.xsl b/xsl/portal2items.xsl index 5931df8db..98825f37d 100644 --- a/xsl/portal2items.xsl +++ b/xsl/portal2items.xsl @@ -12,7 +12,10 @@ + + +

    <<</>> Chaos Computer Club Dresden | c3d2

    -
    - - - ### Navigation ### - -
    + @@ -112,6 +99,9 @@ vevent + + portalcontainer +

    @@ -135,7 +125,6 @@ - @@ -315,7 +304,18 @@
    - + + + + +