InnerSourceLearningPath/workbook/workbook-image-template.html at main · InnerSourceCommons/InnerSourceLearningPath · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<!--
This file is for developer reference only! It is not displayed in the public facing website.
Modify this file until you're happy with the end result in your browser.
Then take a screenshot of the page and add the image to scource control.

Remember to:
  - Preserve current image dimensions 1024 x 576
  - If the dimensions cannot be preserved, maintain 16:9 aspect ratio
  - Use the same font face and theme colors as the website
-->
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro&family=PT+Sans&display=swap" rel="stylesheet">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;700&family=PT+Sans:wght@400;700&display=swap');
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-family: 'PT Sans';
        font-size: 12px;
        color: white;
      }
      body {
        min-height: 576px;
        min-width: 1024px;
      }
      .workbook-image-container {
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/A_laptop_and_a_notebook_on_the_wooden_table_%28Pixabay%29.jpg/1024px-A_laptop_and_a_notebook_on_the_wooden_table_%28Pixabay%29.jpg');
        background-repeat: no-repeat;
        display: flex;
        flex-direction: row;
        height: 576px;
        width: 1024px;
      }
      .color-field {
        border-bottom: 576px solid #8BAB84;
        border-right: 180px solid transparent;
        position: relative;
        width: 512px;
        z-index: 0;
      }
      .isc-logo {
        margin: 2rem 0 0 2rem;
        position: absolute;
        z-index: 1;
      }
      .isc-logo img {
        width: 256px;
      }
      .module-name {
        font-family: 'Source Serif Pro', serif;
        font-size: 5rem;
        margin: 26rem 0 0 2rem;
        position: absolute;
        z-index: 1;
      }
      .workbook-title {
        font-family: 'PT Sans', sans-serif;
        font-size: 2.2rem;
        position: absolute;
        margin: 32rem 0 0 2rem;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="workbook-image-container">
      <div class="color-field"></div>
      <span class="isc-logo"><img src="https://innersourcecommons.org/images/logo.png" alt="InnerSource Commons"></span>
      <span class="module-name">Learning Path</span>
      <span class="workbook-title">The Trusted Committer Workbook</span>
    </div>
  </body>
</html>