Shopify Template Font Setup

Shopify Template Font Setup

Now we need to dress up the fonts a little.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

/* Defining the grid areas */

nav {

grid-area: nav;

background-color: #00242f57;

}

main {

grid-area: main;

background-color: #E5E5E5;

color: #1A1A1A;

}

aside {

grid-area: aside;

background-color: #BFBFBF;

color: #4D4D4D;

}

footer {

grid-area: footer;

background-color: #4D4D4D;

color: #BFBFBF;

}

/* Styles for the grid container */

.grid-container {

display: grid;

/* Styles for the placement of the grid areas */

grid-template-areas:

"nav"

"main"

"aside"

"footer";

grid-gap: .5rem;

padding: .25rem;

}

/* 2 media queries for the grid container */

@media only screen and (min-width: 550px) {

.grid-container {

grid-template-columns: repeat(2,1fr);

grid-template-areas:

"nav nav"

"main main"

"aside ."

"footer footer";

grid-gap: .75rem;

padding: .5rem;

}

}

@media only screen and (min-width: 800px) {

.grid-container {

grid-template-columns: repeat(3,1fr);

grid-template-areas:

"nav nav nav"

"aside main main"

"footer footer footer";

grid-gap: 1rem;

padding: .75rem;

}

}

/* Styles for the grid items */

.grid-box {

padding: .5rem;

font-size: 1.25rem;

border-radius: .125rem;

}

/* 2 media queries for the grid items */

@media only screen and (min-width: 550px) {

.grid-box {

padding: .75rem;

font-size: 1.5rem;

}

}

@media only screen and (min-width: 800px) {

.grid-box {

padding: 1rem;

font-size: 1.25rem;

}

}

/*Navbar*/

.logo{

background: url(/img/logo.webp) no-repeat top left;

margin: 10px;

width: 200px;

height: 45px;

}

.logo:hover {

filter: brightness(110%);

}

ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

ul.topnav li {float: left;}

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {

ul.topnav li.right,

ul.topnav li {float: none;}

}

</style>

</head>

<body>

<div class="grid-container">

<nav>

<ul class="topnav">

<a href="/" aria-label="go to home page">

<li>

<div class="logo"></div>

</li>

</a>

<li class="right"><a href="/">Home</a></li>

<li class="right"><a href="{% url 'pages:about' %}">About</a></li>

<li class="right"><a href="{% url 'contact:contact' %}">Contact</a></li>

</ul>

</nav>

<main class="grid-box">

<h3 style="color:#444;">Content</h3>

</main>

<aside class="grid-box">

<!-- / Begin Body -->

<div class='swanky'>

<!-- / Introduction Block -->

<!-- /////////// Begin Dropdown //////////// -->

<div class='swanky_wrapper'>

<input id='Dashboard' name='radio' type='radio'>

<label for='Dashboard'>

<span>Introduction</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>How to use</li>

<li>About</li>

<li>Analytics</li>

<li>Code Blocks</li>

</ul>

</div>

</label>

<input id='Sales' name='radio' type='radio'>

<label for='Sales'>

<span>Setup</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>Windows</li>

<li>Browsers</li>

<li>Screen readers</li>

<li>Helper tools </li>

</ul>

</div>

</label>

<input id='Messages' name='radio' type='radio'>

<label for='Messages'>

<span>Knowledge</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>Colours & contrast</li>

<li>Semantics</li>

<li>ARIA</li>

<li>Keyboard only</li>

<li>Screen readers</li>

</ul>

</div>

</label>

<input id='Users' name='radio' type='radio'>

<label for='Users'>

<span>Code</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>New User</li>

<li>User Groups</li>

<li>Permissions</li>

<li>Passwords</li>

</ul>

</div>

</label>

<input id='Settings' radio='radio' type='radio'>

<label for='Settings'>

<span>Examples</span>

<div class='lil_arrow'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>HTML Boilerplate</li>

<li>Hiding elements</li>

<li>Headings</li>

<li>Tables</li>

<li>Forms</li>

<li>Widgets</li>

<li>Sensible ARIA usage</li>

</ul>

</div>

</label>

</div>

<!-- /////////// End Dropdown //////////// -->

</div>

</aside>

<footer class="grid-box">

footer

</footer>

</div>

</body>

</html>

And now we’re going to setup the left side menu.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

/* Defining the grid areas */

nav {

grid-area: nav;

background-color: #00242f57;

}

main {

grid-area: main;

background-color: #E5E5E5;

color: #1A1A1A;

}

aside {

grid-area: aside;

background-color: #BFBFBF;

color: #4D4D4D;

}

footer {

grid-area: footer;

background-color: #4D4D4D;

color: #BFBFBF;

}

/* Styles for the grid container */

.grid-container {

display: grid;

/* Styles for the placement of the grid areas */

grid-template-areas:

"nav"

"main"

"aside"

"footer";

grid-gap: .5rem;

padding: .25rem;

}

/* 2 media queries for the grid container */

