mono.works Design Components

Preview 

<html>

<head>
    <title>mono.works</title>
    <link rel="icon" href="../../mono.works--favicon.svg?v&#x3D;3" type="image/svg+xml" />

    <!-- // SEO META -->
    <meta charset="utf-8" />

    <!-- // FUNCTIONAL META -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover" />
    <meta name="theme-color" content="#f5f5f5" />

    <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap" rel="stylesheet" />

    <style>
        @font-face {
            font-family: 'Friends';
            src: url('../../fonts/Friends-Regular.woff2') format('woff2'), url('../../fonts/Friends-Regular.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'Friends';
            src: url('../../fonts/Friends-UltraBold.woff2') format('woff2'), url('../../fonts/Friends-UltraBold.woff') format('woff');
            font-weight: bold;
            font-style: normal;
        }

        @font-face {
            font-family: 'Friends';
            src: url('../../fonts/Friends-Italic.woff2') format('woff2'), url('../../fonts/Friends-Italic.woff') format('woff');
            font-weight: normal;
            font-style: italic;
        }

        @font-face {
            font-family: 'Friends';
            src: url('../../fonts/Friends-UltraBolditalic.woff2') format('woff2'), url('../../fonts/Friends-UltraBolditalic.woff') format('woff');
            font-weight: bold;
            font-style: italic;
        }
    </style>

    <style>
        @font-face {
            font-family: 'Hardbop';
            src: url('../../fonts/hardboptrial-black-webfont.woff2') format('woff2'), url('../../fonts/hardboptrial-black-webfont.woff') format('woff');
            font-weight: bold;
            font-style: normal;
        }
    </style>

    <!-- // ASSETS -->
    <link href="../../monoworks.min.css?v=857f2d2" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../application.min.js?v=857f2d2" defer></script>

</head>

<body class="fractal --">

</body>

</html>
 
<html>
	<head>
		<title>mono.works</title>
		<link
			rel="icon"
			href="{{path '/mono.works--favicon.svg?v=3'}}"
			type="image/svg+xml"
		/>

		<!-- // SEO META -->
		<meta charset="utf-8" />

		<!-- // FUNCTIONAL META -->
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"
		/>
		<meta name="theme-color" content="#f5f5f5" />

		{{! OUTSIDE ASSETS }}
		<script
			src="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2"
		></script>

		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap"
			rel="stylesheet"
		/>

		<style>
			@font-face { font-family: 'Friends'; src: url('{{path
				"/fonts/Friends-Regular.woff2"
			}}') format('woff2'), url('{{path "/fonts/Friends-Regular.woff"}}')
			format('woff'); font-weight: normal; font-style: normal; }
			@font-face { font-family: 'Friends'; src: url('{{path
				"/fonts/Friends-UltraBold.woff2"
			}}') format('woff2'), url('{{path
				"/fonts/Friends-UltraBold.woff"
			}}') format('woff'); font-weight: bold; font-style: normal; }
			@font-face { font-family: 'Friends'; src: url('{{path
				"/fonts/Friends-Italic.woff2"
			}}') format('woff2'), url('{{path "/fonts/Friends-Italic.woff"}}')
			format('woff'); font-weight: normal; font-style: italic; }
			@font-face { font-family: 'Friends'; src: url('{{path
				"/fonts/Friends-UltraBolditalic.woff2"
			}}') format('woff2'), url('{{path
				"/fonts/Friends-UltraBolditalic.woff"
			}}') format('woff'); font-weight: bold; font-style: italic; }
		</style>

		<style>
			@font-face { font-family: 'Hardbop'; src: url('{{path
				"/fonts/hardboptrial-black-webfont.woff2"
			}}') format('woff2'), url('{{path
				"/fonts/hardboptrial-black-webfont.woff"
			}}') format('woff'); font-weight: bold; font-style: normal; }
		</style>

		<!-- // ASSETS -->
		<link
			href="{{path '/monoworks.min.css'}}?v={{buildId}}"
			rel="stylesheet"
			type="text/css"
		/>
		<script
			type="text/javascript"
			src="{{path '/application.min.js'}}?v={{buildId}}"
			defer
		></script>

	</head>
	<body class="fractal --{{_target.context.preview}}">
		{{#if _target.context.preview}}
			{{#ifequals _target.context.preview "templates"}}
				{{{render "@menu"}}}
			{{/ifequals}}
		{{/if}}

		{{{yield}}}

		{{#if _target.context.preview}}
			{{#ifequals _target.context.preview "templates"}}
				{{{render "@footer"}}}
			{{/ifequals}}
		{{/if}}
	</body>
</html>
 
/* No context defined. */

No notes defined.