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

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

article {
   flex-basis: 70%;
}

aside {
   margin: 10px;
   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:                  300px;
   width:                   100%;
   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-titles {
   display:                 flex;
   flex-direction:          column;
   align-items:              center;
   place-content:           baseline center;
   padding:                 20px
}

#chalec_site-titles h2 {
   font-weight:             normal;
   color:                   var(--chalec_red);
   font-size:               130%;
}

#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-attachment:    fixed, scroll;
  background-image:         url(../templates/electronic.png);
  background-position:      0 0;
  background-repeat:        repeat;
  background-size:          auto;
}

#chalec_footer h1 {
   font-size:               130%;
   color:                   var(--chalec_yellow);
   font-weight:             bold;
}

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

#chalec_footer a {
   color:                   var(--chalec_blue);
}

#chalec_footer a:hover {
   color:                   #fff;
}

#chalec_footer b {
   color:                   var(--chalec_red);
}

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

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

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

.chalec_latest-posts {
   color:                        var(--chalec_blue);
   font-style:                   italic;
}

.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-title a{
   color:                        var(--chalec_white);
}

.chalec_list-post-title a:hover{
   color:                        var(--chalec_blue);
   background-color:             var(--chalec_white);
}

.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-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;
  right:                    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_post-content li {
  padding:              3px 0;
}

.chalec_list-1 {
   display:             block;
}

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

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

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

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

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

.chalec_list-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;
   background-color:       var(--chalec_blue);
   color:                  #000;
   cursor:                 pointer;
}

a:active {
  text-decoration:         underline;
  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_paragraph {
   display:                block;
   margin-top:             10px;
   margin-bottom:          10px;
}

div.chalec_content-p1{
   display:                block;
}

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

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

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

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

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

/*
========================================================================
   HEADINGS
========================================================================
*/
h1,h2,h3,h4,h5,h6 {
   display:                inline-block;
   color:                  #000;
   font-weight:            bold;
   text-align:             center;
}
   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;
   }

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

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

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

}