Website

Check-in [6de38c26fd]
Login
Overview
Comment:Huge improvements to front page style.
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 6de38c26fd2d7f471c21f2a41ff6b1ae7e84db107af14cccddb4e31c14e85cd8
User & Date: robin.hansen on 2020-11-15 11:32:40
Other Links: manifest | tags
Context
2020-11-15
11:47
Minor improvements to text in playground lessons. check-in: d6befbcefb user: robin.hansen tags: trunk
11:32
Huge improvements to front page style. check-in: 6de38c26fd user: robin.hansen tags: trunk
07:14
Fix deploy script. check-in: 823b4fee65 user: robin.hansen tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Modified src/index.css from [f87364f50d] to [06c39f9b41].

1
2
3
4
5
6
7

8
9
10
11
12
13





















14
15
16
17
18
19
20
..
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





















* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;

}

a {
    text-decoration: none;
    color: #fcfcfd;
}






















header {
    color: #fcfcfd;
    background: #36af6d;
}

#header-content {
................................................................................
    margin: 0 auto;
    padding-bottom: 24px;
}

#header-content nav {
    display: flex;
    justify-content: space-between;
    padding-left: 12px;
    padding-right: 12px;
}

#header-content nav h1 {
    margin: 0;
}









#header-content nav ul {
    display: flex;
    align-items: flex-end;

    list-style: none;
    margin: 0;
    padding: 0;
}

#header-content nav ul li {
    margin-right: 6px;
}









#selling-points {
    width: 990px;
    margin: 0 auto;

}

#selling-points .content {
    display: flex;
    justify-content: space-between;
}




























>






>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







<
<





>
>
>
>
>
>
>
>













>
>
>
>
>
>
>
>




>






>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
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
..
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-size: 20px;
}

a {
    text-decoration: none;
    color: #fcfcfd;
}

a:hover {
    text-decoration: underline;
}

a.link-button {
    display: inline-block;
    background: #36af6d;
    color: #fcfcfc;
    border: 1px solid;
    border-radius: .3rem;
    border-color: #fcfcfc;
    padding: .8rem 2rem;
    font-size: 1.25rem;
}

a.link-button:hover {
    color: #ffffff;
    background: #38b772;
    text-decoration: none;
}

header {
    color: #fcfcfd;
    background: #36af6d;
}

#header-content {
................................................................................
    margin: 0 auto;
    padding-bottom: 24px;
}

#header-content nav {
    display: flex;
    justify-content: space-between;


}

#header-content nav h1 {
    margin: 0;
}

#header-content nav h1 .big {
    font-size: 1.25em;
}

#header-content nav h1 .small {
    font-size: .6em;
}

#header-content nav ul {
    display: flex;
    align-items: flex-end;

    list-style: none;
    margin: 0;
    padding: 0;
}

#header-content nav ul li {
    margin-right: 6px;
}

#header-content nav ul li a {
    color: rgba(255, 255, 255, .85);
}

#header-content nav ul li a:hover {
    color: #ffffff;
}

#selling-points {
    width: 990px;
    margin: 0 auto;
    padding-bottom: 200px;
}

#selling-points .content {
    display: flex;
    justify-content: space-between;
}

.shell {
    padding: 8px;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    white-space: pre-line;
    font-family: monospace;
}

#selling-points .content .shell {
    width: 400px;
}

#selling-points .content img {
    width: 400px;
}

#selling-points a {
    color: #36af6d;
}

Modified src/index.html from [6f0fb4fc91] to [337eabb3f2].

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
..
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
81
82
83
84
85
86

