release/0.2
Björn 3 years ago
parent 79edd96836
commit 499336c532

500
dist/components.html vendored

@ -0,0 +1,500 @@
<!doctype html>
<html lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css">
</head>
<body class="overflow-x-hidden">
<header class="header">
<div class="bar">
<div class="bar__main">
<h1 class="m-top-4 m-bottom-4 h4">
Plain UI 0.1-alpha
</h1>
</div>
</div>
</header>
<div class="container m-top-6">
<div class="grid">
<div class="col-12">
<nav>
<div class="tabs">
<a href="index.html" class="tabs__item">
Basics
</a>
<a href="components.html" class="tabs__item tabs__item--selected">
Components
</a>
<a href="layout.html" class="tabs__item">
Layout
</a>
<a href="helpers.html" class="tabs__item">
Helpers
</a>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-6">
<div class="content">
<p>
Some Text
<p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="m-bottom-2">Components</h2>
<h3>Buttons</h3>
<button class="button">
Default
</button>
<button class="button">
Default
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</button>
<button class="button button--danger">
Danger
</button>
<button class="button button--selected">
Hover
</button>
<button class="button button--outline">
Outline
</button>
<button class="button button--danger button--outline">
Danger Outline
</button>
</div>
<div class="col-12">
<button class="button" disabled>
Disabled
</button>
</div>
<div class="col-12">
<button class="button button--small">
Small
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
<svg class="icon fill-white marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
<div class="bar__main">
Bar
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<div class="tabs">
<a class="tabs__item tabs__item--selected">
Tab A
</a>
<a class="tabs__item">
Tab B
</a>
<a class="tabs__item">
Tab C
</a>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Content</h2>
<div class="content">
<p>
</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Badge</h2>
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Loading</h2>
<div>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Panel</h2>
<div class="panel">
<div class="bar">
<div class="bar__start">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg>
</button>
</div>
<div class="bar__main">Test</div>
<div class="bar__end">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-edit"></use>
</svg>
</button>
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="panel__body">
<div class="content">
<p>
Hallo
</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Modal</h2>
<button class="button" onclick="openModal()">
Click me!
</button>
<script type="text/javascript">
function openModal() {
document.querySelector('.modal').classList.add('modal--open')
}
function closeModal() {
document.querySelector('.modal').classList.remove('modal--open')
}
</script>
<div class="modal">
<div class="modal__inner">
<div class="modal__title t-center">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
Delete
</div>
<div class="modal__body">
Do you really wan't to delete all files?
</div>
<div class="modal__footer">
<button class="button button--outline button--danger" onclick="closeModal()">
Confirm
</button>
<button class="button button--outline float-right" onclick="closeModal()">
Reject
</button>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Field</h2>
<form>
<div class="field-group">
<label class="field-label">
Name
<input class="field-text" />
</label>
</div>
<div class="field-group field-group--valid">
<label class="field-label">
<svg class="icon" aria-hidden="true">
<use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
Surname
<input class="field-text" />
</label>
</div>
<div class="field-group field-group--error">
<label class="field-label">
<svg class="icon" aria-hidden="true">
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
</svg>
E-Mail
<input class="field-text" />
</label>
<span class="field-error">
String is not valid
</span>
</div>
<div class="field-group">
<label class="field-label">
Towns
<select class="field-choice">
<option></option>
<option value="lonytown">Lonytown</option>
</select>
</label>
</div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="checkbox" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
Do it!
</label>
</div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="radio" name="radio" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
A
</label>
<label class="field-label">
<input class="field-choice" type="radio" name="radio" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
B
</label>
</div>
</form>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Table</h2>
<table class="table table--striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="">Hero</h2>
</div>
</div>
</div>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="">Media</h2>
</div>
<div class="col-12">
<figure class="figure">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Layout</h2>
</div>
<div class="col-12">
<h2>Slider</h3>
</div>
</div>
</div>
<div class="slider">
<div class="slider__inner">
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Masonry</h3>
<div class="masonry">
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</div>
</div>
</div>
</div>
</body>
</html

