www2/template/tyto.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;
}