Skip to content

Instantly share code, notes, and snippets.

@kevinmarks

kevinmarks/dabblet.css

Created June 22, 2023 15:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinmarks/add81eccd677d5f7ae0985376d138692 to your computer and use it in GitHub Desktop.
Save kevinmarks/add81eccd677d5f7ae0985376d138692 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
.main-window {
background-color: #111111;
text-align: center;
display: block;
margin: auto;
margin-top: 10px;
margin-bottom: 15px;
padding: 20px;
max-width: 65ch;
}
.main-window h1 {
text-align: left;
}
main {
margin: auto;
margin-top: 10px;
margin-bottom: 15px;
padding: 20px;
max-width: 65ch;
text-align: left;
}
.menu ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 10px;
}
.card {
position: relative;
text-align: center;
margin: 5px;
border: 2px solid #752E7C;
border-radius: 10px;
box-sizing: border-box;
}
.card::before {
content: '';
display: block;
padding-top: 100%;
margin: 0;
padding: 0;
}
.card-background {
opacity: 0;
}
.card-background:hover {
opacity: 1;
}
.card a {
position: absolute;
top: 50%;
left: 50%;
/*height: 100%;
width: 100%;
*/
text-decoration: none;
background: transparent;
}
.card a:visited, .posts a:visited {
color: white;
}
.card::marker {
content: "";
}
Raw
dabblet.html
<!-- content to be placed inside <body>…v</body> -->
<main class="broider main-window">
<!--<h1>Click...at your own risk!</h1>-->
<hr>
<nav class="menu">
<ul>
<li class="card">
<a href="posts"><img src="blog.png" class="card-background">Posts</a>
</li>
<li class="card">
<img src="about.png" class="card-background"><a href="about">About</a></img>
</li>
<li class="card">
<img src="rss.png" class="card-background"><a href="https://envs.net">RSS</a></img>
</li>
<li class="card">
<img src="blogroll.png" class="card-background"><a href="https://envs.net">Blogroll</a></img>
</li>
<li class="card">
<img src="bookmarks.png" class="card-background"><a href="https://envs.net">Bookmarks</a></img>
</li>
<li class="card">
<img src="gemini.png" class="card-background"><a href="https://gemini.envs.net/~negatethis">Gemini</a></img>
</li>
</ul>
</nav>
</main>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment