programmer/intermodal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add links to site

Browse Source 
Grid and flexbox made this way better than they would have been otherwise.

Also with cool glow-on-hover effect!

type: documentation
This commit is contained in:
Casey Rodarmor 2020-03-20 16:00:37 -07:00
parent 6328118c00
commit 6d5f489f19
No known key found for this signature in database
GPG Key ID: 556186B153EC6FE0
2 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
www/index.css
View File

@ -1,8 +1,8 @@
:root { :root {
--width-target: calc(100vw / 6); --width-target: calc(100vw / 6);
--height-target: calc(100vh / 3); --height-target: calc(100vh / 4);
--size: min(var(--width-target), var(--height-target)); --size: min(var(--width-target), var(--height-target));
--margin-vertical: calc((100vh - var(--size) * 2) / 2); --margin-vertical: calc((100vh - var(--size) * 2.5) / 2);
--margin-horizontal: calc((100vw - var(--size) * 5) / 2); --margin-horizontal: calc((100vw - var(--size) * 5) / 2);
} }
@ -36,8 +36,24 @@ a {
} }
#intermodal > * { #intermodal > * {
height: var(--size); width: var(--size);
width: var(--size); }
#intermodal > div {
height: var(--size);
}
#intermodal > a {
align-items: center;
display: flex;
font-size: calc(var(--size) / 9);
height: calc(var(--size) / 2);
justify-content: center;
line-height: calc(var(--size) / 9);
}
a:hover {
text-shadow: 0 0 5px #fff;
} }
/* intermodal is an isogram */ /* intermodal is an isogram */

33
www/index.html
View File

@ -7,20 +7,25 @@
<link href="index.css" rel="stylesheet" type="text/css"> <link href="index.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
<a href="https://github.com/casey/intermodal"> <div id="intermodal">
<div id="intermodal"> <div id="i"></div>
<div id="i"></div> <div id="n"></div>
<div id="n"></div> <div id="t"></div>
<div id="t"></div> <div id="e"></div>
<div id="e"></div> <div id="r"></div>
<div id="r"></div>
<div id="m"></div> <div id="m"></div>
<div id="o"></div> <div id="o"></div>
<div id="d"></div> <div id="d"></div>
<div id="a"></div> <div id="a"></div>
<div id="l"></div> <div id="l"></div>
</div>
</a> <a href="https://github.com/casey/intermodal"> github </a>
<a href="https://github.com/casey/intermodal/releases"> releases </a>
<a href="https://discordapp.com/invite/HaaT5Qz"> discord </a>
<a href="book"> book </a>
<a href="https://crates.io/crates/imdl"> crates.io </a>
</div>
</body> </body>
</html> </html>
<!-- Love, Casey --> <!-- Love, Casey -->