diff --git a/README.MD b/README.MD new file mode 100644 index 0000000..96d9024 --- /dev/null +++ b/README.MD @@ -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 +:-------------------------:|:-------------------------: +![Preview Light](preview-light.png) | ![Preview Dark](preview-dark.png) + +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 + +``` +# +``` + + +## 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/). \ No newline at end of file diff --git a/index.html b/index.html index bb59a91..6297884 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,33 @@ - - + + - - ClayGarth.com + + + MNMLSM Theme LinkFree + + +
+
+ User Photo + +

@MNML

+ + + +
+
- I'm not in right now, please leave a message. - + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b9b581b --- /dev/null +++ b/style.css @@ -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; + } + } + \ No newline at end of file