purebeauty.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763
  1. /*! purebeauty.css v0.0.7 | (c) C.I.R.C.E.'s & affini | https://ima.circex.org/license.md */
  2. /* === LICENZA = LICENSE ===
  3. * This file is released under license Against DRM 2.0 - We do not like DRM
  4. *
  5. * The license guarantees the rights to: reproduce, distribute, publish, perform, broadcast, modify, elaborate, transcribe, translate, lend, rent and sell the content.
  6. * It prohibits to use the content, when distributed togeher with Digital Rights Management mechanisms.
  7. * For more information on DRM see https://www.defectivebydesign.org/what_is_drm_digital_restrictions_management
  8. *
  9. * Every re-distribution, sharing, modification has to maintain the same conditions, mentioning the original authors
  10. * Read the full license at https://web.archive.org/web/20170327160245/http://www.freecreations.org/Against_DRM2.html
  11. * or in the file called LICENSE.md that comes together with this file.
  12. *
  13. * The original authors of this piece of code can be contacted, supported, etc. by email: info at circe dot org
  14. *
  15. * Please keep the following (C) notice, if you are working on this file.
  16. * [Original work] Copyright (C) [2019] [C.I.R.C.E.'s & affini https://circex.org]
  17. *
  18. * === "The method is content" = "Il metodo e' contenuto" ===
  19. */
  20. @font-face {
  21. font-family: 'Linux Libertine';
  22. font-style: normal;
  23. font-weight: normal;
  24. src: local('Linux Libertine O Regular'), url('fonts/LinLibertine_R.woff') format('woff');
  25. }
  26. @font-face {
  27. font-family: 'Linux Libertine';
  28. font-style: normal;
  29. font-weight: bold;
  30. src: local('Linux Libertine O Bold'), url('fonts/LinLibertine_RB.woff') format('woff');
  31. }
  32. @font-face {
  33. font-family: 'Linux Libertine';
  34. font-style: italic;
  35. font-weight: normal;
  36. src: local('Linux Libertine O Italic'), url('fonts/LinLibertine_RI.woff') format('woff');
  37. }
  38. @font-face {
  39. font-family: 'Linux Libertine';
  40. font-style: italic;
  41. font-weight: bold;
  42. src: local('Linux Libertine O Bold Italic'), url('fonts/LinLibertine_RBI.woff') format('woff');
  43. }
  44. @font-face {
  45. font-family: source_sans_pro;
  46. font-style: normal;
  47. font-weight: 400;
  48. src: url('fonts/source-sans-pro-v13-latin-regular.eot'); /* IE9 Compat Modes */
  49. src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
  50. url('fonts/source-sans-pro-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  51. url('fonts/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  52. url('fonts/source-sans-pro-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
  53. url('fonts/source-sans-pro-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  54. url('fonts/source-sans-pro-v13-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
  55. }
  56. body{
  57. background:#fcfcfc;
  58. color:#232323;
  59. font-family:"Linux Libertine","Times New Roman",Times,serif;
  60. font-weight:normal;
  61. margin:0;
  62. min-height:100%;
  63. overflow-x:hidden;
  64. }
  65. html{
  66. -ms-text-size-adjust:100%;
  67. -webkit-text-size-adjust:100%;
  68. font-size:100%;
  69. height:100%;
  70. overflow-x:hidden;
  71. }
  72. #content{
  73. background:#fcfcfc;
  74. letter-spacing: -0.01em;
  75. min-height:66%;
  76. margin-left:22%;
  77. margin-right:16%;
  78. margin-top:10vh;
  79. margin-bottom:10%;
  80. padding:0 4vw;
  81. }
  82. h1,h2,h3,h4,h5{
  83. font-weight: normal;
  84. font-family:"Linux Libertine","Times New Roman",Times,serif;
  85. line-height: 1em;
  86. }
  87. h1{
  88. font-size: 80px;
  89. margin-top:1em;
  90. margin-bottom: 1em !important;
  91. color: #cc0000;
  92. letter-spacing: -0.01em;
  93. }
  94. h1.title{
  95. text-align:left;
  96. text-decoration:underline;
  97. }
  98. h2 span::after{
  99. content: ".";
  100. }
  101. #content h2{
  102. font-size:40px;
  103. margin-top:1.5em;
  104. letter-spacing: 0.05em;
  105. word-spacing: 0.05em;
  106. }
  107. #content h2, #content h3, #content h4{
  108. margin-left:30px;
  109. margin-top: 20px;
  110. padding-top: 40px;
  111. }
  112. #content h3, #content h4{
  113. font-size:27px;
  114. font-style: italic;
  115. }
  116. #content h2 span,#content h3 span,#content h4 span{
  117. display: none;
  118. }
  119. p, #content h3, #content h4,#content ul, #content ol,#content dl{
  120. font-size:27px;
  121. }
  122. p, #content ul, #content ol,#content dl{
  123. line-height:40px;
  124. }
  125. p{
  126. margin:0px 0px 24px 0px;
  127. }
  128. a{
  129. color:#c00;
  130. text-decoration:underline;
  131. cursor:pointer;
  132. text-decoration-color: #cc0000;
  133. }
  134. a:hover,a:active{
  135. outline:0;
  136. color:#cc0000;
  137. }
  138. a:hover{
  139. }
  140. b,strong{
  141. font-weight:bold
  142. }
  143. em,i,blockquote{
  144. font-style: italic;
  145. }
  146. blockquote{
  147. border-left:2px solid;
  148. margin:0px 0px 24px 0px;
  149. /* margin-left:24px; */
  150. padding: 6px 20px;
  151. }
  152. #content ul, #content ol,#content dl{
  153. font-size:27px;
  154. line-height:40px;
  155. list-style:none;
  156. margin:0px 0px 24px 0px;
  157. padding:0;
  158. }
  159. #content ol, #content ul{
  160. line-height:1.5em;
  161. }
  162. #content li{
  163. margin-left: 24px;
  164. list-style-type: none;
  165. position: relative; /* It is required for setting position to absolute in the next rule. */
  166. }
  167. #content li::before {
  168. content: '\2022'; /* Unicode for • character */
  169. position: absolute;
  170. left: -0.8em; /* Adjust this value so that it appears where you want. */
  171. font-size: 1.1em; /* Adjust this value so that it appears what size you want. */
  172. }
  173. #table-of-contents li::before{
  174. content:'';
  175. }
  176. blockquote ul {
  177. list-style:none;
  178. }
  179. blockquote li, blockquote p {
  180. margin-left:24px;
  181. }
  182. .figure{
  183. margin:0 !important;
  184. padding:0 !important;
  185. }
  186. .figure img{
  187. margin-left:5%;
  188. width:90%;
  189. }
  190. /*#content img{
  191. width:88vw;
  192. margin-left:-20vw;
  193. }
  194. */
  195. #toggle-sidebar,
  196. #table-of-contents .close-sidebar {
  197. display: none;
  198. }
  199. .subtitle{
  200. font-size:95%; /* of h1 */
  201. }
  202. dd{
  203. margin:0;
  204. }
  205. dl dt{
  206. font-weight:bold;
  207. }
  208. dl p,dl table,dl ul,dl ol{
  209. margin-bottom:12px !important;
  210. }
  211. dl dd{
  212. margin:0 0 12px 24px;
  213. }
  214. @media print{
  215. .codeblock,pre.src{
  216. white-space:pre.src-wrap}
  217. }
  218. @media print{
  219. html,body,section{
  220. background:none !important}
  221. *{
  222. box-shadow:none !important;
  223. text-shadow:none !important;
  224. filter:none !important;
  225. -ms-filter:none !important}
  226. a,a:visited{
  227. text-decoration:underline}
  228. pre.src,blockquote{
  229. page-break-inside:avoid}
  230. thead{
  231. display:table-header-group}
  232. tr,img{
  233. page-break-inside:avoid}
  234. img{
  235. max-width:100% !important}
  236. @page{
  237. margin:0.5cm}
  238. p,h2,h3{
  239. orphans:3;
  240. widows:3}
  241. h2,h3{
  242. page-break-after:avoid}
  243. }
  244. #content div.figure{
  245. margin-bottom:24px}
  246. #content div.figure.align-center{
  247. text-align:center}
  248. #content .section>img,#content .section>a>img{
  249. margin-bottom:24px}
  250. /* ~~ Navigation Bar ~~ */
  251. #navigation-container {
  252. margin: 0 auto;
  253. }
  254. .navigation-bar {
  255. position:fixed;
  256. z-index: 100;
  257. background-color: #cc0000;
  258. height: 40px;
  259. width: 100%;
  260. text-align:center;
  261. }
  262. .navigation-bar img{
  263. top:4px;
  264. right:10px;
  265. position:absolute;
  266. }
  267. .navigation-bar ul, .footer ul {
  268. padding: 0px;
  269. margin-top: 5px;
  270. margin-bottom:5px;
  271. text-align: center;
  272. display:inline-block;
  273. vertical-align:top;
  274. }
  275. .navigation-bar li{
  276. list-style-type: none;
  277. font-family:source_sans_pro,Arial,sans-serif;
  278. font-size: 16px;
  279. padding: 0px;
  280. height: 24px;
  281. margin-top: 4px;
  282. margin-bottom: 4px;
  283. margin-left:2px;
  284. margin-right:2px;
  285. display: inline;
  286. }
  287. .navigation-bar li:not(:last-child):not(:first-child), .footer li:not(:last-child){
  288. border-right:1px solid #fcfcfc;
  289. }
  290. .navigation-bar li a, .footer li a{
  291. color: #fefefe;
  292. text-decoration: none;
  293. line-height: 30px;
  294. padding: 10px 15px;
  295. text-transform:uppercase;
  296. }
  297. .navigation-bar li.indice{
  298. color: #fefefe;
  299. text-transform:uppercase;
  300. position: absolute;
  301. top:0px;
  302. left:60px;
  303. padding:4px 0px;
  304. cursor:pointer;
  305. }
  306. .navigation-bar li.indice:hover{
  307. text-decoration:underline;
  308. }
  309. /* ~~ Navigation Bar end ~~ */
  310. /* ~~ footer ~~ */
  311. .footer ul{
  312. margin-left:0px;
  313. margin-right: 0px;
  314. }
  315. .footer li {
  316. list-style-type: none;
  317. font-family:source_sans_pro,Arial,sans-serif;
  318. font-size: 16px;
  319. padding: 0px;
  320. height: 24px;
  321. margin-top: 4px;
  322. margin-bottom: 4px;
  323. margin-left:0px;
  324. margin-right:0px;
  325. display: inline;
  326. }
  327. .footer {
  328. padding-top:10px;
  329. padding-bottom:10px;
  330. margin:0;
  331. left: 0;
  332. bottom: 0;
  333. width: 100%;
  334. background-color: #cc0000;
  335. color: #fefefe;
  336. text-align: center;
  337. }
  338. .footer a {
  339. color: #fcfcfc;
  340. font-size: 16px;
  341. font-family:source_sans_pro,Arial,sans-serif;
  342. text-decoration: none;
  343. line-height: 40px;
  344. padding: 5px 15px;
  345. text-transform:uppercase;
  346. }
  347. /* ~~ footer ~~ */
  348. .navigation-bar li a:hover, .footer a:hover{
  349. text-decoration:underline;
  350. }
  351. /* index */
  352. nav.navbar:hover{
  353. overflow-y:auto;
  354. }
  355. nav.navbar li{
  356. list-style:none;
  357. margin-left: 0px;
  358. }
  359. nav.navbar ul{
  360. margin-bottom:0}
  361. nav.navbar li a{
  362. padding:10px;
  363. position:relative;
  364. border:none;
  365. padding-left:20px;
  366. font-family:"Linux Libertine","Times New Roman",Times,serif;
  367. font-size:20px;
  368. }
  369. nav.navbar > ul > li > a::first-letter {
  370. text-transform: capitalize;
  371. }
  372. nav.navbar li ul li a{
  373. padding:4px}
  374. nav.navbar li ul li ul li a{
  375. padding:8px}
  376. nav.navbar li.current ul{
  377. display:block}
  378. nav.navbar .local-toc li ul{
  379. display:block}
  380. nav.navbar li ul li a{
  381. margin-bottom:0;
  382. font-weight:normal}
  383. nav.navbar a{
  384. display:inline-block;
  385. font-size:20px;
  386. line-height:22px;
  387. padding:10px;
  388. display:block;
  389. position:relative;
  390. /* color:#fff; */
  391. color:#232323;
  392. direction: ltr;
  393. text-decoration:none;
  394. }
  395. nav.navbar a:hover, nav.navbar li.active a{
  396. cursor:pointer;
  397. text-decoration:underline;
  398. /* text-decoration-color:#fff; */
  399. }
  400. nav.navbar{
  401. box-sizing:content-box;
  402. position:fixed;
  403. top:40px;
  404. left:0;
  405. width:25%;
  406. overflow-x:hidden;
  407. overflow-y:hidden;
  408. height:100%;
  409. background:transparent;
  410. z-index:200;
  411. scrollbar-base-color: #1F1D1D;
  412. scrollbar-arrow-color: #b3b3b3;
  413. scrollbar-shadow-color: #1F1D1D;
  414. scrollbar-track-color : #343131;
  415. /* border-right:3px solid #00f; */
  416. transition: background-color 0.2s;
  417. }
  418. nav.navbar > .org-ul{
  419. opacity:0;
  420. transition: opacity 0.2s;
  421. }
  422. nav.navbar:hover > .org-ul, nav.navbar.fixed > .org-ul, nav.navbar.fixxed> .org-ul{
  423. opacity:1.0;
  424. }
  425. nav.navbar.fixxed> .org-ul{
  426. display: block;
  427. }
  428. nav.navbar li ul li{
  429. display:none;
  430. }
  431. nav.navbar:hover > div > div > ul > li, nav.navbar.fixed > div > div > ul > li, nav.navbar.fixxed > div > div > ul > li{
  432. display:block !important;
  433. }
  434. nav.navbar .titlenav{
  435. display: none;
  436. }
  437. .uncollapse{
  438. display:block !important;
  439. }
  440. .currense{
  441. color:#c00 !important;
  442. }
  443. #table-of-contents{
  444. display: none;
  445. position: absolute;
  446. right:0;
  447. width: 18%;
  448. font-weight: normal;
  449. margin-right: 1%;
  450. }
  451. #table-of-contents b{
  452. font-weight: normal;
  453. }
  454. #table-of-contents h2{
  455. display: none;
  456. }
  457. #table-of-contents ul{
  458. font-size:18px;
  459. }
  460. .prevnext{
  461. width: 100px;
  462. height: 80px;
  463. font-size:36px;
  464. text-decoration: none;
  465. }
  466. .prevnext:hover{
  467. text-decoration:underline;
  468. }
  469. .next.prevnext{
  470. float: right;
  471. text-align: right;
  472. }
  473. .prev.prevnext{
  474. float: left;
  475. }
  476. .pvhome.prevnext{
  477. width: 100%;
  478. text-align:center;
  479. display: block;
  480. }
  481. /* schermi piccoli */
  482. @media screen and (max-width: 1400px){
  483. p, #content h3, #content h4,#content ul, #content ol,#content dl{
  484. font-size:23px;
  485. }
  486. #text-table-of-contents li{
  487. margin-left: 6px;
  488. font-size: 14px;
  489. line-height: 16px;
  490. margin-bottom: 8px;
  491. }
  492. #text-table-of-contents ul{
  493. margin-top:6px;
  494. }
  495. p, #content ul, #content ol,#content dl{
  496. line-height:35px;
  497. }
  498. nav.navbar li a{
  499. padding:6px;
  500. }
  501. nav.navbar li ul li a{
  502. padding:2px}
  503. nav.navbar li ul li ul li a{
  504. padding:4px}
  505. #content h1{
  506. font-size:60px;
  507. }
  508. }
  509. /* mobile */
  510. @media screen and (max-width: 768px){
  511. #text-table-of-contents{
  512. display: none;
  513. }
  514. #content{
  515. margin-left:0;
  516. margin-right:0;
  517. margin-bottom:15%;
  518. padding:2vw 4vw;
  519. }
  520. #content h1{
  521. font-size:40px;
  522. /* text-shadow: 0px 0px 0 rgb(-22,-22,233),1px 1px 0 rgb(-34,-34,221),2px 2px 0 rgb(-46,-46,209), 4px 4px 3px rgba(0,0,0,0.5),0px 0px 4px rgba(0,0,0,.2); */
  523. }
  524. #content h1.title::before{
  525. font-size: 30px;
  526. width: 40px;
  527. }
  528. #content h2,#content h3,#content h4{
  529. margin-left:20px;
  530. }
  531. #content h2{
  532. font-size:20px;
  533. }
  534. #content h3,#content h4{
  535. font-size:19px;
  536. }
  537. #content p,#content ul,#content ol,#content dl{
  538. font-size:19px;
  539. line-height:29px;
  540. }
  541. ul,ol,dl,li{
  542. margin-left:6px;
  543. }
  544. #content #content{
  545. padding:1.618em}
  546. #content.shift{
  547. position:fixed;
  548. min-width:100%;
  549. left:85%;
  550. top:0;
  551. height:100%;
  552. overflow:hidden}
  553. #copyright{
  554. width:85%;
  555. display:none}
  556. #copyright.shift{
  557. display:block}
  558. #content p img{
  559. width:100vw ;
  560. margin-left:-4vw;
  561. height:auto;
  562. }
  563. .navigation-bar{
  564. text-align: left;
  565. }
  566. .navigation-bar li, .footer a{
  567. font-size:14px;
  568. }
  569. .footer a{
  570. padding: 5px 8px;
  571. }
  572. .navigation-bar li:not(:last-child):not(:first-child){
  573. padding-left:2px;
  574. border-left:1px solid #fcfcfc;
  575. }
  576. .navigation-bar li.indice{
  577. position: initial;
  578. left:0px;
  579. margin:0px;
  580. padding:8px;
  581. }
  582. .navigation-bar li a {
  583. padding:10px;
  584. }
  585. .navigation-bar ul{
  586. margin-left:16px;
  587. }
  588. .navigation-bar img{
  589. height:70%;
  590. top:15%;
  591. }
  592. nav.navbar{
  593. width: 75%;
  594. height: auto;
  595. }
  596. nav.navbar,nav.navbar.fixed{
  597. display: none;
  598. }
  599. nav.navbar.fixxed{
  600. display: block;
  601. background: #fcfcfc;
  602. }
  603. nav.navbar .titlenav{
  604. padding-left:20px;
  605. }
  606. nav.navbar > ul{
  607. padding:16px;
  608. margin-left:10px;
  609. margin-top:10px;
  610. border-right:1px solid #232323;
  611. border-bottom:1px solid #232323;
  612. }
  613. nav.navbar ul{
  614. background-color:#fcfcfc;
  615. transition:none;
  616. }
  617. nav.navbar > ul > li{
  618. padding:1px;
  619. margin-bottom:3px;
  620. }
  621. nav.navbar ul li ul{
  622. padding-left:20px;
  623. }
  624. nav.navbar li a {
  625. padding: 2px;
  626. }
  627. nav.navbar li ul li a {
  628. padding:2px;
  629. }
  630. nav.navbar li a, nav.navbar a{
  631. font-size:15px;
  632. line-height:17px;
  633. }
  634. nav.navbar > ul {
  635. display:block;
  636. opacity:1.0;
  637. }
  638. #toggle-sidebar {
  639. background-color: transparent;
  640. display: block;
  641. margin-bottom: 1.6em;
  642. padding: 0.6em;
  643. text-align: center;
  644. z-index: 10;
  645. }
  646. #toggle-sidebar h2 {
  647. background-color:#c00;
  648. width:100%;
  649. height:50px;
  650. left:0;
  651. top:0;
  652. color: white;
  653. font-size: 100%;
  654. line-height: 50px;
  655. position:fixed;
  656. margin: 0;
  657. padding: 0;
  658. opacity:0.6;
  659. z-index: 10;
  660. }
  661. }
  662. /* fine mobile */