So I've been putting together a handout for one of my classes. I did it in html so that i could insert content easily in the future.
A problem I ran into was when I went to print this page off, the lines wouldn't come up in the print screen. what i have are divs with a styled background that serve as the line one might write on. When i go to print these they are removed from print.
let me know if anybody knows what's up with this!
body{
margin:auto;
}
.page-container{
margin:auto;
padding:0 0 2em 0;
grid-template-columns:repeat(8, 12.5%);
grid-template-rows:repeat(4, auto);
grid-template-areas: "header header header header header header header header"
"top top top top top top top top"
". . main main main main . ."
"footer footer footer footer footer footer footer footer";
max-width:612pt;
max-height:792pt;
overflow-y: hidden;
border-left:2px solid black;
border-right:2px solid black;
}
.page-header{
grid-area:"header";
height:2pt;
}
.top{
grid-area: top;
}
.page-title, .title-analyzing_for, .analysis-categories{
text-align:center;
}
.page-title{
font-size:4rem;
font-family: 'Roboto Condensed', sans-serif;
}
.title-analyzing_for{
margin:1.4em 0 0 0;
font-size:1rem;
}
.analysis-categories{
display:flex;
flex-direction: row;
flex-wrap: wrap;
margin:1.4em auto 0 auto;
max-width:70%;
overflow:hidden;
justify-content: center;
font-family: 'Sanchez', serif;
}
.category{
display:block;
min-width:5.875em;
margin:0.6em 1.4em;
}
.lines_section{
display:flex;
grid-area: "main";
flex-direction:column;
align-items: center;
margin-top:20pt;
border: 2px solid pink;
}
.writing_space_component{
width:100%;
margin-top:7em;
font-size:1.5rem;
}
.writing_space_component:nth-of-type(1){
margin-top: 0;
}
.typed_writing{
width:100%;
height:1em;
text-align:center;
}
.line{
height:0.09em;
width:85%;
margin:2pt auto 0 auto;
border-radius:1pt;
background-color:black;
}
.line--dashed{
}
.pre_animation{
}
@media print{
.page-container{
border:none;
}
.lines_section{
border:none;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sentence Analysis</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A descri">
<meta name="author" content="Chris Cormier">
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto+Condensed|Sanchez&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="page-container">
<div class=""></div>
<section class="top">
<div class="page-title">Single-Factor<br>Sentence Analysis</div>
<div class="title-analyzing_for">Analyzing for:</div>
<div class="analysis-categories">
<div class="category">S-V-O</div>
<div class="category">Prepositions</div>
<div class="category">Word Type</div>
<div class="category">Pronoun Type</div>
<div class="category">Clauses</div>
<div class="category">S-V-O</div>
<div class="category">Prepositions</div>
<div class="category">Word Type</div>
<div class="category">Pronoun Type</div>
</div>
</section>
<main class="lines_section">
<div class="writing_space_component">
<div class="typed_writing">fdsafdsa</div>
<div class="line"></div>
</div>
<div class="writing_space_component">
<div class="typed_writing">fdsafdsa</div>
<div class="line"></div>
</div>
<div class="writing_space_component">
<div class="typed_writing">fdsafdsa</div>
<div class="line"></div>
</div>
<div class="writing_space_component">
<div class="typed_writing">fdsafdsa</div>
<div class="line"></div>
</div>
<div class="writing_space_component">
<div class="typed_writing">fdsafdsa</div>
<div class="line"></div>
</div>
</main>
</div>
</body>
</html>