www-template/styles.css

/*
========================================================================
   Description : CSS stylesheet
   Author      : echolib & neox
   Website     : https://a-lec.org
   License    : AGPL
========================================================================
*/

/*
========================================================================
   ROOT VARIABLES DOCUMENT
========================================================================
*/
:root {
   --a-lec_blue:        #00bdff;
   --a-lec_red:         #b11107;
   --a-lec_yellow:      #ecb41a;
   --a-lec_black:       #2d3842;
   --a-lec_white:       #fefff9;
}

/*
========================================================================
   Reset all: 
   - Inherited properties to inherit value
   - Non-inherited properties to initial value
========================================================================
*/
* {
   all:                 unset;
   -webkit-box-sizing:  border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing:     border-box; /* Firefox, other Gecko */
   box-sizing:          border-box; /* Opera/IE 8+ */
   text-decoration:     none;
}

/*
========================================================================
   Foundations
========================================================================
*/
title {
   display:                none;
}

body {
   color:                  var(--a-lec_black);
   background:             var(--a-lec_white);
   font-family:            sans-serif;
   font-size:              100%;
   text-align:             justify;
   text-justify:           auto;
   background:             var(--a-lec_white);
}

section#a-lec_page-wrapper {
   display:                flex;
   margin:                 0 25px;
}

article,
aside {
   margin:                 7px;
   background-color:       var(--a-lec_white);
   background-repeat:      repeat;
   padding:                10px;
}

article {
   flex-basis: 70%;
}

aside {
   margin: 10px;
   flex-basis: 30%;
}

/*
========================================================================
   HEADER / BANNER
========================================================================
*/

header {
  background:               #2d4b63 50% 0 url(../templates/fond_titre.png) no-repeat; /* old IE fallback */

  background-attachment:    fixed, scroll;
  background-image:         url(../templates/electronic.png), url(../templates/fond_titre.png);
  background-position:      0 0, 0 50%;
  background-repeat:        repeat, no-repeat;
  background-size:          auto, cover;
}

#a-lec_banner,
#a-lec_footer {
   display:                 flex;
   height:                  300px;
   width:                   100%;
   padding:                 20px 25px;
}

#a-lec_site-logo img {
   display:                 flex;
   flex-direction:          column;
   align-items:             start;
   width:                   160px;
   height:                  160px;
   place-content:           baseline center;
}

#a-lec_site-logo a {
   background-color:        unset;
}

#a-lec_site-titles {
   display:                 flex;
   flex-direction:          column;
   align-items:             start;
   place-content:           baseline center;
   padding:                 20px
}

#a-lec_site-titles h2 {
   font-weight:             normal;
   color:                   #FFF;
   font-size:               130%;
}

#a-lec_site-name a {
   color:                   #FFF;
   font-weight:             bold;
   font-size:               240%;
   vertical-align:          middle;
}

#a-lec_site-name a:hover {
   font-size:               280%;
   background-color:        unset;
}

/*
========================================================================
   FOOTER
========================================================================
*/

footer {
  background:               var(--a-lec_black) 1% 1% url(../templates/electronic.png) no-repeat;
}

#a-lec_footer h1 {
   font-size:               130%;
   color:                   #FFF;
   font-weight:             bold;
}

#a-lec_footer {
   color:                   #FFF;
   height:                  100%;
}

#a-lec_footer a {
   color:                   var(--a-lec_yellow);
}

#a-lec_footer a:hover {
   color:                   #000;
}

#a-lec_footer b {
   color:                   var(--a-lec_blue);
}

div#a-lec_copyright {
   font-size:               90%;
   flex-basis:              25%;
}

div#a-lec_infos {
   flex-basis:              75%;
   font-size:               105%;
}
.a-lec_list-cr {
   display:                 block;
   margin:                  0 0 5px 25px;
}

/*
========================================================================
   SIDEBAR
========================================================================
*/

.a-lec_list-post-title {
   display:                      block;
   padding:                      15px;
   background-color:             var(--a-lec_blue);
   color:                        #fff;
   font-weight:                  bold;
   padding:                      10px;
   margin:                       10px 0px 0px 0px;
}

.a-lec_list-post-metas {
   display:                      block;
   padding:                      15px;
   background-color:             #FDF1B8;
   color:                        #000;
   font-size:                    80%;
   padding:                      10px;
   font-weight:                  bold;
}

.a-lec_list-post-info {
   display:                      block;
   color:                        var(--a-lec_black);
   font-weight:                  normal;
}



/*
========================================================================
   ARTICLE
========================================================================
*/

/*
 * Sticky Author Date
*/
#a-lec_metas {
  display:             block;
  background-color:         var(--a-lec_yellow);
  position: relative;
  text-align: left;
  float: right;
  top: -10px;
  right: 10px;
  padding: 5px;
  font-size: 82%;

}

/*
 * Basic texts
*/
strong {
   color:                  #454545;
   font-weight:            bold;
}

b {
   color:                  #676767;
   font-weight:            bold;
}

i {
   font-style:             italic;
}

abbr {
   text-transform:         uppercase;
}

/*
 * Lists
*/
.a-lec_post-content li {
  padding:              3px 0;
}

.a-lec_list-1 {
   display:             block;
}

