implement site changes from cse 134
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu
parent
10c24bb442
commit
c70993ed7d
1
images/email.svg
Normal file
1
images/email.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg"><path d="M0 1694.235h1920V226H0v1468.235zM112.941 376.664V338.94H1807.06v37.723L960 1111.233l-847.059-734.57zM1807.06 526.198v950.513l-351.134-438.89-88.32 70.475 378.353 472.998H174.042l378.353-472.998-88.32-70.475-351.134 438.89V526.198L960 1260.768l847.059-734.57z" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
1
images/favicon.svg
Normal file
1
images/favicon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><g fill="none" stroke="#000" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"><path d="M49.617 208S80 208 96 192M96 192s16 16 32 16M206.383 208S176 208 160 192M160 192s-16 16-32 16M128 48c32 0 48 16 48 64 0 40-32 64-48 64M128 48c-32 0-48 16-48 64 0 40 32 64 48 64M160 192l-7.416-27.677M96 192l7.416-27.677"/><circle cx="128" cy="128" r="111.999"/></g></svg>
|
||||
|
After Width: | Height: | Size: 438 B |
1
images/github.svg
Normal file
1
images/github.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="none" d="M0-192h1280v800H0z"/><path d="M32.029 8.345C18.759 8.345 8 19.104 8 32.378c0 10.617 6.885 19.624 16.435 22.803 1.202.22 1.64-.522 1.64-1.16 0-.569-.02-2.081-.032-4.086-6.685 1.452-8.095-3.222-8.095-3.222-1.093-2.775-2.669-3.514-2.669-3.514-2.182-1.492.165-1.462.165-1.462 2.412.171 3.681 2.477 3.681 2.477 2.144 3.672 5.625 2.611 6.994 1.997.219-1.553.838-2.612 1.526-3.213-5.336-.606-10.947-2.669-10.947-11.877 0-2.623.937-4.769 2.474-6.449-.247-.608-1.072-3.051.235-6.36 0 0 2.018-.646 6.609 2.464 1.917-.533 3.973-.8 6.016-.809 2.041.009 4.097.276 6.017.809 4.588-3.11 6.602-2.464 6.602-2.464 1.311 3.309.486 5.752.239 6.36 1.54 1.68 2.471 3.826 2.471 6.449 0 9.232-5.62 11.263-10.974 11.858.864.742 1.632 2.208 1.632 4.451 0 3.212-.029 5.804-.029 6.591 0 .644.432 1.392 1.652 1.157 9.542-3.185 16.421-12.186 16.421-22.8 0-13.274-10.76-24.033-24.034-24.033" fill="#010101"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
BIN
images/photo.webp
Normal file
BIN
images/photo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
images/photo_100px.webp
Normal file
BIN
images/photo_100px.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
images/photo_200px.webp
Normal file
BIN
images/photo_200px.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
150
index.html
150
index.html
@ -1,14 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>root's homepage</title>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body style="background-color:white;">
|
||||
<a href = "notes.html">root's class notes</a>
|
||||
</br>
|
||||
<a href = "projects.html">root's projects</a>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
<link rel="stylesheet" href="styles/cards.css">
|
||||
<link rel="stylesheet" href="styles/tables.css">
|
||||
<title>About Me - Arthur Lu</title>
|
||||
<style>
|
||||
@media screen and (max-width: 480px) {
|
||||
#skills-table td:nth-of-type(1):before { content: "Language"; }
|
||||
#skills-table td:nth-of-type(2):before { content: "Experience"; }
|
||||
#skills-table td:nth-of-type(3):before { content: "Frameworks"; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="#mission">Mission</a>
|
||||
<a href="#education">Education</a>
|
||||
<a href="#skills">Skills</a>
|
||||
<a href="#projects">Projects</a>
|
||||
<a href="#interests">Interests</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<a href="notes.html">Notes</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="card">
|
||||
<picture>
|
||||
<source media="screen and (min-width: 480px)" srcset="images/photo_200px.webp">
|
||||
<source media="screen and (min-width: 0px)" srcset="images/photo_100px.webp">
|
||||
<img src="images/photo.webp" alt="A portrait photo of Arthur Lu" style="border-radius: 20px;">
|
||||
</picture>
|
||||
<div>
|
||||
<h1>Arthur Lu</h1>
|
||||
<ul style="font-size: 2rem; list-style-type: none; padding: 0px;">
|
||||
<li>Developer</li>
|
||||
<li>Engineer</li>
|
||||
<li>Problem Solver</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single" id="mission">
|
||||
<h2>My Mission</h2>
|
||||
<p>I am a 3rd year <strong>Computer Engineering</strong> major at the University of California San Diego looking for opportunites in software development and system design.</p>
|
||||
</div>
|
||||
<div class="single" id="education">
|
||||
<h2>My Education</h2>
|
||||
<p>3rd year Computer Engineering Major at UCSD</p>
|
||||
<p>GPA: 3.9</p>
|
||||
</div>
|
||||
<div class="card" id="skills">
|
||||
<div>
|
||||
<h2>My Languages and Skills</h2>
|
||||
</div>
|
||||
<div>
|
||||
<table id="skills-table" class="labeled">
|
||||
<colgroup>
|
||||
<col span="1">
|
||||
<col span="2">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Language</th>
|
||||
<th>Experience</th>
|
||||
<th>Frameworks</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>C/C++</td>
|
||||
<td>2 Years</td>
|
||||
<td>gcc, make, Visual Studio</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Java</td>
|
||||
<td>4 Years</td>
|
||||
<td>Android Studio</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Python</td>
|
||||
<td>5 Years</td>
|
||||
<td>PyTorch, scipy, numpy, scikit-learn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Javascript</td>
|
||||
<td>1 Year</td>
|
||||
<td>ES6, NodeJS, express.js</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>I also have experience with common technologies like Docker, lxc, nginx, and VMWare ESXi.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" id="projects">
|
||||
<div>
|
||||
<h2>My Projects</h2>
|
||||
</div>
|
||||
<div>
|
||||
<a href="projects.html">Browse</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single" id="interests">
|
||||
<h2>My Interests</h2>
|
||||
<p>I am interested in Machine Learning, cloud technologies, and distributed computing.</p>
|
||||
</div>
|
||||
<div class="card" id="contact">
|
||||
<div>
|
||||
<h2>Contact Me</h2>
|
||||
</div>
|
||||
<div>
|
||||
<table id="skills-table-wide">
|
||||
<colgroup>
|
||||
<col span="1">
|
||||
<col span="2">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Email</td>
|
||||
<td><a href="mainto:root@tronnet.net">root@tronnet.net</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>GitHub</td>
|
||||
<td><a href="https://github.com/ltcptgeneral">ltcptgeneral</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© 2023 - Arthur Lu</footer>
|
||||
</body>
|
||||
</html>
|
||||
81
notes.html
81
notes.html
@ -3,39 +3,54 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>root's class notes</title>
|
||||
<style>
|
||||
</style>
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
<link rel="stylesheet" href="styles/cards.css">
|
||||
</head>
|
||||
<body style="background-color:white;">
|
||||
<a href = "index.html">return to root's homepage</a>
|
||||
<p>CSE</p>
|
||||
<ul>
|
||||
<li><a href = "CSE 20.pdf" download>CSE 20 - Discrete Mathematics</a></li>
|
||||
<li><a href = "CSE 21.pdf" download>CSE 21 - Mathematics for Algorithms and Systems</a></li>
|
||||
<li><a href = "CSE 100.pdf" download>CSE 100 - Advanced Data Structures & C++</a></li>
|
||||
<li><a href = "CSE 101.pdf" download>CSE 101 - Design and Analysis of Algorithms</a></li>
|
||||
<li><a href = "CSE 110.pdf" download>CSE 110 - Software Engineering</a></li>
|
||||
<li><a href = "CSE 140.pdf" download> CSE 140 - Components and Design Techniques for Digital Systems </a></li>
|
||||
<li><a href = "CSE 141.pdf" download> CSE 141 - Introduction to Computer Architecture </a></li>
|
||||
</ul>
|
||||
<p>ECE</p>
|
||||
<ul>
|
||||
<li><a href = "ECE 35.pdf" download>ECE 35 - Introduction to Analog Design</a></li>
|
||||
<li><a href = "ECE 45.pdf" download>ECE 45 - Circuits & Systems</a></li>
|
||||
<li><a href = "ECE 65.pdf" download>ECE 65 - Components & Circuits Laboratory</a></li>
|
||||
<li><a href = "ECE 101.pdf" download>ECE 101 - Linear Systems Fundamentals</a></li>
|
||||
<li><a href = "ECE 111.pdf" download>ECE 111 - Advanced Digital Design Project</a></li>
|
||||
</ul>
|
||||
<p>MATH</p>
|
||||
<ul>
|
||||
<li><a href = "MATH 18.pdf" download>MATH 18 - Linear Algebra</a></li>
|
||||
<li><a href = "MatLab.pdf" download>MatLab for Math 18</a></li>
|
||||
<li><a href = "MATH 20C.pdf" download>MATH 20C - Calculus and Analytic Geometry</a></li>
|
||||
<li><a href = "MATH 20D.pdf" download>MATH 20D - Introduction to Differential Equations</a></li>
|
||||
</ul>
|
||||
<p>PHYS</p>
|
||||
<ul>
|
||||
<li><a href = "PHYS 2C.pdf" download>PHYS 2C - Fluids, Waves, Thermodynamics, and Optics</a></li>
|
||||
</ul>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href = "index.html">return to root's homepage</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="single">
|
||||
<h2>CSE</h2>
|
||||
<ul>
|
||||
<li><a href = "notes/CSE 20.pdf" download>CSE 20 - Discrete Mathematics</a></li>
|
||||
<li><a href = "notes/CSE 21.pdf" download>CSE 21 - Mathematics for Algorithms and Systems</a></li>
|
||||
<li><a href = "notes/CSE 100.pdf" download>CSE 100 - Advanced Data Structures & C++</a></li>
|
||||
<li><a href = "notes/CSE 101.pdf" download>CSE 101 - Design and Analysis of Algorithms</a></li>
|
||||
<li><a href = "notes/CSE 110.pdf" download>CSE 110 - Software Engineering</a></li>
|
||||
<li><a href = "notes/CSE 140.pdf" download> CSE 140 - Components and Design Techniques for Digital Systems </a></li>
|
||||
<li><a href = "notes/CSE 141.pdf" download> CSE 141 - Introduction to Computer Architecture </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="single">
|
||||
<h2>ECE</h2>
|
||||
<ul>
|
||||
<li><a href = "notes/ECE 35.pdf" download>ECE 35 - Introduction to Analog Design</a></li>
|
||||
<li><a href = "notes/ECE 45.pdf" download>ECE 45 - Circuits & Systems</a></li>
|
||||
<li><a href = "notes/ECE 65.pdf" download>ECE 65 - Components & Circuits Laboratory</a></li>
|
||||
<li><a href = "notes/ECE 101.pdf" download>ECE 101 - Linear Systems Fundamentals</a></li>
|
||||
<li><a href = "notes/ECE 111.pdf" download>ECE 111 - Advanced Digital Design Project</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="single">
|
||||
<h2>MATH</h2>
|
||||
<ul>
|
||||
<li><a href = "notes/MATH 18.pdf" download>MATH 18 - Linear Algebra</a></li>
|
||||
<li><a href = "notes/MatLab.pdf" download>MatLab for Math 18</a></li>
|
||||
<li><a href = "notes/MATH 20C.pdf" download>MATH 20C - Calculus and Analytic Geometry</a></li>
|
||||
<li><a href = "notes/MATH 20D.pdf" download>MATH 20D - Introduction to Differential Equations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="single">
|
||||
<h2>PHYS</h2>
|
||||
<ul>
|
||||
<li><a href = "notes/PHYS 2C.pdf" download>PHYS 2C - Fluids, Waves, Thermodynamics, and Optics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© 2023 - Arthur Lu</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,20 +2,32 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>root's projects</title>
|
||||
<style>
|
||||
</style>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>My Projects - Arthur Lu</title>
|
||||
<link rel="stylesheet" href="styles/styles.css" type="text/css">
|
||||
<link rel="stylesheet" href="styles/projects.css" type="text/css">
|
||||
<link rel="icon" type="image/x-icon" href="/images/favicon.svg">
|
||||
<script src="scripts/projects.js" type="module"></script>
|
||||
</head>
|
||||
<body style="background-color:white;">
|
||||
<a href = "index.html">return to root's homepage</a>
|
||||
<p>FRC</p>
|
||||
<ul>
|
||||
<li><a href = "https://github.com/titanscouting/tra-analysis">tra-analysis</a></li>
|
||||
<li><a href = "https://github.com/titanscouting/tra-superscript">tra-superscript</a></li>
|
||||
</ul>
|
||||
<p>ECE 45</p>
|
||||
<ul>
|
||||
<li><a href = "https://github.com/ltcptgeneral/ece45-project">ECE 45 Final Project</a></li>
|
||||
</ul>
|
||||
<body>
|
||||
<header>
|
||||
<h1 styles="margin: 10px;">My Projects</h1>
|
||||
<nav>
|
||||
<a href="index.html">Go Back</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="flexbox" id="projects">
|
||||
</div>
|
||||
</main>
|
||||
<footer>© 2023 - Arthur Lu</footer>
|
||||
<template id="project-article">
|
||||
<article>
|
||||
<h2 id="project-name"></h2>
|
||||
<p id="project-desc"></p>
|
||||
<p id="project-lang"></p>
|
||||
</article>
|
||||
</template>
|
||||
</body>
|
||||
</html>
|
||||
<footer>© 2023 - Arthur Lu</footer>
|
||||
</html>
|
||||
24
scripts/projects.js
Normal file
24
scripts/projects.js
Normal file
@ -0,0 +1,24 @@
|
||||
import { Octokit } from "https://cdn.skypack.dev/@octokit/core";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
async function init () {
|
||||
const octokit = new Octokit()
|
||||
|
||||
let repos = await octokit.request('GET /users/ltcptgeneral/repos', {
|
||||
username: 'ltcptgeneral'
|
||||
});
|
||||
|
||||
let container = document.querySelector("#projects");
|
||||
|
||||
repos.data.forEach((element) => {
|
||||
let content = document.querySelector("#project-article").content.cloneNode(true);
|
||||
content.querySelector("#project-name").innerText = element.name;
|
||||
content.querySelector("#project-desc").innerText = element.description;
|
||||
content.querySelector("#project-lang").innerText = element.language;
|
||||
content.querySelector("article").addEventListener("click", () => {
|
||||
window.location.assign(element.html_url);
|
||||
});
|
||||
container.append(content)
|
||||
});
|
||||
}
|
||||
77
styles/cards.css
Normal file
77
styles/cards.css
Normal file
@ -0,0 +1,77 @@
|
||||
/*
|
||||
Styles for content cards, which are cards of twofold content.
|
||||
Each card contains 2 halves, each can be populated with any content.
|
||||
Cards alternate style from flat to popped out
|
||||
*/
|
||||
|
||||
:root {
|
||||
--card-bg-color: #222222;
|
||||
--card-text-color: white;
|
||||
}
|
||||
|
||||
.single {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 60ch;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
background-color: var(--card-bg-color);
|
||||
color: var(--card-text-color);
|
||||
border-radius: 40px;
|
||||
padding: 20px;
|
||||
}
|
||||
/* Desktop card -> side by side */
|
||||
@media screen and (min-width: 850px) {
|
||||
/* Use grid view to show halves side by side, each with 50% of the space */
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.card img {
|
||||
max-width: min(100%, 400px);
|
||||
width: 25vw;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
/* Phone or tablet card -> top to bottom */
|
||||
@media screen and (max-width: 850px) {
|
||||
/* Use grid view to show halves side by side, each with 50% of the space */
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.card img {
|
||||
max-width: min(100%, 400px);
|
||||
width: 50vh;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
/* Ensure halves are no more than 60 characters, and ensure 20px of separation between halves */
|
||||
.card > * {
|
||||
width: fit-content;
|
||||
max-width: 60ch;
|
||||
margin: 20px;
|
||||
}
|
||||
.card > * > *:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.card > * > *:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.card img {
|
||||
border-radius: 20px;
|
||||
}
|
||||
.card[data-reverse] {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
11
styles/projects.css
Normal file
11
styles/projects.css
Normal file
@ -0,0 +1,11 @@
|
||||
article {
|
||||
background-color: #DDD;
|
||||
border: 1px solid black;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
box-shadow: 10px 5px 5px black;
|
||||
max-width: 60ch;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
95
styles/styles.css
Normal file
95
styles/styles.css
Normal file
@ -0,0 +1,95 @@
|
||||
/*
|
||||
Common styles across all pages, primarily content size and color and basic page layout styling
|
||||
*/
|
||||
|
||||
/* Custom colors, which can be easily changed here */
|
||||
:root {
|
||||
--main-bg-color: white;
|
||||
--main-text-color: black;
|
||||
--accent-bg-color: black;
|
||||
--accent-text-color: #AAAAFF;
|
||||
}
|
||||
|
||||
/* Set default font and font weight */
|
||||
* {
|
||||
font-family: 'FreeMono', monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Set font size for common content items h1, h2, h3, p (aim for larger text) */
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 4rem;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Styles to set the generic page layout, use a grid layout for body to ensure the footer stays in the bottom
|
||||
Also make the header sticky, because users mgiht want navigation in the middle of the page
|
||||
*/
|
||||
body {
|
||||
margin: 0px;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--main-text-color);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
header, footer {
|
||||
padding: 10px;
|
||||
background-color: var(--accent-bg-color);
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
main {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* TODO: add responsiveness, temporarily use flex-wrap */
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2ch;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav a {
|
||||
font-size: x-large;
|
||||
color: var(--accent-text-color);
|
||||
text-decoration: underline 0.1em var(--accent-bg-color);
|
||||
transition: text-decoration-color 500ms;
|
||||
}
|
||||
nav a:hover {
|
||||
text-decoration: underline 0.1em var(--accent-text-color);
|
||||
}
|
||||
|
||||
/* Desktop - restrict content to around 1080px, which should be plenty of space*/
|
||||
@media screen and (min-width: 1120px) {
|
||||
main {
|
||||
margin: auto;
|
||||
width: 1080px;
|
||||
}
|
||||
}
|
||||
/* Tablet or phone - use all of the avaliable space*/
|
||||
@media screen and (max-width:1120px) {
|
||||
}
|
||||
|
||||
/* footer styles */
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
58
styles/tables.css
Normal file
58
styles/tables.css
Normal file
@ -0,0 +1,58 @@
|
||||
/*
|
||||
Styles for tables, which are made more responsive
|
||||
*/
|
||||
@media screen and (min-width: 480px) {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
border: 1px solid var(--table-accent-color);
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
th {
|
||||
background-color: var(--table-accent-color);
|
||||
}
|
||||
tr:first-child {
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
}
|
||||
/* I want to make the table more viewable on mobile, code largely adopted from https://css-tricks.com/responsive-data-tables/ */
|
||||
/* Change table structure if using a very small viewport */
|
||||
@media screen and (max-width: 480px) {
|
||||
/* Force table to not be like tables anymore */
|
||||
table, thead, tbody, th, td, tr {
|
||||
display: block;
|
||||
}
|
||||
/* Hide table headers (but not display: none;, for accessibility) */
|
||||
thead tr {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
}
|
||||
tr:first-child {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
table.labeled td {
|
||||
/* Behave like a "row" */
|
||||
position: relative;
|
||||
padding-left: 50%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
td:before {
|
||||
/* Now like a table header */
|
||||
position: absolute;
|
||||
/* Top/left values mimic padding */
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user