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;
}

head {
   display:                none;
}

style {
   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;
   min-height:             62vh;
}

article {
   flex-basis: 70%;
}

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

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

header {
  background:               #2d4b63; /* old IE fallback */

  background-attachment:    fixed;
  background-image:         url(../template/electronic.jpg);
  background-position:      0 0;
  background-repeat:        cover;
  background-size:          auto;
}

#a-lec_banner,
#a-lec_footer {
   display:                 flex;
   height:                  auto;
   width:                   auto;
   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;
   place-content:           baseline center;
}

#a-lec_site-title {
   display:                 flex;
   flex-direction:          column;
   align-items:             center;
   place-content:           baseline center;
   padding-left:            50px;
}

#a-lec_site-title h2 {
   font-weight:             normal;
   color:                   #FFF;
   font-size:               130%;
   margin-top:              15px;
}

#a-lec_site-name a {
   color:                   #FFF;
   font-weight:             bold;
   font-size:               300%;
}

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


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

footer {
  background:             #2d4b63; /* old IE fallback */
   
  background-image:         url(../template/electronic.jpg);
  background-position:      0 0;
  background-repeat:        cover;
  background-size:          auto;
}

#a-lec_footer h1 {
   display: block;
   font-size:               130%;
   color:                   #FFF;
   font-weight:             bold;
   margin-top:              0px;
   margin-bottom:           10px;
   margin-left:             0px;
}

#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:              30%;
   margin-left:             -100px;
   text-align: right;
}

div#a-lec_infos {
   flex-basis:              70%;
   font-size:               100%;
   margin:                  0px 110px 0px 0px;
}

.a-lec_list-cr {
   display:                 block;
   margin:                  0 0 5px 25px;
}

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

aside#a-lec_sidebar {
   padding-left: 40px;
   margin-top: 30px;
}

.a-lec_list-post-item a:hover {
   color: unset;
   background-color: unset;
}

.a-lec_list-post-title {
   display:                      block;
   background-color:             var(--a-lec_yellow);
   color:                        var(--a-lec_white);
   font-weight:                  bold;
   padding:                      10px;
   padding-left:                 11px;
   margin:                       -10px 0px 0px 0px;
}

.a-lec_list-post-item:hover .a-lec_list-post-title {
    background-color:             #2f4f6f;
}

.a-lec_list-post-item:hover .a-lec_list-post-metas, 
.a-lec_list-post-item:hover .a-lec_list-post-info {
    background-color:             #e1ecf5;
}

.a-lec_list-post-metas {
   display:                      block;
   padding:                      15px;
   background-color:             #FDF1B8;
   color:                        var(--a-lec_red);;
   font-size:                    80%;
   padding:                      10px;
   font-weight:                  bold;
   margin-bottom: -10px;
}

.a-lec_list-post-metas:first-letter {
   text-transform:   capitalize;  
}

.a-lec_list-post-item a .a-lec_list-post-info {
   display:                      block;
   background-color:             #FDF1B8;
   color:                        var(--a-lec_black);
   font-size:                    80%;
   padding:                      10px;
   font-weight:                  normal;
   margin-top: -10px;
}

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

/*
 * Sticky Author Date
*/
#a-lec_metas {
  display:                  block;
  background-color:         var(--a-lec_yellow);
  position:                 relative;
  text-align:               left;
  float:                    right;
  top:                      -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_li-1 {
   display:             block;
}

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

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

.a-lec_list-ol li {
   counter-increment: step-counter;
}

.a-lec_list-ol .a-lec_li-1::before,
.a-lec_list-ol .a-lec_li-2::before,
.a-lec_list-ol .a-lec_li-3::before {
      display:             inline-block;
      content:             counter(step-counter) ".";
      padding-left:        0px;
      margin-right:        5px;
      list-style-type:     upper-roman;
}

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

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

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

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

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

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

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

/*
 * Blockquotes
*/
.a-lec_quote {

   display:                   block;
   margin:                    40px 20px 20px 20px;
   color:                     var(--a-lec_black);
}

.a-lec_quote p {
   font-style:                italic;
}

.a-lec_quote p::before {
   color:                  var(--a-lec_blue);
   content:                "“";
   font-size:              3rem;
   margin-left:            -30px;
   margin-bottom:          -30px;
   display:                block;
}

