~fabrixxm/livehtml

56ffb4a673cc1d6635c49e45d0bce9ca8770dfa3 — fabrixxm 1 year, 3 months ago 315db6d
Add label to theme switch and tweak css

- change links color to blue as button
- keep chat iframe smaller to force irc client to hide sidebar
- vertically center elements in header bar
- add some margin under footers
3 files changed, 31 insertions(+), 17 deletions(-)

M index.html
M style.css
M view.html
M index.html => index.html +4 -2
@@ 13,10 13,12 @@
    <body>
        <header>
            <nav>
                <a href="https://gl-como.it/"><img alt="GL-Como" src="./img/logo.png" height="70"></a>
                <ul>
                    <li><a href="https://gl-como.it/"><img alt="GL-Como" src="./img/logo.png" height="70"></a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="#" id="switch">Switch light/dark</a></li>
                </ul>
                <ul>
                    <li><a href="#" id="switch">Switch dark/ligh</a></li>
                </ul>
            </nav>
        </header>

M style.css => style.css +22 -12
@@ 21,7 21,7 @@ body {


a {
    color: #920de9;
    color: #118bee;
    text-decoration: none;
}



@@ 43,11 43,12 @@ header > nav {

header > nav > ul {
    display: flex;
    align-items: center;
    margin:0; padding:0;
}

header > nav > ul > li {
    display: inline-block;
    display: inline-flex;
    margin: 0 0.5rem;
    padding: 0.2rem 0;
    list-style: none;


@@ 58,24 59,32 @@ header > nav > ul > li {
/* theme switcher */
#switch {
    display: inline-block;
    position: relative;
    height: 20px;
    padding-left: 40px;
}
#switch::before {
    display: block;
    position: absolute;
    content: ' ';
    width: 30px;
    height: 20px;
    overflow: hidden;
    border: 1px solid #222;
    border-radius: 10px;
    color: #ddd !important;
    background-color: #ddd;
    position: relative;
    top: 0px;
    left: 0px;
}
#switch::after {
    display: block;
    position: absolute;
    content: ' ';
    background-color: #000;
    width: 18px;
    height: 18px;
    top: 0px;
    left: 10px;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 1px;
    left: 12px;
    border-radius: 100%;
    transition: all 0.15s linear;
}


@@ 117,7 126,7 @@ main {
    display: grid;
    width: 100%;
    margin: 1rem 0 3rem;
    grid-template-columns: 4fr 2fr;
    grid-template-columns: 70% auto;
    grid-gap: 1rem;
    margin: 1em 0 0 0;
}


@@ 138,8 147,10 @@ footer {
    background-color: #cce5ff;
    border-color: #b8daff;
    padding: 0.5em;
    margin-bottom: 1rem;
}


@media (max-width: 900px) {
    http, body, main {
        width: 100%; height: 100%;


@@ 167,9 178,8 @@ body.dark {

.dark header { border-bottom-color: #666; }
.dark input { background-color: #222; border-color: #ddd; color: #ddd; }
.dark #switch {
.dark #switch::before {
    border-color: #ddd;
    color: #222 !important;
    background-color: #222;
}
.dark #switch::after {

M view.html => view.html +5 -3
@@ 13,10 13,12 @@
    <body>
        <header>
            <nav>
                <a href="https://gl-como.it/"><img alt="GL-Como" src="./img/logo.png" height="70"></a>
                <ul>
                    <li><a href="https://gl-como.it/"><img alt="GL-Como" src="./img/logo.png" height="70"></a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="#" id="switch">Switch light/dark</a></li>
                </ul>
                <ul>
                    <li><a href="#" id="switch">Switch dark/ligh</a></li>
                </ul>
            </nav>
        </header>


@@ 32,7 34,7 @@
                <iframe src=""></iframe>
            </aside>
            <footer>Watch with your preferred player: <span id="video-link"></a></footer>
                <footer>Join the chat from your favorite IRC client: <span id="irc-link"></a></footer>
            <footer>Join the chat from your favorite IRC client: <span id="irc-link"></a></footer>
        </main>
    </body>
    <script>