Moving /links and populating it with some basic content
This commit is contained in:
parent
f7c238ec38
commit
9fe3597c6f
11 changed files with 149 additions and 49 deletions
|
|
@ -8,4 +8,5 @@ footer {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
background: linear-gradient(15deg, #dc8a78, #f2d5cf);
|
background: linear-gradient(15deg, #dc8a78, #f2d5cf);
|
||||||
|
width: calc(100% - 0.5rem - 10px);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,12 +15,19 @@ body {
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
|
|
||||||
min-height: 100svh;
|
min-height: 100svh;
|
||||||
|
min-width: 100%;
|
||||||
|
|
||||||
|
justify-items: center;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #232634;
|
color: #232634;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
img {
|
img {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ header {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
background: linear-gradient(15deg, #f2d5cf, #dc8a78);
|
background: linear-gradient(15deg, #f2d5cf, #dc8a78);
|
||||||
|
width: calc(100% - 0.5rem - 10px);
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
|
||||||
17
links.css
17
links.css
|
|
@ -1,17 +0,0 @@
|
||||||
body {
|
|
||||||
li {
|
|
||||||
/* list-style-type: none; */
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 1rem;
|
|
||||||
margin: 0.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-style: normal;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
29
links.html
29
links.html
|
|
@ -1,29 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html class="no-js" lang="">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
||||||
<title>Personal Links</title>
|
|
||||||
<meta name="description" content="My personal linktree" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
|
|
||||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
||||||
<!-- Place favicon.ico in the root directory -->
|
|
||||||
|
|
||||||
<link href="/global.css" rel="stylesheet" />
|
|
||||||
<link href="/links.css" rel="stylesheet" />
|
|
||||||
<link href="/header.css" rel="stylesheet" />
|
|
||||||
<script type="text/javascript" src="/loadin.js"></script>
|
|
||||||
<script type="text/javascript" src="/links.js"></script>
|
|
||||||
</head>
|
|
||||||
<body onload="loadDependencies()">
|
|
||||||
<header id="header"></header>
|
|
||||||
<ul id="linktree">
|
|
||||||
<li>
|
|
||||||
<img
|
|
||||||
src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
|
|
||||||
/><a href="https://git.aprileaton.net">Gitea instance</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
3
links.js
3
links.js
|
|
@ -1,3 +0,0 @@
|
||||||
function loadDependencies() {
|
|
||||||
loadHTML("header", "/header.html");
|
|
||||||
}
|
|
||||||
40
links/index.html
Normal file
40
links/index.html
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||||
|
<title>Personal Links</title>
|
||||||
|
<meta name="description" content="My personal linktree" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<link href="/global.css" rel="stylesheet" />
|
||||||
|
<link href="/links/links.css" rel="stylesheet" />
|
||||||
|
<link href="/header.css" rel="stylesheet" />
|
||||||
|
<script type="text/javascript" src="/loadin.js"></script>
|
||||||
|
<script type="text/javascript" src="/links/links.js"></script>
|
||||||
|
</head>
|
||||||
|
<body onload="loadDependencies()">
|
||||||
|
<header id="header"></header>
|
||||||
|
<article id="main">
|
||||||
|
<article id="find-me">
|
||||||
|
<h1>Find me at these places!</h1>
|
||||||
|
<ul id="linktree">
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
|
||||||
|
/><a href="https://git.aprileaton.net">Gitea instance</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
<article id="portfolio"></article>
|
||||||
|
</article>
|
||||||
|
<footer id="footer"></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
links/links.css
Normal file
45
links/links.css
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
body {
|
||||||
|
article {
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: 40rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#find-me {
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 1rem;
|
||||||
|
margin: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-style: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#portfolio {
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
margin: 5px;
|
||||||
|
padding: 0.25rem;
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border-width: 2px;
|
||||||
|
background: linear-gradient(15deg, #f2d5cf, #dc8a78);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
5
links/links.js
Normal file
5
links/links.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
function loadDependencies() {
|
||||||
|
loadHTML("header", "/header.html");
|
||||||
|
loadHTML("footer", "/footer/footer.html");
|
||||||
|
loadHTML("portfolio", "/links/portfolio.html");
|
||||||
|
}
|
||||||
37
links/portfolio.html
Normal file
37
links/portfolio.html
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<h1>Previous Work</h1>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<h2>
|
||||||
|
<a href="https://git.aprileaton.net/April_Eaton/Personal-Webpage"
|
||||||
|
><img
|
||||||
|
src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Git_icon.svg"
|
||||||
|
alt="Git icon"
|
||||||
|
/></a>
|
||||||
|
<a href="https://kebabs.aprileaton.net">This webpage!</a>
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
A living website that, hosting my personal porfolio, contact info, and
|
||||||
|
biography.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<h2>
|
||||||
|
<a href="https://github.com/neaton-lab/MRK-Webpage"
|
||||||
|
><img
|
||||||
|
src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Git_icon.svg"
|
||||||
|
alt="Git icon"
|
||||||
|
/></a>
|
||||||
|
<a href="https://kebabs.aprileaton.net">MKR Instanbul Webpage</a>
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
Developed using jQuery and depolyed using GitHub Pages. Currently
|
||||||
|
awaiting credentials and photos from the client in order to migrate over
|
||||||
|
to the official domain.
|
||||||
|
</p>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
13
links/protfolio.html
Normal file
13
links/protfolio.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<h1>Previous Work</h1>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<a href="https://kebabs.aprileaton.net">MKR Instanbul Webpage</a>
|
||||||
|
<p>
|
||||||
|
Developed using jQuery and depolyed using GitHub Pages. Currently
|
||||||
|
awaiting credentials and photos from the client in order to migrate over
|
||||||
|
to the official domain
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue