ericfawcett
/
route-eight
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

break out css

This commit is contained in:
Eric Fawcett 2021-10-17 20:17:48 +00:00
parent f711277bec
commit 12ac382495
2 changed files with 43 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@ -4,50 +4,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Route 8 Cameras</title>
<style type="text/css">
body {
margin: auto;
background-color: #444444;
align-content: center;
}
.grid-item img {
display: inline-block;
width: 100%;
}
.title-wrapper{
text-align: center;
background-color: #000000;
}
.item-title {
color: #ffffff;
font-size: 1.5em;
text-transform: uppercase;
}
.grid-container { /* Default to single column for small screens */
margin: auto;
display: grid;
grid-template-columns: 100%;
grid-gap: 0.2em 0.2em;
}
@media only screen and (min-width: 40em){ /* screens >640px wide*/
.grid-container {
grid-template-columns: 49% 49%;
}
}
@media only screen and (min-width: 78.75em){ /* screens >1260px wide */
.grid-container {
grid-template-columns: 33% 33% 33%;
}
.item-title {
font-size: 1.7em;
}
}
@media only screen and (min-width: 118.75em){ /* screens >1900px wide */
.item-title {
font-size: 2.2em;
}
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script>
$(document).ready(function(){

42
style.css Normal file
View File

@ -0,0 +1,42 @@
body {
margin: auto;
background-color: #444444;
align-content: center;
}
.grid-item img {
display: inline-block;
width: 100%;
}
.title-wrapper{
text-align: center;
background-color: #000000;
}
.item-title {
color: #ffffff;
font-size: 1.5em;
text-transform: uppercase;
}
.grid-container { /* Default to single column for small screens */
margin: auto;
display: grid;
grid-template-columns: 100%;
grid-gap: 0.2em 0.2em;
}
@media only screen and (min-width: 40em){ /* screens >640px wide*/
.grid-container {
grid-template-columns: 49% 49%;
}
}
@media only screen and (min-width: 78.75em){ /* screens >1260px wide */
.grid-container {
grid-template-columns: 33% 33% 33%;
}
.item-title {
font-size: 1.7em;
}
}
@media only screen and (min-width: 118.75em){ /* screens >1900px wide */
.item-title {
font-size: 2.2em;
}
}