create new site layout
This commit is contained in:
Arthur Lu
parent
0a8a25d785
commit
ebcbc7b14e
42
css/overlay.css
Normal file
42
css/overlay.css
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
.overlay-container {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1080px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-container .image {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-container .overlay-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
color: rgba(0, 0, 0, 0);
|
||||||
|
transition-property: color, background-color;
|
||||||
|
transition-duration: 0.25s, 0.25s;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-container:hover .overlay-mask {
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-container .overlay-content {
|
||||||
|
padding-left: 15%;
|
||||||
|
padding-right: 15%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
39
css/style.css
Normal file
39
css/style.css
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-right: 16px;
|
||||||
|
width: calc(100% - 16px - 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin-top: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
column-gap: 4ch;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
140
index.html
140
index.html
@ -3,134 +3,32 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="styles/styles.css">
|
<title>Projects - Arthur Lu</title>
|
||||||
<link rel="stylesheet" href="styles/cards.css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
<link rel="stylesheet" href="styles/tables.css">
|
<link rel="stylesheet" href="css/style.css" type="text/css">
|
||||||
<title>About Me - Arthur Lu</title>
|
<link rel="stylesheet" href="css/overlay.css" type="text/css">
|
||||||
<style>
|
<link rel="icon" type="image/x-icon" href="images/favicon.svg">
|
||||||
@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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
<h1><b><a aria-label="Arthur Lu" href="https://root.tronnet.net" class="site-header">ARTHUR LU</a></b></h1>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="#mission">Mission</a>
|
<a aria-current="page" aria-label="Projects" href="index.html">PROJECTS</a>
|
||||||
<a href="#education">Education</a>
|
<a aria-label="About Me" href="about.html">ABOUT ME</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>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<div class="card">
|
<figure class="overlay-container">
|
||||||
<picture>
|
<img src="projects/pico_bmc.jpg" alt="" class="image">
|
||||||
<source media="screen and (min-width: 480px)" srcset="images/photo_200px.webp">
|
<figcaption class="overlay-mask">
|
||||||
<source media="screen and (min-width: 0px)" srcset="images/photo_100px.webp">
|
<a href="" class="overlay-content">
|
||||||
<img src="images/photo.webp" alt="A portrait photo of Arthur Lu" style="border-radius: 20px;">
|
<h2>Pico BMC</h2>
|
||||||
</picture>
|
<p>Add remote management features to any motherboard.</p>
|
||||||
<div>
|
</a>
|
||||||
<h1>Arthur Lu</h1>
|
</figcaption>
|
||||||
<ul style="font-size: 2rem; list-style-type: none; padding: 0px;">
|
</figure>
|
||||||
<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" style="font-size: x-large;">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>
|
</main>
|
||||||
<footer>© 2023 - Arthur Lu</footer>
|
<footer>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
31
notes.html
31
notes.html
@ -1,19 +1,16 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<title>root's class notes</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="styles/styles.css">
|
<title>Class Notes - Arthur Lu</title>
|
||||||
<link rel="stylesheet" href="styles/cards.css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
|
<link rel="stylesheet" href="styles/style.css" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<a href = "index.html">Home</a>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<main>
|
<main>
|
||||||
<div class="single">
|
<h1>Class Notes</h1>
|
||||||
|
<section>
|
||||||
<h2>CSE</h2>
|
<h2>CSE</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href = "notes/CSE 20.pdf" download>CSE 20 - Discrete Mathematics</a></li>
|
<li><a href = "notes/CSE 20.pdf" download>CSE 20 - Discrete Mathematics</a></li>
|
||||||
@ -28,8 +25,8 @@
|
|||||||
<li><a href = "notes/CSE 141.pdf" download> CSE 141 - Introduction to Computer Architecture </a></li>
|
<li><a href = "notes/CSE 141.pdf" download> CSE 141 - Introduction to Computer Architecture </a></li>
|
||||||
<li><a href = "notes/CSE 167.pdf" download>CSE 167 - Computer Graphics</a></li>
|
<li><a href = "notes/CSE 167.pdf" download>CSE 167 - Computer Graphics</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
<div class="single">
|
<section>
|
||||||
<h2>ECE</h2>
|
<h2>ECE</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href = "notes/ECE 35.pdf" download>ECE 35 - Introduction to Analog Design</a></li>
|
<li><a href = "notes/ECE 35.pdf" download>ECE 35 - Introduction to Analog Design</a></li>
|
||||||
@ -39,8 +36,8 @@
|
|||||||
<li><a href = "notes/ECE 109.pdf" download>ECE 109 - Engineering Probability and Statistics</a></li>
|
<li><a href = "notes/ECE 109.pdf" download>ECE 109 - Engineering Probability and Statistics</a></li>
|
||||||
<li><a href = "notes/ECE 111.pdf" download>ECE 111 - Advanced Digital Design Project</a></li>
|
<li><a href = "notes/ECE 111.pdf" download>ECE 111 - Advanced Digital Design Project</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
<div class="single">
|
<section>
|
||||||
<h2>MATH</h2>
|
<h2>MATH</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href = "notes/MATH 18.pdf" download>MATH 18 - Linear Algebra</a></li>
|
<li><a href = "notes/MATH 18.pdf" download>MATH 18 - Linear Algebra</a></li>
|
||||||
@ -48,13 +45,13 @@
|
|||||||
<li><a href = "notes/MATH 20C.pdf" download>MATH 20C - Calculus and Analytic Geometry</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>
|
<li><a href = "notes/MATH 20D.pdf" download>MATH 20D - Introduction to Differential Equations</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
<div class="single">
|
<section>
|
||||||
<h2>PHYS</h2>
|
<h2>PHYS</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href = "notes/PHYS 2C.pdf" download>PHYS 2C - Fluids, Waves, Thermodynamics, and Optics</a></li>
|
<li><a href = "notes/PHYS 2C.pdf" download>PHYS 2C - Fluids, Waves, Thermodynamics, and Optics</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>© 2023 - Arthur Lu</footer>
|
<footer>© 2023 - Arthur Lu</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,32 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
BIN
projects/pico_bmc.jpg
Normal file
BIN
projects/pico_bmc.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 427 KiB |
@ -1,24 +0,0 @@
|
|||||||
import { Octokit } from "https://esm.sh/octokit";
|
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", init);
|
|
||||||
|
|
||||||
async function init () {
|
|
||||||
const octokit = new Octokit()
|
|
||||||
|
|
||||||
let repos = await octokit.request('GET /users/ltcptgeneral/starred', {
|
|
||||||
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)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
/*
|
|
||||||
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;
|
|
||||||
--link-text-color: #AAAAFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.card a {
|
|
||||||
font-size: large;
|
|
||||||
color: var(--accent-text-color);
|
|
||||||
text-decoration: underline 0.1em var(--card-bg-color);
|
|
||||||
transition: text-decoration-color 500ms;
|
|
||||||
}
|
|
||||||
.card a:hover {
|
|
||||||
text-decoration: underline 0.1em var(--link-text-color);
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
/*
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
/*
|
|
||||||
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