diff --git a/templates_dev/css/container.css b/templates_dev/css/container.css new file mode 100644 index 0000000..4e2176b --- /dev/null +++ b/templates_dev/css/container.css @@ -0,0 +1,17 @@ +#container { + margin-left: 60px; +} + +/* #container h1 { + margin-left: 5%; + font-family: Raleway; font-size: 24px; + font-weight: 200; color: #242424; +} + +#container h2 { + margin-left: 5%; + font-family: Raleway; font-size: 20px; + font-weight: 200; color: #242424; +} */ + + diff --git a/templates_dev/css/global.css b/templates_dev/css/global.css new file mode 100644 index 0000000..6fe5e6f --- /dev/null +++ b/templates_dev/css/global.css @@ -0,0 +1,189 @@ +/* + fonts +*/ + +@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); } +@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); } +@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); } + + + +/* + body +*/ + +body { + margin: 0; + background: #fbfbfb; + font-family: 'DejaVu Sans', sans-serif; +} + + +/* + header +*/ + +header { + height: 50px; margin: 0; padding: 0 30px; + display: flex; align-items: center; justify-content: space-between; + background: #f8f8fa; border-bottom: 1px solid #d0d0d0; +} + +header h1 { + font-family: Raleway; font-weight: 200; +} + +header svg { + width: 24px; height: 24px; vertical-align: middle; + transition: .15s ease; +} +header a:hover > svg, header a:focus > svg { + filter: brightness(.5); +} + +header input[type="search"] { + width: 250px; + padding: 5px 35px 5px 10px; + border: 0; border-radius: 1px; + font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif; + box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease; +} +header input[type="search"] ~ a { + position: relative; left: -33px; +} +header input[type="search"]:focus { + box-shadow: 0 0 4px rgba(0, 102, 255, .9); +} +header input[type="search"] ~ a > svg > path { + fill: #cccccc; transition: .15s ease; +} +header input[type="search"]:focus ~ a > svg > path { + fill: #333333; +} + +#spotlight a { + padding: 8px 18px 6px 18px; + color: #727272; font-size: 15px; + border-bottom: 2px solid rgba(93, 123, 141, 0); + transition: border .15s ease; +} +#spotlight a:hover, header #spotlight a:focus { + border-bottom: 2px solid rgba(93, 123, 141, 1); +} + + +footer { + margin: 20px 10% 5px 10%; padding: 10px 0; + text-align: center; font-size: 11px; font-style: italic; + color: #a0a0a0; + border-top: 1px solid rgba(0, 0, 0, .1); +} +footer p { + margin: 3px 0; +} + +/* + links +*/ + +a { + text-decoration: none; +} +a:focus { + outline: none; +} + + + +/* + alert overlay +*/ + +.alert { + position: fixed; left: 15%; + display: flex; align-items: center; + width: 70%; z-index: 10; + font-family: NotoSans; font-size: 14px; color: #212121; + background: #ffffff; + border-bottom: 5px solid #4caf50; + border-radius: 1px; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); + transition: opacity .15s ease; +} +.alert.ok { + border-color: #4caf50; +} +.alert.error { + border-color: #f44336; +} +.alert span { + flex-grow: 1; margin: 15px 10px 10px 0; +} +.alert input[type="button"] { + margin: 3px 30px 0 0; +} + +.alert svg { + margin: 15px 20px 10px 30px; +} + + + +/* + buttons +*/ + +input[type="button"] { + font-family: NotoSans; font-size: 14px; /*font-weight: bold;*/ + text-align: center; + padding: 5px 15px; + transition: .1s ease; +} + +/* flat */ +input[type="button"].flat { + border: none; + background: rgba(0, 0, 0, 0); color: #727272; +} +input[type="button"].flat:hover { + background: rgba(0, 0, 0, .1); +} +input[type="button"].flat:focus { + background: rgba(0, 0, 0, .2); +} + +/* raised */ +input[type="button"].raised { + border: none; + background: #e0e0e0; color: #212121; + box-shadow: 0 1px 2px rgba(0, 0, 0, .3); +} +input[type="button"].raised:hover, +input[type="button"].raised:focus { + background: #d5d5d5; +} +input[type="button"].raised:active { + background: #d6d6d6; + box-shadow: 0 1px 8px rgba(0, 0, 0, .3); +} + +/* Input text */ +input[type="text"]:focus, +input[type="search"]:focus, +input[type="password"]:focus { + +} + + +section { + margin: 10px 5%; +} + +section h1 { + border-bottom: 1px solid #a0a0a0; + font-family: Raleway; font-size: 24px; + font-weight: 200; color: #242424; +} + +section * { + transition: .15s ease; +} \ No newline at end of file diff --git a/templates_dev/css/homepage.css b/templates_dev/css/homepage.css new file mode 100644 index 0000000..b5eb580 --- /dev/null +++ b/templates_dev/css/homepage.css @@ -0,0 +1,134 @@ +/* + home-title +*/ + +.home-title { + margin: 20px 0; padding: 10px 5%; + background: #bf1c11; box-shadow: 0 2px 2px rgba(0, 0, 0, .3); + border-top: 10px solid #ab170c; +} + +.home-title h1 { + margin-top: 0; + color: #ffffff; border-color: #ffffff; +} + +.home-title p { + margin-bottom: 0; text-align: justify; + color: #ffffff; +} + +.home-title a { + color: inherit; text-decoration: underline; +} + + +/* + pinned-content +*/ + +.home-pinned-content > div { + display: flex; justify-content: space-between; +} + +.home-pinned-content article { + flex-grow: 1; margin: 0 1px; padding: 0; + position: relative; + max-width: 250px; overflow: hidden; +} + +.home-pinned-content a { + display: block; +} + +.home-pinned-content img { + width: 100%; filter: blur(0px); +} + +.home-pinned-content article div { + position: absolute; bottom: 0; z-index: 3; + width: 90%; margin: 0; + padding: 30px 5% 10px 5%; + color: #ffffff; text-shadow: 1px 1px 0 rgba(0,0,0,.6); + background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8)); +} + +.home-pinned-content h2 { + display: block; margin: 5px 0; + font-size: 18px; font-family: NotoSans; font-weight: 200; + line-height: 20px; +} + + +/* + home-articles +*/ + +.home-articles { + display: flex; justify-content: space-between; +} +.home-articles > div { + flex-grow: 1; max-width: 48%; +} +.home-articles h1 { + display: flex; justify-content: space-between; align-items: center; +} +.home-articles h1 a { + padding: 0; + font-family: NotoSans; font-size: 16px; + font-weight: 400; color: /*#015078*/ /*#bf1c11*/ #234d5f; +} + +.home-articles article { + padding: 10px; margin: 10px 0; display: flex; align-items: center; + background: #ffffff; border: 1px solid rgba(0, 0, 0, .2); +} +.home-articles article > img { + float: left; margin-right: 10px; flex-shrink: 0; +} +.home-articles article > img.screeshot { + width: 128px; height: 64px; +} +.home-articles article > div { + flex-shrink: 1; +} +.home-articles article h3 { + margin: 0; + color: #424242; font-weight: normal; +} +.home-articles p { + margin: 5px 0; + text-align: justify; + color: #808080; +} +.home-articles .metadata { + margin: 0; + color: #22292c; +} +.home-articles .metadata a { + color: #22292c; font-weight: 400; font-style: italic; +} + + +/* + hover rules +*/ + +.home-pinned-content a:hover img, +.home-pinned-content a:focus img { + filter: blur(3px); +} +.home-pinned-content a:hover div, +.home-pinned-content a:focus div { + padding: 200px 5% 10px 5%; + background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8)); +} + +.home-articles h1 a:hover, +.home-articles h1 a:focus { + padding-right: 10px; +} +.home-articles article a:hover, +.home-articles article a:focus { + text-decoration: underline; +} diff --git a/templates_dev/css/light.css b/templates_dev/css/light.css new file mode 100644 index 0000000..ba80eb1 --- /dev/null +++ b/templates_dev/css/light.css @@ -0,0 +1,366 @@ +/* + fonts +*/ + +@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); } +@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); } +@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); } + + +/* Global */ + +body { + margin: 0; + background: #ffffff; + font-family: sans-serif; +} + +nav a { + color: #ffffff; opacity: .7; + text-decoration: none; + transition: opacity .15s ease; +} +nav a:hover, +nav a:focus { + opacity: 1; +} + +.light-hidden { + display: none; +} + +/* Menu */ + +#light-menu { + list-style: none; + display: flex; flex-direction: row; align-items: center; + width: 100%; height: 40px; + overflow-x: auto; overflow-y: hidden; + margin: 0; padding: 0; + text-indent: 0; + background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); +} + +#logo { + position: relative; display: block; + height: 100%; opacity: 1; + background: -moz-linear-gradient(left, #bf1c11, #ba1203); + background: -webkit-linear-gradient(left, #bf1c11, #ba1203); +} +/*#logo::after { + position: absolute; left: 100%; top: 50%; + height: 0; width: 0; + border: solid transparent; content: " "; + border-left-color: #ba1203; + border-width: 4px; + margin-top: -4px; +}*/ +#logo img { + width: 40px; + margin: 0; padding: 0; + margin-bottom: -4.5px; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0)); + transition: filter .15s ease; +} +#logo:hover img, +#logo:focus img { + filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7)); +} + +#light-menu > li { + display: flex; flex-direction: column; + align-items: center; flex-grow: 1; + height: 100%; + text-align: center; + font-family: Raleway; font-size: 13px; + color: #ffffff; +} +#light-menu li { + padding: 0 2px; +} +#light-menu li > a { + display: flex; flex-direction: column; + align-items: center; justify-content: center; + width: 100%; height: 100%; +} +#light-menu li > a > div { + display: none; + font-size: 12px; +} + +#light-menu li > a > svg { + display: block; width: 20px; flex-shrink: 0; + margin: 0 auto 5px auto; +} + +#light-menu li span[notifications]:not([notifications="0"])::before { + content: attr(notifications); + display: inline-block; margin-right: 6px; + vertical-align: middle; + padding: 0 5px 0 4px; border-radius: 5px; + font-family: NotoSans; + background: #ffffff; color: #000000; +} + + +#menu { + width: 100%; height: 0; overflow-x: hidden; + font-family: NotoSans; font-size: 12px; + background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + transition: .1s ease; +} +#menu.opened { + height: 100%; + overflow-y: auto; +} + +#menu > div { + width: 100%; + display: none; +} +#menu > div.opened { + display: block; +} +#menu h2 { + margin: 10px 0 10px 40px; + font-family: Raleway; font-size: 15px; + color: #ffffff; +} +#menu h2 > svg { + width: 30px; vertical-align: middle; +} +#menu h2 > img { + width: 64px; margin-right: 10px; + vertical-align: middle; border-radius: 50%; +} + +#menu h3 { + margin: 10px 0 10px 40px; + font-family: Raleway; font-size: 13px; + color: #ffffff; +} +#menu hr { + margin: 10px 15px 0 15px; + border: none; + border-bottom: 1px solid rgba(0, 0, 0, .15); +} + +#menu > div > a, +#menu span { + display: block; margin: 10px 15px; +} +#menu span { + /*font-style: italic;*/ color: #b8b8b8; + font-size: 10px; +} +#menu span > a { + display: inline; + margin: 0; font-style: normal; + font-size: 12px; +} +#menu a > img { + vertical-align: middle; + margin-right: 15px; +} +#menu a > svg { + width: 20px; height: 20px; vertical-align: middle; + margin-right: 10px; +} +#menu ul { + list-style: none; + margin: 10px 15px; padding: 0; + color: #b8b8b8; +} +#menu li { + margin: 5px 0; +} + +@media all and (min-width: 550px) { + #light-menu { + height: 60px; + } + #logo img { + width: 60px; + } + #light-menu li > a > div { + display: block; + } +} + +#menu form input { + display: block; + margin: 5px 15px; padding: 5px 10px; + font-size: 14px; + background: #e8e8e8; transition: background .15s ease; +} +#menu form input:focus { + background: #ffffff; +} +#menu form input:first-child { + margin-bottom: 0; border-bottom: none; + border-top-left-radius: 5px; + -webkit-border-top-left-radius: 5px; + -moz-border-top-left-radius: 5px; + border-top-right-radius: 5px; + -webkit-border-top-right-radius: 5px; + -moz-border-top-right-radius: 5px; +} +#menu form input:nth-child(2) { + margin-top: 0; border-top: 1px solid #dddddd; + border-bottom-left-radius: 5px; + -webkit-border-bottom-left-radius: 5px; + -moz-border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + -webkit-border-bottom-right-radius: 5px; + -moz-border-bottom-right-radius: 5px; +} +#menu form a { + display: block; margin-left: 15px; +} + + +/* Header */ + +header { + padding: 10px 10px 0px 10px; + background: #f8f8fa; border-bottom: 1px solid #d0d0d0; +} +header svg { + width: 24px; height: 24px; vertical-align: middle; + transition: .15s ease; +} +header a:hover > svg, header a:focus > svg { + filter: brightness(.5); +} + +header input[type="search"] { + width: 100%; + border: 0; border-radius: 1px; + font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif; + box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease; +} + +#spotlight { + display: flex; + align-items: center; justify-content: space-around; +} +#spotlight a { + padding: 5px 10px; margin: 5px 0; + color: #727272; font-size: 14px; + /*border-bottom: 2px solid rgba(93, 123, 141, .5);*/ + transition: border .15s ease; + text-decoration: none; +} +#spotlight a:hover, header #spotlight a:focus { + color: #404040; +} + + +/* Homepage */ + +section { + margin: 10px; +} +section h1 { + margin: 10px 0; + border-bottom: 1px solid #a0a0a0; + font-family: Raleway; font-size: 20px; + font-weight: 200; color: #242424; +} +section * { + transition: .15s ease; +} +.home-title { + margin: 20px 0; padding: 10px; + background: #bf1c11; box-shadow: 0 2px 2px rgba(0, 0, 0, .3); + border-top: 10px solid #ab170c; +} +.home-title h1 { + margin: 0; + color: #ffffff; border-color: #ffffff; +} +.home-title p { + margin-bottom: 0; text-align: justify; + color: #ffffff; font-size: 14px; +} +.home-title a { + color: inherit; text-decoration: underline; +} +#shoutbox { + display: none; +} +.home-pinned-content { + margin-top: 30px; +} +.home-pinned-content article { + margin: 5px 0; +} +.home-pinned-content article > a { + width: 100%; + display: flex; align-items: center; + text-decoration: none; +} +.home-pinned-content img { + flex-shrink: 0; + width: 100px; height: 100px; +} +.home-pinned-content article div { + flex-grow: 1; margin-left: 10px; +} +.home-pinned-content h2 { + margin: 0; + font-family: Raleway; font-size: 18px; + font-weight: 400; color: #242424; + text-decoration: underline; +} +.home-pinned-content span { + color: #000000; font-size: 14px; +} +.home-articles > div { + margin-top: 30px; +} +.home-articles article { + margin-bottom: 15px; + display: flex; align-items: center; +} +.home-articles article > img { + flex-shrink: 0; width: 128px; height: 64px; +} +.home-articles article > div { + margin-left: 5px; +} +.home-articles h1 { + display: flex; justify-content: space-between; align-items: center; +} +.home-articles h1 > a { + font-size: 13px; color: #666666; +} +.home-articles h3 { + margin: 0; + color: #424242; font-weight: normal; +} +.home-articles p { + margin: 5px 0; + text-align: justify; + color: #808080; font-size: 14px; +} + + +/* Notifications */ + +.alert { + display: none; +} + + +/* Footer */ + +footer { + margin: 20px 10% 5px 10%; padding: 10px 0; + text-align: center; font-size: 11px; font-style: italic; + color: #a0a0a0; + border-top: 1px solid rgba(0, 0, 0, .1); +} +footer p { + margin: 3px 0; +} \ No newline at end of file diff --git a/templates_dev/css/navbar.css b/templates_dev/css/navbar.css new file mode 100644 index 0000000..5dec525 --- /dev/null +++ b/templates_dev/css/navbar.css @@ -0,0 +1,210 @@ +nav a { + color: #ffffff; + opacity: .7; + cursor: pointer; +} +nav a:hover, +nav a:focus { + opacity: 1; +} + + +/* Menu */ + +#logo { + position: relative; display: block; + width: 100%; + margin-bottom: 10px; + opacity: 1; + background: -moz-linear-gradient(top, #bf1c11, #ba1203); + background: -webkit-linear-gradient(top, #bf1c11, #ba1203); + background: #bf1c11; + transition: .15s ease; +} +/* Flèche */ +/*nav #logo::after { + content: ""; + position: absolute; + top: 100%; left: 50%; + height: 0; width: 0; + border: solid transparent; + border-top-color: #ba1203; + border-width: 12px; margin-left: -12px; +}*/ +#logo img { + width: 100%; + margin: 0; padding: 0; + margin-bottom: -4.5px; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0)); + transition: filter .15s ease; +} +#logo:hover, +#logo:focus { + background: #d72411; +} + +#light-menu { + position: fixed; z-index: 10; + list-style: none; + width: 60px; + height: 100%; overflow-y: auto; + margin: 0; padding: 0; + text-indent: 0; + background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); +} +#light-menu li { + width: 100%; height: 45px; + text-align: center; + font-family: Raleway; font-size: 13px; + color: #ffffff; +} +#light-menu li > a { + display: flex; flex-direction: column; flex-grow: 1; + align-items: center; justify-content: center; + width: 100%; height: 100%; + transition: opacity .15s ease; /* because Chrome sucks */ +} + +#light-menu li > a > svg { + display: block; width: 35%; flex-shrink: 0; + margin: 0 auto 5px auto; +} +#light-menu li div { + display: none; +} +#light-menu li > a::after { + content: attr(label); + position: fixed; display: none; + padding: 4px 8px; /*margin-top: -28px;*/ left: 63px; + font-family: NotoSans; border-radius: 3px; + background: rgba(0, 0, 0, 0.9); +} +#light-menu li:not(.opened) > a:hover::after, +#light-menu li:not(.opened) > a:focus::after { + display: block; +} + +/*nav li span[notifications]:not([notifications="0"])::before { + content: attr(notifications); + display: inline-block; margin-right: 6px; + vertical-align: middle; + padding: 0 5px 0 4px; border-radius: 5px; + font-family: NotoSans; + background: #ffffff; color: #000000; +}*/ + + +/* Overlay */ +#menu { + position: fixed; z-index: 5; + left: -240px; width: 300px; /* left-to-right animation */ + /*left: 60px; width: 0;*/ /* scroll animation */ + height: 100%; overflow-x: hidden; overflow-y: auto; + font-family: NotoSans; font-size: 14px; + background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + transition: 2s ease; +} + +#menu.opened { + left: 60px; /* left-to-right animation */ + /*width: 300px;*/ /* scroll animation */ +} + + +#menu.scroll-animation { + left: 60px; width: 0; +} +#menu.scroll-animation.opened { + width: 300px; +} +#menu.left-to-right-animation { + left: -240px; width: 300px; +} +#menu.left-to-right-animation.opened { + left: 60px; +} + + +#menu > div { + width: 300px; + display: none; +} +#menu > div.opened { + display: block; +} + +#menu h2 { + margin: 5% 0 20px 40px; + font-family: Raleway; font-size: 18px; + color: #ffffff; +} +#menu h2 > svg { + width: 42px; vertical-align: middle; +} +#menu h2 img { + width: 64px; border-radius: 50%; vertical-align: middle; margin-right: 10px; +} + +#menu h3 { + margin: 20px 0 20px 40px; + font-family: Raleway; font-size: 14px; + color: #ffffff; +} +#menu hr { + margin: 15px; + border: none; + border-bottom: 1px solid rgba(0, 0, 0, .15); +} + +#menu ul { + margin: 0; padding: 0; list-style: none; +} +#menu a, +#menu li { + display: block; margin: 10px 15px; + transition: opacity .15s ease; +} +#menu li { + color: #b8b8b8; +} +#menu li > a { + display: inline; + margin: 0; font-style: normal; +} +#menu a > img { + vertical-align: middle; + margin-right: 15px; +} +#menu a > svg { + width: 20px; height: 20px; vertical-align: middle; + margin-right: 10px; +} + +#menu form input { + display: block; width: 80%; + margin: 0 5%; padding: 5px 2%; + font-size: 14px; color: inherit; + background: #e8e8e8; transition: background .15s ease; + border: none; +} +#menu form input:focus { + background: #ffffff; +} +#menu form.login input:first-child { + margin-bottom: 0; border-bottom: none; + border-top-left-radius: 5px; + -webkit-border-top-left-radius: 5px; + -moz-border-top-left-radius: 5px; + border-top-right-radius: 5px; + -webkit-border-top-right-radius: 5px; + -moz-border-top-right-radius: 5px; +} +#menu form.login input:nth-child(2) { + margin-top: 0; border-top: 1px solid #dddddd; + border-bottom-left-radius: 5px; + -webkit-border-bottom-left-radius: 5px; + -moz-border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + -webkit-border-bottom-right-radius: 5px; + -moz-border-bottom-right-radius: 5px; +} diff --git a/templates_dev/css/responsive.css b/templates_dev/css/responsive.css new file mode 100644 index 0000000..c96f7a5 --- /dev/null +++ b/templates_dev/css/responsive.css @@ -0,0 +1,53 @@ +/* + Responsives rules +*/ + +@media all and (max-width: 1399px) { + body { + font-size: 13px; + } + + /*header form { + border-bottom: 1px solid #adb0b4; + }*/ + header input[type="search"] { + font-size: 14px; + } + + #menu li { + font-size: 10px; + } + #menu a { + font-size: 13px; + } +} + + +@media all and (min-width: 1400px) { + body { + font-size: 14px; + } + + header input[type="search"] { + font-size: 14px; + } + + #menu li { + font-size: 11px; + } + #menu a { + font-size: 14px; + } +} + + +@media screen and (max-width: 1100px) { + .home-pinned-content article:nth-child(5) { + display: none; + } +} +@media screen and (max-width: 800px) { + .home-pinned-content article:nth-child(4) { + display: none; + } +} diff --git a/templates_dev/css/shoutbox.css b/templates_dev/css/shoutbox.css new file mode 100644 index 0000000..9725b29 --- /dev/null +++ b/templates_dev/css/shoutbox.css @@ -0,0 +1,34 @@ +#shoutbox { + margin: 20px 5% 10px 5%; + /*box-shadow: 0 0 2px rgba(0, 0, 0, .4);*/ + background: #ffffff; + /*border: 1px solid #999999;*/ +} + +#shoutbox > div { + margin: 0; padding: 0; height: 125px; width: 100%; + overflow-y: scroll; border-bottom: 1px solid #999999; + border-radius: 5px 5px 0 0; + border: 1px solid #999999; +} +#shoutbox > input { + width: 100%; padding: 5px 0; + border-radius: 0 0 5px 5px; + border: 1px solid #999999; +} +#shoutbox > input:focus { + border-color: #a12222; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(161, 34, 34, 0.6); +} + +#shoutbox > div > div { + padding: 2px 10px; + border-bottom: 1px solid rgba(0, 0, 0, .3); + font-size: 11px; +} +#shoutbox > div > div:last-child { + border-bottom: none; +} +#shoutbox > div > div:hover { + background: #e0e0e0; +} \ No newline at end of file diff --git a/templates_dev/fonts/noto_sans.ttf b/templates_dev/fonts/noto_sans.ttf new file mode 100644 index 0000000..9dd1019 Binary files /dev/null and b/templates_dev/fonts/noto_sans.ttf differ diff --git a/templates_dev/fonts/raleway_200.ttf b/templates_dev/fonts/raleway_200.ttf new file mode 100644 index 0000000..7520b76 Binary files /dev/null and b/templates_dev/fonts/raleway_200.ttf differ diff --git a/templates_dev/fonts/raleway_300.ttf b/templates_dev/fonts/raleway_300.ttf new file mode 100644 index 0000000..9ff67e7 Binary files /dev/null and b/templates_dev/fonts/raleway_300.ttf differ diff --git a/templates_dev/forum.html b/templates_dev/forum.html new file mode 100644 index 0000000..c57d5e8 --- /dev/null +++ b/templates_dev/forum.html @@ -0,0 +1,449 @@ + + + + Planète Casio : design template + + + + + + + + + + + + + + + +
+
+
+ + + + + + +
+ + + + +
+ + + +
+

