tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding

release/0.2
Björn 3 years ago
parent
79edd96836
commit
499336c532
13 changed files with 735 additions and 106 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +500
    -0
      dist/components.html
  2. +51
    -25
      dist/index.html
  3. +103
    -0
      dist/layout.html
  4. +30
    -39
      dist/plain-ui.css
  5. +1
    -1
      dist/symbol-defs.svg
  6. +0
    -1
      mix-manifest.json
  7. +5
    -0
      src/icons/gitea.svg
  8. +5
    -0
      src/icons/github.svg
  9. +5
    -3
      src/scss/_variables.scss
  10. +1
    -9
      src/scss/components/_bar.scss
  11. +1
    -0
      src/scss/components/_button.scss
  12. +11
    -13
      src/scss/components/_tabs.scss
  13. +22
    -15
      src/scss/core/_heading.scss

+ 500
- 0
dist/components.html View File

@ -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

+ 51
- 25
dist/index.html View File

@ -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>
The Basic Idea was a quick
</p>
<h3 class="h4 highlight">
Contribution
</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>
<hr>
<h2 class="m-bottom-2 h-contrast">Heading</h2>
<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">
<a class="tabs__item">
Tab A
</a>
<a class="tabs__item">
Tab B
</a>
</div>
<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>
</div> </div>


+ 103
- 0
dist/layout.html View File

@ -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

+ 30
- 39
dist/plain-ui.css View File

@ -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);
}
.bar .icon {
font-size: 1.5rem;
border-radius: 2px;
} }
.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);
border-bottom-width: 0;
transition: background-color 0.1s;
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;
border-color: var(--primary-active);
color: var(--text-secondary);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
} }
.tabs__item:last-child {
border-bottom-width: 1px;
.tabs__item--selected {
color: var(--text);
border-color: var(--primary);
} }

+ 1
- 1
dist/symbol-defs.svg
File diff suppressed because it is too large
View File


+ 0
- 1
mix-manifest.json View File

@ -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",


+ 5
- 0
src/icons/gitea.svg View File

@ -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>

+ 5
- 0
src/icons/github.svg View File

@ -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>

+ 5
- 3
src/scss/_variables.scss View File

@ -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;
/** /**


+ 1
- 9
src/scss/components/_bar.scss View File

@ -21,9 +21,7 @@
background-color: var(--primary); background-color: var(--primary);
color: var(--text-secondary); color: var(--text-secondary);
.icon {
font-size: 1.5rem;
}
border-radius: $plain-ui__border-radius;
&__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;
}
}
} }

+ 1
- 0
src/scss/components/_button.scss View File

@ -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
- 13
src/scss/components/_tabs.scss View File

@ -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;
color: var(--text);
border: $plain-ui__border;
border-bottom-width: 0;
border-bottom: 3px solid transparent;
background-color: transparent;
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 {
border-bottom-width: 1px;
&--selected {
color: var(--text);
border-color: var(--primary);
} }
} }
} }

+ 22
- 15
src/scss/core/_heading.scss View File

@ -9,22 +9,27 @@
*/ */
$plain-ui__heading__font-sizes: ( $plain-ui__heading__font-sizes: (
'h1': $plain-ui__font-size * 2.5,
'h2': $plain-ui__font-size * 2,
'h3': $plain-ui__font-size * 1.75,
'h4': $plain-ui__font-size * 1.5,
'h5': $plain-ui__font-size * 1.25,
'h6': $plain-ui__font-size
'h1': 2.25rem,
'h2': 2rem,
'h3': 1.8rem,
'h4': 1.6rem,
'h5': 1.4rem,
'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 {
line-height: 1.4;
&.highlight {
display: table;
}
} }
h6 {
line-height: $plain-ui__line-height;
.highlight {
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 {


Write Preview
Loading…
Cancel
Save