tilde.black
/
ops
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Compare commits

merge into: tilde.black:master
Branches Tags
tilde.black:master
southerntofu:master
...
pull from: southerntofu:master
Branches Tags
southerntofu:master
tilde.black:master

5 Commits
master ... master

Author SHA1 Message Date
southerntofu ade24ec2bd remove JS + add more relative URLs 2019-08-26 23:13:29 +02:00
southerntofu 173ec41691 Relative URLs for assets 2019-08-26 23:02:41 +02:00
southerntofu b27d049257 Reintroduce awesome CSS transition for menu entries 2019-08-26 22:59:52 +02:00
southerntofu f5032974f1 :target based menu 2019-08-26 22:46:53 +02:00
southerntofu f78a76b588 add gitignore 2019-08-26 22:46:44 +02:00
4 changed files with 43 additions and 67 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
**/.*.sw*

6
templates/web/assets/scripts.js
View File

@ -1,6 +0,0 @@
/* Close menu buttons on select */
Array.from(document.querySelectorAll('.link-grid a')).map( el => {
el.addEventListener('click', e => {
document.getElementById("toggle").checked = false;
})
})

74
templates/web/assets/styles.css
View File

@ -90,26 +90,38 @@ h3 {
max-width: 100%; max-width: 100%;
} }
#main-nav #toggle { #main-nav .links {
display: none; display: none;
} }
#main-nav #toggle:checked ~ section { #main-nav:target .links {
display: block; display: block;
} }
#main-nav #toggle:checked ~ label { #main-nav:target .open {
display: none;
}
#main-nav:target .close {
display: block;
background-position: 0 -52px; background-position: 0 -52px;
} }
#main-nav label { #main-nav .open {
display: block;
}
#main-nav .close {
display: none;
}
#main-nav .menubutton {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
display: block;
cursor: pointer; cursor: pointer;
line-height: 40px; line-height: 40px;
background-image: url('/assets/nav-toggle.png'); background-image: url('nav-toggle.png');
background-size: 50px 103px; background-size: 50px 103px;
background-position: 0 0; background-position: 0 0;
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
@ -119,10 +131,7 @@ h3 {
z-index: 5; z-index: 5;
} }
#main-nav section { #main-nav .links {
position: absolute;
top: 0;
left: 0;
width: 100vw; width: 100vw;
max-width: 100%; max-width: 100%;
height: 100vh; height: 100vh;
@ -135,36 +144,14 @@ h3 {
background-color: #222; background-color: #222;
} }
#main-nav section .link-grid { #main-nav .links {
display: grid;
padding-bottom: 55px; padding-bottom: 55px;
padding-top: 55px; padding-top: 55px;
max-height: 100%; max-height: 100%;
grid-template-columns: 1fr 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.5fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
". . . nl nl nl nl nl nl . . ."
} }
#main-nav section .link-grid .links { #main-nav .links a {
grid-area: nl;
padding-bottom: 55px;
height: 100%;
}
#main-nav section header {
text-align: center;
}
#main-nav section header img {
height: 22px;
padding-top: 17px;
margin-bottom: 50px;
}
#main-nav section .link-grid .links a {
display: block; display: block;
position: relative;
line-height: 60px; line-height: 60px;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
@ -173,27 +160,26 @@ h3 {
text-align: center; text-align: center;
transition: color 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: color 0.7s cubic-bezier(0.23, 1, 0.32, 1);
font-family: "blankaregular"; font-family: "blankaregular";
max-width: 60vw;
margin: auto;
} }
#main-nav section .link-grid .links a:hover { #main-nav .links a:hover {
color: #222; color: #222;
}
#main-nav section .link-grid .links a::after {
content: ''; content: '';
display: block; //display: block;
position: absolute; //position: absolute;
width: 100%; width: 100%;
height: 60px; height: 60px;
top: 0; top: 0;
transform: scaleX(0); //transform: scaleX(0);
transform-origin: left center; //transform-origin: left center;
transition: background-color 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: background-color 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 1s cubic-bezier(0.23, 1, 0.32, 1);
background-color: #fc03cf; background-color: #fc03cf;
z-index: -1; //z-index: -1;
} }
#main-nav section .link-grid .links a:hover::after { #main-nav .links a:hover::after {
transform: scaleX(1); transform: scaleX(1);
} }

29
templates/web/head.partial.html
View File

@ -6,31 +6,26 @@
<meta http-equiv=X-UA-Compatible content="IE=edge"> <meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="shrink-to-fit=no,width=device-width,height=device-height,initial-scale=1,user-scalable=1"> <meta name=viewport content="shrink-to-fit=no,width=device-width,height=device-height,initial-scale=1,user-scalable=1">
<meta name="description" content="The black hole of the tildeverse"> <meta name="description" content="The black hole of the tildeverse">
<link rel='stylesheet' href='/assets/styles.css'> <link rel='stylesheet' href='assets/styles.css'>
<link rel='canonical' href='https://tilde.black/' /> <link rel='canonical' href='https://tilde.black/' />
<link rel='icon' href='favicon.ico' type='image/x-icon' /> <link rel='icon' href='favicon.ico' type='image/x-icon' />
<script defer type="text/javascript" src="/assets/scripts.js"></script>
</head> </head>
<body> <body>
<nav id='main-nav'> <nav id='main-nav' class='link-grid'>
<input type='checkbox' id='toggle' /> <div class='links'>
<label for='toggle'>&nbsp;</label> <a href='#intro'>Home</a>
<section> <a href='#about'>About</a>
<div class='link-grid'> <a href='#docs'>Guides</a>
<div class='links'> <a href='#features'>Features</a>
<a href='#intro'>Home</a> <a href='#users'>User Pages</a>
<a href='#about'>About</a> </div>
<a href='#docs'>Guides</a> <a class="menubutton open" href="#main-nav"></a>
<a href='#features'>Features</a> <a class="menubutton close" href="#"></a>
<a href='#users'>User Pages</a>
</div>
</div>
</section>
</nav> </nav>
<section id="intro"> <section id="intro">
<h1>Tilde Black</h1> <h1>Tilde Black</h1>
<h2>The black hole of the tildeverse</h2> <h2>The black hole of the tildeverse</h2>
<div class="icon"><img src="/assets/black-hole.svg" alt="Icon of a Black Hole"/></div> <div class="icon"><img src="assets/black-hole.svg" alt="Icon of a Black Hole"/></div>
<div class="copy"> <div class="copy">
<p>Tilde (~) servers are public access unix systems in the spirit of <p>Tilde (~) servers are public access unix systems in the spirit of
<a href="https://tilde.club" rel="noreferrer">tilde.club</a>, which was created by Paul Ford <a href="https://tilde.club" rel="noreferrer">tilde.club</a>, which was created by Paul Ford