Skip to content

Instantly share code, notes, and snippets.

@KVanSant

KVanSant/index.html

Created June 1, 2017 21:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KVanSant/ac27f7778eb4c04f42f0f598108c9536 to your computer and use it in GitHub Desktop.
Save KVanSant/ac27f7778eb4c04f42f0f598108c9536 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Vintage Sheet Music Cover in CSS Grid
Raw
index.html
<div class="wrapper">
<div class="title">
<h1>Ring Ting-A-Ling</h1>
</div>
<div class="left-column side-columns">
<ul class="main">
<li class="one">
<div></div>
</li>
<li class="two">
<div></div>
</li>
<li class="three">
<div></div>
</li>
<li class="four">
</li>
<li class="five check">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="six">
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="seven check">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="eight">
<div></div>
</li>
<li class="nine">
<div>
<svg class="leaf firstleaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
</div>
</li>
<li class="ten">
<div></div>
</li>
<li class="eleven">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
<div class="middle-top-credits">
<p>Songs introduced in <br>
<span class="large">Chas. Dillingham's</span> <br>
<span class="small">production</span> <br>
<span class="large">"Over the River"</span> <br>
<span class="small">Presenting</span> <br>
<span class="xlarge">Eddie Foy</span></p>
</div>
<div class="middle-picture">
<div class="top-decoration">
<div class="left-corner-shape cs">
<div></div>
</div>
<div class="large-decor-shape">
<div></div>
</div>
<div class="right-corner-shape cs">
<div></div>
</div>
</div>
<div class="picture-box">
<div class="square-wrap sw1">
<div class="left-square"></div>
</div>
<div class="ms-wrap">
<div class="middle-shape"></div>
</div>
<div class="square-wrap sw2">
<div class="right-square"></div>
</div>
<div class="picture">
<div class="image"></div>
</div>
</div>
</div>
<div class="right-column side-columns">
<ul class="main">
<li class="one">
<div></div>
</li>
<li class="two">
<div></div>
</li>
<li class="three">
<div></div>
</li>
<li class="four">
</li>
<li class="five check">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="six">
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="seven check">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="eight">
<div></div>
</li>
<li class="nine">
<div>
<svg class="leaf firstleaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
<svg class="leaf" viewbox="0 0 100 100">
<title>Leaf</title>
<use xlink:href="#leaf" />
</svg>
</div>
</li>
<li class="ten">
<div>
</div>
</li>
<li class="eleven">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
<div class="words-by by">
<div class="dark-border">
<div class="light-border">
<div class="innermost">
<p>Words By</p>
<p> WM. Jerome <br class="break">& Grant Clarke</p>
</div>
</div>
</div>
<div class="ul by-boxes"></div>
<div class="ur by-boxes"></div>
<div class="bl by-boxes"></div>
<div class="br by-boxes"></div>
</div>
<div class="middle-bottom-credits">
<div class="songs-wrapper">
<ul>
<li>The Chop-Stick Rag. <span class="dash">- -</span> 60</li>
<li>Ring Ting-A-Ling. <span class="dash">- - -</span> 60</li>
</ul>
</div> <!-- end songs-wrapper -->
<p>Jerome & Schwartz</p>
<p>Publishing Co.</p>
<p>1445 Broadway . New york</p>
<p>Jerome H Remick & Co Sells Agts</p>
</div>
<div class="music-by by">
<div class="dark-border">
<div class="light-border">
<div class="innermost">
<p>Music By</p>
<p>Jean Schwartz</p>
</div>
</div>
</div>
<div class="ul by-boxes"></div>
<div class="ur by-boxes"></div>
<div class="bl by-boxes"></div>
<div class="br by-boxes"></div>
</div>
</div>
<svg width="0" height="0" class="hide">
<defs>
<g id="leaf">
<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" fill="#42365a" d="M75.044,59.823c-0.002-0.425-0.006-0.85-0.019-1.272 c-0.003-0.088-0.008-0.175-0.011-0.263c-0.015-0.434-0.034-0.866-0.06-1.295c-0.004-0.072-0.011-0.142-0.016-0.214 c-0.03-0.444-0.063-0.885-0.105-1.323c-0.005-0.055-0.013-0.108-0.018-0.163c-0.045-0.451-0.094-0.899-0.152-1.341 c-0.007-0.05-0.015-0.098-0.022-0.148c-0.06-0.445-0.125-0.887-0.199-1.322c-0.007-0.043-0.016-0.085-0.024-0.128 c-0.076-0.439-0.157-0.874-0.247-1.301c-0.009-0.041-0.019-0.08-0.028-0.121c-0.091-0.427-0.188-0.848-0.294-1.261 c-0.009-0.036-0.02-0.071-0.03-0.107c-0.108-0.414-0.22-0.823-0.343-1.221c-0.012-0.04-0.026-0.077-0.039-0.117 c-0.122-0.392-0.249-0.777-0.385-1.152c-0.018-0.049-0.039-0.095-0.057-0.144c-0.134-0.361-0.272-0.716-0.419-1.059 c-0.029-0.067-0.062-0.129-0.091-0.196c-0.141-0.319-0.284-0.634-0.437-0.936c-0.045-0.088-0.094-0.167-0.14-0.254 c-0.144-0.272-0.288-0.544-0.442-0.801c-0.203-0.338-0.414-0.661-0.635-0.97c-0.335-0.456-0.7-0.91-1.083-1.364 c-0.183-0.217-0.375-0.434-0.57-0.651c-0.07-0.078-0.131-0.155-0.204-0.232c-0.002,0.003-0.004,0.006-0.006,0.009 c-0.034-0.037-0.07-0.074-0.105-0.112c-0.084-0.091-0.169-0.181-0.254-0.272c-0.368-0.387-0.747-0.773-1.148-1.158 c-0.079-0.076-0.162-0.153-0.243-0.229c-2.324-2.198-5.124-4.364-8.057-6.458c-0.047-0.034-0.094-0.067-0.141-0.101 c-0.422-0.301-0.842-0.601-1.268-0.898c0.001-0.001,0.001-0.002,0.002-0.003c-0.381-0.266-0.762-0.525-1.143-0.788 c-0.324-0.223-0.645-0.447-0.969-0.668c-0.954-0.653-1.9-1.297-2.834-1.93c-0.042-0.029-0.088-0.058-0.127-0.087 c-0.423-0.286-0.824-0.56-1.238-0.841c-0.561-0.381-1.126-0.764-1.668-1.136c-0.077-0.053-0.147-0.103-0.223-0.155 c-0.774-0.532-1.531-1.058-2.25-1.571c0,0,0,0.001,0,0.001c-0.594-0.424-1.166-0.841-1.71-1.25c-0.014-0.01-0.025-0.02-0.039-0.03 c-0.536-0.403-1.047-0.799-1.526-1.186c-0.084-0.068-0.154-0.132-0.236-0.2c-0.384-0.315-0.756-0.628-1.095-0.932 c-0.013-0.011-0.028-0.023-0.04-0.034c-0.012-0.01-0.021-0.021-0.033-0.031c-0.414-0.375-0.796-0.742-1.131-1.098 c-5.649-5.99-9.827-11.719-9.827-11.719l-0.27,0.922c0.001,0.005,0.003,0.012,0.004,0.017c-0.002,0.01-0.005,0.022-0.005,0.022 c-0.025-0.097-0.053-0.141-0.053-0.141c0.012,0.071,0.024,0.142,0.035,0.213c-0.383,1.322-0.743,2.644-1.102,3.928 c-2.979,11.06-4.71,20.372-5.188,28.271c-0.009,0.151-0.018,0.302-0.026,0.453c-0.055,1.002-0.094,1.986-0.108,2.943 c-0.003,0.171,0,0.336-0.001,0.506c-0.005,0.768,0.003,1.521,0.025,2.26c0.007,0.256,0.011,0.515,0.022,0.767 c0.032,0.762,0.082,1.507,0.144,2.238c0.03,0.358,0.065,0.711,0.102,1.061c0.052,0.489,0.113,0.969,0.179,1.444 c0.079,0.577,0.171,1.142,0.27,1.699c0.057,0.317,0.116,0.632,0.179,0.943c0.295,1.45,0.664,2.833,1.103,4.152 c0.034,0.101,0.069,0.2,0.104,0.299c0.306,0.889,0.644,1.751,1.017,2.583c0.006,0.013,0.011,0.026,0.017,0.039 C33.34,73.839,45.084,80.008,63.574,84.36c5.518,5.862,7.558,8.048,7.558,8.048l3.522-2.436c-2.822-1.517-5.416-3.428-7.84-5.643 c0.283-0.232,0.558-0.483,0.823-0.753c0.081-0.071,0.157-0.153,0.236-0.227c0.144-0.133,0.287-0.267,0.427-0.41 c0.116-0.119,0.228-0.246,0.341-0.372c0.138-0.154,0.276-0.307,0.41-0.471c0.107-0.131,0.211-0.27,0.316-0.407 c0.132-0.174,0.265-0.347,0.393-0.53c0.1-0.143,0.196-0.293,0.293-0.441c0.125-0.192,0.251-0.383,0.372-0.583 c0.093-0.153,0.181-0.314,0.271-0.472c0.119-0.209,0.237-0.417,0.351-0.635c0.085-0.163,0.167-0.331,0.249-0.498 c0.111-0.225,0.223-0.449,0.329-0.682c0.079-0.172,0.153-0.349,0.229-0.525c0.104-0.24,0.208-0.478,0.306-0.725 c0.071-0.178,0.138-0.361,0.207-0.543c0.096-0.255,0.193-0.509,0.285-0.771c0.064-0.182,0.123-0.368,0.184-0.552 c0.089-0.271,0.179-0.541,0.263-0.817c0.056-0.184,0.108-0.372,0.161-0.559c0.082-0.285,0.164-0.57,0.241-0.86 c0.048-0.184,0.093-0.372,0.139-0.558c0.075-0.3,0.149-0.6,0.218-0.905c0.041-0.182,0.078-0.367,0.116-0.55 c0.067-0.315,0.134-0.63,0.194-0.95c0.033-0.175,0.062-0.352,0.093-0.527c0.059-0.334,0.119-0.668,0.172-1.006 c0.026-0.164,0.047-0.329,0.071-0.494c0.051-0.352,0.102-0.704,0.146-1.058c0.019-0.156,0.035-0.312,0.053-0.469 c0.042-0.367,0.084-0.735,0.118-1.105c0.013-0.141,0.022-0.282,0.034-0.423c0.033-0.386,0.064-0.772,0.088-1.16 c0.008-0.126,0.012-0.251,0.019-0.377c0.022-0.403,0.043-0.805,0.056-1.208c0.004-0.113,0.004-0.225,0.007-0.337 c0.01-0.415,0.019-0.83,0.019-1.244C75.048,60.023,75.045,59.923,75.044,59.823z"/>
</g>
</defs>
</svg>
<!--
CREDITS
Leaf by Jacqueline Fernandes from the Noun Project
Gradient help from Nick Lewis' pen https://codepen.io/nickylew/pen/mWdBgz
-->
Raw
responsive-vintage-sheet-music-cover-in-css-grid.markdown
Raw
style.css
* {
box-sizing: border-box;
/* border-radius: 5px; */
}
body {
background-color: #dec7b0;
padding: 2%;
text-transform: uppercase;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"title title title"
"lcol mtc rcol"
"lcol mp rcol"
"wb mbc mb";
grid-gap: 20px;
}
.title {
grid-area: title;
color: #95334b;
background-color: #adb9bb;
text-align: center;
border: 10px solid #3d3638;
}
.title h1 {
font-size: 9.5vw;
word-spacing: 1rem;
font-family: 'Philosopher', sans-serif;
font-weight: normal;
padding: 0;
margin: 2% 0;
}
.middle-top-credits {
grid-area: mtc;
color: #443a38;
/* background-color: #adb9bb; */
text-align: center;
text-transform: uppercase;
border: 10px solid #3d3638;
border-top: none;
z-index: 1;
position: relative;
margin-top: -30px;
background-image:linear-gradient(to top, #adb9bb 0%, #b9a8b4 100%);
}
.middle-top-credits p {
font-family: 'Capriola', sans-serif;
margin: 0;
font-size: 2.05vw;
line-height: 1.3;
word-spacing: 5px;
}
.middle-top-credits .small {
font-size: 1.4vw;
}
.middle-top-credits .large {
font-size: 2.4vw;
font-weight: bold;
}
.middle-top-credits .xlarge {
font-size: 4.8vw;
font-weight: bold;
}
.left-column {
grid-area: lcol;
}
.side-columns .main {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(70px, auto);
/* background-color: #b9a8b4; */
border: 10px solid #3d3638;
border-top: none;
background-image:linear-gradient(to top,#b9a8b4 0%, #b0b4b9 100%);
}
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.one {
border-top: 10px solid #3d3638;
grid-column: 1;
grid-row: 1 / 3;
}
.one div, .three div {
background: #906378;
height: 140px;
width: 60px;
margin: 15px auto 0 auto;
border: 2px solid #42365a;
}
.two {
border: 10px solid #3d3638;
border-top: none;
background: #dec7b0;
grid-column: 2;
grid-row: 1 / 1;
}
.two div {
background: #3d3638;
height: 90px;
width: 65px;
margin: 0 auto 15px auto;
}
.three {
border-top: 10px solid #3d3638;
grid-column: 3;
grid-row: 1 / 3;
}
.four {
background: #976c73;
height: 20px;
width: 140px;
margin: 20px 0;
border: 2px solid #42365a;
grid-column: 2;
grid-row: 2 / 3;
box-shadow: 0 0 60px #b9a8b4;
}
.five {
grid-column: 1;
grid-row: 3;
}
.check {
margin: 1%;
}
.check ul, .six ul {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 3;
}
.check ul li {
border: 2px solid #42365a;
}
.check ul li:nth-child(1) {
background: #42365a;
grid-column: 1;
grid-row: 1;
}
.check ul li:nth-child(2) {
grid-column: 2;
grid-row: 1;
}
.check ul li:nth-child(3) {
background: #42365a;
grid-column:3;
grid-row: 1;
}
.check ul li:nth-child(4) {
background: #906378;
grid-column: 2;
grid-row: 2;
border-top: none;
border-bottom: none;
}
.check ul li:nth-child(5) {
background: #42365a;
grid-column: 1;
grid-row: 3;
}
.check ul li:nth-child(6) {
grid-column: 2;
grid-row: 3;
}
.check ul li:nth-child(7) {
background: #42365a;
grid-column: 3;
grid-row: 3;
}
.six {
grid-column: 2;
grid-row: 3;
}
.six, .nine, .eleven {
border-left: 10px solid #3d3638;
border-right: 10px solid #3d3638;
padding: 2%;
}
.six ul li {
background: #976c73;
border: 2px solid #42365a;
}
.six ul li:nth-child(1) {
grid-column: span 3;
grid-row: 1;
}
.six ul li:nth-child(2) {
grid-column: span 3;
grid-row: 3;
}
.seven {
grid-column: 3;
grid-row: 3;
}
.eight {
grid-column: 1;
grid-row: 4 / 11;
}
.eight, .ten {
padding: 7%;
}
.eight div, .ten div {
background: #a27f90;
height: 100%;
width: 100%;
border: 2px solid #42365a;
background-image:linear-gradient(10deg, #ad8799 0%, #a27f90 60%, #b7abb5 100%);
}
.nine {
grid-column: 2;
grid-row: 4 / 10;
}
.nine div {
height: 100%;
width: 100%;
background: #b1566c;
border: 5px solid #42365a;
display: grid;
align-items: stretch;
overflow: hidden;
}
.leaf {
transform: rotate(160deg);
height: 100px;
width: auto;
margin: -25px auto;
}
.firstleaf {
margin-top: -10px;
}
.ten {
grid-column: 3;
grid-row: 4 / 11;
}
.eleven {
grid-column: 2;
grid-row: 10;
}
.eleven ul {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 4;
grid-template-rows: 3;
}
.eleven ul li {
background: #976c73;
border: 2px solid #42365a;
margin: 1%;
}
.eleven ul li:nth-child(1) {
grid-column: span 4;
grid-row: 1;
}
.eleven ul li:nth-child(2) {
grid-column: 2 / 4;
grid-row: 2;
}
.eleven ul li:nth-child(3) {
grid-column: span 4;
grid-row: 3;
}
.middle-picture {
grid-area: mp;
}
.top-decoration {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
margin-bottom: 20px;
}
.cs {
height: 80px;
width:80px;
background: #dec7b0;
border: 10px solid #a88490;
display: grid;
align-items: center;
}
.cs div {
height: 40px;
width: 40px;
background: #a88e86;
border: 2px solid #3d3638;
border-radius: 0 0 90% 0;
margin: auto;
margin-left: 7px;
margin-top: 7px;
}
.left-corner-shape {
grid-column: 1;
border-radius: 0 0 90% 0;
}
.large-decor-shape {
grid-column: 2;
height: 130px;
width: auto;
justify-self: center;
}
.large-decor-shape {
height: 100px;
width: 300px;
background: #3d3638;
border-radius: 50% 50% 5% 5%;
display: grid;
align-items: end;
padding-bottom: 4%;
}
.right-corner-shape {
grid-column: 3;
justify-self: end;
border-radius: 0 0 0 90%;
}
.right-corner-shape div {
border-radius: 0 0 0 90%;
margin-left: 13px;
margin-top: 7px;
}
.picture-box {
background-color: #adb9bb;
background-image:linear-gradient(120deg, #b9a8b4 0%, #adb9bb 100%);
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"sw1 msw sw2"
"p p p";
}
.square-wrap {
border: 10px solid #3d3638;
border-bottom: none;
}
.sw1 {
grid-area: sw1;
}
.ms-wrap {
grid-area: msw;
border-bottom: 10px solid #3d3638;
background-color: #dec7b0;
}
.middle-shape {
height: 70px;
width: 70px;
background-color: #3d3638;
margin: 2% auto;
}
.sw2 {
grid-area: sw2;
}
.left-square, .right-square {
height: 70px;
width: 70px;
border: 2px solid #3d3638;
margin: 10% auto;
}
.left-square {
background-color: #a88490;
}
.right-square {
background-color: #a199a8;
}
.picture {
grid-area: p;
border: 10px solid #3d3638;
border-top: none;
}
.image {
height: 400px;
width: 300px;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/lillian.jpg') no-repeat;
background-size: cover;
background-position: center;
margin: 5% auto;
border-radius: 50%;
border: 2px solid #3d3638;
mix-blend-mode: darken;
}
.right-column {
grid-area: rcol;
}
.right-column .leaf {
transform: rotate(-160deg) scaleX(-1);
}
.words-by {
grid-area: wb;
}
.by {
text-align: center;
display: grid;
grid-template-columns: 1fr 4fr 1fr;
grid-row-gap: 2%;
align-items: end;
}
.ul {
grid-column: 1;
grid-row: 1;
}
.ur {
grid-column: 3;
grid-row: 1;
}
.bl {
grid-column: 1;
grid-row: 3;
}
.br {
grid-column: 3;
grid-row: 3;
}
.by-boxes {
height: 70%;
width: 100%;
background: #3d3638;
}
.innermost p {
margin: 0;
padding: 0;
font-size: 3vw;
font-family: 'Philosopher', sans-serif;
z-index: 3;
position: relative;
color: #d3b9b5;
}
.innermost p:nth-child(1){
font-size: 1.7vw;
margin-top: -44px;
padding-bottom: 1%;
}
.innermost {
background: #705359;
padding: 5%;
width: 95%;
margin: 0 auto;
z-index: 2;
}
.innermost:before {
position: absolute;
content:'';
background: #705359;
height: 50px;
width: 200px;
margin-left: -100px;
margin-top: -60px;
z-index: 2;
}
.innermost:after {
position: absolute;
content:'';
background: #705359;
height: 50px;
width: 200px;
margin-left: -100px;
margin-top: 10px;
z-index: 2;
}
.light-border {
background: #d3b9b5;
padding: 10px 0;
width: 95%;
margin: 0 auto;
z-index: 1;
}
.light-border:before {
position: absolute;
content:'';
background: #d3b9b5;
height: 45px;
width: 220px;
margin-left: -110px;
margin-top: -55px;
z-index: 1;
}
.light-border:after {
position: absolute;
content:'';
background: #d3b9b5;
height: 45px;
width: 220px;
margin-left: -110px;
margin-top: 10px;
z-index: 1;
}
.dark-border {
background: #443b64;
padding: 10px 0;
width: 100%;
margin: 0 auto;
margin-top: -35px;
grid-column: 1 / 4;
grid-row: 1 / 3;
}
.dark-border:before {
position: absolute;
content:'';
background: #443b64;
height: 45px;
width: 240px;
margin-left: -120px;
margin-top: -55px;
}
.dark-border:after {
position: absolute;
content:'';
background: #443b64;
height: 45px;
width: 240px;
margin-left: -120px;
margin-top: 10px;
}
.middle-bottom-credits {
grid-area: mbc;
text-align: center;
}
.songs-wrapper {
background-color: #cf9c5c;
border: 2px solid #615051;
}
.songs-wrapper ul {
font-family: 'Capriola', sans-serif;
word-spacing: 5px;
color: #c15859;
background-color: #e0ca87;
border: 2px solid #615051;
list-style: none;
margin: 2%;
padding: 10%;
}
.songs-wrapper ul li:first-of-type {
margin-bottom: 5%;
}
.dash {
letter-spacing: 3px;
}
.middle-bottom-credits p {
color: #443a38;
line-height: 1;
padding: 0;
margin: 0;
font-family: 'Philosopher', sans-serif;
}
.middle-bottom-credits p:first-of-type {
margin-top: 5%;
font-size: 2.6vw;
}
.middle-bottom-credits p:nth-of-type(2) {
font-size: 2.2vw;
}
.middle-bottom-credits p:nth-of-type(3) {
font-size: 1.8vw;
}
.music-by {
grid-area: mb;
}
.music-by .innermost p:nth-child(1) {
margin-top: -20px;
padding: 0;
}
.music-by .innermost p:nth-child(2) {
padding-bottom: 6.988%;
}
.break {
display: none;
}
/************* MEDIA QUERIES **************/
@media (max-width: 1070px) {
.two, .three, .four, .seven, .eight, .ten {
display: none;
}
}
@media (min-width: 751px) and (max-width: 1070px) {
.side-columns .main {
grid-template-columns: repeat(1, 110px);
justify-content: center;
border-top: 10px solid #3d3638;
}
.one {
grid-row: 1;
border-top: none;
}
.one div {
height: 50px;
width: auto;
}
.five {
grid-row: 2;
}
.six {
grid-row: 3;
}
.six, .nine, .eleven {
grid-column: 1;
border: none;
}
.large-decor-shape {
width: 200px;
}
}
/* For the "by" boxes */
@media (max-width: 1280px) {
.break {
display: block;
}
}
@media (max-width: 1020px) {
.dark-border:after, .dark-border:before, .light-border:after, .light-border:before, .innermost:after, .innermost:before {
display: none;
}
.innermost p:nth-child(1) {
margin: 0;
padding: 0;
}
.music-by .innermost p:nth-child(1) {
margin: 0;
padding: 0;
margin-top: 10%;
}
.dark-border {
height: 80%;
}
.light-border {
height: 100%;
}
.innermost {
height: 100%;
}
}
@media (max-width: 750px) {
body {
padding: 0;
margin: 0;
/* background-image: linear-gradient(to top, #b9a8b4 0%, #adb9bb 100%);
border: 25px solid #dec7b0;
box-shadow: inset 0 0 30px #b9a8b4; */
}
.wrapper {
margin: 3%;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"mtc mtc"
"lcol lcol"
"mp mp"
"rcol rcol"
"wb mb"
"mbc mbc"
;
}
.middle-top-credits {
position: relative;
border-top: 10px solid;
}
.side-columns .main, .right-column, .left-column {
display: none;
}
.picture {
border-top: 10px solid #443a38;
}
.square-wrap, .ms-wrap, .top-decoration {
display: none;
}
.innermost, .light-border, .dark-border {
margin: 0 auto;
}
.innermost {
padding: 20%;
}
.innermost p {
padding: 0;
margin-bottom: 50%;
}
.music-by .innermost p:nth-child(1) {
margin: 0;
}
.by {
margin-top: -10%;
margin-bottom: 5%;
}
.middle-bottom-credits p {
line-height: 1.5;
}
.middle-bottom-credits p:first-of-type {
font-size: 3.6vw;
margin-top: 5%;
}
.middle-bottom-credits p:nth-of-type(2) {
font-size: 3.2vw;
}
.middle-bottom-credits p:nth-of-type(3) {
font-size: 2.8vw;
}
.innermost p {
font-size: 5vw;
}
.innermost p:nth-child(1){
font-size: 3.7vw;
}
.songs-wrapper, .top-decoration {
margin: 0 5%;
}
.middle-top-credits p {
margin:4% 0 0 0;
font-size: 3.05vw;
line-height: 1.5;
}
.middle-top-credits .small {
font-size: 2.4vw;
}
.middle-top-credits .large {
font-size: 3.4vw;
}
.middle-top-credits .xlarge {
font-size: 5.8vw;
}
}
/***** by boxes *****/
@media (max-width: 1280px) {
.by-boxes {
display: none;
}
.dark-border {
align-self: center;
margin-top: 0;
}
}
@media (max-width: 1370px) {
.by-boxes {
height: 60%;
width: 70%;
margin: 0 auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment