Responsive design for index page
This commit is contained in:
parent
4305da1d0c
commit
255536c681
@ -1,5 +1,5 @@
|
||||
/*
|
||||
! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
|
||||
! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
@ -554,6 +554,10 @@ video {
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
@ -629,6 +633,11 @@ video {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@ -721,6 +730,10 @@ video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-maxindex {
|
||||
max-width: 100rem;
|
||||
}
|
||||
|
||||
.max-w-read {
|
||||
max-width: 64rem;
|
||||
}
|
||||
@ -773,6 +786,24 @@ video {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-8 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-x-64 {
|
||||
-moz-column-gap: 16rem;
|
||||
column-gap: 16rem;
|
||||
}
|
||||
|
||||
.gap-y-8 {
|
||||
row-gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-x-32 {
|
||||
-moz-column-gap: 8rem;
|
||||
column-gap: 8rem;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -982,6 +1013,11 @@ video {
|
||||
color: rgb(80 7 36 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-slate-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 41 59 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.no-underline {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
@ -1456,24 +1492,119 @@ a {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.md\:h-16 {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.md\:w-16 {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.md\:justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.md\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.md\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.md\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.md\:text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.md\:text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.md\:text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.lg\:row-start-2 {
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.lg\:mt-20 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.lg\:grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.lg\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lg\:gap-x-32 {
|
||||
-moz-column-gap: 8rem;
|
||||
column-gap: 8rem;
|
||||
}
|
||||
|
||||
.lg\:gap-y-8 {
|
||||
row-gap: 2rem;
|
||||
}
|
||||
|
||||
.lg\:text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.xl\:col-auto {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.xl\:row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
|
||||
.xl\:row-start-auto {
|
||||
grid-row-start: auto;
|
||||
}
|
||||
|
||||
.xl\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.xl\:grid-cols-\[1fr_2fr\] {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./templates/**/*.html"],
|
||||
content: ["./templates/**/**.html"],
|
||||
theme: {
|
||||
extend: {
|
||||
spacing: {
|
||||
note: "60rem",
|
||||
read: "64rem",
|
||||
image: "70rem",
|
||||
maxindex: "100rem",
|
||||
},
|
||||
width: {
|
||||
note: "60rem",
|
||||
read: "64rem",
|
||||
image: "70rem",
|
||||
maxindex: "100rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
{% endmatch %}
|
||||
</aside>
|
||||
<header>
|
||||
<h3 class="text-lg font-bold mb-1">{{post.metadata.title}}</h3>
|
||||
<h3 class="text-lg font-bold mb-1 md:text-3xl">{{post.metadata.title}}</h3>
|
||||
</header>
|
||||
<section class="text-base leading-5 text-gray-800">{{post.body|description_filter|safe}}</section>
|
||||
<section class="text-base leading-5 text-gray-800 md:text-xl">{{post.body|description_filter|safe}}</section>
|
||||
<footer class="text-sm">
|
||||
<ul class="inline-block">
|
||||
{% for tag in post.metadata.tags %}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<article class="border rounded-md bg-white m-4 p-4">
|
||||
<header class="px-4 mb-3">
|
||||
<h2 class="text-xl font-semibold text-blue-900">
|
||||
<h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
|
||||
{% match project.metadata.link %}
|
||||
{% when Some with (href) %}
|
||||
<a href="{{href}}" class="text-blue-900 no-underline">
|
||||
@ -10,9 +10,9 @@
|
||||
{{project.metadata.title}}
|
||||
{% endmatch %}
|
||||
</h2>
|
||||
<p class="text-gray-800 text-lg my-2">
|
||||
<section class="description text-slate-800 my-2 md:text-xl">
|
||||
{{project.metadata.description|safe}}
|
||||
</p>
|
||||
</section>
|
||||
</header>
|
||||
<!-- <hr class="border-blue-950 my-5"> -->
|
||||
|
||||
@ -33,8 +33,8 @@
|
||||
{% endmatch %}
|
||||
|
||||
|
||||
<footer class="text-sm px-4">
|
||||
<h3 class="text-xl font-semibold text-blue-900 my-2">
|
||||
<footer class="text-sm px-4 md:text-base">
|
||||
<h3 class="text-xl font-semibold text-blue-900 my-2 md:text-2xl">
|
||||
{{crate::projects::project_model::translate_classification(project.metadata.classification)}}
|
||||
</h3>
|
||||
<ul class="inline-block">
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
|
||||
<section class="flex border rounded bg-white m-4 p-3">
|
||||
<aside class="flex justify-center items-center pr-3">
|
||||
<svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
|
||||
<svg aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
|
||||
<use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
|
||||
</svg>
|
||||
</aside>
|
||||
<section>
|
||||
<header>
|
||||
<h3 class="text-lg font-medium mb-1">{{heading}}</h3>
|
||||
<h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
|
||||
</header>
|
||||
<p class="text-sm leading-5 text-gray-800">{{description|safe}}</p>
|
||||
<p class="text-sm leading-5 text-gray-800 md:text-lg">{{description|safe}}</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
{% block title %}Introduction{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<header class="index-header hidden">
|
||||
<section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
|
||||
<section id="about-me">
|
||||
<header class="index-header hidden">
|
||||
<figure class="profile-pic">
|
||||
<picture>
|
||||
<img
|
||||
@ -21,29 +23,30 @@
|
||||
<cite>“Let your ambition carry you.”</cite>
|
||||
<span class="cite-owner">- La Flame</span>
|
||||
</p>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5">About me</h2>
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">About me</h2>
|
||||
|
||||
<p class="mx-5">
|
||||
<p class="mx-5 md:text-xl">
|
||||
Welcome to my personal website. My name is
|
||||
<strong>Michal Vanko</strong>
|
||||
and I'm a
|
||||
<em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
|
||||
. I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>
|
||||
|
||||
<section id="talent-cards">
|
||||
<section id="talent-cards">
|
||||
{% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
|
||||
{% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
|
||||
{% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"TODO callendly\">Schedule a session with me</a> and elevate your projects together.") %}
|
||||
</section
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="blog">
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5">Blog</h2>
|
||||
<section id="blog" class="lg:col-span-2 lg:row-start-2 xl:col-auto xl:row-start-auto xl:row-span-2">
|
||||
<h2 class="text-blue-950 font-semibold text-2xl md:text-4xl m-5">Blog</h2>
|
||||
<section id="blog-tags">
|
||||
<ul class="mx-5">
|
||||
{% for tag in blog_tags %}
|
||||
<li class="inline-block mx-0.5 p-0.5">
|
||||
<li class="inline-block mx-0.5 p-0.5 md:text-xl">
|
||||
<a href="/blog/tags/{{tag}}" class="text-pink-950">#{{tag|capitalize}}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
@ -59,10 +62,10 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="socials">
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5">Socials</h2>
|
||||
<section id="socials">
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Socials</h2>
|
||||
{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
|
||||
<!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
|
||||
<!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
|
||||
@ -114,14 +117,14 @@
|
||||
<!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
|
||||
{% call sc::social_card_end() %}
|
||||
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<hr class="border-blue-950 m-5">
|
||||
<hr class="border-blue-950 m-5 lg:hidden">
|
||||
|
||||
<section id="showcase">
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5">Showcase</h2>
|
||||
<section id="showcase" class="col-span-2">
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Showcase</h2>
|
||||
|
||||
<ul class="mx-5">
|
||||
<ul class="mx-5 md:grid md:grid-cols-2 md:justify-stretch md:items-stretch xl:grid-cols-3">
|
||||
{% for project in featured_projects %}
|
||||
<li class="my-2">
|
||||
{% include "components/project_preview_card.html" %}
|
||||
@ -129,7 +132,8 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section> <!-- /.index-container -->
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user