87
88
89
90
91
92
93
94
95
96
97
98
99
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <header>
            <div id="header-content">
                <nav>
                    <h1>
                        <span>Play</span>
                        <span class="small">v0.1</span>
                    </h1>

                    <ul>
                        <li><a alt="Get caught up on the latest news" href="https://fossils.play-lang.dev/compiler/timeline?udc=1&ss=m&n=10&y=e&advm=0">News</a></li>
                        <li><a alt="" href="https://fossils.play-lang.dev/community">Forum</a></li>
                        <li><a alt="" href="https://fossils.play-lang.dev">Source</a></li>
                    </ul>
                </nav>

                <hr />

                <h2>An easy to learn language, for making reliable applications</h2>

                <ul>
                    <li>Minimal syntax makes the language easy to learn and get started with.</li>
                    <li>Strong static typing let's you know when you've made a mistake.</li>
                    <li>There are no side effects, making it easier to reason about your code.</li>
                    <li>Compiles to web assembly, so it can run in- and outside of a browser.</li>
                </ul>

                <a class="link-button" alt="Try the Play language" href="/playground.html">
                    Learn
                </a>
            </div>
        </header>
................................................................................
        <section id="selling-points">
            <article>
                <h3>Minimal, yet flexible, syntax</h3>

                <div class="content">
                    <p>bladiblabla</p>

                    <code>




                        def: increment
                        : 1 +



                    </code>
                </div>
            </article>

            <article>
                <h3>Good error messages</h3>

                <div class="content">
                    <p>bladiblabla</p>

                    <code>


                        def: increment


                        : 1 +
                    </code>




                </div>
            </article>

            <article>
                <h3>Portable</h3>

                <div class="content">
                    <p>bladiblabla</p>

                    <code>
                        def: increment
                        : 1 +
                    </code>
                </div>
            </article>

            <article>
                <h3>In Alpha</h3>

                <div class="content">
                    <p>bladiblabla</p>


                    <code>
                        def: increment
                        : 1 +
                    </code>
                </div>
            </article>
        </section>

        <footer>
            <p>Sounds good? Why don't you <a alt="Try the Play language" href="/playground.html">try it out?</a></p>
        </footer>
    </body>
</html>







|
|









<
<



|
|
|
|







 







|
>
>
>
>
|

>
>
>





|




|
>
>
|
>
>
|
<
>
>
>
>









|
<
<
<






<
|

>
|
<
<
|
<
|

<
<
<
<


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
..
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
81
82
83
84
85
86



87
88
89
90
91
92

93
94
95
96


97

98
99




100
101
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <header>
            <div id="header-content">
                <nav>
                    <h1>
                        <span class="big">Play</span>
                        <span class="small">alpha 1</span>
                    </h1>

                    <ul>
                        <li><a alt="Get caught up on the latest news" href="https://fossils.play-lang.dev/compiler/timeline?udc=1&ss=m&n=10&y=e&advm=0">News</a></li>
                        <li><a alt="" href="https://fossils.play-lang.dev/community">Forum</a></li>
                        <li><a alt="" href="https://fossils.play-lang.dev">Source</a></li>
                    </ul>
                </nav>



                <h2>An easy to learn language, for making reliable applications</h2>

                <ul>
                    <li>Minimal syntax makes the language easy to learn and get started with</li>
                    <li>Strong static typing let's you know when you've made a mistake</li>
                    <li>There are no side effects, making it easier to reason about your code</li>
                    <li>Compiles to web assembly, so it can run in- and outside of a browser</li>
                </ul>

                <a class="link-button" alt="Try the Play language" href="/playground.html">
                    Learn
                </a>
            </div>
        </header>
................................................................................
        <section id="selling-points">
            <article>
                <h3>Minimal, yet flexible, syntax</h3>

                <div class="content">
                    <p>bladiblabla</p>

                    <code class="shell">
                        def: main
                        : 1 inc
                          2 =

                        def: inc
                        : 1 +

                        def: dec
                        : 1 -
                    </code>
                </div>
            </article>

            <article>
                <h3>Great error messages</h3>

                <div class="content">
                    <p>bladiblabla</p>

                    <div class="shell">
                        Compilation failed:

                        2 | def: main
                        3 | type: -- Int
                        4 | entry: true
                        5 | : 1 2


                        The type of 'main' is specified to be  -- Int.
                        However, it seems that the actual type is:  -- Int Int
                    </div>
                </div>
            </article>

            <article>
                <h3>Portable</h3>

                <div class="content">
                    <p>bladiblabla</p>

                    <img alt="Web assembly logo" src="wasm_logo.svg" />



                </div>
            </article>

            <article>
                <h3>In Alpha</h3>


                <p>bladiblabla</p>

                <a alt="Read the roadmap" href="https://fossils.play-lang.dev/compiler/wiki?name=roadmap">
                    read the roadmap


                </a>

            </article> 
        </section>




    </body>