@media only screen and (min-width: 550px) {

.grid-container {

grid-template-columns: repeat(2,1fr);

grid-template-areas:

"nav nav"

"main main"

"aside ."

"footer footer";

grid-gap: .75rem;

padding: .5rem;

}

}

@media only screen and (min-width: 800px) {

.grid-container {

grid-template-columns: repeat(3,1fr);

grid-template-areas:

"nav nav nav"

"aside main main"

"footer footer footer";

grid-gap: 1rem;

padding: .75rem;

}

}

/* Styles for the grid items */

.grid-box {

padding: .5rem;

font-size: 1.25rem;

border-radius: .125rem;

}

/* 2 media queries for the grid items */

@media only screen and (min-width: 550px) {

.grid-box {

padding: .75rem;

font-size: 1.5rem;

}

}

@media only screen and (min-width: 800px) {

.grid-box {

padding: 1rem;

font-size: 1.25rem;

}

}

/*Navbar*/

.logo{

background: url(/img/logo.webp) no-repeat top left;

margin: 10px;

width: 200px;

height: 45px;

}

.logo:hover {

filter: brightness(110%);

}

ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

ul.topnav li {float: left;}

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {

ul.topnav li.right,

ul.topnav li {float: none;}

}

li {

list-style-type: none;

}

ol,ul {

list-style: none;

list-style-type: none;

}

input[type=radio] {

display: none;

}

body .swanky_title {

float: right;

text-align: left;

width: 400px;

color: white;

position: relative;

top: 70px;

}

body .swanky_title__social a {

position: relative;

overflow: hidden;

width: 140px;

margin-right: 15px;

text-decoration: none;

padding: 0px 0px 5px 0px;

height: 40px;

border: 2px solid white;

float: left;

color: white;

font-size: 12px;

font-weight: 400;

margin-top: 20px;

}

body .swanky_title__social a .slide {

height: 45px;

width: 100px;

float: left;

position: absolute;

transform: skew(20deg);

left: -120px;

transition-property: left;

transition-duration: 0.2s;

background: white;

}

body .swanky_title__social a .slide .arrow {

position: absolute;

right: 31px;

top: 24px;

opacity: 0;

transform: skew(-20deg);

}

body .swanky_title__social a .slide .arrow .stem {

width: 10px;

height: 2px;

background: #858490;

}

body .swanky_title__social a .slide .arrow .point {

width: 6px;

height: 6px;

border-right: 2px solid #858490;

top: -3px;

right: 1px;

position: absolute;

transform: rotate(45deg);

border-top: 2px solid #858490;

}

body .swanky_title__social a img {

width: 16px;

margin-left: 10px;

position: relative;

margin-right: 8px;

transition-property: margin-left;

transition-duration: 0.1s;

margin-top: 10px;

top: 4px;

}

body .swanky_title__social a:hover > .slide {

left: -70px;

transition-property: left;

transition-duration: 0.1s;

}

body .swanky_title__social a:hover > img {

margin-left: 40px;

transition-property: margin-left;

transition-duration: 0.1s;

}

body .swanky_title__social a:hover > .slide .arrow {

right: 11px;

opacity: 1;

transition-property: right, opacity;

transition-delay: 0.07s;

transition-duration: 0.2s;

}

body .swanky .intro {

float: right;

color: white;

width: 370px;

top: 50px;

position: relative;

}

body .swanky .intro h1 {

text-shadow: 0px 2px rgba(0, 0, 0, 0.26);

}

body .swanky .intro p {

line-height: 20px;

text-shadow: 0px 1px rgba(0, 0, 0, 0.26);

}

body .swanky_wrapper {

height: auto;

overflow: hidden;

border-radius: 4px;

background: #333;

}

body .swanky_wrapper label {

padding: 25px;

float: left;

height: 72px;

border-bottom: 1px solid #555;

position: relative;

width: 100%;

color: #eff4fa;

transition: text-indent 0.15s, height 0.3s;

box-sizing: border-box;

}

body .swanky_wrapper label img {

margin-right: 10px;

position: relative;

top: 2px;

width: 16px;

}

body .swanky_wrapper label span {

position: relative;

top: -3px;

}

body .swanky_wrapper label:hover {

background: #333;

border-bottom: 1px solid #000;

text-indent: 4px;

}

body .swanky_wrapper label:hover .bar {

width: 100%;

}

body .swanky_wrapper label .bar {

width: 0px;

transition: width 0.15s;

height: 2px;

position: absolute;

display: block;

background: #333;

bottom: 0;

left: 0;

}

body .swanky_wrapper label .lil_arrow {

width: 5px;

height: 5px;

transition: transform 0.8s;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

border-top: 2px solid white;

border-right: 2px solid white;

float: right;

position: relative;

top: 6px;

right: 2px;

transform: rotate(45deg);

}

body .swanky_wrapper__content {

position: absolute;

display: none;

overflow: hidden;

left: 0;

width: 100%;

}

