www-template/styles.css

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

/*
========================================================================
   ROOT VARIABLES DOCUMENT
========================================================================
*/
:root {
   --chalec_blue:        #00bdff;
   --chalec_red:         #b11107;
   --chalec_yellow:      #ecb41a;
   --chalec_black:       #2d3842;
   --chalec_white:       #ffffff;
}

/*
========================================================================
   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(--chalec_black);
   background:             var(--chalec_white);
   font-family:            sans-serif;
   font-size:              100%;
   text-align:             justify;
   text-justify:           auto;
   background:             var(--chalec_white);
}

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

article,
aside {
   margin:                 7px;
   background-color:       var(--chalec_white);
   background-repeat:      repeat;
   padding:                10px;
   min-height:             62vh;
}

article {
   flex-basis: 70%;
}

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


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

header {
  background:               #e0f0ff; /* old IE fallback */

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

#chalec_banner,
#chalec_footer {
   display:                 flex;
   height:                  auto;
   width:                   auto;
   padding:                 20px 25px;
}

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

#chalec_site-logo a {
   background-color:        unset;
   place-content:           baseline center;
}

#chalec_site-title {
   display:                 flex;
   flex-direction:          column;
   align-items:              center;
   place-content:           baseline center;
}

#chalec_site-title h2 {
   font-weight:             normal;
   color:                   var(--chalec_red);
   font-size:               130%;
   margin-top:              15px;
}

#chalec_site-name a {
   color:                   var(--chalec_yellow);
   font-weight:             bold;
   font-size:               300%;   
}

#chalec_site-name a:hover {
   color:                   var(--chalec_yellow);
   font-weight:             bold;
   font-size:               300%;
   background-color:        unset;
}

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

footer {
  background:               #e0f0ff; /* old IE fallback */

  background-image:         url(../templates/electronic.png);
  background-position:      0 0;
  background-repeat:        cover;
  background-size:          auto;
}

footer h1 {
   display: block;
   font-size:               130%;
   color:                   var(--chalec_yellow);
   font-weight:             bold;
   margin-top:              0px;
   margin-left:             0px;
   margin-bottom:           20px;
}

footer {
   color:                   var(--chalec_black);;
   height:                  100%;
}

footer a {
   color:                   var(--chalec_blue);
}

footer a:hover {
   color:                   #fff;
}

footer b {
   color:                   var(--chalec_red);
}

div#chalec_copyright {
   font-size:               100%;
   flex-basis:              30%;
   margin-left:             -100px;
   text-align:right;
}

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

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

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

aside#chalec_sidebar {
   padding-left: 40px;
}

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

.chalec_list-post-title {
   display:                      block;
   padding:                      15px;
   background-color:             var(--chalec_blue);
   color:                        var(--chalec_white);
   font-weight:                  bold;
   padding:                      10px;
   margin:                       10px 0px 0px 0px;
}

.chalec_list-post-metas {
   display:                      block;
   padding:                      15px;
   background-color:             #e0f0ff;
   color:                        var(--chalec_red);;
   font-size:                    80%;
   padding:                      10px;
   font-weight:                  bold;
}

.chalec_list-post-item:hover .chalec_list-post-title {
    background-color:             var(--chalec_yellow);
}

.chalec_list-post-item:hover .chalec_list-post-metas, 
.chalec_list-post-item:hover .chalec_list-post-info {
    background-color:             #FDF1B8;
}

.chalec_list-post-item a .chalec_list-post-info {
   display:                      block;
   background-color:             #e0f0ff;
   font-size:                    80%;
   padding:                      10px;
   padding-top:                  unset;
   display:                      block;
   color:                        var(--chalec_black);
   font-weight:                  normal;
}

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

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

#chalec_metas strong{
  color:                    var(--chalec_white);
}

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

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

i {
   font-style:             italic;
}

abbr {
   text-transform:         uppercase;
}

/*
 * Lists
*/
.chalec_content li {
  padding:              3px 0;
}

.chalec_li-1 {
   display:             block;
}

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

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

.chalec_list-ol li {
   counter-increment: step-counter;
}

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

.chalec_list-ol .chalec_li-1::before {
   color:               var(--chalec_red);
}

.chalec_list-ol .chalec_li-2::before {
   color:               var(--chalec_blue);
}

