~fabrixxm/confy-website

8ae54d97c4de2fea44ee3022a48192dd48f3928a — fabrixxm 1 year, 8 months ago 1f1d386
Update page header
4 files changed, 41 insertions(+), 22 deletions(-)

A confy0.png
A header.jpg
M index.html
M style.css
A confy0.png => confy0.png +0 -0
A header.jpg => header.jpg +0 -0
M index.html => index.html +17 -15
@@ 15,21 15,23 @@
<meta property="og:image" content="https://confy.kirgroup.net/confy2.png">

<header>
    <div class="title">
        <img src="logo.svg" width="96" alt="Confy icon">
        <h1>Confy</h1>
        <p class="tagline">Conferences schedule viewer </p>
    </div>
    <div>
        <!-- <p><a href="net.kirgroup.confy.flatpakref"><img height="50" alt="Install Flatpak" src="flatpak-badge-en.svg"></a></p>
        <p>⚠ Work In Progress ⚠</p> -->
        <p>
            <a href="https://sr.ht/~fabrixxm/Confy/">project</a>
            &middot; <a href="https://todo.sr.ht/~fabrixxm/confy">tickets</a>
            &middot; <a href="https://lists.sr.ht/~fabrixxm/confy-dev">mailing list</a>
        </p> 
    <div class="col1">
        <div class="title">
            <img src="logo.svg" width="96" alt="Confy icon">
            <h1>Confy</h1>
            <p class="tagline">Conferences schedule viewer </p>
        </div>
        <div class="links">
            <!-- <p><a href="net.kirgroup.confy.flatpakref"><img height="50" alt="Install Flatpak" src="flatpak-badge-en.svg"></a></p>
            <p>⚠ Work In Progress ⚠</p> -->
            <p>
                <a href="https://sr.ht/~fabrixxm/Confy/">project</a>
                &middot; <a href="https://todo.sr.ht/~fabrixxm/confy">tickets</a>
                &middot; <a href="https://lists.sr.ht/~fabrixxm/confy-dev">mailing list</a>
            </p> 
        </div>
    </div>

    <img class="col2" src="confy0.png" alt="Confy on desktop and mobile">
</header>
<main>
    <section>


@@ 171,5 173,5 @@ ninja -C _build install
</main>
<footer>
<p>Coded with 🐍 by <a href="https://social.gl-como.it/profile/fabrixxm">Fabio</a></p>
<p>Thanks to <a href="https://wilmer.gaa.st/main.php/giggity.html">Giggity</a> for idea and data, website copied without shame from <a href="https://johnfactotum.github.io/foliate/">Foliate</a></p>
<p>Thanks to <a href="https://wilmer.gaa.st/main.php/giggity.html">Giggity</a> for idea and data, website idea from <a href="https://johnfactotum.github.io/foliate/">Foliate</a>. Original header photo (cc) by-nc-sa <a href="https://www.flickr.com/photos/cubicgarden/4339132062/">Ian Forrester</a>.</p>
</footer>

M style.css => style.css +24 -7
@@ 15,19 15,30 @@ a:hover{
    text-decoration: underline;
}
header {
    background: rgba(0, 0, 0, 0.05);
    padding: 20px 0 20px 0;
    background: center / cover no-repeat url("header.jpg");
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-around;
}
header > div {
    max-width: 800px;
    margin: auto;
    text-align: center;
    padding: 0 10px;
}
header > .col1 {
    padding: 10vw 0 10vw 0;
}
header > .col2 {
    align-self: flex-end;
}
@media (max-width: 1300px) {
    header > .col2 { display: none; }
}
.title {
    margin-bottom: 20px;
    margin-bottom: 5vw;
    color: #fff;
    text-shadow: 2px 2px #404040;
}
.title img {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 15px rgba(0, 0, 0, 0.15));


@@ 39,11 50,17 @@ header > div {
.title .tagline {
    margin: 0;
    font-size: x-large;
    color: #666;
}
header p {
    margin: .5em 0;
}
header .links p {
    color: #fff;
    display: inline-block;
    background-color: #222;
    padding: 1em 2em;
}

.screenshot {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 15px rgba(0, 0, 0, 0.15));
    border-radius: 8px;