Skip to content

Commit

Permalink
Merge pull request #3 from pengmaradi/feature/tailwind
Browse files Browse the repository at this point in the history 
chore: changed the text and styles
  • Loading branch information
@pengmaradi
pengmaradi authored Sep 1, 2024
2 parents ce7a9ae + 667854c commit c6083c8
Show file tree
Hide file tree
Showing 18 changed files with 508 additions and 182 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,5 @@ pengmaradi.github.io for host domain
```bash
$ jekyll serve --trace
```

build js and css excut `npm run watch` or `npm run build`
10 changes: 10 additions & 0 deletions _data/ceramic.yml
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,49 @@
- name: Krebs
src: https://lh3.googleusercontent.com/pw/AP1GczOL30ZKcawQUaZLHT75uDPd3PvgrY3ho-R-jizrDvTVvcQsdnUeI9T4pLKx8U54bgUNoLxMvnwv8jp0Rvy59-QcBhdHG58I3Q6FuBENt1VMy_dRecAi=w2400
description: Porzellan Auf Glasur, über 1200°C
lightbox: false

- name: grüne Vase
src: https://lh3.googleusercontent.com/pw/AP1GczPsVJCXh1sdQB0DT6LSnF1oBkUmUxPLLEAbVeWt64SwC2RJZO9SMbMXM18v1Lf9d8I5-4e2HkranFl5udk9YbK3HfVvOj1noFeVzgpa9moYuvwn1DT4=w2400
description: Porzellen Vase, Gipsform mit Celaton Glasur
lightbox: true

- name: weisse Vase
src: https://lh3.googleusercontent.com/pw/AP1GczNZn6ofx1m70z1LUOYoMmm2F_2zHXkABznkEEKk-5blU3Ie8DrkdmCgI0-l6UtdziHoxvc_sHwVXOk4_FiENu4bed8ttPXI3HGOeo0DCYHtTUfOj6x7=w2400
description: ohne Gasur, Gipsform mit scharz und weiss Wände
lightbox: true

- name: Spinnenlilien
src: https://lh3.googleusercontent.com/pw/AP1GczPFpGA7pO_kgO6rduW1Y0-DLu7Oq1-0Auk_rT0c6jOBxP1nUZCi6jjEqTmVS8oaAn7csGbiOr7p8voc0tSJPDpejsBgbgoT1Sj5YEN3UXTFRt8a2JDg=w2400
description: rot Blumen
lightbox: false

- name: Kücken
src: https://lh3.googleusercontent.com/pw/AP1GczPkPlUeG3ZENnZkHB9NlEYMtxcpRwKv0K79BBALm-QoqunheX2UnEsVw68f_g4mWq1dRKLPt7NXHujkav5dRS9ISHTV07J2bYXE5Sq9L3-XYBQIS_Ri=w2400
description: xiao ji
lightbox: false

- name: Fisch
src: https://lh3.googleusercontent.com/pw/AP1GczP5A3NF1jQhvvyCBJaIdyJbeO4K9u0Da76lMLq70UbHU75ma64pixxJ-cBp4j70ClwEzb7bWvmlKyH_dCc6m7n8U2I0hTPkgT0I0w2ZYPuvQaKahTnR=w2400
description: yu
lightbox: false

- name: Krähen
src: https://lh3.googleusercontent.com/pw/AP1GczP9r_OP9dnmUN8G8csiAULujYUMbhalM8PihemCWKgsVPP7-jjLh31bZSzXRn0X-cH82cePqzF3Wxr6yr0vrTwwl8Gp3YIk1be-FhyesGAiYrTU5Fqz=w2400
description: wu ya
lightbox: false

- name: Orchideen
src: https://lh3.googleusercontent.com/pw/AP1GczNqm9x5iZvv1VC1KeaCm677EdMMxsTcIoRt3np4TDOeaRlw4_mW_khMAKNY61ljcgJR5sGVZ-Kix_tZz1LkdvL5hqiJEINij7a_YV9Svj8XRaqLzks9=w2400
description: lan hua
lightbox: false

- name: Kopf
src: https://lh3.googleusercontent.com/pw/AP1GczNB6tWcZ2W1--1HwjYNrkXDAzdHYda_PbpaB2POxOVN6U_BoyRsiS4COiKZJJ8MsyV8rVsLHaiaYldSp0CzkBELXBpPByAlmE6FAHMvhYByERWHhIgg=w2400
description: Kopf im Buch
lightbox: true

