WIP: convert sass to css
All checks were successful
website-main / prod-build (push) Successful in 1m7s
website-main / test-build (push) Successful in 45s
website-main / auto-rebuild (push) Has been skipped

This commit is contained in:
Denys Konovalov 2023-06-09 20:35:28 +02:00
parent edffb3a720
commit 96f6f10146
21 changed files with 145 additions and 171 deletions

@ -1,7 +1,7 @@
/* Button style */
.btn {
font-size: 16px;
font-family: $primary-font;
font-family: var(--gcg-font-primary);
padding: 15px 40px;
border-radius: 0;
font-weight: 500;
@ -49,16 +49,16 @@
}
.btn-primary {
background: $primary-color;
color: $white;
background: var(--gcg-color-primary);
color: white;
&::before {
background: $white;
background: white;
}
&:active {
background: $primary-color !important;
color: $primary-color;
background: var(--gcg-color-primary) !important;
color: var(--gcg-color-primary);
&::before {
height: 80%;
@ -66,57 +66,57 @@
}
&:hover {
background: darken($color: $primary-color, $amount: 10);
color: $primary-color;
background: var(--gcg-color-primary);
color: var(--gcg-color-primary);
}
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: $white;
background-color: darken($color: $primary-color, $amount: 10);
border-color: darken($color: $primary-color, $amount: 10);
color: white;
background-color: var(--gcg-color-primary);
border-color: var(--gcg-color-primary);
}
.btn-secondary {
background: $white;
color: $primary-color;
border: 1px solid $white;
background: white;
color: var(--gcg-color-primary);
border: 1px solid white;
&::before {
background: $primary-color;
background: var(--gcg-color-primary);
}
&:active {
background: $primary-color;
color: $white;
border: 1px solid $white;
background: var(--gcg-color-primary);
color: white;
border: 1px solid white;
}
&:hover {
background: $white;
color: $white;
border: 1px solid $white;
background: white;
color: white;
border: 1px solid white;
}
}
.btn-primary-outline {
border: 1px solid $primary-color;
color: $primary-color;
border: 1px solid var(--gcg-color-primary);
color: var(--gcg-color-primary);
background: transparent;
&::before {
background: $white;
background: white;
}
&:hover {
background: $primary-color;
color: $primary-color;
background: var(--gcg-color-primary);
color: var(--gcg-color-primary);
}
&:active {
background: $primary-color;
color: $white;
background: var(--gcg-color-primary);
color: white;
}
}

@ -1,11 +1,22 @@
:root {
--gcg-color-primary: #ffbc3b;
--gcg-color-primary-light: #ffde9c;
--gcg-color-secondary: #1a1a37;
--gcg-color-light-1x: #ededf1;
--gcg-color-light-2x: #f8f9fe;
--gcg-font-primary: 'Ubuntu', sans-serif;
--gcg-font-header: 'Fira Sans', sans-serif;
--gcg-font-icon: 'Material Design Icons';
}
body {
background-color: $body-color;
background-color: white;
overflow-x: hidden;
}
::selection {
background: lighten($color: $primary-color, $amount: 10);
color: $white;
background: var(--gcg-color-primary-light);
color: var(--bs-tertiary-color);
}
/* preloader */
@ -26,7 +37,7 @@ body {
ol,
ul {
list-style-type: none;
margin: 0px;
margin: 0;
}
img {
@ -56,15 +67,11 @@ select {
}
a:hover {
color: $primary-color;
color: var(--gcg-color-primary);
}
a.text-primary:hover {
color: $primary-color !important;
}
a.text-light:hover {
color: $primary-color !important;
color: var(--gcg-color-primary) !important;
}
h4 {
@ -73,7 +80,7 @@ h4 {
a h4 {
&:hover {
color: $primary-color;
color: var(--gcg-color-primary);
}
}
@ -102,7 +109,7 @@ a h4 {
}
.border-primary {
border-color: $border-color !important;
border-color: var(--gcg-color-light-1x) !important;
}
/* overlay */
@ -117,49 +124,29 @@ a h4 {
width: 100%;
top: 0;
left: 0;
background: $secondary-color;
background: var(--gcg-color-secondary);
opacity: .7;
}
}
.bg-primary {
background: $primary-color !important;
background: var(--gcg-color-primary) !important;
}
.bg-secondary {
background: $secondary-color !important;
}
.bg-gray {
background: $gray;
background: var(--gcg-color-secondary) !important;
}
.text-primary {
color: $primary-color !important;
}
.text-color {
color: $text-color;
}
.text-light {
color: $text-color-light !important;
}
.text-lighten {
color: #d6d6e0 !important;
color: var(--gcg-color-primary) !important;
}
.text-muted {
color: #b5b5b7 !important;
}
.text-dark {
color: $text-color-dark !important;
}
.font-secondary {
font-family: $secondary-font;
.font-header {
font-family: var(--gcg-font-header);
}
.vertical-align-middle {
@ -191,7 +178,7 @@ a h4 {
height: 10px;
width: 10px;
border-radius: 50%;
background: $primary-color;
background: var(--gcg-color-primary);
left: -25px;
top: 5px;
}
@ -217,14 +204,14 @@ textarea.form-control {
&.active {
.page-link {
background: $primary-color;
color: $white;
border-color: $primary-color;
background: var(--gcg-color-primary);
color: white;
border-color: var(--gcg-color-primary);
}
}
.page-link {
color: $text-color;
color: var(--bs-secondary-color);
}
}
}
@ -265,7 +252,7 @@ textarea.form-control {
&::before {
position: absolute;
content: "\f0B2A";
font-family: $icon-font;
font-family: var(--gcg-font-icon);
font-size: 14px;
left: 0;
top: 1px;
@ -295,11 +282,11 @@ textarea.form-control {
}
thead {
background: darken($color: $light, $amount: 2);
background: var(--gcg-color-light-1x);
}
tbody {
background: $light;
background: var(--gcg-color-light-2x);
td {
text-align: left !important;
@ -309,16 +296,17 @@ textarea.form-control {
blockquote {
border: 1px solid $border-color;
border-left: 5px solid $primary-color;
border: 1px solid var(--gcg-color-light-1x);
border-left: 5px solid var(--gcg-color-primary);
padding: 20px;
padding-left: 40px;
background-color: $light;
background-color: var(--gcg-color-light-2x);
p {
color: $text-color;
color: var(--bs-secondary-color);
font-style: italic !important;
}
* {
margin-bottom: 0 !important;
}
@ -326,17 +314,17 @@ textarea.form-control {
pre {
padding: 10px 20px;
background: $light;
background: var(--gcg-color-light-2x);
}
}
summary {
font-weight: 900;
font-size: 22px;
color: $secondary-color;
color: var(--gcg-color-secondary);
&.hover {
color: $primary-color;
color: var(--gcg-color-primary);
}
}
@ -375,7 +363,7 @@ details[open] summary {
bottom: -123px;
z-index: 9;
padding: 15px;
color: rgba($color: $white, $alpha: .5);
color: rgba($color: white, $alpha: .5);
border: 0;
font-size: 30px;
transition: all linear .2s;
@ -386,7 +374,7 @@ details[open] summary {
}
&:hover {
color: $primary-color;
color: var(--gcg-color-primary);
}
}
@ -414,7 +402,7 @@ details[open] summary {
&.slick-active {
button {
background: $primary-color;
background: var(--gcg-color-primary);
}
}
@ -424,7 +412,7 @@ details[open] summary {
overflow: hidden;
height: 10px;
width: 10px;
background: rgba($color: $white, $alpha: .5);
background: rgba($color: white, $alpha: .5);
border: 0;
outline: 0;
}
@ -457,7 +445,7 @@ details[open] summary {
font-size: 96px;
}
.wc-canvas {
#wc-canvas {
width: 100%;
height: 600px;
}
@ -468,23 +456,24 @@ details[open] summary {
transition: .1s ease;
&.active{
font-weight: 600;
color: $primary-color;
color: var(--gcg-color-primary);
}
&:hover{
color: $primary-color;
color: var(--gcg-color-primary);
}
}
}
.tag-list{
a{
.tag-list {
a {
display: block;
padding: 5px 10px;
background: $light;
color: $text-color;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
&:hover{
background-color: $primary-color;
color: $white;
background: var(--gcg-color-primary);
color: white;
}
}
}

@ -2,23 +2,27 @@
@import url('https://assets.cantorgymnasium.de/fonts/fira/fira.css');
body {
line-height: 1.2;
font-family: $primary-font;
font-family: var(--gcg-font-primary);
-webkit-font-smoothing: antialiased;
font-size: 15px;
color: $text-color;
color: var(--bs-secondary-color);
}
p, .paragraph {
font-weight: 400;
color: $text-color;
color: var(--bs-secondary-color);
font-size: 15px;
line-height: 1.9;
font-family: $primary-font;
font-family: var(--gcg-font-primary);
}
.text-white p {
color: inherit;
}
h1,h2,h3,h4,h5,h6 {
color: $text-color-dark;
font-family: $secondary-font;
color: var(--gcg-color-secondary);
font-family: var(--gcg-font-header);
font-weight: 900;
line-height: 1.2;
}

@ -1,17 +0,0 @@
// Color Variables
$primary-color: #ffbc3b;
$secondary-color: #1a1a37;
$text-color: #5c5c77;
$text-color-light: #8585a4;
$text-color-dark: #1e1e4b;
$body-color: #fff;
$border-color: #ededf1;
$black: #000;
$white: #fff;
$light: #f8f9fe;
$gray: #f8f8f8;
// Font Variables
$primary-font: 'Ubuntu', sans-serif;
$secondary-font: 'Fira Sans', sans-serif;
$icon-font: 'Material Design Icons';

@ -1,5 +1,3 @@
@import 'variables';
@import 'mixins';
@import 'typography';

@ -1,6 +1,6 @@
.feature-icon {
font-size: 60px;
color: $secondary-color;
color: var(--gcg-color-secondary);
display: inline-block;
}
@ -69,8 +69,8 @@
height: 80px;
width: 80px;
border-radius: 50%;
background: $primary-color;
color: $white;
background: var(--gcg-color-primary);
color: white;
font-size: 25px;
text-align: center;
@ -84,7 +84,7 @@
height: 0;
width: 0;
transform: translate(-50%, -50%);
background: $white;
background: white;
border-radius: 50%;
top: 50%;
left: 50%;
@ -99,7 +99,7 @@
height: 80%;
width: 80%;
transform: translate(-50%, -50%);
background: $primary-color;
background: var(--gcg-color-primary);
border-radius: 50%;
top: 50%;
left: 50%;

@ -11,32 +11,32 @@
}
.navigation {
background: linear-gradient(to right, transparent 50%, $primary-color 50%);
background: linear-gradient(to right, transparent 50%, var(--gcg-color-primary) 50%);
transition: .2s ease;
@include desktop {
background: $secondary-color;
background: var(--gcg-color-secondary);
}
}
.navbar-collapse{
@include desktop {
background: $secondary-color;
background: var(--gcg-color-secondary);
}
}
.navbar-nav {
padding-left: 50px;
background: $primary-color;
background: var(--gcg-color-primary);
@include desktop {
padding-left: 0;
background: $secondary-color;
background: var(--gcg-color-secondary);
}
}
.nav-bg {
background-color: $secondary-color;
background-color: var(--gcg-color-secondary);
}
.nav-item {
@ -55,7 +55,7 @@
height: 6px;
width: 100%;
content: "";
background: $white;
background: white;
transform: scaleY(0);
transform-origin: top;
transition: transform .3s ease;
@ -71,19 +71,19 @@
}
.navbar-dark .navbar-nav .nav-link {
color: $white;
color: white;
}
link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: $white;
color: white;
}
.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
color: $white;
color: white;
}
.navbar-expand-lg .navbar-nav .nav-link {
@ -99,7 +99,7 @@ link:focus,
top: 0;
width: 100%;
z-index: 10;
background: $white;
background: white;
box-shadow: 0 2px 5px #0000000d;
}
@ -115,7 +115,7 @@ link:focus,
&-menu {
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
border-bottom: 5px solid $primary-color;
border-bottom: 5px solid var(--gcg-color-primary);
padding: 15px;
top: 96px;
border-radius: 0;
@ -124,7 +124,7 @@ link:focus,
transition: .3s ease;
opacity: 0;
transform: translateY(20px);
background: $white;
background: white;
@include desktop {
display: none;
@ -146,10 +146,10 @@ link:focus,
&-item {
position: relative;
color: $text-color-dark;
color: var(--gcg-color-secondary);
transition: .2s ease;
text-transform: capitalize;
font-family: $primary-font;
font-family: var(--gcg-font-primary);
@include desktop {
text-align: center;
@ -160,7 +160,7 @@ link:focus,
}
&:hover {
color: $primary-color;
color: var(--gcg-color-primary);
background: transparent;
}
}

@ -10,7 +10,7 @@
</div>
<div class="col-12">
<div class="row mb-3">
<div class="col-6 mb-md-0 text-light">
<div class="col-6 mb-md-0 text-white text-body-tertiary">
<span class="fw-bold me-1">{{ i18n "posted_by" }}:</span>
{{ range $index, $elements := where (where .Site.RegularPages "Type" "author") "File.BaseFileName" "in" .Params.author }}
{{ if ne $index 0 }}, {{ end }}
@ -21,13 +21,13 @@
{{ end }}
{{ end }}
</div>
<div class="col-6 mb-3 mb-md-0 text-light">
<div class="col-6 mb-3 mb-md-0 text-body-tertiary">
<span class="fw-bold me-1">{{ i18n "date" }}:</span>
{{ time.Format "02. Jan 2006" .PublishDate }}
</div>
</div>
<div class="row">
<div class="col-12 mb-md-0 text-light">
<div class="col-12 mb-md-0 text-body-tertiary">
<span class="fw-bold me-1">{{ i18n "category" }}:</span>
{{ range $index, $elements := .Params.categories }}
{{ if ne $index 0 }}, {{ end }}

@ -1,6 +1,6 @@
{{ define "main" }}
<section class="section-sm bg-gray">
<section class="section-sm bg-body-tertiary">
<div class="container">
<div class="row">
<div class="col-lg-8 mb-4 mb-lg-0">

@ -8,7 +8,7 @@
</div>
<div class="col-md-7 mb-5">
<h3>{{ .Params.Name }}</h3>
<h6 class="text-color">{{ .Title }}</h6>
<h6 class="text-body-secondary">{{ .Title }}</h6>
<div class="content">
{{ .Content | markdownify }}
</div>

@ -216,7 +216,7 @@
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h2 class="text-white font-secondary mb-0">{{ .title | markdownify }}</h2>
<h2 class="text-white mb-0">{{ .title | markdownify }}</h2>
<h5 class="section-title text-white">{{ .subtitle | markdownify }}</h5>
{{ if .button.enable }}
{{ with .button }}
@ -235,7 +235,7 @@
{{ end }}
{{ if $data.homepage.termine.enable }}
<section class="section-sm bg-gray">
<section class="section-sm bg-body-tertiary">
<div class="container">
<div class="row">
<div class="col-12">
@ -281,8 +281,8 @@
<div class="container">
<div class="row align-items-center">
<div class="col-md-7 order-2 order-md-1">
<h3 class="section-title text-white font-secondary">{{ .title | markdownify }}</h2>
<div class="content ">
<h3 class="section-title text-white">{{ .title | markdownify }}</h2>
<div class="content text-white text-opacity-50">
{{ .content | markdownify }}
</div>
{{ if .button.enable }}

@ -8,7 +8,7 @@ crossorigin=""/>
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<section class="section-sm pb-0 bg-gray">
<section class="section-sm pb-0 bg-body-tertiary">
<div class="container">
<div class="row">
<div class="col-lg-6 mb-4 mb-lg-0">
@ -48,7 +48,7 @@ crossorigin=""/>
</div>
</section>
<section class="section-sm bg-gray">
<section class="section-sm bg-body-tertiary">
<div class="container">
<div class="row">
<div id="map" class="card col-12" style="height: 50vh;">

@ -4,7 +4,7 @@
<div class="row">
<div class="col-lg-3 col-sm-8 mb-5 mb-lg-0">
<a class="logo-footer" href="{{ .Site.BaseURL | relLangURL }}"><img class="mb-4" height="60" src="{{ .Site.Params.logo | absURL }}" alt="{{ .Site.Title }}"></a>
<ul class="list-unstyled">
<ul class="list-unstyled text-white text-opacity-50">
<li class="mb-4">
<a href="{{ .Site.Params.route_link }}">{{ .Site.Params.address | markdownify }}</a>
</li>
@ -22,7 +22,7 @@
<h4 class="text-white mb-5 text-uppercase">{{ i18n "links" }}</h4>
<ul class="list-unstyled">
{{ range .Site.Menus.footer }}
<li class="mb-3"><a class="text-color" href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
<li class="mb-3"><a class="text-white text-opacity-50" href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</div>
@ -30,7 +30,7 @@
<h4 class="text-white mb-5 text-uppercase">{{ i18n "clubs_footer" }}</h4>
<ul class="list-unstyled">
{{ range first 5 (where .Site.RegularPages "Type" "ganztagsangebote" | shuffle)}}
<li class="mb-3"><a class="text-color" href="{{ .Permalink }}">{{ .Title }}</a></li>
<li class="mb-3"><a class="text-white text-opacity-50" href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</div>
@ -38,7 +38,7 @@
<h4 class="text-white mb-5 text-uppercase">Aktuelles</h4>
<ul class="list-unstyled">
{{ range first 5 (where .Site.RegularPages "Type" "post")}}
<li class="mb-3"><a class="text-color" href="{{ .Permalink }}">{{ .Title | truncate 35 }}</a></li>
<li class="mb-3"><a class="text-white text-opacity-50" href="{{ .Permalink }}">{{ .Title | truncate 35 }}</a></li>
{{ end }}
</ul>
</div>

@ -6,7 +6,7 @@
<div class="col-lg-4 text-center text-lg-start">
<ul class="list-inline">
{{ range .Site.Params.social }}
<li class="list-inline-item mx-0"><a class="d-inline-block p-2 text-color" href="{{ .link | safeURL }}"><i
<li class="list-inline-item mx-0"><a class="d-inline-block p-2 text-body-secondary" href="{{ .link | safeURL }}"><i
class="{{ .icon }}"></i></a></li>
{{ end }}
</ul>
@ -14,11 +14,11 @@
<div class="col-lg-8 text-center text-lg-end">
<ul class="list-inline">
<li class="list-inline-item">
<a class="text-color me-3" href="tel:{{ .Site.Params.mobile }}"><strong>{{ i18n "call" | upper }} :
<a class="text-body-secondary me-3" href="tel:{{ .Site.Params.mobile }}"><strong>{{ i18n "call" | upper }} :
</strong> {{ .Site.Params.mobile }}</a>
</li>
<li class="list-inline-item">
<a class="text-color" href="mailto:{{ .Site.Params.email }}"><strong>{{ i18n "email" | upper }} :
<a class="text-body-secondary" href="mailto:{{ .Site.Params.email }}"><strong>{{ i18n "email" | upper }} :
</strong> {{ .Site.Params.email_label | safeHTML }}</a>
</li>
</ul>

@ -3,11 +3,11 @@
<div class="row">
<div class="col-md-8 position-relative">
<ul class="list-inline">
<li class="list-inline-item h2" data-pagefind-ignore><a class="text-primary font-secondary" href="{{ if .Params.Previous.enable }}{{ .Params.Previous.link }}{{ else if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.baseURL | absLangURL }}{{ end }}">{{ if .Params.previous.enable }}{{ .Params.previous.title }}{{ else }}{{ with .Parent.Params.title }}{{.}}{{ else }}{{ .Site.Params.home }}{{ end }}{{ end }}</a></li>
<li class="list-inline-item h2" data-pagefind-ignore><a class="text-primary font-header" href="{{ if .Params.Previous.enable }}{{ .Params.Previous.link }}{{ else if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.baseURL | absLangURL }}{{ end }}">{{ if .Params.previous.enable }}{{ .Params.previous.title }}{{ else }}{{ with .Parent.Params.title }}{{.}}{{ else }}{{ .Site.Params.home }}{{ end }}{{ end }}</a></li>
<li class="list-inline-item h2"><i class="mdi mdi-chevron-double-right text-white"></i></li>
<li class="list-inline-item text-white h2 font-secondary">{{ .Title }}</li>
<li class="list-inline-item text-white h2 font-header">{{ .Title }}</li>
</ul>
<p class="text-lighten">{{ .Params.description | markdownify }}</p>
<p class="text-white text-opacity-75">{{ .Params.description | markdownify }}</p>
</div>
</div>
</div>

@ -47,7 +47,7 @@
{{ if and .Params.pretext (ne .Params.pretext "\n\n\n") }}
{{ partial "modal" (dict "title" .Title "content" .Params.pretext) }}
{{ end }}
<div id="wc-canvas" class="wc-canvas"></div>
<div id="wc-canvas"></div>
{{ $topics := slice }}
{{ if .Params.pretext }}
{{ $topics = $topics | append (slice (slice .Params.Title 200 (md5 .Title))) }}

@ -5,7 +5,7 @@ const AnmeldeformularPreview = ({ widgetFor, entry }) => {
PageHeader(entry),
h(
"section",
{ className: "section-sm bg-gray" },
{ className: "section-sm bg-body-tertiary" },
h(
"div",
{ className: "container" },

@ -34,13 +34,13 @@ const BlogPreview = ({ widgetFor, entry, fields, collection }) => {
{ className: "row mb-3" },
h(
"div",
{ className: "col-6 mb-md-0 text-light" },
{ className: "col-6 mb-md-0 text-body-tertiary" },
h("span", { className: "fw-bold me-1" }, "Geschrieben von:"),
widgetFor("author")
),
h(
"div",
{ className: "col-6 mb-3 mb-md-0 text-light" },
{ className: "col-6 mb-3 mb-md-0 text-body-tertiary" },
h("span", { className: "fw-bold me-1" }, "Datum:"),
entry.data.date
? DateFormat({
@ -58,7 +58,7 @@ const BlogPreview = ({ widgetFor, entry, fields, collection }) => {
Row(
h(
"div",
{ className: "col-12 mb-md-0 text-light" },
{ className: "col-12 mb-md-0 text-body-tertiary" },
h("span", { className: "fw-bold me-1" }, "Kategorie:"),
entry.data.categories
? entry.data.categories.map(

@ -37,7 +37,7 @@ const CantorpreisPreview = ({ widgetFor, entry, fields, collection }) => {
"div",
{ className: "col-md-7 mb-5" },
h("h3", {}, entry.data.name),
h("h6", { className: "text-color" }, entry.data.title),
h("h6", { className: "text-body-secondary" }, entry.data.title),
Content(widgetFor("body"))
),
])

@ -26,7 +26,7 @@ const PageHeader = (entry) => {
{ className: "list-inline-item h2" },
h(
"font",
{ className: "text-primary font-secondary", href: "" },
{ className: "text-primary font-header", href: "" },
"Startseite"
)
),
@ -37,11 +37,11 @@ const PageHeader = (entry) => {
),
h(
"li",
{ className: "list-inline-item text-white h2 font-secondary" },
{ className: "list-inline-item text-white h2 font-header" },
entry.data.title
)
),
h("p", { className: "text-lighten" }, entry.data.description)
h("p", { className: "text-white text-opacity-75" }, entry.data.description)
)
)
)

@ -5,7 +5,7 @@ const KontaktPreview = ({ widgetsFor, entry }) => {
PageHeader(entry),
h(
"section",
{ className: "section-sm bg-gray" },
{ className: "section-sm bg-body-tertiary" },
h(
"div",
{ className: "container" },