make mockup

2 files changed, 344 insertions, 0 deletions

diff --git a/mockup/style.css b/mockup/style.css
new file mode 100644
index 0000000..57c4e97
--- /dev/null
+++ b/mockup/style.css
@@ -0,0 +1,344 @@
+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;
+}
diff --git a/mockup/style.css~ b/mockup/style.css~
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/mockup/style.css~