76
dist/index.html vendored

@ -7,6 +7,7 @@
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title> <title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers"> <meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css"> <link rel="stylesheet" href="plain-ui.css">
</head> </head>
@ -14,42 +15,67 @@
<header class="header"> <header class="header">
<div class="bar"> <div class="bar">
<div class="bar__start">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</div>
<div class="bar__main"> <div class="bar__main">
<h1 class="m-top-4 m-bottom-4 h4"> <h1 class="m-top-4 m-bottom-4 h4">
Plain UI Plain UI 0.1-alpha
</h1> </h1>
</div> </div>
</div> </div>
</header> </header>
<div class="container m-top-7"> <div class="container m-top-6">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<nav>
<div class="tabs">
<a href="index.html" class="tabs__item tabs__item--selected">
Basics
</a>
<a href="components.html" class="tabs__item">
Components
</a>
<a href="layout.html" class="tabs__item">
Layout
</a>
<a href="helpers.html" class="tabs__item">
Helpers
</a>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="grid justify-center">
<div class="col-6">
<div class="content"> <div class="content">
<p> <p>
<span class="bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components. <span class="bold">Plain UI</span> is a simple UI Framework.
It uses strong Utility Classes and has a few Components.
</p> </p>
<p> <p>
Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS. Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
</p> </p>
<p> <h3 class="h4 highlight">
The Basic Idea was a quick Contribution
</p> </h3>
<ul>
<li>TailwindCSS that have thought me a few new Ideas to handle Helper-Classes</li>
<li>TailwindCSS for showing new ideas and concepts to handle handle Helper-Classes</li>
</ul>
</div> </div>
<div class="center"> <div class="center">
<a href="#"> <a href="#">
<svg class="icon fill-success" aria-hidden="true"> <svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use> <use xlink:href="symbol-defs.svg#icon-github"></use>
</svg> </svg>
</a> </a>
<a href="https://gitea.tentakelfabrik.de/"> <a href="https://gitea.tentakelfabrik.de/">
<svg class="icon fill-success" aria-hidden="true"> <svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use> <use xlink:href="symbol-defs.svg#icon-gitea"></use>
</svg> </svg>
</a> </a>
</div> </div>
@ -60,9 +86,8 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="m-bottom-2">Heading</h2> <h2 class="m-bottom-2 h-contrast">Heading</h2>
<hr>
<h1>Heading 1</h1> <h1>Heading 1</h1>
<h2>Heading 2</h2> <h2>Heading 2</h2>
<h3>Heading 3</h3> <h3>Heading 3</h3>
@ -133,15 +158,16 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<div class="bar"> <div class="tabs">
<div class="tabs"> <a class="tabs__item tabs__item--selected">
<a class="tabs__item"> Tab A
Tab A </a>
</a> <a class="tabs__item">
<a class="tabs__item"> Tab B
Tab B </a>
</a> <a class="tabs__item">
</div> Tab C
</a>
</div> </div>
</div> </div>
</div> </div>

103
dist/layout.html vendored

@ -0,0 +1,103 @@
<!doctype html>
<html lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css">
</head>
<body class="overflow-x-hidden">
<header class="header">
<div class="bar">
<div class="bar__main">
<h1 class="m-top-4 m-bottom-4 h4">
Plain UI 0.1-alpha
</h1>
</div>
</div>
</header>
<div class="container m-top-6">
<div class="grid">
<div class="col-12">
<nav>
<div class="tabs">
<a href="index.html" class="tabs__item">
Basics
</a>
<a href="components.html" class="tabs__item">
Components
</a>
<a href="layout.html" class="tabs__item tabs__item--selected">
Layout
</a>
<a href="helpers.html" class="tabs__item">
Helpers
</a>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-6">
<div class="content">
<p>
Some Text
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="highlight">
Layout
</h2>
<h3 class="highlight">
Grid
</h3>
<p class="m-bottom-4">
The grid is a small modificated Version from the Reflex Grid
</p>
<h3 class="highlight">
Masonry
</h3>
<div class="masonry">
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</div>
</div>
</div>
</div>
</body>
</html

