X-Git-Url: https://git.0d.be/?p=panikweb.git;a=blobdiff_plain;f=panikweb%2Fstatic%2Fcss%2F_general.scss;fp=panikweb%2Fstatic%2Fcss%2F_general.scss;h=2632afaeb0a966078701a84072f3625b8cbca728;hp=0000000000000000000000000000000000000000;hb=4d7a9be82c839071d54634549a6f53bb7effd3a2;hpb=0605dcd8273da1984c6a6304aafdc949ee2c2820

diff --git a/panikweb/static/css/_general.scss b/panikweb/static/css/_general.scss
new file mode 100644
index 0000000..2632afa
--- /dev/null
+++ b/panikweb/static/css/_general.scss
@@ -0,0 +1,497 @@
+/******************/
+/*HTML TAG DISPLAYS */
+/******************/
+body {
+	font-family: "RegloNormal";
+	line-height: normal;
+	text-align: left;
+	margin:2.8em auto 0 auto;
+	/*padding: 0px 10px;*/
+	clear: both;
+}
+code,pre{
+	display:block;
+	overflow:auto;
+	padding:0.5em;
+	background:black !important;
+	color:white !important;
+	font-family:monospace;
+}
+audio { 
+	display:block;
+	width: 90%; 
+	margin:0.5em auto 1em auto;
+}
+
+a {
+	color:inherit;
+	text-decoration: none;
+}
+.userContent a:hover {
+    text-decoration: underline;
+}
+a.block:hover,nav a:hover{
+    text-decoration: none;
+}
+button, .button{
+	margin:0 0 0 0;
+	padding: 0 0 0 0;
+	cursor:pointer ;
+	background:none;
+}
+img {max-width:100%;}
+img.logo{border:2px solid black;}
+
+header{
+	padding:0 0 2em 0;
+	font-family: 'RegloBold';
+}
+h1, h2, h3, h4, h5{
+	font-family: 'RegloBold';
+	line-height:1em;
+	padding:0.2em 0 0.2em 0;
+}
+h1, h2, h3, h4{
+	text-transform: uppercase;
+}
+h1 {	font-size: 6em;}
+h2 {	font-size: 4em;}
+h3 {	font-size: 3em;}
+h4 {	font-size: 1.8em;}
+h5 {	font-size: 1.1em;}
+
+/*Specific rules for text writen by final users */
+.userContent h1 {	font-size: 2em;}
+.userContent h2  {	font-size: 1.9em;}
+h1, h2, h3, h4, .squashed{
+    font-family: 'RegloScale';
+    }
+
+nav{
+	padding:0em;
+	font-family: "RegloBold";
+	text-transform: uppercase;
+}
+hr {
+	height: 0;
+	margin:0.5em 0 0.5em 0;
+	padding:0;
+	border-style:solid;
+	border-width:2px 0 0 0 ;
+	border-color:black;
+}
+table{
+	margin:auto;
+	table-layout:fixed;
+}
+table,td,tr  {
+	padding:0;
+	margin:0;
+	word-wrap: break-word;
+	text-overflow: ellipsis;
+        text-align: center;
+        vertical-align: middle;
+        border: 1px solid #D0D0D0;
+	border-collapse:collapse;
+}
+th {
+	white-space: nowrap;
+	text-transform: uppercase;
+}
+tr{
+}
+p {
+    /*line-height: 1.2;*/
+    margin-bottom: 1em;
+}
+p  a {
+	text-decoration: underline
+}
+    
+em {
+    font-family: "RegloBold";
+    font-style: normal;
+}
+strong{
+	text-transform: uppercase;}
+blockquote {
+	padding: 1em;
+	font-style:italic;
+}
+
+dl{}
+dt, dd{	
+	letter-spacing:1px;
+	line-height: 150%;
+}
+dt {
+	float:left;
+	font-family: "RegloBold";
+	margin-right: 0.3em; 
+}
+dd {
+	font-family: "RegloNormal";
+}
+
+dt:after {
+    content: ":";
+}
+
+dl.metadata dt {
+	clear: none;
+	margin: 0;
+}
+
+dl.metadata dd {
+	margin-right: 4px;
+    }
+
+button {display:inline-block;}
+button {
+	font-family: "RegloBold";
+	text-transform: uppercase;
+}
+ul, ol, dl {
+	margin: 0;
+	padding: 0 0 0 2em;
+}
+nav ul, ul.inline, ul.custom, ul.custom li{
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+nav ul li, ul.inline li{
+	display:inline;
+}
+ul.list{
+	list-style-type:square; /*Not working but why?*/
+	list-style-position:inside;
+}
+ul.list > li{
+	padding:0.5em 0 0.5em 0;
+	border-bottom:1px solid #ccc;
+}
+
+/******************/
+/*USEFULL CLASSES */
+/******************/
+
+.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;
+}
+
+ul.distributed{
+	display:table;
+	width:100%;
+	text-align:center;
+	margin:0;
+	padding:0;
+	border-collapse:collapse;
+}
+ul.distributed li{
+	display:table-cell;
+	text-align:center;
+}
+ul.distributed.by2 li{
+	width:50%;
+}
+ul.distributed.by3 li{
+	width:33%;
+}
+ul.distributed.by4 li{
+	width:25%;
+}
+ul.distributed.by5 li{
+	width:20%;
+}
+ul.distributed.by6 li{
+	width:16.6666%;
+}
+ul.distributed.by7 li{
+	width:14.285%;
+}
+
+a.active, button.active{
+	font-weight:bold;
+	text-decoration:none;
+	border-bottom: 2px solid;
+}
+.active *{
+	font-weight:inherit;
+}
+
+.todo:hover, .todo *:hover{
+	text-decoration: line-through;
+	color:red !important;
+} 
+
+
+.focusFade {
+    -webkit-transition-property: color;
+    -webkit-transition-duration: 0.2s;
+    -webkit-transition-timing-function: ease;
+    }
+
+.extra-margin {
+    margin-bottom: 16px;
+}
+.ellipsis{
+   white-space: nowrap;
+   text-overflow: ellipsis;
+   overflow: hidden;
+}
+.block {display:block;}
+.inBlock{display:inline-block;}
+.right{float:right;margin-left:1em;}
+.left{float:left;margin-right:1em;}
+.userContent .right, .userContent .left{
+	margin-bottom:1.5em;
+}
+img.right, img.left{max-width:50%;}
+.smooth{opacity:0.5;}
+.hidden{display:none;}
+.invisible{visibility:hidden;}
+.padded{padding:1.5em;}
+.marged{margin:1.5em 0 1.5em 0;}
+    
+.small{	font-size: 80%;}
+.big{	font-size: 150%;}   
+.huge{	font-size: 200%;}
+
+.absolute{
+	position:absolute;
+}
+.relative{
+	position:relative;
+}
+.nowrap {
+	white-space: nowrap;
+}
+.center{
+	text-align:center;
+	margin-left:auto;
+	margin-right:auto;
+}
+
+.loading{
+   -webkit-animation: loading 1s infinite linear;
+   -moz-animation: loading 1s infinite linear;
+   -o-animation: loading 1s infinite linear;
+   animation: loading 1s infinite linear;
+}
+@-webkit-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
+@-moz-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
+@-o-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
+@keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
+
+.spinning {
+   position:relative;
+   /*
+   -webkit-animation: rotation 10s infinite linear;
+   -moz-animation: rotation 10s infinite linear;
+   -o-animation: rotation 10s infinite linear;
+   animation: rotation 10s infinite linear;
+   */
+}
+@-webkit-keyframes rotation {
+   from {-webkit-transform: rotate(0deg);}
+   to {-webkit-transform: rotate(359deg);}
+}
+@-moz-keyframes rotation {
+   from {-moz-transform: rotate(0deg);}
+   to {-moz-transform: rotate(359deg);}
+}
+@-o-keyframes rotation {
+   from {-o-transform: rotate(0deg);}
+   to {-o-transform: rotate(359deg);}
+}
+@keyframes rotation {
+   from {transform: rotate(0deg);}
+   to {transform: rotate(359deg);}
+}
+.vertical {
+        -webkit-transform: rotate(-90deg);
+        -moz-transform: rotate(-90deg);
+        -ms-transform: rotate(-90deg);
+        -o-transform: rotate(-90deg);
+        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+.columns{column-gap: 0;	-webkit-column-gap: 0;	-moz-column-gap: 0;}
+.columns.padded{column-gap: 2em;	-webkit-column-gap: 2em;	-moz-column-gap: 2em;}
+.columns li{
+	display:inline-block;
+	width:100%;
+	column-break-inside: avoid;
+	-moz-column-break-inside: avoid;
+	-webkit-column-break-inside: avoid;
+	break-inside: avoid-column;
+	-webkit-break-inside: avoid-column;
+	-moz-break-inside: avoid-column;
+}
+@media only screen and (min-width: 600px) {
+	.columns{column-count: 2;	-webkit-column-count: 2;	-moz-column-count: 2;}	
+}
+.columns.by3{column-count: 3;	-webkit-column-count: 3;	-moz-column-count: 3;}
+
+/* And the rest is Eric & Seb, AGPLv3*/
+
+label, select, input, button, textarea{
+	font-size:inherit;
+}
+label {
+	margin-right:1em;
+	height: 1.2em;
+	display: inline-block;
+	text-transform: uppercase;
+}
+
+select {
+    height: 1.2em;
+    -webkit-appearance: none;
+    -moz-appearance: window;
+}
+
+select[multiple],
+select[size] {
+    height: auto;
+    background-image: inherit;
+}
+
+input[type=date] {
+    -webkit-appearance: none;
+    -moz-appearance: window;
+}
+
+select, select option {
+    height: 1.2em;
+    text-transform: none;
+}
+
+input, select {
+    height: 1.2em;
+    background: #fff;
+    border: 1px inset #aaa;
+}
+
+
+input[type=text], textarea{
+	width: 100%; 
+	max-width:10em;
+	display: inline-block;
+	border:2px solid black;
+	border-radius:0.2em;
+	-moz-border-radius:0.2em;
+	-webkit-border-radius:0.2em;
+}
+
+input[type=submit] {
+    text-align: left;
+    border: none;
+}
+
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.cf:before, .cf:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.cf:after {
+    clear: both;
+}
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.cf {
+    *zoom: 1;
+}
+
+/* icons */
+
+@font-face {
+        font-family: 'FontAwesome';
+        src: url('/static/xstatic/fonts/fontawesome-webfont.eot');
+        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;
+}
+
+/* FONT AWESOME CORE
+ * -------------------------- */
+[class^="icon-"],
+[class*=" icon-"] {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+  *margin-right: .3em;
+}
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+  text-decoration: inherit;
+  display: inline-block;
+  speak: none;
+}
+/* makes sure icons active on rollover in links */
+a [class^="icon-"],
+a [class*=" icon-"] {
+  display: inline;
+}
+
+/* reglo symbols variants */
+[class^="icon-"].resymbol,
+[class*=" icon-"].resymbol {
+  font-family: Symbols;
+}
+
+/* specific icon classes */
+.icon-archive:before { content: "\f187"; }
+.icon-bolt:before { content: "\f0e7"; }
+.icon-bullhorn:before { content: "\f0a1"; }
+.icon-calendar:before { content: "\f073"; }
+.icon-check:before { content: "\f046"; }
+.icon-check-empty:before { content: "\f096"; }
+.icon-chevron-sign-left:before { content: "\f137"; }
+.icon-chevron-sign-right:before { content: "\f138"; }
+.icon-comments:before { content: "\f086"; }
+.icon-double-angle-left:before { content: "\f100"; }
+.icon-download:before { content: "\f01a"; }
+.icon-envelope:before { content: "\f0e0"; }
+.icon-file:before { content: "\f15b"; }
+.icon-globe:before { content: "\f0ac"; }
+.icon-headphones:before { content: "\f025"; }
+.icon-home:before { content: "\f015"; }
+.icon-info-sign:before { content: "\f05a"; }
+.icon-microphone:before { content: "\f130"; }
+.icon-pause:before { content: "\f04c"; }
+.icon-play:before { content: "\f04b"; }
+.icon-play-sign:before { content: "\f144"; }
+.icon-plus-sign:before { content: "\f055"; }
+.icon-question-sign:before { content: "\f059"; }
+.icon-remove:before { content: "\f00d"; }
+.icon-rss:before { content: "\f09e"; }
+.icon-search:before { content: "\f002"; }
+.icon-share:before { content: "\f045"; }
+.icon-step-backward:before { content: "\f048"; }
+.icon-step-forward:before { content: "\f051"; }
+.icon-stop:before { content: "\f04d"; }
+.icon-trash:before { content: "\f014"; }
+.icon-volume-up:before { content: "\f028"; }