.chalec_list-ol .chalec_li-3::before {
   color:               var(--chalec_yellow);
}

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

.chalec_list-ul .chalec_li-1::before {
   color:               var(--chalec_red);
}

.chalec_list-ul .chalec_li-2::before {
   color:               var(--chalec_blue);
}

.chalec_list-ul .chalec_li-3::before {
   color:               var(--chalec_yellow);
}

/*
 * Blockquotes
*/
.chalec_fgc-quote,
.chalec_quote,
.chalec_simple-quote {
}

.chalec_quote,
.chalec_simple-quote {

   display:                   block;
   font-style:                italic;
   margin:                    25px 0px 0px 0px;
   color:                     var(--chalec_black);
}

.chalec_paragraph-2 {
   display:                block;
   margin:                 30px;
}

.chalec_quote p::before,
.chalec_simple-quote p::before {
   color:                  var(--chalec_blue);
   content:                "“";
   font-size:              3rem;
   margin-left:            -30px;
   margin-bottom:          -30px;
   display:                block;
}

.chalec_quote p::after,
.chalec_simple-quote p::after {
   color:                  var(--chalec_blue);
   content:                "„";
   font-size:              3rem;
   margin-right:           -30px;
   margin-top:             -35px;
   display:                block;
   text-align:             right;
}

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

.chalec_simple-quote {
   padding-bottom:               3px;
}

.chalec_fgc-quote a {
   background-color:             var(--chalec_yellow);
   padding:                      4px;
   color:                        var(--chalec_black);
}

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

/*
 * Block-Codes
*/
.chalec_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(--chalec_blue);
   border-radius:                10px;
}

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


/*
 * Links
*/
a {
   color:                  var(--chalec_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;
   color:                  var(--chalec_white);
   background-color:       var(--chalec_blue);
   cursor:                 pointer;
}

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

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

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

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

div.chalec_content {
   display:                block;
}

/*
Chalec images
*/
.chalec_image {
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
   height: auto;
}

.chalec_image-right {
}

.chalec_image-center {
}

.chalec_image-left {
}

/*
========================================================================
   HEADINGS
========================================================================
*/
.chalec_title, #chalec_site-name {
   display:                block;
   color:                  #000;
   font-weight:            bold;
   text-align:             left;
}

#chalec_site-name {
   font-size:           150%;
   margin-top:          30px;
   margin-bottom:       5px;
}

.chalec_title-1 {
   font-size:           150%;
   margin-top:          30px;
   margin-bottom:       10px;
}

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

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

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

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

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

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

   section#chalec_page-wrapper {
    display:                block;
    margin:                 10px 25px;
  }
 
   aside#chalec_sidebar {
      background: none;
      padding-left: 40px;
   }
   
   .chalec_latest-posts {
      margin-left: -35px;
   }
   
   div#chalec_metas {
      margin:                       0px -10px 0px 0px;
   }
   
   article {
      margin-top: 20px;
   }
   
   article#chalec_index {
      margin-left: -10px;
   }
   
   #chalec_footer {
      display: block;
      padding: 5px;
   }
   
   #chalec_a-propos {
      display: block;
      margin-bottom: 30px;
      font-size: 90%;
      border: 2px solid var(--chalec_yellow);
      border-top : unset;
      border-left: unset;
      border-right: unset;
      padding: 15px;
   }
   
   #chalec_footer  h1 {
      margin-top: 0px;
      font-size: 115%;
      padding: 15px;
      margin-bottom: 0px;
      font-size: 120%
   }
   
   #chalec_footer li {
      text-align: center;
   }
   
   #chalec_banner,
   #chalec_footer {
      display:                 block;
   }
   
   #chalec_site-logo img {
      all: unset;
      display: inline-block;
      width:                   100%;
      height:                  160px;
   }
   
   #chalec_site-name a {
      margin-top: -50px;
      position: relative;
      float: left;
      font-size: 3rem;
   }
   
   #chalec_site-titles h2 {
   font-weight:             normal;
   color:                   var(--chalec_red);
   font-size:               130%;
   margin-top:              15px;
   margin-bottom:           5px;
   }
   

   #chalec_site-name a:hover {
      float: left;
      font-size: 3rem;
   }
   
    #chalec_site-description {
       all: unset;
       margin-top: 15px;
       position: relative;
       float: left;
       font-size: 1rem;
       text-align: center;
   }

}