69
dist/plain-ui.css vendored

@ -1849,10 +1849,14 @@ h3, .h3,
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
display: table;
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
font-weight: bold; font-weight: bold;
line-height: 1.2; line-height: 1.2;
margin: 0 0 1rem; padding: 0.25rem 0.5rem;
background: var(--primary);
color: var(--text-secondary);
margin: 0 0 1.2rem;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h1, .h1, h1, .h1,
@ -1861,24 +1865,16 @@ h3, .h3,
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
margin: 0 0 0.8rem; margin: 0 0 1.4rem;
} }
} }
h5 {
line-height: 1.4;
}
h6 {
line-height: 1.618;
}
h1, .h1 { h1, .h1 {
font-size: 2.5rem; font-size: 2.25rem;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h1, .h1 { h1, .h1 {
font-size: 3rem; font-size: 2.7rem;
} }
} }
@ -1892,38 +1888,38 @@ h2, .h2 {
} }
h3, .h3 { h3, .h3 {
font-size: 1.75rem; font-size: 1.8rem;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h3, .h3 { h3, .h3 {
font-size: 2.1rem; font-size: 2.16rem;
} }
} }
h4, .h4 { h4, .h4 {
font-size: 1.5rem; font-size: 1.6rem;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h4, .h4 { h4, .h4 {
font-size: 1.8rem; font-size: 1.92rem;
} }
} }
h5, .h5 { h5, .h5 {
font-size: 1.25rem; font-size: 1.4rem;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h5, .h5 { h5, .h5 {
font-size: 1.5rem; font-size: 1.68rem;
} }
} }
h6, .h6 { h6, .h6 {
font-size: 1rem; font-size: 1.2rem;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h6, .h6 { h6, .h6 {
font-size: 1.2rem; font-size: 1.44rem;
} }
} }
@ -2020,7 +2016,7 @@ h6, .h6 {
.content blockquote { .content blockquote {
border-left: 1px solid var(--primary); border-left: 1px solid var(--primary);
margin-left: 0; margin-left: 0;
padding: 0.5rem 1rem; padding: 0.4rem 0.8rem;
} }
.content blockquote p:last-child { .content blockquote p:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -2105,6 +2101,7 @@ h6, .h6 {
padding: 0; padding: 0;
border: none; border: none;
background: transparent; background: transparent;
border-radius: 0;
} }
.button--transparent:focus, .button--transparent:active { .button--transparent:focus, .button--transparent:active {
outline: none; outline: none;
@ -2414,9 +2411,7 @@ svg.field-choice__checked {
min-height: 2.8em; min-height: 2.8em;
background-color: var(--primary); background-color: var(--primary);
color: var(--text-secondary); color: var(--text-secondary);
} border-radius: 2px;
.bar .icon {
font-size: 1.5rem;
} }
.bar__start { .bar__start {
justify-content: start; justify-content: start;
@ -2435,9 +2430,6 @@ svg.field-choice__checked {
.bar__start:last-child, .bar__main:last-child, .bar__end:last-child { .bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
margin-right: 0.75em; margin-right: 0.75em;
} }
.bar .button:active, .bar .button:focus {
outline: none;
}
/** /**
* <figure class="media-figure"> * <figure class="media-figure">
@ -7530,6 +7522,7 @@ svg.field-choice__checked {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
border-bottom: 1px solid var(--primary);
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.tabs { .tabs {
@ -7542,28 +7535,26 @@ svg.field-choice__checked {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 1em; padding: 0 1em;
background-color: white;
transition: background-color 0.1s;
background-color: white;
color: var(--text); color: var(--text);
border: 1px solid var(--primary); transition: background-color 0.1s;
border-bottom-width: 0; border-bottom: 3px solid transparent;
background-color: transparent;
width: 100%; width: 100%;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.tabs__item { .tabs__item {
width: auto; width: auto;
display: inline-flex; display: inline-flex;
border-right-width: 0;
border-bottom-width: 1px;
} }
} }
.tabs__item:hover, .tabs__item--selected { .tabs__item:hover {
cursor: pointer; cursor: pointer;
background-color: var(--primary-active); background-color: var(--primary-active);
color: white; color: var(--text-secondary);
border-color: var(--primary-active); border-top-left-radius: 2px;
border-top-right-radius: 2px;
} }
.tabs__item:last-child { .tabs__item--selected {
border-bottom-width: 1px; color: var(--text);
border-color: var(--primary);
} }

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 52 KiB

@ -1,6 +1,5 @@
{ {
"/spritemap.js": "/spritemap.js", "/spritemap.js": "/spritemap.js",
"/dist/plain-ui.css": "/dist/plain-ui.css",
"/dist/fonts/demo.html": "/dist/fonts/demo.html", "/dist/fonts/demo.html": "/dist/fonts/demo.html",
"/dist/fonts/IBMPlexMono-Bold.eot": "/dist/fonts/IBMPlexMono-Bold.eot", "/dist/fonts/IBMPlexMono-Bold.eot": "/dist/fonts/IBMPlexMono-Bold.eot",
"/dist/fonts/IBMPlexMono-Bold.ttf": "/dist/fonts/IBMPlexMono-Bold.ttf", "/dist/fonts/IBMPlexMono-Bold.ttf": "/dist/fonts/IBMPlexMono-Bold.ttf",

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>gitea</title>
<path fill="#609926" d="M5.581 7.228c-2.46-0.005-5.755 1.559-5.573 5.48 0.284 6.125 6.56 6.693 9.068 6.743 0.275 1.149 3.227 5.112 5.412 5.32h9.573c5.741-0.381 10.040-17.363 6.853-17.427-5.271 0.248-8.395 0.373-11.073 0.395v5.3l-0.835-0.369-0.005-4.928c-3.075-0.001-5.781-0.144-10.919-0.397-0.643-0.004-1.539-0.113-2.501-0.116zM5.929 9.395h0.293c0.349 3.14 0.917 4.976 2.067 7.781-2.933-0.347-5.429-1.199-5.888-4.38-0.237-1.647 0.563-3.365 3.528-3.401zM17.339 12.481c0.2 0.003 0.404 0.040 0.596 0.128l0.999 0.431-0.716 1.305c-0.002 0-0.004-0-0.007-0-0.113 0-0.221 0.019-0.321 0.053l0.006-0.002c-0.349 0.114-0.593 0.406-0.593 0.749 0 0.097 0.019 0.189 0.055 0.275l-0.002-0.006c0.037 0.089 0.088 0.166 0.151 0.233l-0.001-0.001-1.235 2.248c-0.107 0.002-0.208 0.020-0.302 0.052l0.006-0.002c-0.349 0.114-0.593 0.406-0.593 0.749 0 0.097 0.019 0.189 0.055 0.275l-0.002-0.006c0.128 0.31 0.457 0.527 0.843 0.527 0.109 0 0.213-0.017 0.31-0.049l-0.006 0.002c0.348-0.114 0.592-0.406 0.592-0.749 0-0.097-0.020-0.19-0.056-0.277l0.002 0.006c-0.048-0.115-0.119-0.213-0.211-0.293l-0-0 1.203-2.189c0.029 0.003 0.062 0.005 0.095 0.005 0.106 0 0.207-0.016 0.302-0.046l-0.006 0.002c0.109-0.036 0.204-0.087 0.285-0.15l-0.001 0.001c0.464 0.195 0.844 0.353 1.117 0.488 0.411 0.203 0.556 0.337 0.6 0.487 0.044 0.147-0.004 0.429-0.236 0.925-0.173 0.369-0.46 0.893-0.799 1.511-0.006-0-0.013-0-0.020-0-0.113 0-0.222 0.019-0.321 0.053l0.006-0.002c-0.349 0.114-0.593 0.406-0.593 0.749 0 0.097 0.019 0.189 0.055 0.275l-0.002-0.006c0.128 0.31 0.457 0.527 0.843 0.527 0.109 0 0.213-0.017 0.31-0.049l-0.006 0.002c0.348-0.114 0.592-0.406 0.592-0.749 0-0.097-0.019-0.19-0.055-0.275l0.002 0.006c-0.043-0.104-0.105-0.194-0.183-0.27l0.001 0.001c0.335-0.611 0.623-1.136 0.808-1.531 0.251-0.536 0.381-0.935 0.267-1.32s-0.467-0.636-0.933-0.867c-0.307-0.151-0.689-0.311-1.147-0.503 0.001-0.015 0.002-0.033 0.002-0.050 0-0.096-0.019-0.188-0.054-0.274l0.002 0.006c-0.045-0.108-0.11-0.201-0.194-0.279l0 0 0.704-1.284 3.899 1.684c0.704 0.305 0.995 1.053 0.653 1.68l-2.68 4.907c-0.343 0.625-1.184 0.884-1.888 0.58l-5.516-2.384c-0.704-0.304-0.996-1.053-0.653-1.68l2.68-4.905c0.235-0.431 0.707-0.687 1.207-0.707z"></path>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>github</title>
<path d="M16 0.396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18 0.8 0.151 1.093-0.344 1.093-0.769 0-0.38-0.013-1.387-0.020-2.72-4.451 0.965-5.389-2.147-5.389-2.147-0.728-1.847-1.78-2.34-1.78-2.34-1.449-0.992 0.112-0.972 0.112-0.972 1.607 0.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331 0.144-1.035 0.556-1.74 1.013-2.14-3.553-0.4-7.288-1.776-7.288-7.907 0-1.747 0.62-3.173 1.647-4.293-0.18-0.404-0.72-2.031 0.14-4.235 0 0 1.34-0.429 4.4 1.64 1.28-0.356 2.64-0.532 4-0.54 1.36 0.008 2.72 0.184 4 0.54 3.040-2.069 4.38-1.64 4.38-1.64 0.86 2.204 0.32 3.831 0.16 4.235 1.020 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893 0.56 0.48 1.080 1.461 1.080 2.96 0 2.141-0.020 3.861-0.020 4.381 0 0.42 0.28 0.92 1.1 0.76 6.401-2.099 10.981-8.099 10.981-15.159 0-8.836-7.164-16-16-16z"></path>
</svg>

After

Width:  |  Height:  |  Size: 975 B

@ -92,7 +92,9 @@ $plain-ui__colors: (
--black: #212121; --black: #212121;
--text: #{$plain-ui__text}; --text: #{$plain-ui__text};
--text-secondary: #{$plain-ui__text-secondary}; --text-secondary: #{$plain-ui__text-secondary};
--background: #{$plain-ui__background}; --background: #{$plain-ui__primary};
--background--contrast: #{$plain-ui__primary};
--body: #{$plain-ui__body};
--border: #{$plain-ui__border}; --border: #{$plain-ui__border};
} }
@ -111,9 +113,9 @@ $plain-ui__margin-breakpoints: (
* *
*/ */
$plain-ui__padding: 0.5rem 1rem !default; $plain-ui__padding: 0.4rem 0.8rem !default;
$plain-ui__padding-breakpoints: ( $plain-ui__padding-breakpoints: (
$plain-ui__md: 0.25rem 0.75rem $plain-ui__md: 0.6rem 1rem
) !default; ) !default;
/** /**

@ -21,9 +21,7 @@
background-color: var(--primary); background-color: var(--primary);
color: var(--text-secondary); color: var(--text-secondary);
.icon { border-radius: $plain-ui__border-radius;
font-size: 1.5rem;
}
&__start { &__start {
justify-content: start; justify-content: start;
@ -46,10 +44,4 @@
margin-right: 0.75em; margin-right: 0.75em;
} }
} }
.button {
&:active, &:focus {
outline: none;
}
}
} }

@ -43,6 +43,7 @@
padding: 0; padding: 0;
border: none; border: none;
background: transparent; background: transparent;
border-radius: 0;
&:focus, &:active { &:focus, &:active {
outline: none; outline: none;

@ -11,6 +11,7 @@
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
border-bottom: $plain-ui__border;
@include plain-ui__media-sm() { @include plain-ui__media-sm() {
width: auto; width: auto;
@ -23,35 +24,32 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 1em; padding: 0 1em;
color: var(--text);
background-color: white;
transition: background-color 0.1s; transition: background-color 0.1s;
background-color: white; border-bottom: 3px solid transparent;
color: var(--text); background-color: transparent;
border: $plain-ui__border;
border-bottom-width: 0;
width: 100%; width: 100%;
@include plain-ui__media-sm() { @include plain-ui__media-sm() {
width: auto; width: auto;
display: inline-flex; display: inline-flex;
border-right-width: 0;
border-bottom-width: 1px;
} }
&:hover, &--selected { &:hover {
cursor: pointer; cursor: pointer;
background-color: var(--primary-active); background-color: var(--primary-active);
color: white; color: var(--text-secondary);
border-color: var(--primary-active); border-top-left-radius: $plain-ui__border-radius;
border-top-right-radius: $plain-ui__border-radius;
} }
&:last-child { &--selected {
border-bottom-width: 1px; color: var(--text);
border-color: var(--primary);
} }
} }
} }

@ -9,22 +9,27 @@
*/ */
$plain-ui__heading__font-sizes: ( $plain-ui__heading__font-sizes: (
'h1': $plain-ui__font-size * 2.5, 'h1': 2.25rem,
'h2': $plain-ui__font-size * 2, 'h2': 2rem,
'h3': $plain-ui__font-size * 1.75, 'h3': 1.8rem,
'h4': $plain-ui__font-size * 1.5, 'h4': 1.6rem,
'h5': $plain-ui__font-size * 1.25, 'h5': 1.4rem,
'h6': $plain-ui__font-size 'h6': 1.2rem
) !default; ) !default;
$plain-ui__heading__font-sizes__breakpoints: ( $plain-ui__heading__font-sizes__breakpoints: (
$plain-ui__md: 1.2rem $plain-ui__md: 1.2rem
) !default; ) !default;
$plain-ui__heading__font-weight: bold !default; $plain-ui__heading__font-weight: bold!default;
$plain-ui__heading__font-family: $plain-ui__font-family !default; $plain-ui__heading__font-family: $plain-ui__font-family !default;
$plain-ui__heading__margin: $plain-ui__margin !default;
$plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default; $plain-ui__heading__line-height: 1.2 !default;
$plain-ui__heading__margin: 0 0 1.2rem !default;
$plain-ui__heading__margin-breakpoints: (
$plain-ui__md: 0 0 1.4rem
) !default;
h1, .h1, h1, .h1,
h2, .h2, h2, .h2,
@ -34,18 +39,20 @@ h5, .h5,
h6, .h6 { h6, .h6 {
font-family: $plain-ui__heading__font-family; font-family: $plain-ui__heading__font-family;
font-weight: $plain-ui__heading__font-weight; font-weight: $plain-ui__heading__font-weight;
line-height: 1.2; line-height: $plain-ui__heading__line-height;
margin: $plain-ui__heading__margin; margin: $plain-ui__heading__margin;
@include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints); @include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
}
h5 { &.highlight {
line-height: 1.4; display: table;
}
} }
h6 { .highlight {
line-height: $plain-ui__line-height; padding: 0.25rem 0.5rem;
background: var(--primary);
color: var(--text-secondary);
} }
@each $h, $font-size in $plain-ui__heading__font-sizes { @each $h, $font-size in $plain-ui__heading__font-sizes {

Loading…
Cancel
Save