Add styling

3 years ago · 9ea7522655
parent e084a92d16
commit 9ea7522655
3 changed files with 58 additions and 9 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,2 @@
 freefont*
+article*
--- a/index.css
+++ b/index.css
@ -3,6 +3,21 @@
  src: url("assets/FreeMono.woff") format('woff');
 }

+.font-menu {
+  font-size: 2em;
+}
+
+.content {
+    padding: 20px;
+}
+
+.border-box {
+  display: flex;
+  flex-direction: column;
+  border-top: 2px solid #d7d3d3;
+  border-right: none;
+}
+
 .link {
  color: black;
  padding: 15px;
@ -11,9 +26,10 @@

 .sidebox {
  display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  flex-direction: column;
+  width: 100%;
  height: 100%;
-  font-size: 2em;
  font-family: FreeMono;
 }

@ -22,6 +38,31 @@
  flex-direction: column;
  justify-content: center;
  align-content: center;
-  height: 100%;
-  text-align: right;
+  text-align: center;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+@media(min-width: 920px) {
+    .sidebox {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .list {
+        text-align: right;
+    }
+
+    .content {
+        padding: 50px;
+        padding-right: 0px;
+    }
+
+    .border-box {
+        border-top: none;
+        border-right: 2px solid #d7d3d3;
+    }
 }
--- a/index.html
+++ b/index.html
@ -3,10 +3,17 @@
 </head>
 <body>
  <div class="sidebox">
-    <div class="list">
-      <a class="link" href="https://github.com/jwuensche">🐙🐈 Github/jwuensche</a>
-      <a class="link" href="https://mastodon.social/web/accounts/843376">🐘 Mastodon/fredowald</a>
-      <a class="link" href="https://twitter.com/Fredowald">🐦 Twitter/fredowald</a>
+        <div class="content"></div>
+      <div class="list font-menu">
+      <div class="border-box">
+        <a class="link" href="https://github.com/jwuensche">🐙🐈 Github/jwuensche</a>
+        <a class="link" href="https://mastodon.social/web/accounts/843376">🐘 Mastodon/fredowald</a>
+        <a class="link" href="https://twitter.com/Fredowald">🐦 Twitter/fredowald</a>
+        <a class="link" href="mailto:johannes.wuensche97@gmail.com"> 📫 Mail/jwuensche</a>
+        <p>
+            About me: I'm a currently a computer science student in Magdeburg, Germany with experience in Rust 🦀, TypeScript, C, Go, Docker 🐳 and Bash.
+        </p>
+      </div>
+      </div>
    </div>
-  </div>
 </body>