Initial Portal

2021-12-12 14:03:35 -05:00
commit b4802aa1fc
10 changed files with 161 additions and 0 deletions
@@ -0,0 +1,112 @@
+:root {
+    --background: lightgray;
+    --link-background: rgb(230, 230, 230);
+    --link-accent: rgba(147, 147, 147, 0.2);
+    --logo-shadow: rgba(97, 97, 97, 0.507);
+    --link-color: rgb(87, 87, 87);
+}
+
+@media (prefers-color-scheme: dark) {
+    /*DARK THEME*/
+    :root {
+        --background: black;
+        --link-background: rgb(90, 90, 90);
+        --link-accent: rgba(133, 133, 133, 0.363);
+        --logo-shadow: rgba(97, 97, 97, 0.507);
+        --link-color: rgb(218, 218, 218);
+    }
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 10px;
+    height: 100%;
+}
+
+body {
+    background-color: var(--background);
+    background-size: 5%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.links-container {
+    display: inline-flex;
+    max-width: 100%;
+    overflow-x: hidden;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 2rem;
+}
+.links-container .link-box {
+    width: 15rem;
+    padding: 2rem;
+    transition: all ease-in-out 0.2s;
+    margin: 2rem;
+    border: 1px solid transparent;
+    height: 15rem;
+    background-color: var(--link-background);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.links-container .link-box img {
+    width: 10rem;
+    height: 10rem;
+    filter: drop-shadow(2px 2px 5px var(--logo-shadow));
+}
+.links-container .link-box a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+}
+.links-container .link-box p {
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    font-size: 2rem;
+    letter-spacing: 1.5px;
+    color: var(--link-color);
+    height: 0;
+    transition: all ease-in-out 0.2s;
+    overflow: hidden;
+    opacity: 0;
+    max-height: 0rem;
+}
+
+.links-container .link-box:hover {
+    border-color: var(--link-accent);
+    box-shadow: 2px 2px 50px var(--link-accent);
+    background-color: var(--link-background);
+    transform: scale(1.05);
+}
+
+.links-container .link-box:hover p {
+    opacity: 1;
+    height: 200px;
+    max-height: 1.4rem;
+    padding: 1rem 2rem;
+}
+
+@media only screen and (max-width: 768px) {
+    .links-container .link-box{
+        border-color: var(--link-accent);
+        box-shadow: 2px 2px 50px var(--link-accent);
+        background-color: var(--link-background);
+    }
+    
+    .links-container .link-box p {
+        opacity: 1;
+        height: 200px;
+        max-height: 1.4rem;
+        padding: 1rem 2rem;
+    }
+}