dom manipulations uses elements

This commit is contained in:
realaravinth
2021-05-09 16:39:52 +05:30
parent cd729effb9
commit 686774a182
30 changed files with 262 additions and 128 deletions

View File

@@ -33,7 +33,7 @@
width: 90%;
justify-content: center;
align-items: center;
box-sizing: content-box;
// box-sizing: content-box;
background-color: $white;
margin: auto;
padding-bottom: 30px;

View File

@@ -1,19 +1,19 @@
<ul class="details">
<li class="details__item">&copy; 2021 mCAptcha Developers</li>
<li class="details__dummy-filler"></li>
<li class="details__item">
<a class="details__link" href="<.= crate::PKG_HOMEPAGE .>">Homepage</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.about .>">About</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.thanks .>">Thanks</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.donate .>">Donate</a>
</li>
<li class="details__item">
v<.= crate::VERSION .>-<.= crate::GIT_COMMIT_HASH[0..8] .>
</li>
</ul>
<footer role="contentinfo">
<ul class="details">
<li class="details__item">
<a class="details__link" href="<.= crate::PKG_HOMEPAGE .>">Homepage</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.about .>">About</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.thanks .>">Thanks</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.donate .>">Donate</a>
</li>
<li class="details__item">
v<.= crate::VERSION .>-<.= crate::GIT_COMMIT_HASH[0..8] .>
</li>
</ul>
</footer>

View File

@@ -18,27 +18,20 @@
.details {
list-style: none;
position: absolute;
position: relative;
bottom: 0px;
box-sizing: border-box;
width: 95%;
display: flex;
font-size: 14px;
margin: auto;
}
.details__dummy-filler {
flex: 10;
background-color: $backdrop;
}
.details__item {
margin: auto 10px;
}
.details__item:first-child {
flex: 4;
}
.details__link {
color: $blue-link;
}

View File

@@ -1,5 +1,5 @@
<. include!("./details-footers.html"); .>
</main>
<. include!("./details-footers.html"); .>
</body>
<link rel="stylesheet" href="<.= &*crate::CSS .>" type="text/css" media="all">
<script src="<.= &*crate::JS .>"></script>

View File

@@ -2,7 +2,41 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><.= PAGE .> | <.= crate::pages::NAME .></title>
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="HTML and CSS Tips and Tricks for creating applications that are both responsive and accessible out of the box"
/>
<meta name="author" content="Aravinth Manivannan" />
<meta name="twitter:card" value="summary_large_image" />
<meta name="twitter:site" content="@realaravinth" />
<meta
name="twitter:title"
content="<.= PAGE .> | <.= crate::pages::NAME .>"
/>
<meta
name="twitter:description"
content="mCaptcha is an AGPL'd, privacy focued, proof-of-work based CAPTCHA System"
/>
<meta name="twitter:creator" content="@realaravinth" />
<meta name="twitter:image" content="https://mcaptcaha.org/icon-trans.png" />
<meta
property="og:title"
content="<.= PAGE .> | <.= crate::pages::NAME .>"
/>
<meta property="og:type" content="article" />
<meta property="og:url" content="https://mcaptcaha.org" />
<meta property="og:image" content="https://mcaptcaha.org/icon-trans.png" />
<meta
property="og:description"
content="mCaptcha is an AGPL'd, privacy focued, proof-of-work based CAPTCHA System"
/>
<meta property="og:site_name" content="Responsible Web Applications" />
</head>
<body>
<body class="layout"></body>
</html>