UnfoldingCSS:FAQ: Difference between revisions

From titipi
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Tag: Manual revert
 
(43 intermediate revisions by 2 users not shown)
Line 1: Line 1:
body {margin: auto; line-height: 1.4em; max-width: 900px; padding: 1.5em 1em;
body {margin: auto; line-height: 1.4em; max-width: 900px; padding: 1.5em 1em;
   background: linear-gradient(0deg, violet, red, violet);
   <!-- background: linear-gradient(0deg, lightblue, white, lightblue); -->
}
}


Line 15: Line 15:
.tocnumber {display: none;}
.tocnumber {display: none;}


img{
max-width:100%;
}


/* toclimit */
/* toclimit */
Line 34: Line 31:
h3 {font-size: 1.5em; line-height: 1.3em; color: red}
h3 {font-size: 1.5em; line-height: 1.3em; color: red}


a, a:visited, a:hover {color: black; background: green; text-decoration: none;}
a, a:visited, a:hover {color: black; background: white; text-decoration: none;}
a:hover {color: green !important}
a:hover {color: red !important}
 
 
@font-face {
    font-family: 'asulbold';
    src: url('/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'),
        url('/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'asulregular';
    src: url('/wiki/images/0/03/Asul-regular-webfont.woff') format('woff'),
        url('/wiki/images/c/c7/Asul-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
 
}
 
@font-face {
    font-family: 'compagnon-italic';
    src: url('/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
        url('/wiki/images/f/fc/Compagnon-Italic.woff') format('woff');
        url('/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
    font-weight: normal;
    font-style: normal;
 
}
 
:root{
--font-size: 11pt;
}




@page{
@page{
size: 148mm 210mm;
size: 148mm 210mm;
margin:17mm 15mm 19mm 15mm;
margin: 17mm 15mm 19mm 15mm;


@bottom-center{
@bottom-center{
Line 58: Line 87:
}
}
@page:first{
@page:first{
 
string-set: sectiontitle content(text);
    background: linear-gradient(0deg, violet, red, violet);


content: "Counter Cloud FAQ";
  background-image: url(https://titipi.org/wiki/images/e/eb/12o_p3.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom 20% center;
 
@top-center{
                font-family: asulbold;
content: "";
                font-size:14pt;
 
}
 
        @bottom-center{
                font-family: asulbold;
content: "The Institute for Technology In the Public Interest";
                font-size:12pt;


         }
         }
}
}


@page:nth(2){         
@page:nth(2){         
         background-color: white;
         background-image: url(https://titipi.org/wiki/images/3/3f/Snail_12o.jpg);
        background-size: 98%;
        background-repeat: no-repeat;
        background-position: center;
         @bottom-center{
         @bottom-center{
                 content:"";
                 content:"";
Line 77: Line 121:
@page:nth(3) {
@page:nth(3) {
background-color:white;
background-color:white;
@top-center{
                font-family: asulbold;
content: "Frequently Asked Questions";
                font-size:12pt;
}
        @bottom-center{
                font-family: asulbold;
content: "The Institute for Technology In the Public Interest";
                font-size:12pt;


        }
}
@page:nth(4) {
    background-image:url(https://titipi.org/wiki/images/b/b3/Smoke.jpg);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
@page:nth(6) {
    background-image:url(https://titipi.org/wiki/images/7/71/Skein.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
@page:nth(16) {
    background-image:url(https://titipi.org/wiki/images/6/60/Waterfall.jpg);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
}
@page:nth(20) {
    background-image:url(https://titipi.org/wiki/images/4/40/Droplets.jpg);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
}
@page:nth(24) {
    background-image:url(https://titipi.org/wiki/images/a/a4/Cal_CCAD.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    @top-center{
                font-family: asulbold;
content: "";
                font-size:12pt;
}
}
}


Line 89: Line 182:


div.section, div.section div.contrib:nth-of-type(1){
div.section, div.section div.contrib:nth-of-type(1){
break-before: right;      
      break-before: right;
 
}
}
div.contrib:not(:first-of-type){
div.contrib:not(:first-of-type){
Line 98: Line 190:
       page: contrib;
       page: contrib;
}
}


span.bookcover {
span.bookcover {
string-set: sectiontitle content(text);
         line-height: 1;
        font-size: 125px;
content: "FAQ";  
         line-height: 0.55;
         font-size:80px;
margin: 0;
         text-align:center;
       
         font-family: 'windy';
        font-family: 'asulbold';
         position:auto;
        position:relative;
         color: #FF69B480;
        bottom: 5px;
     
        right: 5px;
        hyphens:auto;
color: red;
}
span.bookcover-title{
        string-set: sectiontitle content(text);  
         font-size: 75px;
         line-height: 0.65;
margin: 0;
         font-family: sans-serif;
         position:absolute;
        top: 400px;
        right:24px;
        hyphens:auto;
         color: red;
        border: solid 2px red;
        padding: 20px;
        transform: rotate(-7deg);
        background: white;
        z-index:1;
}
}


span.frenchtitle{
span.frenchtitle{
string-set: sectiontitle content(text);  
string-set: sectiontitle content(text);  
         font-size: 140px;
         font-size: 40px;
         line-height: 0.55;
         line-height: 0.55;
margin: auto;
margin: 0;
         font-family: 'garden';
         font-family: 'asulbold';
         display:inline;
         display:inline;
         position:relative;
         position:relative;
Line 124: Line 234:
}
}


body{
        color: black;
font-size: var(--font-size);
line-height: 1.4;
        font-family: 'asulregular';
}


div.pagebreak{
div.pagebreak{
Line 129: Line 246:
}
}
div.nobreak{
div.nobreak{
     page-break-inside:avoid;
     page-break-inside: avoid;
}
}


Line 140: Line 257:


h2{
h2{
margin: 0 0 0.5em 0;
margin-top:0;
font-weight: 600;
font-weight: 600;
line-height: 1;
line-height: 1;
font-family: 'garden';
font-family: 'asulbold';
color:#FF00BF;
font-size: 2.6rem;
-webkit-text-stroke: 1px orange;
page-break-before: right;
font-size:24pt;
page-break-before:never;
 
}
}
.runningtitle {
.runningtitle {
   display:none;
   display:none;
}
}
h2:not( .runningtitle ~ h2 ){
h2:not( .runningtitle ~ h2 ){
string-set: contributiontitle content(text);  
string-set: contributiontitle content(text);  
}
}
h3 {font-family: asulbold; font-size: 1.5em; line-height: 1;}


h3, h4, h5, h6{
h3, h4, h5, h6{
     margin: 0 0 0.5em 0;
     margin: 0 0 1em 0;
     page-break-after: avoid;
     page-break-after: avoid;
     font-weight: 600;
     font-weight: 600;
color: green;
}
}


p {
p{
     margin: 0 0 1em 0;
     margin: 0 0 1em 0;
}
}


/*
.contrib p{
    orphans:2;
    widows:2;
}
*/
.thumb{
    /* image caption */
    font-size: 10pt;
    line-height: 1.25;
    margin: 24pt 16pt 16pt 16pt;
    page-break-inside: avoid;
    font-family: asulregular;
}
img{
float: right;
    max-width: 45%;
    height: auto;
    margin: 0 8pt 8pt 0;
}
.thumbinner{
.thumbinner{
     max-width:100%;
     max-width:100%;
}
}
pre{
pre{
     font-size: 8pt;
     font-size: 8pt;
Line 180: Line 313:
     margin: 16pt 16pt;
     margin: 16pt 16pt;
}
}
table{
table{
     width: 100%;
     width: 100%;
}
}
sup{
sup{
     line-height: 0;
     line-height: 0;
}
a,
a:visited,
a:active,
a:hover{
    color: red;
    text-decoration: none;
    border-bottom: 1px solid red;
}
}


/* specific details */
/* specific details */
a.external{
a.external{
}
}
Line 197: Line 335:
     word-break: none !important;
     word-break: none !important;
}
}
b,strong {
b,strong {
     font-weight:500;
     font-weight:500;
}
}
small, .small {font-size: 8pt;}
small, .small {font-size: 8pt;}


Line 208: Line 344:
}
}
.reference-text::footnote-call {
.reference-text::footnote-call {
    font-family:'asulregular';
}
}
          
          
.reference-text::footnote-marker {
.reference-text::footnote-marker {
    font-family:'asulregular';
}
}
.contents ul{
.contents ul{

Latest revision as of 16:54, 20 November 2024

body {margin: auto; line-height: 1.4em; max-width: 900px; padding: 1.5em 1em;
  <!-- background: linear-gradient(0deg, lightblue, white, lightblue); -->
}

h2 {font-size: 1.9em; line-height: 1.3em; color: white}
h3 {font-size: 1.5em; line-height: 1.3em; color: white}

a, a:visited, a:hover {color: black; background: white; text-decoration: none;}
a:hover {color: red !important}

.gallerybox ul, .gallerybox li {style: none;}

.gallerybox li {width:200px; float: right;}

.tocnumber {display: none;}


/* toclimit */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}



h2 {font-size: 1.9em; line-height: 1.3em; color: red}
h3 {font-size: 1.5em; line-height: 1.3em; color: red}

a, a:visited, a:hover {color: black; background: white; text-decoration: none;}
a:hover {color: red !important}


@font-face {
    font-family: 'asulbold';
    src: url('/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'),
         url('/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'asulregular';
    src: url('/wiki/images/0/03/Asul-regular-webfont.woff') format('woff'),
         url('/wiki/images/c/c7/Asul-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'compagnon-italic';
    src: url('/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
         url('/wiki/images/f/fc/Compagnon-Italic.woff') format('woff');
         url('/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
    font-weight: normal;
    font-style: normal;

}

:root{
	--font-size: 11pt;
}


@page{
	size: 148mm 210mm;
	margin: 17mm 15mm 19mm 15mm;

	@bottom-center{
		margin-top: -4mm;
		font-family: 'asulregular';
		font-size: 9pt;
		content: counter(page);
	}
       @footnote {
           float: bottom;
           border-top: solid #222 thin;
           padding-top: 8pt;
           font-family: 'asulregular';
font-size: 8pt;
       }

}
@page:first{

   background-image: url(https://titipi.org/wiki/images/e/eb/12o_p3.jpg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: bottom 20% center;

	
	@top-center{
                font-family: asulbold;
		content: "";
                font-size:14pt;

	}

        @bottom-center{
                font-family: asulbold;
		content: "The Institute for Technology In the Public Interest";
                font-size:12pt;

        }
}

@page:nth(2){        
        background-image: url(https://titipi.org/wiki/images/3/3f/Snail_12o.jpg);
        background-size: 98%;
        background-repeat: no-repeat;
        background-position: center;
         @bottom-center{
                content:"";
        }
}

@page:nth(3) {
	background-color:white;
@top-center{
                font-family: asulbold;
		content: "Frequently Asked Questions";
                font-size:12pt;

	}

        @bottom-center{
                font-family: asulbold;
		content: "The Institute for Technology In the Public Interest";
                font-size:12pt;

        }

}
@page:nth(4) {
    background-image:url(https://titipi.org/wiki/images/b/b3/Smoke.jpg);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
@page:nth(6) {
    background-image:url(https://titipi.org/wiki/images/7/71/Skein.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
@page:nth(16) {
    background-image:url(https://titipi.org/wiki/images/6/60/Waterfall.jpg);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
}
@page:nth(20) {
    background-image:url(https://titipi.org/wiki/images/4/40/Droplets.jpg);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
}
@page:nth(24) {
    background-image:url(https://titipi.org/wiki/images/a/a4/Cal_CCAD.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    @top-center{
                font-family: asulbold;
		content: "";
                font-size:12pt;

	}
}

@page:blank{
	background-color:white;
         @bottom-center{
                content:"";
color: white;
        }
}

div.section, div.section div.contrib:nth-of-type(1){
      break-before: right;
}
div.contrib:not(:first-of-type){
      break-before: always;    
}
div.contrib{
       page: contrib;
}

span.bookcover {
	string-set: sectiontitle content(text); 
        font-size: 125px;
        line-height: 0.55;
	margin: 0;
        
        font-family: 'asulbold';
        position:relative;
        bottom: 5px;
        right: 5px;
        hyphens:auto;
color: red;
}
span.bookcover-title{
        string-set: sectiontitle content(text); 
        font-size: 75px;
        line-height: 0.65;
	margin: 0;
        font-family: sans-serif;
        position:absolute;
        top: 400px;
        right:24px;
        hyphens:auto;
        color: red;
        border: solid 2px red;
        padding: 20px;
        transform: rotate(-7deg);
        background: white;
        z-index:1;
}

span.frenchtitle{
	string-set: sectiontitle content(text); 
        font-size: 40px;
        line-height: 0.55;
	margin: 0;
        font-family: 'asulbold';
        display:inline;
        position:relative;
        hyphens:auto;
        color: black;
}


body{
        color: black;
	font-size: var(--font-size);
	line-height: 1.4;
        font-family: 'asulregular';
}

div.pagebreak{
    page-break-after: always;
}
div.nobreak{
    page-break-inside: avoid;
}


/* GENERAL ELEMENTS */

blockquote {
font-family: 'compagnon-italic';
}

h2{
margin-top:0;
font-weight: 600;
line-height: 1;
font-family: 'asulbold';
font-size: 2.6rem;
page-break-before: right;
}
.runningtitle {
  display:none;
}
h2:not( .runningtitle ~ h2 ){
	string-set: contributiontitle content(text); 
}

h3 {font-family: asulbold; font-size: 1.5em; line-height: 1;}

h3, h4, h5, h6{
    margin: 0 0 1em 0;
    page-break-after: avoid;
    font-weight: 600;
}

p{
    margin: 0 0 1em 0;
}

/*
.contrib p{
    orphans:2;
    widows:2;
}
*/

.thumb{
    /* image caption */
    font-size: 10pt;
    line-height: 1.25;
    margin: 24pt 16pt 16pt 16pt;
    page-break-inside: avoid;
    font-family: asulregular;
}
img{
float: right;
    max-width: 45%;
    height: auto;
    margin: 0 8pt 8pt 0;
}
.thumbinner{
    max-width:100%;
}
pre{
    font-size: 8pt;
    line-height: 1.8;
    white-space: pre;
    margin: 16pt 16pt;
}
table{
    width: 100%;
}
sup{
    line-height: 0;
}
a,
a:visited,
a:active,
a:hover{
    color: red;
    text-decoration: none;
    border-bottom: 1px solid red;
}

/* specific details */
a.external{
}

a.text{
    word-break: none !important;
}
b,strong {
     font-weight:500;
}
small, .small {font-size: 8pt;}

span.reference-text { 
    float: footnote;
}
.reference-text::footnote-call {
    font-family:'asulregular';
}
        
.reference-text::footnote-marker {
    font-family:'asulregular';
}
.contents ul{
    margin-top:0.5em;
}
.contents h3{
    margin-bottom: 0.5em;
}


/* WIKISTYLING */

.tocnumber { display: none; }