mirror of
https://github.com/ClayGarth/claygarth.github.io.git
synced 2025-09-01 02:18:44 -04:00
Add files via upload
This commit is contained in:
Clay
GitHub
parent
d7bfcf554f
commit
ca2d6a3f3c
3 changed files with 174 additions and 6 deletions
52
README.MD
Normal file
52
README.MD
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
# MNMLSM
|
||||||
|
|
||||||
|
MNMLSM is a simple theme inspired by the command line. It has a darkmode and no javascript. In other words: it is future proof.
|
||||||
|
|
||||||
|
Preview Light | Preview Dark
|
||||||
|
:-------------------------:|:-------------------------:
|
||||||
|
 | 
|
||||||
|
|
||||||
|
The theme was created by [Ungeschneuer](https://github.com/ungeschneuer). A preview can be found [here](https://michaelbarney.github.io/LinkFree/Templates/mnmlsm/).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
You should probably change the following things:
|
||||||
|
- lang attribute for the html tag
|
||||||
|
- title in head tag
|
||||||
|
- favicon in asset folder
|
||||||
|
- userPhoto in asset folder
|
||||||
|
- userName
|
||||||
|
- links (duh!)
|
||||||
|
- footer content
|
||||||
|
|
||||||
|
## Add a new link
|
||||||
|
|
||||||
|
To add a new link, just duplicate an existing line between the links div or add a new one like this
|
||||||
|
|
||||||
|
```
|
||||||
|
<a class="link" href="#" target="_blank">#</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Add Emojis
|
||||||
|
|
||||||
|
If you want to add emojis to your links, you can Copy/Paste them via [GetEmoji](https://getemoji.com/). For current Mac and Windows versions, there is also a system shortcut.
|
||||||
|
|
||||||
|
Mac:
|
||||||
|
```
|
||||||
|
Ctrl + Cmd + Space
|
||||||
|
```
|
||||||
|
|
||||||
|
Windows
|
||||||
|
```
|
||||||
|
Windows + ; (semi-colon)
|
||||||
|
```
|
||||||
|
or
|
||||||
|
```
|
||||||
|
Windows + . (period)
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Sources
|
||||||
|
|
||||||
|
The Avatar in the preview is by [unDraw](https://undraw.co/).
|
||||||
27
index.html
27
index.html
|
|
@ -1,15 +1,32 @@
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>ClayGarth.com</title>
|
<meta charset="UTF-8">
|
||||||
|
<meta name="robots" content="noindex,nofollow" /> <title>MNMLSM Theme LinkFree</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="content">
|
||||||
|
<img id="userPhoto" src="img/avatar.svg" alt="User Photo">
|
||||||
|
|
||||||
|
<h1><a href="#" id="userName" rel="noopener">@MNML</a></h1>
|
||||||
|
<div id="links">
|
||||||
|
<a class="link" href="https://www.netflix.com/de/title/80114460" rel="noopener">🍿 Netflix Documentary</a>
|
||||||
|
<a class="link" href="https://en.wikipedia.org/wiki/Minimalism" rel="noopener">📚 Wikipedia Article</a>
|
||||||
|
<a class="link" href="https://siiimple.com/" rel="noopener">🖥 Minimalist Website Gallery</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
We like it minimal. </footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<img src="404.jpg" alt="I'm not in right now, please leave a message." style="position: absolute; left: 50%; top: 50%; margin-left: -285px; margin-top: -190px;">
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
99
style.css
Normal file
99
style.css
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--font: 'Roboto Mono', monospace;
|
||||||
|
--background: white;
|
||||||
|
--color: #232333;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--color);
|
||||||
|
font-family: var(--font);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
min-width: 100vw;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
flex: 1 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1 auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#userPhoto{
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
display: block;
|
||||||
|
margin: 35px auto 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: solid var(--color) 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#userName{
|
||||||
|
width: 100%;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1.25;
|
||||||
|
display: block;
|
||||||
|
color: var(--color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#links{
|
||||||
|
max-width: 90%;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
margin: 27px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link{
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 17px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: dashed var(--color) 2px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color);
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #202124;
|
||||||
|
--color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Add table
Reference in a new issue