mirror of
https://github.com/ClayGarth/claygarth.github.io.git
synced 2025-07-26 00:28: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/).
|
||||
29
index.html
29
index.html
|
|
@ -1,16 +1,33 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ClayGarth.com</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
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