HW1: home page almost done

hw1/claudio_maggioni/css/main.css

@@ -0,0 +1,149 @@
+/* vim: set ts=2 sw=2 tw=80 et: */
+
+body {
+  font-family: 'Fira Sans', sans-serif;
+  background: #ffe;
+  width: 100%;
+  margin: 0;
+  min-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+}
+
+header, footer {
+  padding: 1rem 0;
+  width: 100%;
+  text-align: center;
+  background: rgba(255,0,0,0.5);
+}
+
+@media screen and (min-width: 769px) {
+  main {
+    display: flex;
+    flex-direction: row;
+  }
+
+  nav, aside {
+    flex: 0 1 10rem;
+  }
+
+  article {
+    flex: 1 2;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  article {
+    flex-grow: 1;
+  }
+}
+
+main {
+  flex-grow: 1;
+}
+
+nav, aside {
+  background: rgba(200,100,0,0.3);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: .5rem;
+  text-align: center;
+}
+
+figure {
+  background: rgba(0,0,0,0.05);
+}
+
+figcaption {
+  text-align: center;
+  padding: .5rem;
+}
+
+audio {
+  width: 100%;
+}
+
+nav ul, aside ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+nav ul li, aside ul li {
+  padding: .5rem;
+  text-align: center;
+  background: rgba(0,0,0,.1);
+  text-transform: uppercase;
+}
+
+nav ul li:nth-child(even), aside ul li:nth-child(even) {
+  background: rgba(0,0,0,.05);
+}
+
+a {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+a:link {
+  color: #36c;
+  transition: color 200ms;
+}
+
+a:visited {
+  color: #50c;
+  transition: color 200ms;
+}
+
+/* FIXME: transition when loading page? */
+
+a:active {
+  color: #603;
+  transition: color 200ms;
+}
+
+article p {
+  text-align: justify;
+}
+
+article section {
+  padding: 1rem;
+}
+
+footer {
+  display: flex;
+  align-itemss: center;
+  flex-direction: row;
+}
+
+footer a {
+  padding: 0 .5rem;
+  display: block;
+  flex: 0 0 auto;
+}
+
+footer section {
+  padding: 0 .5rem;
+  font-size: 0.85rem;
+  flex: 1 1 auto;
+}
+
+footer section p {
+  margin: .25rem;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dt::after {
+  content: ":"
+}

hw1/claudio_maggioni/index.html

@@ -11,139 +11,7 @@
           rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap"
           rel="stylesheet">
-    <style>
+    <link href="css/main.css" rel="stylesheet">
-body {
-  font-family: 'Fira Sans', sans-serif;
-  background: #ffe;
-  width: 100%;
-  margin: 0;
-  min-height: 100vh;
-
-  display: flex;
-  flex-direction: column;
-}
-
-header, footer {
-  padding: 1rem 0;
-  width: 100%;
-  text-align: center;
-  background: rgba(0,0,0,0.1);
-}
-
-@media screen and (min-width: 769px) {
-  main {
-    display: flex;
-    flex-direction: row;
-  }
-
-  nav, aside {
-    flex: 0 1 10rem;
-  }
-
-  article {
-    flex: 1 2;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  main {
-    display: flex;
-    flex-direction: column;
-  }
-
-  article {
-    flex-grow: 1;
-  }
-}
-
-main {
-  flex-grow: 1;
-}
-
-nav, aside {
-  background: rgba(0,0,0,0.05);
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  padding: .5rem;
-  text-align: center;
-}
-
-figure {
-  background: rgba(0,0,0,0.05);
-}
-
-figcaption {
-  text-align: center;
-  padding: .5rem;
-}
-
-audio {
-  width: 100%;
-}
-
-nav ul, aside ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-nav ul li, aside ul li {
-  padding: .5rem;
-  text-align: center;
-  background: rgba(0,0,0,.1);
-  text-transform: uppercase;
-}
-
-nav ul li:nth-child(even), aside ul li:nth-child(even) {
-  background: rgba(0,0,0,.05);
-}
-
-a {
-  text-decoration: none;
-  font-weight: bold;
-}
-
-a:link {
-  color: #36c;
-  transition: color 200ms;
-}
-
-a:visited {
-  color: #50c;
-  transition: color 200ms;
-}
-
-/* FIXME: transition when loading page? */
-
-a:active {
-  color: #603;
-  transition: color 200ms;
-}
-
-footer {
-  display: flex;
-  align-itemss: center;
-  flex-direction: row;
-}
-
-footer a {
-  padding: 0 .5rem;
-  display: block;
-  flex: 0 0 auto;
-}
-
-footer section {
-  padding: 0 .5rem;
-  font-size: 0.85rem;
-  flex: 1 1 auto;
-}
-
-footer section p {
-  margin: .25rem;
-}
-    </style>
   </head>
   <body>
     <header>
@@ -158,34 +26,52 @@ footer section p {
         </ul>
       </nav>
       <article>
-        <h1>Website</h1>
+        <section>
-        text<br>
+          <h2>About myself</h2>
-        text<br>
+          <p>My name is Claudio Maggioni, I am 20 years old and I am a second year student of
-        text<br>
+          <em>USI</em> (<em>Universita della Svizzera Italiana</em>).
-        text<br>
+          I am from Montevecchia, a small village in Italy located approximately
-        text<br>
+          between Milan and Como as the crow flies.
-        text<br>
+          </p>
-        text<br>
+          <p>This website is the first graded homework for <em>Software Atelier 3</em> by
-        text<br>
+          <em>Cesare Pautasso</em>.</p>
-        text<br>
+        </section>
-        text<br>
+        <section>
-        text<br>
+          <h2>Hobbies</h2>
-        <h2>Media</h2>
+          <p>I have several interests, and I am going to list some of them here:</p>
-        <h3>Suggested MP3</h3>
+          <dl>
-        <figure>
+            <dt>Archery</dt>
-          <figcaption>Depeche Mode - Just Can't Get Enough<br>(MIDI version, from
+            <dd>I am doing archery from 7 years, shooting with an olympic recurve bow.
-            <a href="http://www.themostamazingwebsiteontheinternet.com/"><em>
+            I am a member of <em>Arcieri Burarco</em>, an archery club in Vimercate,
-                The Most Amazing Website On The Internet</em></a>)</figcaption>
+            near where I live in italy. I am also planning to join Lugano's archery
-          <audio controls loop>
+            club (<em>ATAL</em>) as a guest.</dd>
-            <source src="media/music.mp3" type="audio/mp3"/>
+
-          </audio>
+            <dt>Hiking</dt>
-        </figure>
+            <dd>Since this summer, I started hiking where I live in Italy. I find it relaxing
-        <h3>Suggested Video</h3>
+            and enjoyable, since it is a form of excercise that one can do for free</dd>
-        <iframe width="560" height="315"
+          </dl>
-                            src="https://www.youtube.com/embed/SXKbm3oLW6I?start=44"
+        </section>
-                            frameborder="0"
+        <section>
-                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          <h2>Media</h2>
-                            allowfullscreen></iframe>
+          <h3>Suggested MP3</h3>
+          <figure>
+            <figcaption>Depeche Mode - Just Can't Get Enough<br>(MIDI version, from
+              <a href="http://www.themostamazingwebsiteontheinternet.com/"><em>
+                  The Most Amazing Website On The Internet</em></a>)</figcaption>
+            <audio controls loop>
+              <source src="media/music.mp3" type="audio/mp3"/>
+            </audio>
+          </figure>
+          <h3>Suggested Video</h3>
+          <figure>
+            <figcaption>Least Used Waterloo - Geoff Marshall</figcaption>
+            <iframe width="100%"
+                    height="300"
+                    src="https://www.youtube.com/embed/T5T-5HWxhhQ"
+                    frameborder="0"
+                    allowfullscreen></iframe>
+          </figure>
+        </section>
       </article>
       <aside>
         <ul>
@@ -199,7 +85,9 @@ footer section p {
             xmlns:vcard="http://www.w3.org/2001/vcard-rdf/3.0#">
       <a rel="license"
          href="http://creativecommons.org/publicdomain/zero/1.0/">
-        <img src="http://i.creativecommons.org/p/zero/1.0/88x31.png" alt="CC0" />
+        <img width="88" height="31"
+             src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
+             alt="CC0" />
       </a>
       <section>
         <p>To the extent possible under law,