From 656cfa246e60729a6f2a6c656ed399818c2a87ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Sun, 4 Oct 2015 19:19:47 +0200 Subject: [PATCH] general: add basic scss blocks and publik-scss to use them (#8504) --- Makefile | 2 +- debian/control | 2 +- static/custom-publik-scss/_custom.scss | 54 +++++++++++++ static/custom-publik-scss/logo.png | Bin 0 -> 1460 bytes static/custom-publik-scss/style.scss | 23 ++++++ static/includes/_cells.scss | 58 ++++++++++++++ static/includes/_forms.scss | 16 ++++ static/includes/_general.scss | 29 +++++++ static/includes/_layout.scss | 69 ++++++++++++++++ static/includes/_misc.scss | 20 +++++ static/includes/_nav.scss | 141 +++++++++++++++++++++++++++++++++ static/includes/_user-info.scss | 16 ++++ static/includes/_wcs.scss | 46 +++++++++++ template.py | 3 +- 14 files changed, 475 insertions(+), 4 deletions(-) create mode 100644 static/custom-publik-scss/_custom.scss create mode 100644 static/custom-publik-scss/logo.png create mode 100644 static/custom-publik-scss/style.scss create mode 100644 static/includes/_cells.scss create mode 100644 static/includes/_forms.scss create mode 100644 static/includes/_general.scss create mode 100644 static/includes/_layout.scss create mode 100644 static/includes/_misc.scss create mode 100644 static/includes/_nav.scss create mode 100644 static/includes/_user-info.scss create mode 100644 static/includes/_wcs.scss diff --git a/Makefile b/Makefile index 0b33c87..1c244d6 100644 --- a/Makefile +++ b/Makefile @@ -4,7 +4,7 @@ NAME="publik-base-theme" prefix = /usr all: - @(echo "Nothing to build. Please use make install.") + cd static/custom-publik-scss/ && sass style.scss:style.css clean: rm -rf sdist diff --git a/debian/control b/debian/control index 4fd6c17..09ddcdf 100644 --- a/debian/control +++ b/debian/control @@ -2,7 +2,7 @@ Source: publik-base-theme Section: web Priority: optional Maintainer: Frédéric Péters -Build-Depends: debhelper (>= 8.0.0) +Build-Depends: debhelper (>= 8.0.0), ruby-sass Standards-Version: 3.9.4 Homepage: http://git.entrouvert.org/publik-base-theme.git diff --git a/static/custom-publik-scss/_custom.scss b/static/custom-publik-scss/_custom.scss new file mode 100644 index 0000000..55d787d --- /dev/null +++ b/static/custom-publik-scss/_custom.scss @@ -0,0 +1,54 @@ +body { + background: #fcfcfc; +} + +body { + border-top: 3px solid $nav-selected-color; +} + +h1#logo { + background: url(logo.png) no-repeat left bottom; + padding-top: 35px; + font-size: 25px; + font-weight: normal; + & a { + text-decoration: none; + } +} + +div#nav a { + font-weight: normal; +} + +div#nav ul { + box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12); +} + +div#services > ul > li > strong > a, +#content div.textcell h2:first-child, +#content div.cell h2:first-child { + overflow: hidden; +} + +div#services > ul > li > strong > a:after, +#content div.textcell h2:first-child:after, +#content div.cell h2:first-child:after { + width: 20%; + height: 200%; + background: rgba(255, 255, 255, 0.1) none repeat scroll 0% 0%; + z-index: 1; + right: -10%; + top: 0px; + margin: -5px 0px 0px -5px; + transform-origin: 0px 0px 0px; + transform: rotate(-20deg); + content: ""; + position: absolute; + transition: all 0.3s ease 0s +} + +div#services > ul > li:hover > strong > a:after, +#content div.textcell:hover h2:first-child:after, +#content div.cell:hover h2:first-child:after { + width: 30%; +} diff --git a/static/custom-publik-scss/logo.png b/static/custom-publik-scss/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..542dab2e9f73f7ba6e1f804979655fc4ee280f02 GIT binary patch literal 1460 zcmV;l1xxygP)@L!xeSv zZV6l6&SfT87BDuqtwu|S9x`jM%h2V;!#f7D+oF+uEz(GT4dQ_UUsEJ)m3KF_sRHDT z6D~sE?A=Q+pjej-EgoMy7B2WdCdv zP&?O8boO4m+LS$iRjjZN`gm#oBe zRKV(Ok1=ceY5)eF`2zK1kCWj*$|hiyS#v`dVXGm_auErwYo_t+W*X0KrfS0@j>huL zS=dfQO(lW*>N7vrh8&IMsDN@XiGD4f`NiS+&n+AkaP&YYqX#;j4B;p$l;We;U-8O?xz3r#{d|yQQQ1htX_x+1(7KYwX+v+Sitb6meQ`mcaXQ!=obcx z8_tl(C(q}ch0Agg$w#DP1ED9E0uWpD9x|cY;@x4(V@&POQ0uojHU&#qnG+_sVjckcg+cTyL(>PV4^g$Y833(&0QGd= z4AZrf+!`I)cnAWSc9|%?C#`5{BDg&BXe9OhC5)S6dF=`cSg~?Gk&evZy#4ksjJ|tv z+JJ#Yb=1B8ERY#_?h2U8_!YcaLhB#CYX?zCz_L6GJMgfsAZ03G=_pvj#;pYDpRWR- zUyT=aB!`kDJI(>1p1E#QdhVf}jZO5YQ2D|%0;<1WXYjeNOb66^M~J_CWCkfZN%kU= zyC*b5^3Zvbht3zZ%PQgWe2!u3t~n1`BhcAEr9^266IdDnK))8p=r3G?mSZ{Q*+nX! zUPi;QRvM1A5?bf%tA%ALU@7qhv`AUr#>l}W+Mh81j9bple~=~MtR0Ud!azWCzSq5aT_w~!upQr62b@U>sqZdmOYf`}Ns}c1fw7+lJCSb*?1%x-X0Fe0d zuaXH^O3HK&^v}Zg3=<_hdZ2S+4z!EZk#3Bh5r8r)-^t_Qq=5TR*&aqc-RIK1pwp+S zN&kKcTf`U8BEEnY@ddQV|KL8*S+WEypZma4;+L>Rd;u-u3uqBvK#TYSTErL7BEEnY z2_ksItg)0b=Vd>mGH@xNYo>h|I=|=o6(Z-eQ`;0FzA=QnY}SWocF&SFC0bjx7Qt2!Yo>hs`MlwsFS?Rg5j^u$PS9pB z!eQWWEb`6@Lszz-(2B(J|Fb!XXGUN?Vzb)k=>fR~sGUE&^HsO=$;ZDo0k&`rFGULg O0000 ul > li, +div.a2-block, +#content div.cell, +div.block { + text-align: left; + background: white; + margin: 10px 10px; + padding: 0; + border-radius: $border-radius; + border: $cell-border; + + & h2 + div { + padding: 1em; + } +} + +div#services > ul > li > strong { + padding: 0; + margin: 0; +} + +div#rub_service div.category h3, +#content div.block h2, +div#services > ul > li > strong > a, +#content div.textcell h2:first-child, +#content div.cell h2:first-child { + @extend %title; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +div#rub_service div.category ul, +div#services > ul > li > ul, +div.categoriescell ul, +div.wcsformsofcategorycell ul, +div.wcscurrentformscell ul { + padding: 0; + margin: 0; + list-style: none; + + & a { + padding: 1em; + display: block; + border-bottom: 1px solid #ccc; + position: relative; + &:hover { + background: #eee; + } + } +} diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss new file mode 100644 index 0000000..a773449 --- /dev/null +++ b/static/includes/_forms.scss @@ -0,0 +1,16 @@ +$button-background: #37a7da !default; +$button-color: white !default; + +input[type=submit], +div.buttons input { + background: $button-background; + color: $button-color; + padding: 5px 15px; + cursor: pointer; + border: 1px solid transparent; + transition: all 0.2s ease; + + &:hover { + box-shadow: 0px 0px 5px #777; + } +} diff --git a/static/includes/_general.scss b/static/includes/_general.scss new file mode 100644 index 0000000..c79fc4e --- /dev/null +++ b/static/includes/_general.scss @@ -0,0 +1,29 @@ +$title-background: white !default; +$title-color: black !default; +$border-radius: 3px !default; + +html, body { + font-family: $font-family; + font-size: $font-size; + color: #333; +} + +a { + color: #028; + text-decoration: none; +} + +%title { + display: block; + position: relative; + text-transform: none; + background: $title-background; + color: $title-color; + padding: 1ex; + border-radius: $border-radius; + margin: 0; + text-decoration: none; + font-weight: normal; + font-size: $font-size * 1.1; + border: 0; +} diff --git a/static/includes/_layout.scss b/static/includes/_layout.scss new file mode 100644 index 0000000..9c2c7f9 --- /dev/null +++ b/static/includes/_layout.scss @@ -0,0 +1,69 @@ +$width: 1000px !default; +$mobile-limit: 800px !default; +$footer-background: #666666 !default; +$footer-color: white !default; +$top-logo-width: 0 !default; + +html, body { + margin: 0; +} + +div#footer, div#page { + clear: both; + max-width: $width; + margin: 0 auto; +} + +div#header { + width: 100%; + margin: 0 0 0 0; + position: relative; + top: 0px; + z-index: 0; + padding: 0 1ex; + & h1 { + margin: 0; + } + @media screen and (max-width: $mobile-limit) { + position: absolute; + & h1 { + padding-left: $top-logo-width+70px; + background-position: 70px; + } + } +} + +div#main-content-wrapper { + position: relative; + z-index: 100; + max-width: $width; + margin: 0px auto 0px auto; + padding: 0 1ex; +} + +div#main-content { + margin: 0; + min-height: 300px; +} + +@media screen and (min-width: $mobile-limit) { + #right { + float: right; + width: 49.5%; + } + #left { + float: left; + width: 49.5%; + } +} + +#footer-wrapper { + clear: both; + padding: 1ex 0 2ex 0; + background: $footer-background; + color: $footer-color; +} + +h1#logo { + padding-left: $top-logo-width; +} diff --git a/static/includes/_misc.scss b/static/includes/_misc.scss new file mode 100644 index 0000000..6f2d595 --- /dev/null +++ b/static/includes/_misc.scss @@ -0,0 +1,20 @@ +div.textcell p { + margin: 1ex; +} + +div#footer div.cell.test-banner { + position: fixed; + top: 2em; + right: -5em; + background: red; + width: 15em; + z-index: 1000; + transform: rotate(45deg); + transform-origin: center center; + text-align: center; + border-radius: 10px; +} + +div#footer div.cell.test-banner p { + margin: 0; +} diff --git a/static/includes/_nav.scss b/static/includes/_nav.scss new file mode 100644 index 0000000..50ab43e --- /dev/null +++ b/static/includes/_nav.scss @@ -0,0 +1,141 @@ +$nav-background: white !default; +$nav-color: black !default; +$nav-selected-color: #005EA9 !default; +$nav-height: 3em !default; +$mobile-limit: 800px !default; +$nav-menu-side: 50px !default; +$border-radius: 0 !default; + +div#nav { + background: $nav-background; + color: $nav-color; + padding: 0; + margin: 10px 0px; + height: $nav-height; + border-radius: $border-radius; +} + + +div#nav ul { + border-color: $nav-selected-color; + height: $nav-height; + padding: 0; +} + +div#nav ul li:first-child a { + border-radius: $border-radius 0 0 $border-radius; +} + +div#nav a { + color: $nav-color; + font-weight: bold; + padding: 0px 20px; + display: inline-block; + line-height: 3em; + transition: background 0.5s, color 0.5s; + text-decoration: none; +} + +div#nav li { + float: left; + display: inline-block; + margin: 0; + padding: 0; +} + +div#nav li:hover a, +div#nav li.selected a { + background-color: $nav-selected-color; + color: $nav-color; +} + +#nav-button { + display: none; + border-radius: $border-radius; +} + +@media screen and (max-width: $mobile-limit) { + div#nav { + height: auto; + background: transparent; + } + div#nav #nav-button { + display: block; + position: relative; + width: $nav-menu-side+2px; + height: $nav-menu-side; + padding: 0; + margin: 0; + background: $nav-selected-color; + transition: all 0.25s ease; + border: 0; + & .sr-only { + display: none; + } + & .icon-bar { + position: absolute; + top: 0px; + left: $nav-menu-side/6; + width: $nav-menu-side/6*4; + margin: 0; + border: 1px solid white; + transition: all 0.25s ease; + } + & .icon-bar + .icon-bar { + xxmargin-top: $nav-menu-side/10; + } + & .icon-bar-1 { + top: $nav-menu-side/4; + } + & .icon-bar-2 { + top: $nav-menu-side/2; + } + & .icon-bar-3 { + top: $nav-menu-side/4*3; + } + + & + ul { + height: 0px; + overflow: hidden; + border-top: 2px solid $nav-selected-color; + margin-top: 0; + background: #eee; + & a { + color: black; + border-radius: 0; + } + & li.selected a { + color: white; + } + } + + & + ul li:last-child { + border-bottom: 2px solid $nav-selected-color; + } + } + div#nav #nav-button.toggled { + & .icon-bar-1 { + top: $nav-menu-side/2; + transform: rotate(45deg); + } + & .icon-bar-2 { + opacity: 0; + } + & .icon-bar-3 { + top: $nav-menu-side/2; + transform: rotate(-45deg); + } + + & + ul { + display: block; + height: auto; + } + & + ul li { + float: none; + display: block; + } + & + ul li a { + width: 100%; + } + } +} diff --git a/static/includes/_user-info.scss b/static/includes/_user-info.scss new file mode 100644 index 0000000..678478e --- /dev/null +++ b/static/includes/_user-info.scss @@ -0,0 +1,16 @@ +#toplinks { + position: absolute; + top: 0; + left: auto; + right: 1em; + border-radius: 0 0 1em 1em; + box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12); + width: auto; + padding: 1ex 2em 0.3ex 2em; + border: 3px solid #910956; + border-width: 0 1px 1px 1px; +} + +#toplinks span.connected-user { + padding-right: 1ex; +} diff --git a/static/includes/_wcs.scss b/static/includes/_wcs.scss new file mode 100644 index 0000000..80f3aea --- /dev/null +++ b/static/includes/_wcs.scss @@ -0,0 +1,46 @@ +div#services ul li li { + list-style: none; +} + +div#services > ul > li { + margin: 0; + margin-bottom: 10px; + width: 100%; +} + +div#rub_service h2 { + @extend %title; +} + +div.large div#rub_service h3, +div#rub_service h3 { + border: none; + text-align: left; + border-bottom: 2px solid $title-background; +} + +div#steps ol { + & li { + border: 0; + border-bottom: 1px solid #ccc; + margin-bottom: 2ex; + border-radius: $border-radius; + } + & li.current { + border: 0; + background: $title-background; + color: $title-color; + } +} + +li.required-authentication span { + display: none; +} + +li.required-authentication a:after { + content: "\f084"; + font-family: FontAwesome; + position: absolute; + right: 1ex; + color: #444; +} diff --git a/template.py b/template.py index d0f166a..05c3d91 100644 --- a/template.py +++ b/template.py @@ -46,11 +46,10 @@ class RemoteTemplate(object): extra_head = """ [script] - """ extra_top_head = """ - + """ user_info = """ -- 2.6.0