Browse Source

Removed variables from v2

main
Benjamin Bädorf 10 months ago
parent
commit
afbdb1adbc
Signed by: b12f GPG Key ID: 4406E80E13CD656C
  1. 31
      v2/index.html
  2. 103
      v2/styles.css
  3. BIN
      v3/hero.png
  4. 73
      v3/index.html
  5. 48
      v3/reset.css
  6. 19
      v3/script.js
  7. 111
      v3/styles.css

31
v2/index.html

@ -6,67 +6,76 @@
<link rel="stylesheet" href="./styles.css" />
<script type="application/javascript" src="./script.js"></script>
</head>
<body class="mds-typo-copy">
<body>
<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>
<h1 class="mds-hero-title">Maxies Design Methoden Sammlung</h1>
<section class="mds-design-method mds-design-method_design-sprint">
<h2 class="mds-typo-head-section">Design Sprints</h2>
<h2 class="mds-design-method__title">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"
class="mds-design-method__toggle"
>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"
class="mds-design-method__toggle"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_personas">
<h2 class="mds-typo-head-section">Personas</h2>
<h2 class="mds-design-method__title">Personas</h2>
<p class="mds-design-method__short-description">
Personas are finctional characters and represent&hellip;
<button
onclick="showLongText('personas')"
class="mds-typo-link"
class="mds-design-method__toggle"
>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"
class="mds-design-method__toggle"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_interviews">
<h2 class="mds-typo-head-section">Interviews</h2>
<h2 class="mds-design-method__title">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"
class="mds-design-method__toggle"
>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"
class="mds-design-method__toggle"
>Show less</button>
</p>
</section>
</main>
</body>

103
v2/styles.css

@ -5,73 +5,17 @@
}
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);
background-color: #151515;
font-size: 16px;
line-height: 20px;
color: #fff
}
.mds-typo-link:hover {
color: var(--mds-col-primary);
}
.mds-typo-link:active {
color: var(--mds-col-display);
}
/******* Blocks *******/
@ -79,7 +23,7 @@ body {
width: 100%;
max-width: 500px;
margin: 0 auto;
margin-bottom: var(--mds-size-xxl);
margin-bottom: 90px;
}
.mds-hero-image {
@ -87,8 +31,22 @@ body {
margin-bottom: -90px;
}
.mds-hero-title {
font-size: 90px;
line-height: 90px;
font-weight: 700;
color: #fff;
}
.mds-design-method {
margin-top: var(--mds-size-xl);
margin-top: 60px;
}
.mds-design-method__title {
font-size: 16px;
line-height: 20px;
font-weight: 700;
color: #f202f9;
}
.mds-design-method__long-description {
@ -104,8 +62,25 @@ body {
}
.mds-design-method > p {
margin-top: var(--mds-size-m);
margin-top: 30px;
}
.mds-design-method__toggle {
display: inline;
background: transparent;
margin: 0;
padding: 0;
color: inherit;
border: 0;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
}
.mds-design-method__toggle:hover {
color: #f202f9;
}
.mds-design-method__read-more {
.mds-design-method__toggle:active {
color: #fff;
}

BIN
v3/hero.png

Binary file not shown.

After

Width: 832  |  Height: 623  |  Size: 84 KiB

73
v3/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>

48
v3/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;
}

19
v3/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');
}

111
v3/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 {
}
Loading…
Cancel
Save