<body class="align text--center">
<div class="grid">
<h1>Welcome</h1>
<nav class="navigation navigation--inline navigation--main">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
@use postcss-preset-env;
/* settings */
:root {
--baseColor: #fff;
}
/* helpers/align.css */
.align {
display: grid;
place-items: center;
}
/* helpers/grid.css */
:root {
--gridMaxWidth: 30rem;
--gridWidth: 90%;
}
.grid {
margin-left: auto;
margin-right: auto;
max-width: var(--gridMaxWidth);
width: var(--gridWidth);
}
/* layout/base.css */
:root {
--htmlFontSize: 100%;
--bodyBackgroundColor: #333d4b;
--bodyColor: #fff;
--bodyFontFamily: 'Helvetica Neue';
--bodyFontFamilyFallback: sans-serif;
--bodyFontSize: 1rem;
--bodyFontWeight: 400;
--bodyLineHeight: 1.5;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: var(--htmlFontSize);
}
body {
background-color: var(--bodyBackgroundColor);
color: var(--bodyColor);
font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
font-size: var(--bodyFontSize);
font-weight: var(--bodyFontWeight);
line-height: var(--bodyLineHeight);
margin: 0;
min-height: 100vh;
}
/* modules/anchor.css */
a {
outline: 0;
text-decoration: none;
transition: color .3s, background-color .3s;
}
/* modules/headline.css */
:root {
--h1FontSize: 42px;
--h1FontFamily: 'Norican';
--h1FontFamilyFallback: cursive;
--h1FontWeight: 400;
--h1MarginBottom: 24px;
--h1TextTransform: lowercase;
}
h1 {
font-family: var(--h1FontFamily), var(--h1FontFamilyFallback);
font-size: var(--h1FontSize);
font-weight: var(--h1FontWeight);
margin-bottom: var(--h1MarginBottom);
margin-top: 0;
text-transform: var(--h1TextTransform);
}
/* modules/navigation.css */
:root {
--navigationMainBackgroundColor: #fff;
--navigationMainBorderRadius: .25rem;
--navigationMainFontSize: .75rem;
--navigationMainFontWeight: bold;
--navigationMainPaddingHorizontal: 1.25rem;
--navigationMainPaddingVertical: .75rem;
--navigationMainTextTransform: uppercase;
--navigationMainItemMargin: 1.5%;
--navigationMainLinkBorderRadius: .125rem;
--navigationMainLinkColor: #aeaeae;
--navigationMainLinkPaddingHorizontal: .75rem;
--navigationMainLinkPaddingVertical: .5rem;
--navigationMainLinkHoverBackgroundColor: #f43958;
--navigationMainLinkHoverColor: #fff;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.navigation a {
display: block;
}
.navigation--inline ul {
display: flex;
flex-wrap: wrap;
}
.navigation--inline li {
flex-grow: 1;
}
.navigation--main {
background-color: var(--navigationMainBackgroundColor);
box-shadow: 0 0 .125rem rgba(0, 0, 0, .75);
border-radius: var(--navigationMainBorderRadius);
font-weight: var(--navigationMainFontWeight);
font-size: var(--navigationMainFontSize);
padding: var(--navigationMainPaddingVertical) var(--navigationMainPaddingHorizontal);
position: relative;
text-transform: var(--navigationMainTextTransform);
}
.navigation--main::before {
border-bottom: .25rem solid var(--navigationMainBackgroundColor);
border-left: .25rem solid transparent;
border-right: .25rem solid transparent;
bottom: 100%;
content: '';
left: 50%;
position: absolute;
transform: translateX(-50%);
}
.navigation--main ul {
margin: calc(var(--navigationMainItemMargin) * -1);
}
.navigation--main li {
margin: var(--navigationMainItemMargin);
}
.navigation--main a {
border-radius: var(--navigationMainLinkBorderRadius);
color: var(--navigationMainLinkColor);
padding: var(--navigationMainLinkPaddingVertical) var(--navigationMainLinkPaddingHorizontal);
}
.navigation--main a:focus,
.navigation--main a:hover {
background-color: var(--navigationMainLinkHoverBackgroundColor);
color: var(--navigationMainLinkHoverColor);
}
/* modules/text.css */
.text--center {
text-align: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.