Skip to content

Commit

Permalink
Merge pull request #10 from pengmaradi/feature/tailwind
Browse files Browse the repository at this point in the history 
chore: added react test
  • Loading branch information
@pengmaradi
pengmaradi authored Sep 3, 2024
2 parents fadbc13 + bde85c4 commit f5edca9
Show file tree
Hide file tree
Showing 10 changed files with 103 additions and 41 deletions.
4 changes: 2 additions & 2 deletions _includes/ceramic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
{% 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')">{%
<div class="group duration-1000 transition-all transform border rounded p-2" x-intersect="$el.classList.add('fadeInUp')">{%
endif %}
<h3 class="mb-2 group-hover:text-gray-200">{{ item.name }}</h3>
<h5 class="mb-2 text-center group-hover:text-gray-200">{{ item.name }}</h5>
<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 %}
Expand Down
13 changes: 8 additions & 5 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,13 @@ <h5 class="uppercase mb-5 tracking-wider font-semibold">
<h5 class="uppercase mb-5 tracking-wider font-semibold">
links
</h5>
<ul>
<li><a href="/todo.html">Todo list</a></li>
<li><a href="/news.html">TYPO3 blog</a></li>
<li><a href="/impressum.html">Impressum</a></li>
</ul>
{% for item in site.data.metanav %}
<a href="{{ item.link }}" {% if page.url==item.link
%}class="active block bg-gray-900 py-2 text-base font-medium text-white pl-4" {% else
%}class="duration-1000 transition-all transform block py-2 text-base font-medium text-white hover:pl-4 " {%
endif %}>
{{ item.name }}
</a>
{% endfor %}
</div>
</div>
2 changes: 1 addition & 1 deletion _includes/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
document.documentElement.classList.remove('dark');
}
});
" class="absolute right-0 top-15">
" class="absolute right-2 top-15" title="dark mode switch">
<div class="flex items-center m-auto max-w-5xl">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 p-1 text-gray-700 transition rounded-full cursor-pointer bg-gray-50 hover:bg-gray-200"
Expand Down
1 change: 1 addition & 0 deletions _includes/nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
<div class="relative ml-3">
<div>
<button type="button"
title="contact with me :)"
@click="sendMail();"
class="cursor-pointer relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
id="user-menu-button" aria-expanded="false" aria-haspopup="true">
Expand Down
24 changes: 15 additions & 9 deletions _layouts/tailwind.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@
<link rel="icon" type="image/png" sizes="192x192" href="logo.png" />
<link rel="icon" href="favicon.ico" type="image/x-ico; charset=binary" />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">

<link rel="stylesheet" href="assets/main.css" />
</head>

Expand All @@ -41,17 +47,17 @@
}" @scroll.window="show_backToTop = window.pageYOffset > 30">
<div :class="show_backToTop ? 'block' : 'hidden'">
<div id="back_To_Top" x-ref="backTotop" @click="window.scrollTo({top: 0, behavior: 'smooth'})"
class="scrollTop fixed overflow-hidden bottom-5 right-0 z-10 cursor-pointer">
class="scrollTop fixed overflow-hidden bottom-5 right-2 z-10 cursor-pointer animate-bounce">
<span class="sr-only">Back to top</span>