- name: Geisterkopf
src: https://lh3.googleusercontent.com/pw/AP1GczOQ6CQ3maTbx9i3lbHHgwcws0r8CUy0IWy_NDs8CnL93XiNc0HO6zeO8UsSY2hiTFsleCO5hXym52IFxW4wqJqZot_iiO008zNId_tH6EmIlZ5hQbl4=w2400
description: Geist ...
lightbox: true
24 changes: 16 additions & 8 deletions _includes/ceramic.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
<div class="mb-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4" x-data="glightbox">
{% for item in site.data.ceramic %}
<a class="glightbox cursor-zoom-in group" href="{{ item.src }}">
<h3 class="mb-2 group-hover:text-indigo-500 transition ease-in-out">{{ item.name }}</h3>
<img src="{{ item.src }}" class="h-auto w-full group-hover:sepia" width="400" height="500" alt="{{ item.name }}"
title="{{ item.description }}" />
</a>
<section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
<div class="mb-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4"
x-data="glightbox">
{% for item in site.data.ceramic %}
{% if item.lightbox %}<a class="glightbox cursor-zoom-in group duration-1000 transition-all transform"
x-intersect="$el.classList.add('fadeInUp')" href="{{ item.src }}">
{% else %}
<div class="group duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">{%
endif %}
<h3 class="mb-2 group-hover:text-gray-200">{{ item.name }}</h3>
<img src="{{ item.src }}" class="h-auto w-full group-hover:sepia rounded" width="400" height="500"
alt="{{ item.name }}" title="{{ item.description }}" />
{% if item.lightbox %}
</a>{% else %}</div>{% endif %}
{% endfor %}
</div>
</div>
</section>
65 changes: 35 additions & 30 deletions _includes/donQuijote.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,41 @@
<div class="custom-video-modal" x-data="videoModal">
<div class="flex py-4">
<button type="button" data-modal-toggle="modal" data-modal-target="modal"
@click.prevent="(e) => { e.stopPropagation(); player.play(); }"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
play video
</button>
</div>
<section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
<div class="custom-video-modal" x-data="videoModal">
<div class="flex py-4">
<button type="button" data-modal-toggle="modal" data-modal-target="modal"
@click.prevent="(e) => { e.stopPropagation(); player.play(); }"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
play video
</button>
</div>

<div id="modal" tabindex="-1" aria-hidden="true" @click.stop="() => player.pause()"
class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full" @click.prevent="(e) => { e.stopPropagation(); }">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700" ref="modalContent">
<div class="flex items-start justify-between p-5 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
Don Quijote
</h3>
<button id="closeButton w-5 h-5" data-modal-hide="modal" type="button" @click="() => player.pause()"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div id="modal" tabindex="-1" aria-hidden="true" @click.stop="() => player.pause()"
class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full" @click.prevent="(e) => { e.stopPropagation(); }">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700" ref="modalContent">
<div class="flex items-start justify-between p-5 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
Don Quijote
</h3>
<button id="closeButton w-5 h-5" data-modal-hide="modal" type="button"
@click="() => player.pause()"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>

<div class="relative overflow-y-auto p-4">
<div class="plyr__video-embed" x-ref="videoElement">
<iframe allowfullscreen allowtransparency allow="autoplay"
src="https://youtube.com/shorts/_ZU774rANfY?si=cKRLcVA4NU12h8FB"></iframe>
<div class="relative overflow-y-auto p-4">
<div class="plyr__video-embed" x-ref="videoElement">
<iframe allowfullscreen allowtransparency allow="autoplay"
src="https://youtube.com/shorts/_ZU774rANfY?si=cKRLcVA4NU12h8FB"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>

</section>
83 changes: 71 additions & 12 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,81 @@


