archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-17 02:17:49 +00:00
Code Issues Projects Releases Wiki Activity

created some default typography

Browse source
This commit is contained in:
Bram Wiepjes 2019-02-16 18:13:35 +01:00
parent d5737e8455
commit c4a0a8952b
2 changed files with 85 additions and 58 deletions
web-frontend
public
index.html
src/scss/base
_typography.scss

124
web-frontend/public/index.html
View file

@ -5,65 +5,73 @@
<title>Baserow</title> <title>Baserow</title>
</head> </head>
<body> <body>
<h1>Baserow</h1>
<h2>Links</h2>
<p style="padding: 20px;">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
</p>
<h2>Buttons</h2>
<div style="padding: 20px"> <div style="padding: 20px">
<a href="#" class="button">Sign in</a> <h1>Heading 1</h1>
<a href="#" class="button disabled">Sign in</a> <p>
<a href="#" class="button button-success">Sign in</a> Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
<a href="#" class="button button-warning">Sign in</a> </p>
<a href="#" class="button button-error">Sign in</a> <h2>Heading 2</h2>
<a href="#" class="button"> <p>
Sign in Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit.
<i class="button-icon fas fa-lock-open"></i> </p>
</a> <h3>Heading 3</h3>
<a href="#" class="button"> <p>
<i class="button-icon fas fa-arrow-left"></i> Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
Go back </p>
</a> <div style="margin-bottom: 20px;">
<a href="#" class="button button-ghost">Go back</a> <a href="#" class="button">Sign in</a>
<a href="#" class="button"> <a href="#" class="button disabled">Sign in</a>
<i class="fas fa-user-check"></i> <a href="#" class="button button-success">Sign in</a>
</a> <a href="#" class="button button-warning">Sign in</a>
<a href="#" class="button button-ghost"> <a href="#" class="button button-error">Sign in</a>
<i class="fas fa-user-check"></i> <a href="#" class="button">
</a> Sign in
</div> <i class="button-icon fas fa-lock-open"></i>
<div style="padding: 20px"> </a>
<button class="button">Sign in</button> <a href="#" class="button">
<button class="button" disabled>Sign in</button> <i class="button-icon fas fa-arrow-left"></i>
<button class="button button-success">Sign in</button> Go back
<button class="button button-warning">Sign in</button> </a>
<button class="button button-error">Sign in</button> <a href="#" class="button button-ghost">Go back</a>
<button class="button"> <a href="#" class="button">
Sign in <i class="fas fa-user-check"></i>
<i class="button-icon fas fa-lock-open"></i> </a>
</button> <a href="#" class="button button-ghost">
<button class="button"> <i class="fas fa-user-check"></i>
<i class="button-icon fas fa-arrow-left"></i> </a>
Go back </div>
</button> <div style="margin-bottom: 20px;">
<button class="button button-ghost">Go back</button> <button class="button">Sign in</button>
</div> <button class="button" disabled>Sign in</button>
<div style="padding: 20px"> <button class="button button-success">Sign in</button>
<a href="#" class="button button-large">Sign in</a> <button class="button button-warning">Sign in</button>
<a href="#" class="button button-large disabled">Sign in</a> <button class="button button-error">Sign in</button>
<a href="#" class="button button-large button-success">Sign in</a> <button class="button">
<a href="#" class="button button-large button-warning">Sign in</a> Sign in
<a href="#" class="button button-large button-error">Sign in</a> <i class="button-icon fas fa-lock-open"></i>
<a href="#" class="button button-large"> </button>
Sign in <button class="button">
<i class="button-icon fas fa-lock-open"></i> <i class="button-icon fas fa-arrow-left"></i>
</a> Go back
<a href="#" class="button button-large"> </button>
<i class="button-icon fas fa-arrow-left"></i> <button class="button button-ghost">Go back</button>
Go back </div>
</a> <div style="margin-bottom: 20px;">
<a href="#" class="button button-large button-ghost">Go back</a> <a href="#" class="button button-large">Sign in</a>
<a href="#" class="button button-large disabled">Sign in</a>
<a href="#" class="button button-large button-success">Sign in</a>
<a href="#" class="button button-large button-warning">Sign in</a>
<a href="#" class="button button-large button-error">Sign in</a>
<a href="#" class="button button-large">
Sign in
<i class="button-icon fas fa-lock-open"></i>
</a>
<a href="#" class="button button-large">
<i class="button-icon fas fa-arrow-left"></i>
Go back
</a>
<a href="#" class="button button-large button-ghost">Go back</a>
</div>
</div> </div>
</body> </body>
</html> </html>

19
web-frontend/src/scss/base/_typography.scss
View file

@ -20,4 +20,23 @@ a {
p { p {
color: $color-neutral-500; color: $color-neutral-500;
line-height: 170%; line-height: 170%;
margin-bottom: 30px;
}
h1,
.heading-1 {
font-size: 33px;
margin: 30px 0;
}
h2,
.heading-2 {
font-size: 22px;
margin: 20px 0;
}
h3,
.heading-3 {
font-size: 14px;
margin: 10px 0;
} }