<svg version="1.1" class="h-8 w-8"
viewBox="0 0 122.883 122.882" enable-background="new 0 0 122.883 122.882" xml:space="preserve">
<title>Back to top</title>
<g>
<path
d="M122.883,61.441c0,16.966-6.877,32.326-17.996,43.445c-11.119,11.118-26.479,17.995-43.446,17.995 c-16.966,0-32.326-6.877-43.445-17.995C6.877,93.768,0,78.407,0,61.441c0-16.967,6.877-32.327,17.996-43.445 C29.115,6.877,44.475,0,61.441,0c16.967,0,32.327,6.877,43.446,17.996C116.006,29.115,122.883,44.475,122.883,61.441 L122.883,61.441z M80.717,71.377c1.783,1.735,4.637,1.695,6.373-0.088c1.734-1.784,1.695-4.637-0.09-6.372L64.48,43.078 l-3.142,3.23l3.146-3.244c-1.791-1.737-4.653-1.693-6.39,0.098c-0.05,0.052-0.099,0.104-0.146,0.158L35.866,64.917 c-1.784,1.735-1.823,4.588-0.088,6.372c1.735,1.783,4.588,1.823,6.372,0.088l19.202-18.779L80.717,71.377L80.717,71.377z M98.496,98.496c9.484-9.482,15.35-22.584,15.35-37.055c0-14.472-5.865-27.573-15.35-37.056 C89.014,14.903,75.912,9.038,61.441,9.038c-14.471,0-27.572,5.865-37.055,15.348C14.903,33.869,9.038,46.97,9.038,61.441 c0,14.471,5.865,27.572,15.349,37.055c9.482,9.483,22.584,15.349,37.055,15.349C75.912,113.845,89.014,107.979,98.496,98.496 L98.496,98.496z" />
</g>
</svg>
<svg version="1.1" class="fill-current h-8 w-8"
viewBox="0 0 122.883 122.882" enable-background="new 0 0 122.883 122.882" xml:space="preserve">
<title>Back to top</title>
<g>
<path
d="M122.883,61.441c0,16.966-6.877,32.326-17.996,43.445c-11.119,11.118-26.479,17.995-43.446,17.995 c-16.966,0-32.326-6.877-43.445-17.995C6.877,93.768,0,78.407,0,61.441c0-16.967,6.877-32.327,17.996-43.445 C29.115,6.877,44.475,0,61.441,0c16.967,0,32.327,6.877,43.446,17.996C116.006,29.115,122.883,44.475,122.883,61.441 L122.883,61.441z M80.717,71.377c1.783,1.735,4.637,1.695,6.373-0.088c1.734-1.784,1.695-4.637-0.09-6.372L64.48,43.078 l-3.142,3.23l3.146-3.244c-1.791-1.737-4.653-1.693-6.39,0.098c-0.05,0.052-0.099,0.104-0.146,0.158L35.866,64.917 c-1.784,1.735-1.823,4.588-0.088,6.372c1.735,1.783,4.588,1.823,6.372,0.088l19.202-18.779L80.717,71.377L80.717,71.377z M98.496,98.496c9.484-9.482,15.35-22.584,15.35-37.055c0-14.472-5.865-27.573-15.35-37.056 C89.014,14.903,75.912,9.038,61.441,9.038c-14.471,0-27.572,5.865-37.055,15.348C14.903,33.869,9.038,46.97,9.038,61.441 c0,14.471,5.865,27.572,15.349,37.055c9.482,9.483,22.584,15.349,37.055,15.349C75.912,113.845,89.014,107.979,98.496,98.496 L98.496,98.496z" />
</g>
</svg>
</div>
</div>
<div class="main-container">
Expand Down
2 changes: 1 addition & 1 deletion assets/main.css
View file

Large diffs are not rendered by default.

65 changes: 52 additions & 13 deletions assets/main.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion impressum.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,6 @@ <h4>
</section>
<section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
<p>
Technologie: Jeykll, github, tailwindCSS, alpineJS, vite, google fotos, ..
Technologie: Jeykll, github, tailwindCSS, alpineJS, react, vite, google fotos, ..
</p>
</section>
15 changes: 14 additions & 1 deletion src/index.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,25 @@
}

body {
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
font-variation-settings: "wdth" 100;
@apply text-gray-800 dark:text-gray-200 dark:text-white dark:bg-black;

h1,
h2,
h3,
h4 {
h4,
h5 {
@apply font-bold text-gray-600 dark:text-gray-300;
}

h1 {
font-family: "Anton", sans-serif;
font-weight: 100;
font-style: normal;
@apply text-4xl mt-4;
}

Expand Down Expand Up @@ -84,6 +93,10 @@ body {
}
}

.dark svg.fill-current {
fill: #ffffff; /* White for dark mode */
}

@tailwind base;
@tailwind components;
@tailwind utilities;
16 changes: 8 additions & 8 deletions src/main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import './js/videoModal'
import './js/todolist'


// import { StrictMode } from 'react'
// import { createRoot } from 'react-dom/client'
// import App from './App.jsx'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import GetFilm from './js/GetFilm'

document.addEventListener("DOMContentLoaded", () => {
window.Alpine = Alpine;
Expand All @@ -19,8 +19,8 @@ document.addEventListener("DOMContentLoaded", () => {
})


// createRoot(document.getElementById('root')).render(
// <StrictMode>
// <App />
// </StrictMode>,
// )
createRoot(document.getElementById('film')).render(
<StrictMode>
<GetFilm />
</StrictMode>,
)

0 comments on commit f5edca9

Please sign in to comment.