<div class="flex flex-col md:flex-row">
<div class="w-full lg:w-2/6 lg:mx-4 lg:pr-8">
<i>Layout ist {{page.layout}}</i>
<p>{{site.time | date_to_long_string}}</p>
<p>© pengmaradi {{ site.time | date: "%Y" }}</p>
<i>current lyaout: {{page.layout}}</i>
<p>{{site.time | date_to_long_string}}</p>
</div>
<div class="w-full lg:w-2/6 lg:mx-4 lg:pr-8">
<h5 class="uppercase tracking-wider font-semibold">
<h5 class="uppercase mb-5 tracking-wider font-semibold">
Kontakt
</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo maxime nam sequi eligendi? Aut corporis dolore porro
dolores praesentium facilis, necessitatibus temporibus exercitationem debitis itaque voluptatibus placeat provident,
error saepe?</p>
<ul class="flex flex-row space-x-4"
x-data="{
sendMail() {
let link = `mailto:[email protected]
?subject=mail from pengmaradi.github.io
`
window.location.href = link;
return false;
}">
<li>
<button class="" @click="sendMail()">
<svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Mail</title>
<path
d="M28 4.7998H3.99998C2.29998 4.7998 0.849976 6.1998 0.849976 7.9498V24.1498C0.849976 25.8498 2.24998 27.2998 3.99998 27.2998H28C29.7 27.2998 31.15 25.8998 31.15 24.1498V7.8998C31.15 6.1998 29.7 4.7998 28 4.7998ZM28 7.0498C28.05 7.0498 28.1 7.0498 28.15 7.0498L16 14.8498L3.84998 7.0498C3.89998 7.0498 3.94998 7.0498 3.99998 7.0498H28ZM28 24.9498H3.99998C3.49998 24.9498 3.09998 24.5498 3.09998 24.0498V9.2498L14.8 16.7498C15.15 16.9998 15.55 17.0998 15.95 17.0998C16.35 17.0998 16.75 16.9998 17.1 16.7498L28.8 9.2498V24.0998C28.9 24.5998 28.5 24.9498 28 24.9498Z"
fill="#ffffff" />
</svg>
</button>
</li>
<li>
<a href="https://www.youtube.com/@pengmaradi" title="youtube" target="_blank">
<svg class="h-8 w-8" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>YouTube</title>
<path fill="#ffffff"
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/pm_xiaoling" title="instagram" target="_blank">
<svg class="h-8 w-8" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Instagram</title>
<path fill="#ffffff"
d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" />
</svg>
</a>
</li>
<li>
<a href="tel:+41763363847" title="Call me :)">
<svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_941_17577)">
<path
d="M24.3 31.1499C22.95 31.1499 21.4 30.7999 19.7 30.1499C16.3 28.7999 12.55 26.1999 9.19997 22.8499C5.84997 19.4999 3.24997 15.7499 1.89997 12.2999C0.39997 8.59994 0.54997 5.54994 2.29997 3.84994C2.34997 3.79994 2.44997 3.74994 2.49997 3.69994L6.69997 1.19994C7.74997 0.599942 9.09997 0.899942 9.79997 1.89994L12.75 6.29994C13.45 7.34994 13.15 8.74994 12.15 9.44994L10.35 10.6999C11.65 12.7999 15.35 17.9499 21.25 21.6499L22.35 20.0499C23.2 18.8499 24.55 18.4999 25.65 19.2499L30.05 22.1999C31.05 22.8999 31.35 24.2499 30.75 25.2999L28.25 29.4999C28.2 29.5999 28.15 29.6499 28.1 29.6999C27.2 30.6499 25.9 31.1499 24.3 31.1499ZM3.79997 5.54994C2.84997 6.59994 2.89997 8.74994 3.99997 11.4999C5.24997 14.6499 7.64997 18.0999 10.8 21.2499C13.9 24.3499 17.4 26.7499 20.5 27.9999C23.2 29.0999 25.35 29.1499 26.45 28.1999L28.85 24.0999C28.85 24.0499 28.85 24.0499 28.85 23.9999L24.45 21.0499C24.45 21.0499 24.35 21.0999 24.25 21.2499L23.15 22.8499C22.45 23.8499 21.1 24.1499 20.1 23.4999C13.8 19.5999 9.89997 14.1499 8.49997 11.9499C7.84997 10.8999 8.09997 9.54994 9.09997 8.84994L10.9 7.59994V7.54994L7.94997 3.14994C7.94997 3.09994 7.89997 3.09994 7.84997 3.14994L3.79997 5.54994Z"
fill="#ffffff" />
<path
d="M29.3 14.25C28.7 14.25 28.25 13.8 28.2 13.2C27.8 8.15003 23.65 4.10003 18.55 3.75003C17.95 3.70003 17.45 3.20003 17.5 2.55003C17.55 1.95003 18.05 1.45003 18.7 1.50003C24.9 1.90003 29.95 6.80003 30.45 13C30.5 13.6 30.05 14.15 29.4 14.2C29.4 14.25 29.35 14.25 29.3 14.25Z"
fill="#ffffff" />
<path
d="M24.35 14.7002C23.8 14.7002 23.3 14.3002 23.25 13.7002C22.95 11.0002 20.85 8.90018 18.15 8.55018C17.55 8.50018 17.1 7.90018 17.15 7.30018C17.2 6.70018 17.8 6.25018 18.4 6.30018C22.15 6.75018 25.05 9.65018 25.5 13.4002C25.55 14.0002 25.15 14.5502 24.5 14.6502C24.4 14.7002 24.35 14.7002 24.35 14.7002Z"
fill="#ffffff" />
</g>
<defs>
<clipPath id="clip0_941_17577">
<rect width="32" height="32" fill="#ffffff" />
</clipPath>
</defs>
</svg>
</a>
</li>
</ul>
</div>
<div class="w-full lg:w-2/6 mt-8 lg:mt-0 lg:mx-4 lg:pr-8">
<a href="/news.html">TYPO3 blog</a>
<h5 class="uppercase mb-5 tracking-wider font-semibold">
links
</h5>
<ul>
<li><a href="/news.html">TYPO3 blog</a></li>
<li><a href="/impressum.html">Impressum</a></li>
</ul>
</div>
</div>


</div>
Loading

0 comments on commit c6083c8

Please sign in to comment.