Template icons

by Emanuele del Grande

HTML

<div class="logo">
    <span>CSS</span> <span>Icons</span>
    <div>Pure-CSS template icons</div>
</div>
<p>Test of pure-CSS template icons, styling a single DIV as far as possible.
</p>

<div class="template-preview">
    <div class="template-a template-icon"></div>
    <div class="title">Newspaper</div>
    <div class="description">100% wide layout with left column, header and footer.</div>
</div>
<div class="template-preview">
    <div class="template-b template-icon"></div>
    <div class="title">Navigator</div>
    <div class="description">100% wide layout with right column, header and footer.</div>
</div>
<div class="template-preview">
    <div class="template-c template-icon"></div>
    <div class="title">Portal</div>
    <div class="description">100% wide layout with two columns aside, header and footer.</div>
</div>
<div class="template-preview">
    <div class="template-d template-icon"></div>
    <div class="title">Compact</div>
    <div class="description">fixed width layout with header and footer.</div>
</div>

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }


/* SPECIFIC LAYOUT */
.template-preview { clear: both; padding: 10px 0; }
.template-preview .title { margin: 0 0 0 60px; padding: 0; font-weight: bold; }
.template-preview .description { margin: 0 0 0 60px; padding: 0; }
.template-icon {
    float: left; vertical-align: middle; position: relative; top: 0; left: 0;
    height: 35px; width: 50px; margin: 0 5px 0 0; border: 2px solid #444; border-radius: 4px;
}

.template-a { }
.template-a:before {
    content: ""; display: block; position: absolute; top: 20%; left: 0;
    width: 100%; height: 60%;
    border-bottom: 1px solid #444; border-top: 1px solid #444;;
    
}
.template-a:after {
    content: ""; display: block; position: absolute; top: 20%; right: 0;
    width: 10px; height: 60%;
    border-left:...