Skip to content

Instantly share code, notes, and snippets.

@mrwm

mrwm/index.html

Created February 10, 2021 20:48
Show Gist options
  • Save mrwm/bb1cddd58291163b1c3c5f6d697afa24 to your computer and use it in GitHub Desktop.
Save mrwm/bb1cddd58291163b1c3c5f6d697afa24 to your computer and use it in GitHub Desktop.
Download ZIP
Art103 template html for google docs embeds
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="description" content="The description">
<meta name="author" content="Author">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<nav>
<!-- copy paste the a tags for each page
Don't forget to set currentNav for the current page -->
<a class="title currentNav" href="index.html">Title</a>
<a class="" href="#">1</a>
<a class="" href="#">2</a>
<a class="" href="#">3</a>
</nav>
<!-- replace the iframe below with the embed code from google docs -->
<iframe src=""></iframe>
</body>
</html>
Raw
main.css
@charset "UTF-8";
/*----------------------
Variables
Usage: var(--varName)
----------------------*/
:root{
--max-width: 17in;
--button-pad: 0.5em;
/*Change to the # of header links*/
--nav-num: calc(100% / 4)
}
/*----------------
Page layout
------------------*/
body{
max-width: var(--max-width);
display: block;
margin: 0 auto;
}
nav {
/**/
display: flex;
flex-flow: row wrap;
justify-content: stretch;
align-content: stretch;
width: 100%;
border-bottom: 1px solid black;
}
nav a {
padding: var(--button-pad);
min-width: 7.5em;
width: calc(var(--nav-num) - var(--button-pad)*2);
margin: 0 auto;
font-size: 1.5em;
color: #ccc;
text-decoration: none;
text-align: center;
}
nav a:hover {
color: #000;
}
.title{
text-align: start;
}
nav .currentNav {
color: #000;
}
iframe {
display: block;
margin: 0 auto;
width: 80vw;
max-width: var(--max-width);
height: 100vh;
border: 0;
}
@media only screen and (max-width: 11in){
iframe {
width: 100vw;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment