php · saundefined · Oct 24, 2024 · Oct 24, 2024 · Oct 25, 2024 · Nov 1, 2024
@@ -425,7 +425,7 @@ function site_header(string $title = 'Hypertext Preprocessor', array $config = [
     global $MYSITE;
 
     $meta_image_path = $MYSITE . 'images/meta-image.png';
-    $meta_description = "PHP is a popular general-purpose scripting language that powers everything from your blog to the most popular websites in the world.";
+    $meta_description = $config['description'] ?? "PHP is a popular general-purpose scripting language that powers everything from your blog to the most popular websites in the world.";
 
     $defaults = [
         "lang" => myphpnet_language(),

@@ -0,0 +1,199 @@
+.block {
+    margin: 2rem auto 4.5rem;
+}
+
+.block img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+
+.block p {
+    margin-bottom: 0.5rem;
+}
+
+.block--grid {
+    display: grid;
+    grid-template-columns: 2fr 3fr;
+    grid-gap: 2rem;
+}
+
+.title {
+    font-size: 2.5rem;
+    font-weight: 500;
+    margin-bottom: 1.5rem;
+    color: #000;
+    line-height: 1;
+}
+
+.description {
+    color: #4b5563;
+}
+
+.subtitle {
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+}
+
+.block__intro {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.hero__body {
+    font-size: 1rem;
+    line-height: 1.75rem;
+}
+
+.hero ul {
+    list-style: none;
+    padding: 0;
+    margin: 1.25rem 0;
+}
+
+.hero ul li {
+    position: relative;
+    padding: 0 0 0 2.25rem;
+}
+
+.hero ul li:before {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path></svg>');
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+}
+
+.cta {
+    text-align: center;
+    font-size: 1.2rem;
+    line-height: 1.75rem;
+    max-width: 900px;
+    margin: 4rem auto 0;
+}
+
+.logos {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-gap: 1rem;
+    margin: 2rem auto;
+}
+
+.logo__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80px;
+    break-inside: avoid;
+    box-shadow: #dddddd 0 .125rem .5rem;
+    border-radius: .25rem;
+    background: #F9F9F9;
+    padding: 0.5rem;
+}
+
+.logo__item img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.cards {
+    display: grid;
+    grid-gap: 1rem;
+    margin: 2rem auto;
+    grid-template-columns: 1fr;
+}
+
+.cards--2 {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.cards--3 {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.card {
+    padding: 1.5rem;
+    break-inside: avoid;
+    box-shadow: #dddddd 0 .125rem .5rem;
+    border-radius: .25rem;
+    background: #F9F9F9;
+}
+
+.card--columns {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 1rem;
+}
+
+.card__title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin-bottom: 1.5rem;
+}
+
+.card__link {
+    margin-top: 0.5rem;
+    color: #4b5563;
+}
+
+.card__image {
+    height: 40px;
+    margin-bottom: 1rem;
+}
+
+.card__cover {
+
+}
+
+.phpcode {
+    background-color: #FFF;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
+    border-radius: 0 0 2px 2px;
+    overflow-x: auto;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 50px 40px 38px;
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.phpcode code {
+    display: block;
+    overflow-x: auto;
+    white-space: pre-wrap;
+}
+
+@media (max-width: 1280px) {
+    .logos {
+        grid-template-columns: repeat(6, 1fr);
+    }
+}
+
+@media (max-width: 1024px) {
+    .logos {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .block {
+        margin: 2rem auto;
+    }
+
+    .block--grid,
+    .cards,
+    .card--columns {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .logos {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}