Concernant les alertes, cliquer sur "Masquer" enregistre un cookie pour une heure, ce qui bloque le réaffichage de l'alerte. Cliquer autre part fait disparaître l'alerte sans mettre le cookie, donc au prochain rechargement de la page celle-ci réapparaîtra.

+

Au niveau du menu, vous préférez une ouverture type ou plutôt de type ?

+

La shout est en cours de conception, merci d'être indulgent x)

+

Merci de me faire parvenir vos commentaires soit via la shout de Planète Casio, soit par mail à l.gatin@protonmail.com (précisez que ça concerne la v5 dans l'en-tête).

+ Bien entendu ce paragraphe n'apparaitra pas dans la v5 (cliquez ici pour faire disparaitre). +
+ +
+
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
+ +
+ +
+ Forum +
+ +
+ + + +
+ + + + + Votre message a bien été posté. + + +
+ + + + + + + + + diff --git a/templates_dev/homepage_guest.html b/templates_dev/homepage_guest.html new file mode 100644 index 0000000..270035c --- /dev/null +++ b/templates_dev/homepage_guest.html @@ -0,0 +1,418 @@ + + + + Planète Casio : design template + + + + + + + + + + + + + + +
+
+
+ + + + + + +
+ + +
+ + +
+

Informations sur le développement

+
+

Tous les onglets sont fonctionnels, cliquez sur une icone pour afficher, sur une autre pour modifier, deux fois de suite pour fermer. Sinon cliquez à coté.

+

Les onglets Tutoriels et Sprites ne sont pas encore remplis, c'est normal qu'ils fassent un peu vide. L'avantage de ce menu est qu'on peut le remplir comme on veut, dans le pire des cas ça déclenche le scrolling (c'est pas exemple le cas pour l'onglet "Programmes", qui est beaucoup trop rempli). \o/

+

Le header contient une barre de recherche ainsi que des liens de type "spotlight" : ils servent à mettre en valeur un évènement ou une partie du site. On peut bien évidemment remplacer par autre chose, mais je trouvais que cela était intéressant de pouvoir attirer l'attention de cette manière.

+

Ne faites pas attention au contenu principal de la page, il n'est absolument pas définitif ! De même pour le positionnement des alertes. Toutefois, à part les entrées des sous-menus, ceux-ci sont en version quasi‑finale.

+

Nous sommes ouverts à toute suggestion et amélioration ! Si vous souhaitez participer au développement du site, n'hésitez pas à nous contacter à l'adresse suivante : contact@planet-casio.com. N'oubliez pas de préciser « [v5] » dans l'en-tête pour que nous puissions facilement traiter le message. Vous pouvez aussi ajouter des fichiers, tels que des exemples de html/css, des schémas d'organisation, ou encore des captures d'écran en cas de problème d'affichage. Dans le cas où vous signalez un bug, merci de préciser : +

    +
  • votre plateforme (PC, tablette ou smartphone)
    • +
  • votre système d'exploitation (nom et version)
    • +
  • votre navigateur (nom et version)
    • +
  • la taille de votre écran en pixel (pour les smartphones, essayez d'ajouter le viewport correspondant)
    • +
  • le problème rencontré
    • +
+ Merci pour votre participation ! +

+
+
+ +
+

Lorem ipsum

+
+

Etiam ut metus mollis, molestie leo vel, finibus orci. Praesent in orci diam. Nullam laoreet rutrum elit, id luctus neque. Integer egestas, leo ut porta sodales, lacus enim sollicitudin risus, congue pharetra est dui ac arcu. Nunc egestas eu erat vitae volutpat. In non lorem cursus, viverra nisl vel, feugiat sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc lacinia, nibh vel vulputate aliquam, nunc diam blandit massa, vel imperdiet velit ante eget ligula. Suspendisse vestibulum purus quis ligula cursus semper. Quisque efficitur ultrices dignissim.

+

Maecenas vel mauris ligula. Proin faucibus, magna eget euismod ullamcorper, felis risus hendrerit dui, in ultrices nunc tortor at nulla. Mauris eu pharetra ligula. Aliquam at arcu leo. Donec ipsum felis, tristique nec bibendum nec, bibendum ut nisi. In hac habitasse platea dictumst. Duis in ante magna. Sed lacinia suscipit enim vitae tempus. Mauris porta orci at tortor faucibus, a volutpat ligula imperdiet. Cras nisi ex, consectetur in orci at, sollicitudin faucibus quam. Fusce eget leo accumsan, dictum nunc et, sodales nisl.

+

Nullam ut purus suscipit, elementum magna quis, molestie lorem. Integer erat dui, pellentesque nec odio dignissim, semper elementum nunc. Aenean nec tristique ex, et vehicula dolor. Quisque quis urna ut sapien tristique placerat. Nunc pellentesque tincidunt leo eu porta. Maecenas sollicitudin ullamcorper diam, vel ultricies elit. Praesent lorem risus, ornare eu malesuada vitae, accumsan in lacus.

+

Vivamus at tortor vel arcu scelerisque interdum a et sem. Morbi pellentesque, velit quis malesuada fringilla, risus turpis mollis magna, et mattis arcu orci sit amet mauris. Donec ac tincidunt ipsum. Mauris at quam sit amet nibh varius auctor. In dictum dui sed justo semper tempor. Vivamus vitae sem id nibh vulputate tincidunt. Praesent quis finibus metus. Nulla at imperdiet ex. Suspendisse potenti. Nullam nec tortor sapien. Vestibulum bibendum enim vel lectus cursus, id fringilla sapien malesuada. Sed vitae tellus eu lectus laoreet malesuada at nec dui. Mauris varius, purus at scelerisque accumsan, turpis magna vehicula diam, a suscipit erat metus at diam.

+

Aenean mattis in leo viverra rutrum. Etiam et nulla in ipsum ornare consectetur. Quisque bibendum, metus nec ultrices efficitur, dui risus rhoncus lectus, a imperdiet nibh elit ut ipsum. Quisque convallis lacus elementum dolor dignissim sollicitudin. Maecenas dapibus dolor quis tellus imperdiet, hendrerit vestibulum lacus tempor. Nam quis risus non nulla euismod semper. Suspendisse commodo aliquam aliquet. Nullam nec varius felis. Nullam velit erat, interdum ac vehicula nec, efficitur in enim. Morbi sodales ante quis nunc vehicula, non eleifend lacus congue. Maecenas a imperdiet nunc.

+
+
+ + +
+ + + + + + + + + + diff --git a/templates_dev/homepage_member.html b/templates_dev/homepage_member.html new file mode 100644 index 0000000..49b78a4 --- /dev/null +++ b/templates_dev/homepage_member.html @@ -0,0 +1,609 @@ + + + + Planète Casio : design template + + + + + + + + + + + + + + + + +
+
+
+ + + + + + +
+ + + + +
+ + +
+

Bienvenue sur Planète Casio !

+

Ceci est une petite description (à rédiger) de ce qu'est et propose Planète Casio. Pour le moment je vais juste mettre quelques infos relatives au développement du site. Bien entendu le paragraphe ci-dessous n'apparaitra pas dans la v5 (cliquez ici pour faire disparaitre).

+
+ +
+

Concernant les alertes, cliquer sur "Masquer" enregistre un cookie pour une heure, ce qui bloque le réaffichage de l'alerte. Cliquer autre part fait disparaître l'alerte sans mettre le cookie, donc au prochain rechargement de la page celle-ci réapparaîtra.

+

Au niveau du menu, vous préférez une ouverture type ou plutôt de type ?

+

La shout est en cours de conception, merci d'être indulgent x)

+

Merci de me faire parvenir vos commentaires soit via la shout de Planète Casio, soit par mail à l.gatin@protonmail.com (précisez que ça concerne la v5 dans l'en-tête).

+
+ +
+
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
+ +
+ +
+

☆ À la une

+
+ + + + + + + + + +
+
+ +
+
+

Derniers articlesTous les articles

+
+
+
+

La Revue des Projets - 93

 +

Bonsoir à tous ! Nous sommes dimanche, la revoici ; la Revue Des Projets ! Alors, dans la joie et la bonne humeur qui nous caractérise (en partant du constat qu’il n’y a pas trop de visiteurs Parisiens), découvrons tout de suite les projets !

+

par Cakeisalie5

+
+
+
+
+

Sortie de la nouvelle fx-CG50

 +

Le professeur parti, le brouhaha habituel d'un intercours s'éleva. Au milieu de tout ces bavardages, quelques élèves discutèrent très sérieusement de cette nouvelle Prizm qui va bientôt sortir !

+

par Ninestars

+
+
+
+
+

Résultats des derniers 7 Days CPC

 +

Et voilà, vous l'attendiez tous – oui, tous, même toi qui te demandes de quoi je parle parce que tu n'as pas lu les news ci-avant et que tu t'en contrefiches presque autant que du sort des manchots empereurs de Groenland menacés par les débris des bateaux Greenpeace coulés par les services secrets Français – et il arrive maintenant…

+

par Lephenixnoir

+
+
+
+
+ +
+

Derniers programmesTous les programmes

+
+
+ +
+

Clonelab

 +

Riche comme tu l'es, tu n'auras aucun mal à être à la mode en t'offrant un nouveau clone ! Mais tout se passera-t-il comme prévu ? Sortiras-tu entier de ce laboratoire de dingues ?

+

★★★★★ (20 notes) par Ne0tux

+
+
+
+ +
+

Gravity Duck

 +

Vous dirigez un canard qui contrôle la gravité, et vous devez récupérer l'oeuf d'or dans chacun des 40 niveaux en évitant les divers pièges.

+

★★★★☆ (11 notes) par Pierrotll

+
+
+
+ +
+

Calcraft

 +

Vous dirigez un canard qui contrôle la gravité, et vous devez récupérer l'oeuf d'or dans chacun des 40 niveaux en évitant les divers pièges.

+

★★★★★ (11 notes) par Remiweb

+
+
+
+
+
+ +
+
+

Derniers tutorielsTous les tutoriels

+
+ +
+
+

Le Multi Drawstat

 +

Le Multi DrawStat est un nouvel outil de dessin ultra rapide en Basic. Il se base sur une nouvelle logique de dessin offrant d'autres possibilités.

+

par Ninestars

+
+
+
+
+

Compiler sous Linux avec GCC

 +

Créez votre cross-compilateur GCC pour compiler vos projets d'addins pour Graph 75/85/95 (SD) sous Linux ! Attention, bon nombre de librairies ne seront pas supportées.

+

par Lephenixnoir

+
+
+
+
+ +
+

Derniers commentairesTous les commentaires

+
+ +
+
+

Le Multi Drawstat

 +

Le Multi DrawStat est un nouvel outil de dessin ultra rapide en Basic. Il se base sur une nouvelle logique de dessin offrant d'autres possibilités.

+

par Ninestars

+
+
+
+
+

Compiler sous Linux avec GCC

 +

Créez votre cross-compilateur GCC pour compiler vos projets d'addins pour Graph 75/85/95 (SD) sous Linux ! Attention, bon nombre de librairies ne seront pas supportées.

+

par Lephenixnoir

+
+
+
+
+
+ +
+ + + +
+ + + + + Votre message a bien été posté. + + +
+ + + + + + + + + diff --git a/templates_dev/images/3864.png b/templates_dev/images/3864.png new file mode 100644 index 0000000..5eadf61 Binary files /dev/null and b/templates_dev/images/3864.png differ diff --git a/templates_dev/images/IPC.png b/templates_dev/images/IPC.png new file mode 100644 index 0000000..b2b332f Binary files /dev/null and b/templates_dev/images/IPC.png differ diff --git a/templates_dev/images/account-circle.svg b/templates_dev/images/account-circle.svg new file mode 100644 index 0000000..4adef78 --- /dev/null +++ b/templates_dev/images/account-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates_dev/images/calc.png b/templates_dev/images/calc.png new file mode 100644 index 0000000..2822c3b Binary files /dev/null and b/templates_dev/images/calc.png differ diff --git a/templates_dev/images/calcraft.gif b/templates_dev/images/calcraft.gif new file mode 100644 index 0000000..ad205a4 Binary files /dev/null and b/templates_dev/images/calcraft.gif differ diff --git a/templates_dev/images/clonelab.gif b/templates_dev/images/clonelab.gif new file mode 100644 index 0000000..bf38bca Binary files /dev/null and b/templates_dev/images/clonelab.gif differ diff --git a/templates_dev/images/courses.png b/templates_dev/images/courses.png new file mode 100644 index 0000000..4a2a03f Binary files /dev/null and b/templates_dev/images/courses.png differ diff --git a/templates_dev/images/email.svg b/templates_dev/images/email.svg new file mode 100644 index 0000000..3f0d76e --- /dev/null +++ b/templates_dev/images/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates_dev/images/fa_124.png b/templates_dev/images/fa_124.png new file mode 100644 index 0000000..4c2b0f1 Binary files /dev/null and b/templates_dev/images/fa_124.png differ diff --git a/templates_dev/images/fruit_ninja.gif b/templates_dev/images/fruit_ninja.gif new file mode 100644 index 0000000..029939f Binary files /dev/null and b/templates_dev/images/fruit_ninja.gif differ diff --git a/templates_dev/images/gravity_duck.png b/templates_dev/images/gravity_duck.png new file mode 100644 index 0000000..9937ceb Binary files /dev/null and b/templates_dev/images/gravity_duck.png differ diff --git a/templates_dev/images/inbox.svg b/templates_dev/images/inbox.svg new file mode 100644 index 0000000..c5a004a --- /dev/null +++ b/templates_dev/images/inbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates_dev/images/laptop.png b/templates_dev/images/laptop.png new file mode 100644 index 0000000..a6afed9 Binary files /dev/null and b/templates_dev/images/laptop.png differ diff --git a/templates_dev/images/legolas.gif b/templates_dev/images/legolas.gif new file mode 100644 index 0000000..0cb1edf Binary files /dev/null and b/templates_dev/images/legolas.gif differ diff --git a/templates_dev/images/logo.png b/templates_dev/images/logo.png new file mode 100644 index 0000000..54b65d2 Binary files /dev/null and b/templates_dev/images/logo.png differ diff --git a/templates_dev/images/logo_noshadow.png b/templates_dev/images/logo_noshadow.png new file mode 100644 index 0000000..4583e89 Binary files /dev/null and b/templates_dev/images/logo_noshadow.png differ diff --git a/templates_dev/images/message-text.svg b/templates_dev/images/message-text.svg new file mode 100644 index 0000000..f72ca43 --- /dev/null +++ b/templates_dev/images/message-text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates_dev/scripts/smartphone_patch.js b/templates_dev/scripts/smartphone_patch.js new file mode 100644 index 0000000..83b01ec --- /dev/null +++ b/templates_dev/scripts/smartphone_patch.js @@ -0,0 +1,11 @@ +/* Smartphone patch for menu */ +/* It don't work if links haven't any href attribute */ + +var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) + +if(w < 700) { + var buttons = document.getElementById('light-menu').getElementsByTagName('li'); + for(var i = 0; i < buttons.length; i++) { + buttons[i].getElementsByTagName('a')[0].setAttribute('href', '#'); + } +} \ No newline at end of file diff --git a/templates_dev/scripts/trigger_menu.js b/templates_dev/scripts/trigger_menu.js new file mode 100644 index 0000000..3311cf0 --- /dev/null +++ b/templates_dev/scripts/trigger_menu.js @@ -0,0 +1,72 @@ +/* Trigger actions for the menu */ + +/* Initialization */ +var b = document.getElementById('light-menu').getElementsByTagName('a') +for(var i = 1; i < b.length; i++) { + b[i].setAttribute('onfocus', "this.setAttribute('f', 'true');"); + b[i].setAttribute('onblur', "this.setAttribute('f', 'false');"); +} + +var trigger_menu = function(active) { + var display = function(element) { + element.classList.add('opened'); + } + var hide = function(element) { + element.classList.remove('opened'); + } + + var menu = document.getElementById('menu'); + var buttons = document.getElementById('light-menu').getElementsByTagName('li'); + var menus = document.getElementById('menu').getElementsByTagName('div'); + + if(active == -1 || buttons[active].classList.contains('opened')) { + hide(menu); + for(i = 0; i < buttons.length; i++) { + hide(buttons[i]); + } + } + else { + for(i = 0; i < buttons.length; i++) { + if(i != active) { + hide(buttons[i]); + hide(menus[i]); + } + } + display(buttons[active]); + display(menus[active]); + display(menu); + } +} + +var mouse_trigger = function(event) { + var menu = document.getElementById('menu'); + var buttons = document.getElementById('light-menu').getElementsByTagName('li'); + + if(!menu.contains(event.target)) { + var active = -1; + + for(i = 0; i < buttons.length; i++) { + if(buttons[i].contains(event.target)) + active = i; + buttons[i].getElementsByTagName('a')[0].blur(); + } + + trigger_menu(active); + } +} + +var keyboard_trigger = function(event) { + var menu = document.getElementById('menu'); + var buttons = document.getElementById('light-menu').getElementsByTagName('li'); + + if(event.keyCode == 13) { + for(var i = 0; i < buttons.length; i++) { + if(buttons[i].getElementsByTagName('a')[0].getAttribute('f') == 'true') { + trigger_menu(i); + } + } + } +} + +document.onclick = mouse_trigger; +document.onkeypress = keyboard_trigger; diff --git a/templates_dev/topic_1234_2.html b/templates_dev/topic_1234_2.html new file mode 100644 index 0000000..c57d5e8 --- /dev/null +++ b/templates_dev/topic_1234_2.html @@ -0,0 +1,449 @@ + + + + Planète Casio : design template + + + + + + + + + + + + + + + +
+
+
+ + + + + + +
+ + + + +
+ + + +
+

Concernant les alertes, cliquer sur "Masquer" enregistre un cookie pour une heure, ce qui bloque le réaffichage de l'alerte. Cliquer autre part fait disparaître l'alerte sans mettre le cookie, donc au prochain rechargement de la page celle-ci réapparaîtra.

+

Au niveau du menu, vous préférez une ouverture type ou plutôt de type ?

+

La shout est en cours de conception, merci d'être indulgent x)

+

Merci de me faire parvenir vos commentaires soit via la shout de Planète Casio, soit par mail à l.gatin@protonmail.com (précisez que ça concerne la v5 dans l'en-tête).

+ Bien entendu ce paragraphe n'apparaitra pas dans la v5 (cliquez ici pour faire disparaitre). +
+ +
+
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
Ceci est un message
+
+ +
+ +
+ Forum +
+ +
+ + + +
+ + + + + Votre message a bien été posté. + + +
+ + + + + + + + +