body .swanky_wrapper__content li {

width: 100%;

opacity: 0;

left: -100%;

background: #4f4e4e;

padding: 25px 0px;

text-indent: 25px;

box-shadow: 0px 0px gold inset;

transition: box-shadow 0.3s, text-indent 0.3s;

position: relative;

}

body .swanky_wrapper__content li:hover {

background: #333;

box-shadow: 3px 0px #ccc inset;

transition: box-shadow 0.3s linear, text-indent 0.3s linear;

text-indent: 31px;

}

body .swanky_wrapper__content .clear {

clear: both;

}

input[type=radio]:checked + label .swanky_wrapper__content {

display: block;

top: 68px;

border-bottom: 1px solid #333;

}

input[type=radio]:checked + label > .lil_arrow {

transition: transform 0.8s;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transform: rotate(135deg);

border-top: 2px solid gold;

border-right: 2px solid gold;

}

input[type=radio]:checked + label {

height: 355px;

background: #333;

text-indent: 4px;

transition-property: height;

transition-duration: 0.6s;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label .bar {

width: 0;

}

input[type=radio]:checked + label li:nth-of-type(1) {

-webkit-animation: in 0.15s 0.575s forwards;

animation: in 0.15s 0.575s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.575s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label li:nth-of-type(2) {

-webkit-animation: in 0.15s 0.7s forwards;

animation: in 0.15s 0.7s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.7s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label li:nth-of-type(3) {

-webkit-animation: in 0.15s 0.825s forwards;

animation: in 0.15s 0.825s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.825s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

input[type=radio]:checked + label li:nth-of-type(4) {

-webkit-animation: in 0.15s 0.95s forwards;

animation: in 0.15s 0.95s forwards;

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

-moz-animation: in 0.15s 0.95s forwards;

-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

@-webkit-keyframes in {

from {

left: -100%;

opacity: 0;

}

to {

left: 0;

opacity: 1;

}

}

@keyframes in {

from {

left: -100%;

opacity: 0;

}

to {

left: 0;

opacity: 1;

}

}

.love {

position: absolute;

right: 20px;

bottom: 0px;

font-size: 11px;

font-weight: normal;

}

.love p {

color: white;

font-weight: normal;

font-family: "Open Sans", sans-serif;

}

.love a {

color: white;

font-weight: 700;

text-decoration: none;

}

.love img {

position: relative;

top: 3px;

margin: 0px 4px;

width: 10px;

}

.brand {

position: absolute;

left: 20px;

bottom: 14px;

}

.brand img {

width: 30px;

}

</style>

</head>

<body>

<div class="grid-container">

<nav>

<ul class="topnav">

<a href="/" aria-label="go to home page">

<li>

<div class="logo"></div>

</li>

</a>

<li class="right"><a href="/">Home</a></li>

<li class="right"><a href="{% url 'pages:about' %}">About</a></li>

<li class="right"><a href="{% url 'contact:contact' %}">Contact</a></li>

</ul>

</nav>

<main class="grid-box">

<h3 style="color:#444;">Content</h3>

</main>

<aside class="grid-box">

<!-- / Begin Body -->

<div class='swanky'>

<!-- / Introduction Block -->

<!-- /////////// Begin Dropdown //////////// -->

<div class='swanky_wrapper'>

<input id='Dashboard' name='radio' type='radio'>

<label for='Dashboard'>

<span>Introduction</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>How to use</li>

<li>About</li>

<li>Analytics</li>

<li>Code Blocks</li>

</ul>

</div>

</label>

<input id='Sales' name='radio' type='radio'>

<label for='Sales'>

<span>Setup</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>Windows</li>

<li>Browsers</li>

<li>Screen readers</li>

<li>Helper tools </li>

</ul>

</div>

</label>

<input id='Messages' name='radio' type='radio'>

<label for='Messages'>

<span>Knowledge</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>Colours & contrast</li>

<li>Semantics</li>

<li>ARIA</li>

<li>Keyboard only</li>

<li>Screen readers</li>

</ul>

</div>

</label>

<input id='Users' name='radio' type='radio'>

<label for='Users'>

<span>Code</span>

<div class='lil_arrow'></div>

<div class='bar'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>New User</li>

<li>User Groups</li>

<li>Permissions</li>

<li>Passwords</li>

</ul>

</div>

</label>

<input id='Settings' radio='radio' type='radio'>

<label for='Settings'>

<span>Examples</span>

<div class='lil_arrow'></div>

<div class='swanky_wrapper__content'>

<ul>

<li>HTML Boilerplate</li>

<li>Hiding elements</li>

<li>Headings</li>

<li>Tables</li>

<li>Forms</li>

<li>Widgets</li>

<li>Sensible ARIA usage</li>

</ul>

</div>

</label>

</div>

<!-- /////////// End Dropdown //////////// -->

</div>

</aside>

<footer class="grid-box">

footer

</footer>

</div>

</body>

</html>

Now we need to dress up the fonts a little.

Free shipping when you spend $50 or more.

Shop Now