misc: start basic example style

diff --git a/panikweb/base/static/css/style.scss b/panikweb/base/static/css/style.scss
new file mode 100644 (file)
index 0000000..5166d23
--- /dev/null
+++ b/panikweb/base/static/css/style.scss
@@ -0,0 +1,422 @@
+/* minimal theme for demonstration */
+
+$primary: #4b0082;
+$primary-light: lighten($primary, 50%);
+$primary-dark: darken($primary, 10%);
+
+$body-background: #fcdc2b;
+$body-color: #111;
+
+/* css variables */
+html {
+       --primary-color: #{$primary};
+       --primary-light-color: #{$primary-light};
+       --primary-dark-color: #{$primary-dark};
+       --body-background: #{$body-background};
+       --body-color: #{$body-color};
+       --header-nav-dark: #27272c;
+}
+
+/* hidden features */
+.nav--burger,
+#nav-language,
+#extra-menu {
+       display: none;
+}
+
+/* accessibility class */
+.sr-only {
+       position: absolute !important;
+       width: 1px !important;
+       height: 1px !important;
+       padding: 0 !important;
+       margin: -1px !important;
+       overflow: hidden !important;
+       clip: rect(0, 0, 0, 0) !important;
+       white-space: nowrap !important;
+       border: 0 !important;
+       background: white;
+       color: black;
+}
+
+[aria-hidden] {
+       display: none;
+}
+
+/* symbols */
+@font-face {
+       font-family: 'FontAwesome';
+       src: url('/static/xstatic/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('/static/xstatic/fonts/fontawesome-webfont.woff') format('woff'), url('/static/xstatic/fonts/fontawesome-webfont.ttf') format('truetype'), url('/static/xstatic/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
+       font-weight: normal;
+       font-style: normal;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+       font-family: FontAwesome;
+       font-weight: normal;
+       font-style: normal;
+       text-decoration: inherit;
+       -webkit-font-smoothing: antialiased;
+}
+
+.icon-stop:before { content: "\f04d"; }
+.icon-volume-up:before { content: "\f028"; }
+.icon-pause:before { content: "\f04c"; }
+.icon-play:before { content: "\f04b"; }
+.icon-play-sign:before { content: "\f144"; }
+.icon-search:before { content: "\f002"; }
+.icon-chevron-sign-left:before { content: "\f137"; }
+.icon-chevron-sign-right:before { content: "\f138"; }
+
+/* reset */
+* {
+       margin: 0;
+       padding: 0;
+       list-style: none;
+       line-height: 1.45;
+}
+
+h1, h2, h3, h4, h5, p {
+       margin: 0.5em 0;
+}
+
+/* styles */
+html {
+       background: white;
+}
+
+body {
+       font-family: sans-serif;
+       margin: 0 auto;
+       max-width: 90vw;
+       background: var(--body-background);
+       color: var(--body-color);
+}
+
+h1, h2, h3, h4 {
+       color: var(--primary-color);
+       text-transform: uppercase;
+}
+
+a {
+       color: var(--primary-dark-color);
+       text-decoration: none;
+       &:hover {
+               text-decoration: underline dotted;
+       }
+}
+
+audio {
+       display: none;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+       color: var(--primary-color);
+}
+
+.left {
+       float: left;
+       margin-right: 0.5em;
+}
+
+.right {
+       float: right;
+}
+
+.cf {
+       clear: both;
+}
+
+nav ul {
+       display: flex;
+       padding: 1em 0;
+       gap: 1em;
+}
+
+#nav-search {
+       flex: 1;
+       text-align: right;
+       form {
+               display: inline-block;
+       }
+}
+
+#backgroundBox {
+       display: flex;
+       justify-content: space-between;
+}
+
+/* player */
+
+#Player {
+       width: 30%;
+       margin-top: 2em;
+       #streamSymbol {
+               font-size: 3rem;
+               width: 3rem;
+               line-height: 3rem;
+               display: inline-block;
+               text-align: center;
+               float: left;
+               margin-right: 5px;
+               position: relative;
+               z-index: 10;
+               top: -6px;
+               &.icon-stop {
+                       font-size: 1rem;
+               }
+               &::after {
+                       content: "";
+                       border: 2px solid var(--primary-light-color);
+                       border-radius: 100%;
+                       position: absolute;
+                       top: -2px;
+                       left: -2px;
+                       right: -2px;
+                       bottom: -2px;
+               }
+               &.icon-volume-up::after {
+                       border-color: transparent;
+               }
+               &.icon-stop::after,
+               &.icon-pause::after {
+                       animation: rotating-border 2s 1;
+               }
+       }
+
+       #streamSymbol:focus-visible {
+               outline: none;
+               &::after {
+                       border-color: var(--primary-light-color);
+               }
+       }
+
+       @keyframes rotating-border {
+               0%  {border-left-color: var(--primary-dark-color); transform: rotate(0deg);}
+               99% {border-left-color: var(--primary-dark-color); transform: rotate(360deg);}
+               100% {border-color: var(--primary-dark-color);}
+       }
+}
+
+/* week program */
+
+.program {
+       .days {
+               padding: 1em 0;
+               button {
+                       appearance: none;
+                       background: transparent;
+                       border: none;
+                       cursor: pointer;
+                       border-bottom: 1px solid transparent;
+                       width: 4em;
+                       &:hover,
+                       &.active {
+                               border-bottom-color: var(--primary-dark-color);
+                       }
+               }
+       }
+       .program-week li {
+               display: flex;
+               gap: 1em;
+               align-items: center;
+               border-bottom: 1px solid var(--primary-dark-color);
+       }
+       .programDate,
+       .programCell {
+               padding: 1em 0;
+       }
+       a {
+               .title {
+                       text-decoration: underline;
+               }
+       }
+}
+
+.leftPart {
+       width: 60%;
+       float: left;
+}
+
+.rightPart {
+       width: 30%;
+       float: right;
+}
+
+/* news carrousel */
+#newsRoll {
+       #ticker li {
+               a {
+                       position: relative;
+                       display: block;
+               }
+               .title {
+                       background: black;
+                       color: white;
+                       padding: 0.5em;
+                       bottom: 0px;
+                       width: 100%;
+                       text-align: left;
+                       font-weight: bold;
+                       position: absolute;
+                       left: 0;
+               }
+       }
+       #roller {
+               padding: 0.5em 0;
+               display: flex;
+               justify-content: space-between;
+               button {
+                       appearance: none;
+                       background: transparent;
+                       border: 1px solid black;
+                       cursor: pointer;
+               }
+       }
+}
+
+.mainSub {
+       ul {
+               display: flex;
+               gap: 1em;
+       }
+}
+
+#gridNav {
+       ul {
+               display: flex;
+               gap: 1em;
+       }
+}
+
+#grid {
+       table {
+               table-layout: fixed;
+               border-collapse: collapse;
+       }
+       .heure {
+               height: 30px;
+       }
+       td, th {
+               border: 1px solid #ccc;
+               padding: 3px;
+               vertical-align: middle;
+               text-align: center;
+       }
+       hr {
+               width: 20%;
+               height: 1px;
+               border: none;
+               background: black;
+               margin: 0 auto;
+       }
+}
+
+.newsList {
+       li {
+               padding-bottom: 1em;
+               min-height: 60px;
+       }
+}
+
+.main-flex {
+       display: flex;
+       flex-wrap: wrap;
+       justify-content: space-between;
+       overflow: hidden;
+       li {
+               width: 48%;
+               list-style: none;
+               position: relative;
+               .big.logo {
+                       height: 200px;
+                       max-width: 100%;
+                       background: #eee;
+                       overflow: hidden;
+               }
+       }
+}
+
+.label.absolute {
+       position: absolute;
+       left: 0;
+       top: 0;
+       bottom: auto;
+       display: inline-block;
+       background: black;
+       color: white;
+       padding: 0.5em;
+}
+
+.description {
+       color: var(--body-color);
+}
+
+#metaNav,
+#Commons,
+#Changing {
+       padding: 0 5vw;
+       position: relative;
+}
+
+#Commons {
+       padding-top: 1em;
+}
+
+#metaNav {
+       background: var(--header-nav-dark);
+       z-index: 10;
+       a {
+               color: var(--primary-light-color);
+       }
+       &::after {
+               content: "";
+               height: 55px;
+               display: block;
+               position: absolute;
+               top: 0;
+               left: 0;
+               width: 100%;
+               transform-origin: right bottom;
+               transform: skewY(-0.5deg);
+               background: var(--header-nav-dark);
+               z-index: -1;
+       }
+}
+
+#mainHeader {
+       text-decoration: none;
+       font-size: 150%;
+}
+
+.sectionLabel.right a {
+       font-size: 0.75em;
+       text-decoration: underline;
+}
+
+#Footer {
+       clear: both;
+       margin-top: 50px;
+       padding: 0 1em;
+       position: relative;
+       z-index: 10;
+       background: var(--header-nav-dark);
+       a {
+               color: var(--primary-light-color);
+       }
+       &::before {
+               content: "";
+               height: 55px;
+               display: block;
+               position: absolute;
+               top: -20px;
+               left: 0;
+               width: 100%;
+               transform-origin: right top;
+               transform: skewY(-0.5deg);
+               background: var(--header-nav-dark);
+               z-index: -1;
+       }
+}