Initial commit

9 months ago · 009e69353b
8 changed files with 251 additions and 0 deletions
--- a/v1/hero.png
+++ b/v1/hero.png
--- a/v1/index.html
+++ b/v1/index.html
--- a/v1/styles.css
+++ b/v1/styles.css
--- a/v2/hero.png
+++ b/v2/hero.png
--- a/v2/index.html
+++ b/v2/index.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Maxies Design Methoden Sammlung</title>
+    <link rel="stylesheet" href="./reset.css" />
+    <link rel="stylesheet" href="./styles.css" />
+    <script type="application/javascript" src="./script.js"></script>
+  </head>
+  <body class="mds-typo-copy">
+    <main class="mds-content">
+      <img
+        class="mds-hero-image"
+        alt="A woman sits on the floor and is working on a laptop."
+        src="./hero.png"
+      />
+      <h1 class="mds-hero-title mds-typo-head-hero">Maxies Design Methoden Sammlung</h1>
+
+      <section class="mds-design-method mds-design-method_design-sprint">
+        <h2 class="mds-typo-head-section">Design Sprints</h2>
+        <p class="mds-design-method__short-description">
+          Sprints are a great way of kicking off a product or&hellip;
+          <button
+            onclick="showLongText('design-sprint')"
+            class="mds-typo-link"
+          >Read more</button>
+        </p>
+        <p class="mds-design-method__long-description">
+          Sprints are a great way of kicking off a product or improve an existing one. They focus on getting to tested ideas as quick as possible. A sprint is a 5-day process, that lets teams collaborate in many sub-exercises. Read more on design sprints here
+          <button
+            onclick="hideLongText('design-sprint')"
+            class="mds-typo-link"
+          >Show less</button>
+        </p>
+      </section>
+
+      <section class="mds-design-method mds-design-method_personas">
+        <h2 class="mds-typo-head-section">Personas</h2>
+        <p class="mds-design-method__short-description">
+          Personas are finctional characters and represent&hellip;
+          <button
+            onclick="showLongText('personas')"
+            class="mds-typo-link"
+          >Read more</button>
+        </p>
+        <p class="mds-design-method__long-description">
+          Personas are finctional characters and represent your users.
+          <button
+            onclick="hideLongText('personas')"
+            class="mds-typo-link"
+          >Show less</button>
+        </p>
+      </section>
+
+      <section class="mds-design-method mds-design-method_interviews">
+        <h2 class="mds-typo-head-section">Interviews</h2>
+        <p class="mds-design-method__short-description">
+          Interviews really are the crux of the Inspiration
+          <button
+            onclick="showLongText('interviews')"
+            class="mds-typo-link"
+          >Read more</button>
+        </p>
+        <p class="mds-design-method__long-description">
+          Interviews really are the crux of the Inspiration phase. Human-centered design is about getting to the people you’re designing for and hearing from them in their own words. Interviews can be a bit daunting, but by following these steps below you’ll unlock all kinds of insights and understanding that you’ll never get sitting behind your desk. Whenever possible, conduct your interviews in the interviewee’s space. You can learn so much about a person’s mindset, behavior, and lifestyle by talking with them where they live or work.
+          <button
+            onclick="hideLongText('interviews')"
+            class="mds-typo-link"
+          >Show less</button>
+        </p>
+      </section>
+    </main>
+  </body>
+</html>
--- a/v2/reset.css
+++ b/v2/reset.css
@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
--- a/v2/script.js
+++ b/v2/script.js
@ -0,0 +1,19 @@
+function showLongText(name) {
+  const element = document.getElementsByClassName(`mds-design-method_${name}`)[0];
+
+  if (!element) {
+    return;
+  }
+
+  element.classList.add('mds-design-method_show-long');
+}
+
+function hideLongText(name) {
+  const element = document.getElementsByClassName(`mds-design-method_${name}`)[0];
+
+  if (!element) {
+    return;
+  }
+
+  element.classList.remove('mds-design-method_show-long');
+}
--- a/v2/styles.css
+++ b/v2/styles.css
@ -0,0 +1,111 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  --mds-col-primary: #f202f9;
+  --mds-col-secondary: rgba(255, 255, 255, 0.5);
+  --mds-col-tertiary: rgba(255, 255, 255, 0.1);
+  --mds-col-display: #fff;
+  --mds-col-background: #151515;
+
+  --mds-size-xxl: 90px;
+  --mds-size-xl: 60px;
+  --mds-size-l: 30px;
+  --mds-size-m: 20px;
+  --mds-size-s: 16px;
+
+  --mds-weight-regular: 400;
+  --mds-weight-bold: 700;
+
+  --mds-size-interactive: 44px;
+
+  font-family: 'Inter', sans-serif;
+}
+
+body {
+  min-height: 100vh;
+  background-color: var(--mds-col-background);
+}
+
+/******* Typography *******/
+
+.mds-typo-head-hero {
+  font-size: var(--mds-size-xxl);
+  line-height: var(--mds-size-xxl);
+  font-weight: var(--mds-weight-bold);
+  color: var(--mds-col-display);
+}
+
+.mds-typo-head-section {
+  font-size: var(--mds-size-s);
+  line-height: var(--mds-size-m);
+  font-weight: var(--mds-weight-bold);
+  color: var(--mds-col-primary);
+}
+
+.mds-typo-copy {
+  font-size: var(--mds-size-s);
+  line-height: var(--mds-size-m);
+  font-weight: var(--mds-weight-regular);
+  color: var(--mds-col-display);
+}
+
+.mds-typo-link {
+  display: inline;
+  background: transparent;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  border: 0;
+  cursor: pointer;
+
+  color: var(--mds-col-secondary);
+}
+
+.mds-typo-link:hover {
+  color: var(--mds-col-primary);
+}
+
+.mds-typo-link:active {
+  color: var(--mds-col-display);
+}
+
+/******* Blocks *******/
+
+.mds-content {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+  margin-bottom: var(--mds-size-xxl);
+}
+
+.mds-hero-image {
+  margin-left: -170px;
+  margin-bottom: -90px;
+}
+
+.mds-design-method {
+  margin-top: var(--mds-size-xl);
+}
+
+.mds-design-method__long-description {
+  display: none;
+}
+
+.mds-design-method_show-long .mds-design-method__long-description {
+  display: block;
+}
+
+.mds-design-method_show-long .mds-design-method__short-description {
+  display: none;
+}
+
+.mds-design-method > p {
+  margin-top: var(--mds-size-m);
+}
+
+.mds-design-method__read-more {
+}