commit eb09023af09578c042af458b922a121447a686f4
parent 3a81eefab19751beda4fd7f9ed0387965c0bf19b
Author: Christian Ermann <christianermann@gmail.com>
Date: Fri, 12 Jun 2020 12:02:31 -0600
Adaptive basic styling
Diffstat:
3 files changed, 89 insertions(+), 30 deletions(-)
diff --git a/.styles.css.swp b/.styles.css.swp
Binary files differ.
diff --git a/index.html b/index.html
@@ -6,6 +6,8 @@
<meta name="viewport" context="width=device-width, initial-scale=1"/>
<title>Christian Ermann</title>
+
+ <link rel="stylesheet" href="styles.css"/>
</head>
<body>
@@ -13,40 +15,40 @@
<h1>Hi, I'm Christian!</h1>
<img src="profile.jpg" alt="Profile of Christian Ermann"/>
<p>I'm a junior at Lewis & Clark College with a passion for math,
- physics, and computer science.</p>
- <p>In addition to academics, I also compete on the L&C Men's Varsity
- Crew Team.</p>
+ physics, and computer science. In addition to academics, I also compete
+ on the L&C Men's Varsity Crew Team.</p>
<p>You can contact me at <a href="mailto:christianermann@gmail.com">
christianermann@gmail.com</a></p>
</div>
+ <div id="right-column">
+ <div id="projects">
+ <h2>Check out my projects!</h2>
+ <ul>
+ <li>
+ <a href="https://github.com/c2000e/Polygonize">Polygonize</a>
+ <p>Evolve images with OpenGL</p>
+ </li>
+ <li>
+ <a href="https://github.com/c2000e/c2000e.github.io">My Website</a>
+ <p>See what's behind this webpage</p>
+ </li>
+ <li><a href="https://github.com/c2000e">All Projects</a></li>
+ </ul>
+ </div>
- <div id="projects">
- <h2>Check out my projects!</h2>
- <ul>
- <li>
- <a href="https://github.com/c2000e/Polygonize">Polygonize</a>
- <p>Evolve images with OpenGL</p>
- </li>
- <li>
- <a href="https://github.com/c2000e/c2000e.github.io">My Website</a>
- <p>See what's behind this webpage</p>
- </li>
- <li><a href="https://github.com/c2000e">All Projects</a></li>
- </ul>
- </div>
-
- <div id="achievements">
- <h2>Education and Achievements</h2>
- <ul>
- <li>
- <p>Lewis & Clark College, Expected May 2022</p>
- <ul>
- <li>Bachelor of Arts in Physics</li>
- <li>Bachelor of Arts in Mathematics</li>
- </ul>
- </li>
- <li>Eagle Scout Award, 2016</li>
- </ul>
+ <div id="achievements">
+ <h2>Education and Achievements</h2>
+ <ul>
+ <li>
+ <p>Lewis & Clark College, Expected May 2022</p>
+ <ul>
+ <li>Bachelor of Arts in Physics</li>
+ <li>Bachelor of Arts in Mathematics</li>
+ </ul>
+ </li>
+ <li>Eagle Scout Award, 2016</li>
+ </ul>
+ </div>
</div>
</body>
</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,57 @@
+@media only screen and (max-width: 800px) {
+ body {
+ flex-direction: column;
+ align-items: center;
+ }
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+ul {
+ list-style-type: none;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+}
+
+#about {
+ max-width: 400px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ flex: 1;
+}
+
+#about img {
+ max-width: 50%;
+ height: auto;
+ align-self: center;
+}
+
+#right-column {
+ max-width: 400px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+#projects {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ flex: 1 1 auto;
+}
+
+#achievements {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ flex: 1 1 auto;
+}
