Ghost_Ruby_Theme/assets/css/general/basics.css

140 lines
2.3 KiB
CSS
Raw Permalink Normal View History

:root {
2021-03-23 06:37:42 +02:00
--primary-color: var(--ghost-accent-color, #2ec4b6);
2020-09-28 06:05:46 +03:00
--primary-text-color: #333;
--secondary-text-color: #aaa;
--white-color: #fff;
--light-gray-color: #f4f4f4;
--mid-gray-color: #e9e9e9;
--dark-gray-color: #1a1a1a;
--black-color: #000;
2021-11-05 10:21:16 +02:00
--font-base: "Open Sans", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
--font-serif: Lora, Times, serif;
--font-alt: Dosis, sans-serif;
2020-09-28 06:05:46 +03:00
--animation-base: ease-in-out;
--shadow-base: 0 0 10px rgba(0, 0, 0, 0.02);
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
html {
2020-09-28 06:05:46 +03:00
box-sizing: border-box;
font-size: 62.5%;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
*,
2020-09-24 05:18:34 +03:00
*::before,
*::after {
2020-09-28 06:05:46 +03:00
box-sizing: inherit;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
body {
2020-09-28 06:05:46 +03:00
color: var(--primary-text-color);
font-family: var(--font-base);
font-size: 14px;
line-height: 1.65;
text-rendering: optimizeLegibility;
word-break: break-word;
2020-10-19 04:07:40 +03:00
background-color: var(--light-gray-color);
background-color: #f9f9f9;
transition: background-color 0.3s var(--animation-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
a {
2020-09-28 06:05:46 +03:00
color: var(--dark-gray-color);
text-decoration: none;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
h1,
h2,
h3,
h4,
h5,
h6 {
2020-10-19 04:07:40 +03:00
margin: 0 0 15px;
2020-09-28 06:05:46 +03:00
color: var(--dark-gray-color);
font-family: var(--font-alt);
2021-11-05 10:21:16 +02:00
line-height: 1.25;
2020-10-19 04:07:40 +03:00
font-weight: 700;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
p {
2021-11-22 08:54:46 +02:00
margin: 0;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
img {
2020-09-28 06:05:46 +03:00
display: block;
max-width: 100%;
2020-10-19 04:07:40 +03:00
height: auto;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2021-12-08 07:46:35 +02:00
blockquote:not([class]) {
2020-10-19 04:07:40 +03:00
margin: 30px auto;
2021-12-08 07:46:35 +02:00
padding-left: 2rem;
2020-09-28 06:05:46 +03:00
border-left: 4px solid var(--dark-gray-color);
color: var(--dark-gray-color);
2021-12-08 07:46:35 +02:00
font-size: 17px;
line-height: 1.6;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
ul,
ol {
2020-09-28 06:05:46 +03:00
margin: 30px 0;
padding-left: 30px;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
li {
2020-09-28 06:05:46 +03:00
margin: 5px 0;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
iframe,
embed {
2020-09-28 06:05:46 +03:00
display: block;
overflow: hidden;
width: 100%;
2020-10-19 04:07:40 +03:00
border: 0;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
figure {
2020-09-28 06:05:46 +03:00
margin: 45px 0;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
figcaption {
2020-10-19 04:07:40 +03:00
margin-top: 15px;
2020-09-28 06:05:46 +03:00
color: var(--dark-gray-color);
font-size: 14px;
text-align: center;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
pre {
2020-09-28 06:05:46 +03:00
overflow-x: scroll;
2020-10-19 04:07:40 +03:00
margin: 30px 0;
2019-04-29 19:46:11 +03:00
}
2020-09-24 05:18:34 +03:00
2019-04-29 19:46:11 +03:00
hr {
2020-09-28 06:05:46 +03:00
position: relative;
2020-10-19 04:07:40 +03:00
margin: 45px auto;
2020-09-28 06:05:46 +03:00
width: 5px;
2020-10-19 04:07:40 +03:00
height: 5px;
border: 0;
background-color: var(--dark-gray-color);
border-radius: 50%;
}
2020-09-24 05:18:34 +03:00
hr::before,
hr::after {
2020-09-28 06:05:46 +03:00
content: "";
position: absolute;
width: 5px;
2020-10-19 04:07:40 +03:00
height: 5px;
background-color: var(--dark-gray-color);
border-radius: 50%;
}
2020-09-24 05:18:34 +03:00
hr::before {
2020-09-28 06:05:46 +03:00
right: 20px;
}
2020-09-24 05:18:34 +03:00
hr::after {
2020-09-28 06:05:46 +03:00
left: 20px;
}