.a-lec_list-2 {
   display:             block;
   margin-left:         20px;
}

.a-lec_list-3 {
   display:             block;
   margin-left:         40px;
}

.a-lec_list-1::before,
.a-lec_list-2::before,
.a-lec_list-3::before {
   display:             inline-block;
   content:             "\2022";
   width:               10px;
   padding-left:        15px;
   margin-right:        5px;
   font-weight:         bold;
}

.a-lec_list-1::before {
   color:               var(--a-lec_red);
}

.a-lec_list-2::before {
   color:               var(--a-lec_blue);
}

.a-lec_list-3::before {
   color:               var(--a-lec_yellow);
}

/*
 * Blockquotes
*/
.a-lec_fgc-quote,
.a-lec_quote,
.a-lec_simple-quote {
   background-color:          #FFF;
}

.a-lec_quote,
.a-lec_simple-quote {

   display:                   block;
   font-style:                italic;
   margin:                    25px 0px 0px 0px;
   background:                var(--a-lec_black) 1% 70% url(../templates/electronic.png) no-repeat; /* old IE fallback */
   box-shadow: 0 0 2px 2px white inset;
   color: white;
}
   
}

.a-lec_quote p.a-lec_paragraph,
.a-lec_simple-quote p.a-lec_paragraph {
   margin:                 unset;
   padding:                15px;
}

.a-lec_quote p::before,
.a-lec_simple-quote p::before {
   color:                  var(--a-lec_blue);
   float:                  left;
   position:               relative;
   content:                "“";
   font-size:              3rem;
   left:                   -15px;
   bottom:                 15px;
}

.a-lec_quote p::after,
.a-lec_simple-quote p::after {
   color:                  var(--a-lec_blue);
   float:                  right;
   position:               relative;
   content:                "„";
   font-size:              3rem;
   bottom:                 28px;
   left:                   15px;
   margin:                 unset;
   }

.a-lec_fgc-quote {
   display:                      block;
   margin:                       20px 0px 20px 0px;
   text-align:                   right;
   padding-bottom:               3px;
}

.a-lec_simple-quote {
   border:                       1px solid var(--a-lec_yellow);
   border-left:                  unset;
   border-right:                 unset;
   padding-bottom:               3px;
}

.a-lec_fgc-quote a {
   background-color:             var(--a-lec_yellow);
   padding:                      4px;
   color:                        #000;
}

.a-lec_fgc-quote a:hover {
   padding:                      4px;
}

/*
 * Block-Codes
*/
.a-lec_block-code {
   display:                      block;
   padding:                      15px;
   margin:                       10px 30px 15px 10px;
   background-color:             #000;
   color:                        #fff;
   font-size:                    88%;
   padding:                      10px;
   margin:                       30px 30px 30px 10px;
   border:                       3px solid var(--a-lec_blue);
   border-radius:                10px;
}

/*
 * Inline-Codes
*/
.a-lec_inline-code {
   display:                      inline-block;
   background-color:             #000;
   padding:                      0 5px;
   font-size:                    89%;
   color:                        #fff;
}


/*
 * Links
*/
a {
   color:                  var(--a-lec_red);
   padding:                0 2px;
   font-weight:            bold;
   -webkit-transition:     all 0.25s ease-out;
   -moz-transition:        all 0.25s ease-out;
   transition:             all 0.25s ease-out;
}

a:hover {
   padding:                0 2px;
   background-color:       var(--a-lec_blue);
   color:                  #000;
   cursor:                 pointer;
}

a:active {
  text-decoration:         underline;
  cursor:                  progress;
}

a.a-lec_file-link {
   background-color:       #FFF;
}

a.a-lec_file-link:hover {
   background-color:       var(--a-lec_yellow);
   color:                  #000;
   cursor:                 pointer;
}

/*
 * Paragraphs
*/
p.a-lec_paragraph {
   display:                block;
   margin-top:             10px;
   margin-bottom:          10px;
}

div.a-lec_content-p1{
   display:                block;
}

div.a-lec_content-p2{
   display:                block;
   margin-left:            20px;
}

div.a-lec_content-p3{
   display:                block;
   margin-left:            35px;
}

div.a-lec_content-p4{
   display:                block;
   margin-left:            45px;
}

div.a-lec_content-p5{
   display:                block;
   margin-left:            55px;
}

div.a-lec_content-p6{
   display:                block;
   margin-left:            65px;
}

/*
========================================================================
   HEADINGS
========================================================================
*/
h1,h2,h3,h4,h5,h6 {
   display:                inline-block;
   color:                  #000;
   font-weight:            bold;
}
   h1 {
      font-size:           130%;
      margin-top:          30px;
      margin-bottom:       5px;
   }
   h2 {
      font-size:           125%;
      margin-left:         30px;
      margin-top:          30px;
      margin-bottom:       5px;
   }
   h3 {
      font-size:           120%;
      margin-left:         40px;
      margin-top:          30px;
      margin-bottom:       5px;
   }
   h4 {
      font-size:           115%;
      margin-left:         50px;
   }
   h5 {
      font-size:           110%;
      margin-left:         60px;
   }
   h6 {
      font-size:           105%;
      margin-left:         75px;
   }