Initial commit

glassez · Jan 19, 2021 · b3c71b3 · b3c71b3
commit b3c71b3
Show file tree

Hide file tree

Showing 4 changed files with 245 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>glassez Home Page</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+    <meta name="description" content="glassez Home Page.">
+    <link href="style.css" rel="stylesheet" type="text/css">
+    <noscript>
+        <link href="noscript.css" rel="stylesheet" type="text/css">
+    </noscript>
+    </head>
+
+    <body>
+        <div id="wrapper">
+            <div id="main">
+                <div class="inner">
+                    <div id="avatar" class="image">
+                        <img src="squirrel.jpg" alt="">
+                    </div>
+                    <h1 id="title">glassez</h1>
+                    <p id="content">
+                        Welcome to my little Home Page!<br>I'm Open Source Software developer (honestly, just a hobbyist). <nobr>I mostly</nobr> contribute to the <a href="https://github.com/qbittorrent/qBittorrent"><b>qBittorrent</b></a> project (and related projects). So if you like what I do, you can donate to me. I accept PayPal (using <em>[email protected]</em> as address) and some kind of Cryptocurrencies:
+                        <ul>
+                            <li><a href="bitcoin:bc1qm2e0uhad7dhdwtljvxrxnqup9k8v0zr0g94p5p">Bitcoin (BTC)</a></li>
+                            <li><a href="ethereum:0x7aced71c3f71fec00941a45e292ca1f1a547c21f">Ethereum (ETH)</a></li>
+                            <li><a href="monero:42mThste456fLaZuh8mYbsJpeQdDrwmWvYHU7691SBvyjjWoZ7sx2iyNqnZoLCtbV9irNJu1nk1p9awqKiJJSQJu4TeGbnd">Monero (XMR)</a></li>
+                        </ul>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/noscript.css b/noscript.css
@@ -0,0 +1,18 @@
+body {
+    overflow: auto !important;
+}
+
+body:after {
+    display: none !important;
+}
+
+#main > .inner {
+    opacity: 1.0 !important;
+}
+
+#main {
+    opacity: 1.0 !important;
+    transform: none !important;
+    transition: none !important;
+    filter: none !important;
+}
diff --git a/squirrel.jpg b/squirrel.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,195 @@
+html {
+    font-size: 13pt;
+}
+
+body {
+    min-width: 320px;
+    min-height: 100vh;
+    line-height: 1.0;
+    word-wrap: break-word;
+    overflow-x: hidden;
+    background-attachment: scroll;
+    background-image: linear-gradient(45deg, #223a56 0%, #0cbfdf 100%);
+    background-repeat: repeat;
+    background-size: auto;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+u {
+    text-decoration: underline;
+}
+
+a {
+    color: inherit;
+    text-decoration: underline;
+}
+
+#wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    position: relative;
+    z-index: 2;
+    overflow: hidden;
+    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
+}
+
+#main {
+    display: flex;
+    position: relative;
+    max-width: 100%;
+    z-index: 1;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    text-align: center;
+    background-image: linear-gradient(30deg, rgba(255,255,255,0.522) 15%, #FFFFFF 59%);
+    background-position: 0% 0%;
+    background-repeat: repeat;
+    background-size: cover;
+    box-shadow: 0rem 1.25rem 2.625rem 0.375rem rgba(0,0,0,0.18);
+    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+}
+
+#main > .inner {
+    position: relative;
+    z-index: 1;
+    border-radius: inherit;
+    padding: 3rem 2.375rem;
+    max-width: 100%;
+    width: 29rem;
+}
+
+.image {
+    position: relative;
+    overflow: hidden;
+    max-width: 100%;
+    display: block;
+}
+
+.image img {
+    width: 100%;
+    max-width: 100%;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.image.full img {
+    display: block;
+}
+
+.image.full:first-child img {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+
+.image.full:last-child img {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+
+#avatar:not(:first-child) {
+    margin-top: 1rem !important;
+}
+
+#avatar:not(:last-child) {
+    margin-bottom: 1rem !important;
+}
+
+#avatar img {
+    width: 7rem;
+    border-radius: 100%;
+}
+
+#title {
+    color: rgba(22,44,70,0.8);
+    font-family: sans-serif;
+    letter-spacing: -0.075rem;
+    width: 100%;
+    font-size: 2em;
+    line-height: 1.25;
+    font-weight: 200;
+}
+
+#content {
+    color: rgba(22,44,70,0.7);
+    font-family: sans-serif;
+    letter-spacing: -0.025rem;
+    width: 100%;
+    font-size: 1em;
+    line-height: 1.5;
+    font-weight: 200;
+}
+
+#content br + br {
+    margin-top: 0.9rem;
+}
+
+#content a {
+    text-decoration: underline;
+}
+
+#content a:hover {
+    text-decoration: none;
+}
+
+hr {
+    width: 100%;
+    position: relative;
+    padding: 0;
+    border: 0;
+}
+
+hr:before {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+}
+
+@media (max-width: 980px) {
+    html {
+        font-size: 11pt;
+    }
+}
+
+@media (max-width: 736px) {
+    html {
+        font-size: 11pt;
+    }
+
+    #main > .inner {
+        padding: 3rem 2rem;
+    }
+
+    #avatar:not(:first-child) {
+        margin-top: 0.75rem !important;
+    }
+
+    #avatar:not(:last-child) {
+        margin-bottom: 0.75rem !important;
+    }
+
+    #avatar img {
+        width: 7rem;
+    }
+
+    #title {
+        letter-spacing: -0.065625rem;
+        width: 100%;
+        font-size: 2em;
+        line-height: 1.25;
+    }
+
+    #content {
+        letter-spacing: -0.021875rem;
+        width: 100%;
+        font-size: 1em;
+        line-height: 1.5;
+    }
+}