Brick inside another brick

Quick look:

Every page has it media queries:

Home:

Mobile 360x640:

1600 over and under:

Events:

Table is not actually table, but a flexbox:

Keep eye on "Alk-Lop","Otsikko" and "Ote"

Events-page in mobile size:

Thump-"

👍

" not turn to "🤩" when click that just animation. It was coincidence.

 

Event has two mobile sizes:

Smallest size:

Size 373x667:

Buttons:

"AJAX 10"-Button brings 10 more event in ajax style from memory, in every click until there is no more events.

Tulevat tapahtumat:Shows all event or only those that are not yet end. Works also for AJAX 10 events all them, trust me. And it is the real AJAX action.

Extra:

Error-404 send back to home:

 

SpecialHomeLink__Arrow: Check this out:

See how pulsating "«"-link make the wise

  

Cool face style

 

Try this style for size:

 

<style>
  .ehm:after{
  	content: "😎";
  	display: inline-block;
  	transform: rotate(0deg);
  	font-size: 1900%;
  	opacity: 1;
  	animation-name: ballroll;
  	animation-duration: 6s;
  	animation-delay: -2s;
  	animation-iteration-count: infinite;
  
  }
    @keyframes ballroll{
      0%{ content: "🤩"; transform: rotate(0deg);}
      25%{transform: rotate(3deg);}       
      60%{content: "😎";}
      75%{transform: rotate(-3deg);}
      100% {content: "👍";}
      }
}
</style>
<div>
Try this style for size:

</div>
<p class="ehm" 	></p>