pocketlang/docs/static/css/style.css
2022-04-06 19:08:07 +05:30

102 lines
2.4 KiB
CSS

/* font-family: 'Open Sans', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap');
/* font-family: 'Montserrat', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/* font-family: 'JetBrains Mono', monospace; */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&display=swap');
:root {
--scroll-bar-size: 15px;
--color-theme: #336094;
--color-anchor: #cfcfcf;
--color-link: #0969da;
--color-default-font: #24292f;
--color-footer-bg: #e8e8e8;
--shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
--font-mono: 'JetBrains Mono', monospace;
}
/*****************************************************************************/
/* GLOBAL */
/*****************************************************************************/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
color: inherit;
}
code, code span,
.code, .code span {
font-family: var(--font-mono);
}
a {
text-decoration: none;
}
ul li {
list-style-type: none;
}
.anchor {
text-decoration: none;
color: var(--color-anchor);
transition: .3s;
}
.anchor:hover {
color: var(--color-theme);
}
.link:not(.anchor) {
color: var(--color-link);
}
.link:not(.anchor):hover {
text-decoration: underline;
}
/*****************************************************************************/
/* INLINE */
/*****************************************************************************/
.space-bottom { /* Add margin to have a space after that element. */
margin-bottom: 30px;
}
.flex { display: flex; }
.flac { align-items: center; }
.fljc { justify-content: center; }
.flsb { justify-content: space-between; }
.relative { position: relative; }
/*****************************************************************************/
/* BUTTON */
/*****************************************************************************/
.button {
display: inline-block;
padding: 10px 20px;
color: var(--color-theme);
border: 2px solid var(--color-theme);
border-radius: 5px;
transition: .2s;
font-weight: bolder;
height: 100%;
cursor: pointer;
}
.button:hover {
background-color: var(--color-theme);
color: white;
}