517 lines
7.2 KiB
CSS
517 lines
7.2 KiB
CSS
/*
|
|
* Theme for Tyto - Littérateur website
|
|
* Created by echolib
|
|
*/
|
|
|
|
/*
|
|
* Define main colors
|
|
*/
|
|
:root {
|
|
--ext-link: #7760CC;
|
|
--int-link: #B38700;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body {
|
|
margin-top: 10px;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
div#site_container {
|
|
}
|
|
|
|
div#article_sidebar_container {
|
|
}
|
|
|
|
a {
|
|
color: var(--ext-link);
|
|
font-weight: bold;
|
|
}
|
|
a:hover, abbr.tyto {
|
|
text-decoration: underline var(--int-link);
|
|
}
|
|
|
|
/*---------------------------------------------------------------------
|
|
* Header
|
|
*/
|
|
header#header_page {
|
|
padding: 10px;
|
|
display: flex;
|
|
}
|
|
|
|
img#site_logo_image {
|
|
width: 120px;
|
|
}
|
|
|
|
div#site_infos {
|
|
width: 660px;
|
|
align-self: center;
|
|
text-align: left;
|
|
}
|
|
|
|
p#site_about {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/*---------------------------------------------------------------------
|
|
* Navbar
|
|
*/
|
|
nav#site_menu {
|
|
border-bottom: 4px ridge black;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
menu#site_menu_items {
|
|
}
|
|
|
|
li.site_menu_item {
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
padding: 0 10px;
|
|
margin-right: 10px;
|
|
border-left: 2px ridge black;
|
|
border-right: 2px ridge black;
|
|
border-top: 4px ridge var(--ext-link);
|
|
}
|
|
|
|
li.site_menu_item:hover {
|
|
border-top: 4px ridge var(--int-link);
|
|
}
|
|
|
|
li.site_menu_item:first-letter {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
a.site_menu_link {
|
|
text-decoration: none;
|
|
color: var(--int-link);
|
|
}
|
|
a.site_menu_link:hover {
|
|
color: var(--ext-link);
|
|
}
|
|
|
|
|
|
/*---------------------------------------------------------------------
|
|
* Article
|
|
*/
|
|
article#article_main {
|
|
font-size: 1.2em !important;
|
|
padding: 20px;
|
|
border: 2px ridge black;
|
|
}
|
|
|
|
article#article_main img {
|
|
max-width: 758px;
|
|
border: 8px ridge grey;
|
|
}
|
|
|
|
a.anchor_link {
|
|
color: var(--int-link) !important;
|
|
}
|
|
a.anchor_link:hover {
|
|
text-decoration: var(--ext-link) underline !important;
|
|
}
|
|
|
|
abbr.tyto {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/*
|
|
* Titles in article
|
|
*/
|
|
h1#post_title,
|
|
h2.title_2, h3.title_3, h4.title_4, h5.title_5, h6.title_6 {
|
|
margin: 30px 0 20px 0;
|
|
}
|
|
|
|
h1#post_title {
|
|
font-size: 1.8em;
|
|
border-bottom: 2px ridge black;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
h2.title_2 {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
h3.title_3 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
h4.title_4 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
h5.title_5 {
|
|
font-size: 1.3em;
|
|
}
|
|
h6.title_6 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
|
|
/*
|
|
* Articles contents paragraphs
|
|
*/
|
|
div.contents {
|
|
flex-wrap: wrap;
|
|
}
|
|
div.contents p {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
div#article_infos {
|
|
text-align: right;
|
|
}
|
|
|
|
/*
|
|
* Misc Words tags
|
|
*/
|
|
code.icode, span.custom, cite.cite {
|
|
font-weight: 700;
|
|
padding: 1px 4px;
|
|
}
|
|
cite.cite {
|
|
color: #00BE13;
|
|
font-style: italic;
|
|
}
|
|
code.icode {
|
|
color: #00948F;
|
|
font-size: 1.3em;
|
|
}
|
|
span.custom {
|
|
color: #A7A700;
|
|
}
|
|
strong.strong {
|
|
font-weight: 900;
|
|
}
|
|
b.tyto {
|
|
font-weight: 700;
|
|
}
|
|
del.tyto {
|
|
color: red;
|
|
opacity: 0.7;
|
|
text-decoration: white line-through;
|
|
}
|
|
u.tyto {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
/*
|
|
* Personal adds
|
|
*/
|
|
img.post_pic {
|
|
margin: auto !important;
|
|
display: flex;
|
|
max-width: 90%!important;
|
|
}
|
|
|
|
p.rappels, p.astuces {
|
|
padding: 5px;
|
|
font-size: .9em;
|
|
}
|
|
p.rappels{
|
|
border: 1px dashed var(--int-link);
|
|
}
|
|
p.astuces {
|
|
border: 1px dashed #009916;
|
|
}
|
|
|
|
div.two_cols {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
}
|
|
div.two_cols p {
|
|
flex: 0 0 47%;
|
|
}
|
|
|
|
/*
|
|
* Lists
|
|
*/
|
|
ul {
|
|
list-style-type: disc;
|
|
list-style-position: inside;
|
|
}
|
|
ol {
|
|
list-style-type: decimal;
|
|
list-style-position: inside;
|
|
}
|
|
ul ul, ol ul {
|
|
list-style-type: circle;
|
|
list-style-position: inside;
|
|
margin-left: 15px;
|
|
}
|
|
ol ol, ul ol {
|
|
list-style-type: lower-latin;
|
|
list-style-position: inside;
|
|
margin-left: 15px;
|
|
}
|
|
ul.tyto, ul.index {
|
|
margin: 15px 0 15px 15px;
|
|
font-size: .9em;
|
|
}
|
|
|
|
/* Sitemap */
|
|
span.sitemap_date {
|
|
color: grey;
|
|
font-size: .9em;
|
|
}
|
|
ul.sitemap {
|
|
font-size: .9em;
|
|
}
|
|
|
|
|
|
/*
|
|
* Block-Codes
|
|
*/
|
|
code.tyto {
|
|
color: white;
|
|
margin: 15px 0;
|
|
display: flex;
|
|
}
|
|
|
|
pre.bcode {
|
|
padding: 15px;
|
|
width: 100%;
|
|
display: grid;
|
|
background-color: black;
|
|
border: 8px ridge #616161;
|
|
text-align: left;
|
|
overflow: auto;
|
|
}
|
|
|
|
pre.bcode:before {
|
|
counter-reset: listing;
|
|
}
|
|
|
|
p.bcode {
|
|
counter-increment: listing;
|
|
margin: 0 !important;
|
|
text-indent: 0;
|
|
line-height: 1.3em;
|
|
font-size: .9em;
|
|
font-family: Courier New;
|
|
}
|
|
|
|
pre.bcode p.bcode:before {
|
|
content: counter(listing) ". ";
|
|
color: grey;
|
|
width: 40px; /* Assez pour 9999 lignes */
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
/*---------------------------------------------------------------------
|
|
* Sidebar
|
|
*/
|
|
aside#sidebar {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
h2#sidebar_title {
|
|
text-align: center;
|
|
padding: 5px 0;
|
|
border-left: 2px ridge black;
|
|
border-right: 2px ridge black;
|
|
border-top: 4px ridge var(--int-link);
|
|
}
|
|
|
|
ul#sidebar_list {
|
|
border: 2px ridge black;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 22px;
|
|
justify-content: center;
|
|
}
|
|
|
|
li.sidebar_item {
|
|
flex: 0 0 48%;
|
|
list-style-type: none;
|
|
margin: 10px 0;
|
|
border: 2px ridge var(--ext-link);
|
|
}
|
|
|
|
a.sidebar_item_link {
|
|
color: currentColor;
|
|
text-decoration: none;
|
|
}
|
|
|
|
li.sidebar_item:hover {
|
|
border: 2px solid var(--int-link)
|
|
}
|
|
|
|
li.sidebar_item:hover h3.sidebar_item_title {
|
|
background-color: var(--ext-link);
|
|
}
|
|
|
|
h3.sidebar_item_title {
|
|
background-color: var(--int-link);
|
|
color: #FFF;
|
|
font-weight: 900;
|
|
padding-left: 5px;
|
|
border-bottom: 2px ridge black;
|
|
}
|
|
|
|
p.sidebar_item_about {
|
|
padding: 5px
|
|
}
|
|
|
|
|
|
/*---------------------------------------------------------------------
|
|
* Footer
|
|
*/
|
|
footer#footer_page {
|
|
margin-top: 30px;
|
|
padding-top: 15px;
|
|
border-top: 2px ridge black;
|
|
}
|
|
|
|
div#footer_infos {
|
|
width: 535px;
|
|
text-align: justify;
|
|
}
|
|
|
|
h2#footer_site_title {
|
|
text-align: left;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
div#footer_references {
|
|
margin-left: 30px;
|
|
font-size: .9em;
|
|
}
|
|
|
|
div#footer_container {
|
|
display: flex;
|
|
}
|
|
|
|
div#footer_credits {
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
text-align:center;
|
|
}
|
|
|
|
|
|
/*---------------------------------------------------------------------
|
|
* For small screens
|
|
* under 500px
|
|
*/
|
|
|
|
@media all and (max-width: 500px) {
|
|
body {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
h1#site_title {
|
|
font-size: 1.7em;
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
li.site_menu_item {
|
|
font-size: 1.1em;
|
|
padding: 0 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
article#article_main {
|
|
font-size: 1.1em !important;
|
|
padding: 5px;
|
|
border: 0;
|
|
}
|
|
|
|
h1#post_title,
|
|
h2.title_2, h3.title_3, h4.title_4, h5.title_5, h6.title_6 {
|
|
margin: 30px 0 20px 0;
|
|
}
|
|
|
|
h1#main_title {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
h2.title_2 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
h3.title_3 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
h4.title_4 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
h5.title_5 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
h6.title_6 {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
div.two_cols p {
|
|
flex: 0 0 100%;
|
|
}
|
|
span#article_code {
|
|
display:block;
|
|
text_align:right;
|
|
}
|
|
|
|
/* Sidebar */
|
|
ul#sidebar_list {
|
|
display: block;
|
|
}
|
|
|
|
li.sidebar_item {
|
|
display: block;
|
|
}
|
|
|
|
h2#footer_site_title {
|
|
font-size: 1.2em;
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
p#footer_about {
|
|
font-size: .9em;
|
|
text-align: left;
|
|
}
|
|
|
|
footer#footer_page {
|
|
width: 100%;
|
|
}
|
|
|
|
div#footer_infos {
|
|
width: 100%;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
div#footer_container {
|
|
display: block;
|
|
}
|
|
|
|
div#footer_credits {
|
|
font-size: .7em;
|
|
}
|
|
|
|
}
|
|
|
|
img.logo_ta {
|
|
width: 30px;
|
|
height: 30px;
|
|
float: left;
|
|
}
|
|
|
|
|