diff options
Diffstat (limited to 'mockup/style.css')
-rw-r--r-- | mockup/style.css | 344 |
1 files changed, 0 insertions, 344 deletions
diff --git a/mockup/style.css b/mockup/style.css deleted file mode 100644 index 57c4e97..0000000 --- a/mockup/style.css +++ /dev/null @@ -1,344 +0,0 @@ -body { - background-color: #80a7e3; - color: #311f20; -} - -.page { - padding: 6vw; - display: flex; - flex-direction: column; -} - -img { - max-width: 100%; - border: 4px solid #311f20; -} - -.label, -.label * { - display: inline; - padding: 0; - border-radius: 0; - border: 0; - margin: 0 0.1em; - background-color: #0000; -} - -header { - display: flex; - align-items: end; - flex-wrap: wrap; -} - -header > #stream, -header > #scrobble { - flex: 0 1 auto; -} - -#stream { - background-color: #b52f6a; - max-width: 100%; - width: 550px; - aspect-ratio: 550/350; -} - -.panel { - margin: 2vw; - border: 4px solid #311f20; - padding: 2rem 4rem; - position: relative; - pointer-events: all; -} - -header, main, body { - pointer-events: none; -} - -#title { - z-index: 10; - display: inline-block; - font-family: kaerukaeru; - font-size: 2em; - padding: 0rem 4rem; - background-color: #d16a84; -} - -#scrobble { - background-color: #eb743b; - border-radius: 0; - color: #353070; -} - -iframe { - margin: 0; - padding: 0; -} - -ul { - list-style-type: none; - margin: rem 0; - padding: 0; -} - -a { - text-decoration: none; - color: #edc953; - background-color: #311f20; - padding: 0.5em; - border-radius: 2em; - display: inline-block; - margin: 0.5em; -} - -a:hover { - font-style: italic; -} - -a.active { - background-color: #edc953; - color: #311f20; -} - -nav { - padding: 1rem 4rem; - background-color: #5faf87; - z-index: -1; -} - -nav:hover { - z-index: 1; -} - -ul#nav { - display: flex; - justify-content: start; - flex-wrap: wrap; - gap: 0.2em; - font-size: 1.1rem; -} - -#nav img { - height: 1.1rem; - width: 1.1rem; -} - -#blog-list { - width: 100%; -} - -.blog-entry { - display: flex; - justify-content: space-between; - background-color: #0000; - border-radius: 0; - padding: 0; - margin: 0; - font-size: 1.1rem; -} - -#skinnyverse { - font-family: CherryBomb; - color: #e8c6e6; - border-color: #bf42a0; - background-color: #28446c; - flex: 1 1 15rem; - z-index: -1; -} - -#latest-skweets { - background-color: #0000; - padding: 0; - margin: 0; - border-radius: 0; - color: #bf42a0; -} - -#blogs { - z-index: -1; - background-color: #7f99e6; -} - -#footer { - z-index: -1; - background-color: #e8d2c5; -} - -#footer > a { - border-radius: 0; - padding: 0; - background-color: #0000; -} - -aside { - flex: 1 1 30rem; -} - -#skinnyverse:hover, -#blogs:hover, -#footer:hover { - z-index: 10; -} - -.post { - display: flex; - gap: 2em; - margin: 2em 0; -} - -.post h4, h5 { - margin: 0; -} - -.post > .profile { - border: 4px solid #bf42a0; - width: 48px; - height: 48px; -} - -.post-content { - flex: 1 1 auto; -} - -.post > .post-content > div { - display: flex; - justify-content: space-between; -} - -.post > .post-content > .gallery { - display: flex; - max-width: 100%; - gap: 1em; -} - -.post > .post-content > .gallery > img { - border: 4px solid #bf42a0; - flex: 1 1 auto; - width: 10px; -} - -.branch { - border: none; - width: 100vw; - position: absolute; - pointer-events: none; -} - -main { - display: flex; - flex-wrap: wrap; - align-items: flex-start; -} - -.content { - flex: 12 1 0; - min-width: 50vw; - z-index: 3; - overflow-wrap: break-word; -} - -.content:hover { - z-index: 10; -} - -.p-name { - display: none; -} - -.info { - background-color: #d1a2e7; -} - -.info:hover { - z-index: 10; -} - -#branch6 { - top: 200vw; - -webkit-transform: scaleX(-1); - transform: scaleX(-1); - pointer-events: none; -} - -#branch2 { - top: 60vw; - - z-index: -2; - pointer-events: none; -} - -#branch3 { - top: 100vw; - z-index: -2; - pointer-events: none; -} - -#branch4 { - top: 270vw; - -webkit-transform: scaleX(-1); - transform: scaleX(-1); - z-index: 0; - pointer-events: none; -} - -#branch5 { - top: 0vw; - pointer-events: none; -} - -#branch1 { - top: 0vw; - -webkit-transform: scaleX(-1); - transform: scaleX(-1); - z-index: -1; - pointer-events: none; -} - -#branch7 { - top: 180vw; - pointer-events: none; -} - -#branch8 { - top: 260vw; - pointer-events: none; -} - -#branch9 { - top: 50vw; - -webkit-transform: scaleX(-1); - transform: scaleX(-1); - z-index: 4; - pointer-events: none; -} - -#branch10 { - top: 100vw; - pointer-events: none; -} - -#branch11 { - top: 145vw; - -webkit-transform: scaleX(-1); - transform: scaleX(-1); - pointer-events: none; -} - -#branch12 { - top: 180vw; - pointer-events: none; - z-index: 4; -} - -#branch13 { - top: 15vw; - z-index: -3; - pointer-events: none; -} - -#branch14 { - top: 105vw; - -webkit-transform: scaleX(-1); - transform: scaleX(-1); - z-index: 4; - pointer-events: none; -} |