</html>

Added src/wasm_logo.svg version [086cee2dc1].







































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
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
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.69 157.03">
  <defs>
    <style>
      .cls-1 {
        fill: #393939;
      }

      .cls-2 {
        fill: #654ff0;
      }
    </style>
  </defs>
  <title>web-assembly-logo</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Notch_-_Purple" data-name="Notch - Purple">
      <g>
        <path class="cls-1" d="M27,156.68H22.41l-4.34-15.24q-.28-1-.7-2.88t-.51-2.61q-.18,1.12-.57,2.9t-.66,2.66l-4.23,15.17H6.87l-3.3-12.8L.21,131.12H4.48L8.13,146a64.24,64.24,0,0,1,1.22,6.33q.19-1.49.58-3.32t.7-3l4.16-14.93h4.14l4.27,15a56.12,56.12,0,0,1,1.29,6.22A45.58,45.58,0,0,1,25.75,146l3.64-14.86h4.23Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M54.91,156.68H40.46V131.12H54.91v3.53H44.63v7h9.63v3.5H44.63v8H54.91Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M63.66,131.12h7.59q5.28,0,7.63,1.54a5.39,5.39,0,0,1,2.35,4.86,5.89,5.89,0,0,1-1.15,3.72,5.16,5.16,0,0,1-3.32,1.87v.17a6.6,6.6,0,0,1,4,2,6.06,6.06,0,0,1,1.27,4,6.56,6.56,0,0,1-2.4,5.39,10.34,10.34,0,0,1-6.69,1.95H63.66Zm4.18,10.56h4a6.88,6.88,0,0,0,3.83-.83A3.18,3.18,0,0,0,76.89,138a2.83,2.83,0,0,0-1.3-2.6,8.14,8.14,0,0,0-4.13-.8H67.84Zm0,3.39v8.09h4.44a6.54,6.54,0,0,0,4-1A3.71,3.71,0,0,0,77.57,149a3.37,3.37,0,0,0-1.36-3,7.22,7.22,0,0,0-4.14-1Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M108.87,156.68l-3.18-8.13H95.44l-3.15,8.13h-3L99.39,131h2.5l10.05,25.66Zm-4.11-10.8-3-7.92q-.58-1.5-1.19-3.69A33.24,33.24,0,0,1,99.5,138l-3,7.92Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M135.25,149.88a6.27,6.27,0,0,1-2.45,5.26,10.61,10.61,0,0,1-6.64,1.89,16.64,16.64,0,0,1-7-1.17V153a18.33,18.33,0,0,0,3.43,1,18,18,0,0,0,3.67.38,7.41,7.41,0,0,0,4.48-1.13,3.7,3.7,0,0,0,1.5-3.14,4,4,0,0,0-.53-2.18,5,5,0,0,0-1.78-1.57,24.92,24.92,0,0,0-3.8-1.62,12.14,12.14,0,0,1-5.1-3,6.68,6.68,0,0,1-1.53-4.56,5.67,5.67,0,0,1,2.22-4.7,9.23,9.23,0,0,1,5.87-1.75,17.31,17.31,0,0,1,7,1.4l-.93,2.59a15.84,15.84,0,0,0-6.15-1.33,6,6,0,0,0-3.69,1,3.34,3.34,0,0,0-1.33,2.81,4.31,4.31,0,0,0,.49,2.18,4.6,4.6,0,0,0,1.65,1.56,20.48,20.48,0,0,0,3.56,1.57,14.08,14.08,0,0,1,5.53,3.08A6.05,6.05,0,0,1,135.25,149.88Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M160.27,149.88a6.27,6.27,0,0,1-2.45,5.26,10.61,10.61,0,0,1-6.64,1.89,16.64,16.64,0,0,1-7-1.17V153a18.33,18.33,0,0,0,3.43,1,18,18,0,0,0,3.67.38,7.41,7.41,0,0,0,4.48-1.13,3.7,3.7,0,0,0,1.5-3.14,4,4,0,0,0-.53-2.18,5,5,0,0,0-1.78-1.57,24.92,24.92,0,0,0-3.8-1.62,12.14,12.14,0,0,1-5.1-3,6.68,6.68,0,0,1-1.53-4.56,5.67,5.67,0,0,1,2.22-4.7,9.23,9.23,0,0,1,5.87-1.75,17.31,17.31,0,0,1,7,1.4l-.93,2.59a15.84,15.84,0,0,0-6.15-1.33,6,6,0,0,0-3.69,1,3.34,3.34,0,0,0-1.33,2.81,4.31,4.31,0,0,0,.49,2.18,4.6,4.6,0,0,0,1.65,1.56,20.48,20.48,0,0,0,3.56,1.57,14.08,14.08,0,0,1,5.53,3.08A6.05,6.05,0,0,1,160.27,149.88Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M185.11,156.68H170.87V131.12h14.25v2.64H173.84V142h10.59v2.62H173.84V154h11.28Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M207.46,156.68,198.79,134h-.14q.24,2.69.25,6.4v16.26h-2.74V131.12h4.48l8.09,21.08h.14L217,131.12h4.44v25.56h-3V140.21q0-2.83.25-6.15h-.14l-8.74,22.62Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M233.84,131.12h7.22q5.09,0,7.36,1.52a5.37,5.37,0,0,1,2.27,4.81,5.55,5.55,0,0,1-1.27,3.75,6.1,6.1,0,0,1-3.7,1.91v.17q5.82,1,5.82,6.12a6.57,6.57,0,0,1-2.32,5.35,9.86,9.86,0,0,1-6.48,1.92h-8.92Zm3,10.94h4.89a8,8,0,0,0,4.53-1,3.81,3.81,0,0,0,1.38-3.33,3.37,3.37,0,0,0-1.54-3.1,9.61,9.61,0,0,0-4.9-1h-4.37Zm0,2.52v9.56h5.33a7.59,7.59,0,0,0,4.66-1.2,4.42,4.42,0,0,0,1.56-3.75,4,4,0,0,0-1.6-3.5,8.55,8.55,0,0,0-4.87-1.12Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M262.41,156.68V131.12h3V154h11.28v2.69Z" transform="translate(-0.21)"/>
        <path class="cls-1" d="M292.86,143.9l6.82-12.78h3.22l-8.53,15.64v9.91h-3v-9.77l-8.51-15.79h3.25Z" transform="translate(-0.21)"/>
      </g>
      <g id="icon">
        <path class="cls-2" d="M163.76,0c0,.19,0,.38,0,.58a12.34,12.34,0,0,1-24.68,0c0-.2,0-.39,0-.58H97.64V107.62H205.26V0ZM149,96.1l-5.24-25.93h-.09L138,96.1h-7.22L122.6,58h7.13l4.88,25.93h.09L140.58,58h6.67l5.28,26.25h.09L158.19,58h7L156.1,96.1Zm39.26,0-2.43-8.48H173l-1.87,8.48H164L173.22,58h11.25l11.21,38.1Z" transform="translate(-0.21)"/>
        <polygon class="cls-2" points="177.3 67.39 174.19 81.37 183.87 81.37 180.3 67.39 177.3 67.39"/>
      </g>
    </g>
  </g>
</svg>