init

6d048c4b · Philipp Hock · 6d048c4b · 6d048c4b · 6d048c4b · 6d048c4b
Commit 6d048c4b authored 1 year ago by Philipp Hock
--- a/css/theme.css
+++ b/css/theme.css
+/* Reset some default styles */
+body, h1, h2, h3, p {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #121212;
+  color: #FFFFFF;
+}
+
+
+
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+  margin-top: 40px;
+}
+
+h2 {
+  font-size: 2rem;
+  margin-bottom: 10px;
+  margin-top: 40px;
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.5;
+  margin-bottom: 20px;
+
+}
+
+
+
+
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  padding: 20px;
+}
+
+.content {
+  margin-top: 60px;
+  max-width: 1200px;
+  width: 100%;
+}
+
+/* Left-align everything within the main content */
+.main-content > * {
+  text-align: left;
+}
+
+
+
+
+
+/* Responsive Flexbox layout */
+@media (min-width: 768px) {
+  .container {
+    flex-direction: row;
+  }
+
+  /* Example: Two-column layout */
+  .content {
+    flex: 1;
+    padding: 0 20px;
+  }
+
+  .sidebar {
+    flex: 0.5;
+    padding: 0 20px;
+  }
+}
+
+
+
+/* Additional styling for specific elements */
+a {
+  color: #f1f1f1;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: #FFFFFF;
+  text-decoration: underline;
+}
+a:visited{
+  color:#cccccc;
+}
+
+/* Example of button styling */
+.button {
+  background-color: #BB86FC;
+  color: #121212;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #6200EA;
+  color: #FFFFFF;
+}
+
+
+
+
+
+
+
+
+
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Slides</title>
+  
+</head>
+<body>
+  <div class="container">
+    <div class="content">
+  <h1>Interaction Design - Course Page</h1>
+  <h2>Lectures</h2>
+  <link rel="stylesheet" href="css/theme.css">
+  <a href="lectures/InteractionDesign_RPi_intro.pptx">Slideset 1 - Interaction Design - Intro</a>
+  <br>
+  <br>
+  <a href="lectures/InteractionDesign_RPi_Lab.pptx">Slideset 2 - Interaction Design - Lab</a>
+
+  <h2>Gitlab</h2>
+  <a href="https://gitlab.liu.se/interaction_design/grovepy-lib" target="_blank">GrovePi+ additional lib</a>
+</div>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/lectures/InteractionDesign_RPi_Lab.pptx
+++ b/lectures/InteractionDesign_RPi_Lab.pptx
--- a/lectures/InteractionDesign_RPi_intro.pptx
+++ b/lectures/InteractionDesign_RPi_intro.pptx