Initial commit

.gitignore

@@ -0,0 +1 @@
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	"recommendations": [
+		"HTMLHint.vscode-htmlhint",
+		"streetsidesoftware.code-spell-checker",
+		"streetsidesoftware.code-spell-checker-catalan"
+	]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.detectIndentation": false,
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
+  "files.trimTrailingWhitespace": true,
+  "html.format.wrapLineLength": 0
+}

css/estil.css

@@ -0,0 +1,277 @@
+@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400;1,600&family=Roboto:ital,wght@0,300;0,500;0,700;0,900;1,300;1,500;1,700;1,900&display=swap');
+
+/* https://colorhunt.co/palette/1926553876bfe1aa74f3f0ca */
+
+:root {
+  --color-text: rgb(0, 59, 74);
+  --color-principal: rgb(25, 38, 85);
+  --color-secundari: rgb(56, 118, 191);
+  --color-terciari: rgb(225, 170, 116);
+  --color-quaternari: rgb(243, 240, 202);
+  --color-fons: #FAFAFA;
+  --imatge-pl-subject: 48px;
+  --imatge-pl: 16px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  font-family: 'Roboto', sans-serif;
+  color: var(--color-principal);
+  background-color: var(--color-secundari);
+  font-weight: 300;
+}
+
+header {
+  border-bottom: 2px solid var(--color-terciari);
+  top: 0;
+}
+
+footer {
+  border-top: 2px solid var(--color-terciari);
+  bottom: 0;
+}
+
+header,
+footer {
+  background-color: var(--color-principal);
+  width: 100%;
+  color: var(--color-quaternari);
+  padding: 16px 0;
+  position: fixed;
+  z-index: 9999;
+}
+
+main {
+  margin-bottom: 58px;
+  margin-top: 78px;
+  flex: 1;
+}
+
+a:link,
+a:visited,
+a:active {
+  text-decoration: none;
+  color: var(--color-secundari);
+}
+
+a:hover {
+  color: var(--color-terciari);
+}
+
+.container {
+  margin-left: 32px;
+  margin-right: 32px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+
+a.current {
+  color: var(--color-secundari) !important;
+}
+
+nav a:link,
+nav a:visited,
+nav a:focus {
+  color: var(--color-quaternari);
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+}
+
+nav a:hover {
+  color: var(--color-secundari) !important;
+}
+
+nav li:not(:last-child) {
+  border-right: 2px solid var(--color-quaternari);
+  padding-right: 8px;
+  margin-right: 6px;
+}
+
+.clear {
+  clear: both;
+}
+
+.clearfix {
+  overflow: auto;
+}
+
+.course {
+  background-color: var(--color-fons);
+  box-sizing: border-box;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 16px;
+  width: 100%;
+  margin: 16px 0;
+}
+
+.course-content {
+  background-color: var(--color-quaternari);
+  border-radius: 0 0 16px 16px;
+  border-bottom: 5px solid var(--color-principal);
+  font-weight: 500;
+  padding: 16px;
+}
+
+.dues-columnes {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+.dues-columnes a:link,
+.dues-columnes a:visited,
+.dues-columnes a:active {
+  font-weight: 300;
+  text-decoration: none;
+  color: var(--color-quaternari);
+}
+
+.dues-columnes a:hover {
+  color: var(--color-secundari);
+}
+
+.subject {
+  background-color: var(--color-fons);
+  border-radius: 16px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  font-weight: 600;
+  padding: 16px;
+}
+
+.subject-body {
+  padding-top: 16px;
+}
+
+.anivelladora {
+  background-color: #9ce0db !important;
+}
+
+.tbd {
+  background-color: #c7c1c3 !important;
+}
+
+.todo-Q1 {
+  background-color: #ffbba8 !important;
+}
+
+.todo-Q2 {
+  background-color: #fe8a6c !important;
+}
+
+.todo-WIP {
+  background-color: var(--color-terciari) !important;
+}
+
+.todo-WIP a:hover {
+  color: var(--color-principal);
+}
+
+.programming-language-subject-container {
+  display: grid;
+  grid-template-columns: auto;
+  float: right;
+  margin-left: 8px;
+  row-gap: 8px;
+}
+
+.programming-language-subject {
+  height: var(--imatge-pl-subject);
+  width: var(--imatge-pl-subject);
+  object-fit: contain;
+}
+
+.programming-language {
+  height: var(--imatge-pl);
+  width: var(--imatge-pl);
+  object-fit: contain;
+  vertical-align: middle;
+}
+
+.dashboard {
+  display: grid;
+  grid-template-columns: 1fr;
+  /*  grid-auto-rows: 1fr;*/
+  row-gap: 16px;
+}
+
+h1,
+h2,
+h3 {
+  font-family: 'Lora', serif;
+}
+
+h1 {
+  color: var(--color-principal);
+  font-size: xxx-large;
+  font-weight: 600;
+  margin: 16px 0;
+  text-shadow: 1px 2px 3px var(--color-terciari);
+}
+
+h2 {
+  background-color: var(--color-principal);
+  border-radius: 16px 16px 0 0;
+  border-bottom: 5px solid var(--color-terciari);
+  color: var(--color-quaternari);
+  font-weight: 400;
+  font-size: large;
+  padding: 16px;
+}
+
+h3 {
+  font-weight: 600;
+  font-size: medium;
+}
+
+main ul {
+  font-weight: 300;
+  list-style-type: none;
+}
+
+main ol {
+  font-weight: 300;
+  list-style-position: inside;
+}
+
+main li:not(:last-child) {
+  margin-bottom: 2px;
+}
+
+nav li {
+  display: inline-block;
+}
+
+@media screen and (min-width: 780px) {
+  .dashboard {
+    grid-template-columns: 1fr 1fr;
+    column-gap: 16px;
+  }
+
+  main {
+    margin-top: 58px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 0;
+    padding-right: 0;
+    width: 1108px;
+  }
+
+  .dashboard {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}