Yiɣi chaŋ yɛligu maŋamaŋa puuni

Tɛmplet:WLXpage/styles.scss

Diyila Dagbani Wikipedia

// Variables ////

$color-red: #900000; $color-orange: #D47100; $color-blue: #005290; $color-green: #3B8801; $color-beige: #e0e0d8; $color-black: #000; $color-white: #FFF;

$color-primary: $color-red; $color-secondary: $color-orange; $color-tertiary: $color-blue; $color-quaternary: $color-green;

$colors: ($color-primary, $color-secondary, $color-tertiary, $color-quaternary);

$font-antiqua: 'Linux Libertine', Georgia, serif; $font-grotesk: Arial, sans-serif;

$page-marginal-width:176px;

$mobile: 'body.skin-minerva';

// Code ////

.wlx-outer {

   width: 100%;
   min-height: calc(100vh - 8em);
   padding-top: 1.6rem;
   background-color: #FFF;
   position: relative; 

}

.wlx {

   max-width: 76em;
   min-height: 19em;
   margin: 0 auto 5em;
   position: relative;
   width: 100%; 
   &, *{
       box-sizing: border-box; 
   }
   h1,h2,h3,h4,h5,h6{
       color:$color-primary;
   }
   sup, sub{
     font-size: .55em;
     font-weight: bolder;
   }

}

.wlx-with-marginal{

   display: flex;
   margin-left:1rem;

} .wlx-marginal a{

   flex: 0 0 auto;   
   min-width: 11rem; 
   white-space: nowrap;

}

/* Navi */ .wlx-navi{} .wlx-navi a, .wlx-marginal .wlx-button{

   margin-left:auto;
   text-align: right;
   position: relative;
   display: block;

} .wlx-navi-item{

   color: $color-primary;
   text-transform: uppercase;
   display:block;
   font-weight: bolder;
   &:hover{
       color:#000;
   }
   &::after{
       content:' »';
   }

}

.wlx-navi{

   a:not(:last-child){
       margin-bottom: .2rem;
       padding: .2rem;
   
       &::before{
           content:;
           display: block;
           position: absolute;
           bottom: 0;
           left:0;
           right: 0;
           height: 2px;
           background-color: #FFF;
       }
   }

}

/* Hero */

.wlx-hero{

 background-color:$color-beige;

}

.wlx-hero-image{

 background-color:#333;
 overflow: hidden;
 position: relative;
 display: flex;
 max-height: 32rem;
 align-items: flex-end;
 flex-direction: row;

}

.wlx-hero-image>a{

 position: absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 &>img{
   height: 100%!important;
   width: 100%!important;
   display: block;
   object-fit:cover;
   /*position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);*/
 }

}

.wlx-hero-label{

 position: relative;
 background-color: rgba(255,255,255,.88);
 padding: 1.8em;
 margin:8rem auto 2rem 0;
 max-width: 57rem;

}

.wlx-hero-label-logo>a{

 display: block;
 max-width: 9.25rem;
 margin-right:1.8rem;
 &>img{
   max-width: 100%;
   height:auto;
 }

}

.wlx-hero-pretitle{

 font-size: 1.125rem;
 line-height: 1.3em;
 text-transform: uppercase;

}

