Skip to content

Instantly share code, notes, and snippets.

@kartiknair

kartiknair/starter.css

Last active Jun 17, 2020
Embed
What would you like to do?
@import url("https://fonts.xz.style/serve/inter.css");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 1rem;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #ffffff;
color: #111111;
text-rendering: optimizeLegibility;
line-height: 1.5;
font-weight: 400;
font-family: "Inter", sans-serif;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
main {
width: 55%;
margin: 6% 22.5%;
}
@media (max-width: 350px) {
html {
font-size: 0.9rem;
}
main {
width: 90%;
margin: 15% 5%;
}
}
@media (max-width: 768px) {
main {
width: 80%;
margin: 15% 10%;
}
}
@media (min-width: 1900px) {
html {
font-size: 1.5rem;
}
}
@media (min-width: 2500px) {
html {
font-size: 2rem;
}
}
@media (min-width: 3000px) {
html {
font-size: 2.5rem;
}
}
@media (min-width: 3400px) {
html {
font-size: 3rem;
}
}
strong {
font-weight: 600;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
font-family: "Inter", sans-serif;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.7411rem;
}
h3 {
font-size: 1.5157rem;
}
h4 {
font-size: 1.3195rem;
}
h5 {
font-size: 1.1rem;
}
h6 {
font-size: 0.9rem;
}
p,
a,
ul,
ol,
li {
font-size: 1rem;
}
q,
kbd,
mark,
blockquote cite,
q cite {
font-size: 0.8rem;
}
blockquote,
q {
color: #333333;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
blockquote,
q {
margin: 1rem 0 1.25rem 0;
}
hr {
width: 8rem;
margin: 1.5rem auto;
height: 0.2rem;
border: none;
background: #f6f8fa;
}
ul,
ol {
margin: 0.5rem 1.5rem;
}
li {
margin: 0.2rem 0;
}
pre {
background: #f6f8fa;
overflow: auto;
padding: 1.5rem 2rem;
}
pre code {
background: none;
color: #333333;
padding: 0;
font-size: 0.8rem;
}
pre *,
pre code * {
font-size: 0.8rem;
margin: 0;
}
code {
font-family: monospace;
background: #f6f8fa;
color: #d73a49;
padding: 0.2rem;
border-radius: 0.2rem;
font-size: 0.9rem;
}
mark {
padding: 0.2rem;
}
a {
color: #000000;
text-decoration: none;
background-image: linear-gradient(#959595, #959595);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 100% 0.1em;
transition: background-size cubic-bezier(0, 0.5, 0, 1) 0.4s;
}
a:hover,
a:active {
color: #353535;
text-decoration: none;
background-size: 0% 0.1em;
}
blockquote {
background-color: #ffffff;
color: #111111;
border-left: 0.3em solid #111111;
padding: 0;
padding-left: 1.5rem;
font-style: italic;
}
blockquote a {
font-size: inherit;
}
footer h5,
footer a {
font-size: 0.9rem;
}
::selection {
color: white;
background: #111111;
}
::-webkit-selection {
color: white;
background: #111111;
}
::-o-selection {
color: white;
background: #111111;
}
::-moz-selection {
color: white;
background: #111111;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.