.a-lec_quote p::after {
   color:                  var(--a-lec_blue);
   content:                "„";
   font-size:              3rem;
   margin-right:           -30px;
   margin-top:             -35px;
   display:                block;
   text-align:             right;
}

.a-lec_quote cite {
   display: inline;
   font-size: 0;
}

.a-lec_quote a {
 display: block;
 float: right;
 background-color:             var(--a-lec_yellow);
 padding:                      4px;
 color:                        var(--a-lec_black);
 margin-top:                   10px;
 margin-right:                 -20px;
 font-size:                    initial;
}
.a-lec_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:         none;
  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_p{
   display:                block;
   margin-top:             10px;
   margin-bottom:          10px;
}

div.a-lec_content{
   display:                block;
}

p {
   line-height: 26px;
}

article ul {
   line-height: 24px;
}

/*
A-lec images
*/
.a-lec_image{
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
   height: auto;
}

.a-lec_image.left{
   display:         -webkit-inline-box;
   float:           left;
   margin-right:    1rem;
}

.a-lec_image.right{
   display:         -webkit-inline-box;
   float:           right;
   margin-right:    1rem;
}

p.a-lec_p.images_center {
   text-align: center;
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
}

/*
========================================================================
   HEADINGS
========================================================================
*/
.a-lec_title, #a-lec_site-name {
   display:                block;
   color:                  #000;
   font-weight:            bold;
}


.a-lec_title-1 {
   font-size:           150%;
   margin-top:          30px;
   margin-bottom:       40px;
}

.a-lec_title-2 {
   font-size:           130%;
   margin-top:          30px;
   margin-bottom:       15px;
   color:               #454545;
}

.a-lec_title-3 {
   font-size:           110%;
   margin-top:          30px;
   margin-bottom:       15px;
   color:               #505050;
}

.a-lec_title-4 {
   font-size:           100%;
   color:               #606060;
}

.a-lec_title-5 {
   font-size:           100%;
   color:               #707070;
}

.a-lec_title-6 {
   font-size:           100%;
   color:               #808080;
}

/*
========================================================================
   LITTLE SCREENS
========================================================================
*/
@media screen and (max-width: 700px) {

   section#a-lec_page-wrapper {
    display:                block;
    margin:                 10px 25px;
  }
 
   aside#a-lec_sidebar {
      background: none;
      padding-left: 40px;
   }
   
   article {
      margin-top: 20px;
   }
   
   #a-lec_footer {
      display: block;
      padding: 5px;
   }
        
   #a-lec_banner {
      display: block;
      padding: 5px;
   }
   
   #a-lec_a-propos {
      display: block;
      margin-bottom: 10px;
      border: 2px solid var(--a-lec_blue);
      border-top : unset;
      border-left: unset;
      border-right: unset;
      font-size: 90%;
      padding: 15px;
   }
   
   #a-lec_footer  h1 {
      margin-top: 0px;
      padding: 15px;
      margin-bottom: 0px;
      font-size: 110%
   }
   
   #a-lec_footer li {
      text-align: center;
      margin-left: 0px;
      margin-right: 0px;
   }
   
   #a-lec_banner,
   #a-lec_footer {
      display:                 block;
   }
   
   #a-lec_site-logo img {
      all: unset;
      display: inline-block;
      width:                   100%;
      margin-top:              20px;
      height:                  min(20vw,20vh);
   }
  
    #a-lec_site-description {
       all: unset;
       margin-top: 15px;
       position: relative;
       float: left;
       font-size: 1rem;
       text-align: center;
   }
   
   #a-lec_site-logo a {
   background-color:        unset;
   place-content:           baseline center;
   }

   #a-lec_site-title {
      display:                 flex;
      flex-direction:          column;
      padding:                 10px;
   }

   #a-lec_site-title h2 {
      font-weight:             normal;
      font-size:               5vw;
      margin-top:              20px;
   }

   #a-lec_site-title h1 {
      text-align: center;
   }
   
   #a-lec_site-name a {
      color:                   #FFF;
      font-weight:             bold;
      font-size:               8.4vw;
   }

   #a-lec_site-name a:hover {
      background-color:        unset;
      font-weight:             bold;
      background-color:        unset;
      font-size:               8.4vw;
   }
   
    p {
      line-height: 28px;
   }
   
   aside#a-lec_sidebar {
      display: block;
      margin: -10px;
      margin-top: 30px;
      padding: 0px;
   }

}