.wlx-hero-title{

 font-size: calc(1rem + .03 * (100vw - #{$page-marginal-width}));
 font-family: $font-antiqua;
 color:$color-primary;
 line-height: 1.04em;

}

  1. {$mobile}{
   .wlx-hero-title{
       font-size: calc(1rem + 3vw);
   }

}

/* process */

.wlx-process{

 display: flex;
 flex-direction: row;
 flex-wrap: wrap;

} .wlx-process>p{

 display: none;

}

.wlx-process-item{

 text-align: center;
 line-height:1.3;
 flex-basis: 11rem;
 flex-grow: 1;
 margin: 1.6rem 0;

}


.wlx-process-item>a{

 width: 100%;
 display: block;
 position: relative;

} .wlx-process-item>a img{

 width: 100%;
 max-width:6rem!important;
 height: auto;

}

.wlx-process-item h5{

 display: block;
 font-weight: bold;
 color:$color-primary;

} .wlx-process-item h5>*{

 display: block;

} .wlx-process-item:hover>a img{

 filter: grayscale(100%);

}

.wlx-process-item:not(:last-child){

 margin-right:1.6rem;

}


.wlx-process-item:not(:first-child)>a::after{

 content:;
 display:block;
 width:1rem;
 height: 1rem;
 border: 3.6px solid $color-primary;
 border-left:transparent;
 border-bottom: transparent;
 position: absolute;
 right: calc(100% + .8rem);
 top:50%;
 transform: translate(50%, -50%) rotate(45deg);

}

@media screen and (min-width:440px) and (max-width:1023px){

 .wlx-process-item{
   flex-basis: 40%;
 }

}

@media screen and (min-width:1640px){

 .wlx{
   transform: translateX(-4rem);
 }
 .wlx-process{
   position: absolute;
   display: block;
   left: calc(100% + 1.5rem);
   flex-direction: column;
   width: 10.5rem;
   top:0;
 }
 .wlx-process-item{
   text-align: left;
 }
 .wlx-process-item:first-child{
   margin-top: 0;
 }  
 .wlx-process-item:not(:first-child)>a::after{
   top: -1.5rem;
   right: auto;
   left: 2rem;
   transform: translate(50%, -50%) rotate(135deg);
 }

}

@media screen and (min-width:1800px){

 .wlx{
   transform: translateX(-9rem);
 }
 .wlx-process{
   width: 24.5rem;
 }
 .wlx-process-item{
   display: flex;
   flex-direction: row;
 }
 .wlx-process-item>a.image{
   flex: 0 0 7rem;
 }

}

/* Boxes */

[class*=wlx-box-bg-]{

   color: $color-white;
   h2,h3,h4,h5,h6{
       color:currentColor;
   }
   a{
       color: currentColor;
       text-decoration: underline;
   }

}

.wlx-box-bg{

 padding: 1.2rem 1.8rem;
 @for $i from 1 through length($colors){
     &-#{$i}{
       background-color: nth($colors, $i);
     }
 }

}

/* BreakPoints Desktop */

@media screen and (min-width:480px){

 .wlx-hero-image.wlx-hero-image{
   height: 56vw;
 }
 
 .wlx-hero-label{
   position: relative;
   background-color: rgba(255,255,255,.88);
   padding: 1.8em;
   margin:8rem auto 2rem 0;
   max-width: 57rem;
   display: flex;
   align-items: center;
 }

}

@media screen and (min-width:1244px){

 .wlx-hero-title{
   font-size: 3rem;
 }

}

/* BreakPoints Mobile */

  1. {$mobile}{
   @media screen and (max-width:719px){
       .wlx{
           width: 100vw;
           margin: 0 -1rem;
       }
       .wlx-process{
           padding: 0 0.8rem;
       }
   }
   @media screen and (min-width:1068px){
       .wlx-hero-title{
           font-size: 3rem;
       }
   }

}

/* Grid */

$grid-gap: 1rem; $breakpoints: ("s": 450px, "m": 640px, "l": 940px, "xl": 1200px); $columns: 12; $grid-gaps: $grid-gap * ($columns - 1);

.wlx-grid{

   display: flex;
   margin-right: -$grid-gap;
   flex-wrap: wrap;

}

.wlx-grid>*{

   flex: 0 0 100%;
   margin-right: $grid-gap;

}

@for $i from 1 through $columns {

   .wlx-grid-w#{$i} {
     flex-basis: calc( #{$i} / #{$columns} * (100% - #{$grid-gaps}) + #{$grid-gap * ($i - 1)}  );
   }

}

@each $breakpoint, $viewport-width in $breakpoints {

   @media screen and (min-width:#{$viewport-width}){
       @for $i from 1 through $columns {
           .wlx-grid-#{$breakpoint}-w#{$i} {
             flex-basis: calc( #{$i} / #{$columns} * (100% - #{$grid-gaps}) + #{$grid-gap * ($i - 1)}  );
           }
       }  
   }

}