Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@voxpelli
Last active August 19, 2022 23:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save voxpelli/7f69b15bf49a6569aad147a676377834 to your computer and use it in GitHub Desktop.
Save voxpelli/7f69b15bf49a6569aad147a676377834 to your computer and use it in GitHub Desktop.
Some of my basic CSS styles
div,p,h1,h2,h3,h4,ul,ol,a,img,li,body,form,blockquote,fieldset,label,abbr,span,dt,dl,dd,table,tr,th,td{border:0;margin:0;padding:0;}
body{min-width:280px;max-width:600px;padding:.66em .83em .83em;font-size:x-large;line-height:1.2;font-family:'Trebuchet MS','Helvetica',sans-serif;text-align:left;color:#fff;background:#7b030c url(data:image/gif;base64,R0lGODlhAQDxAOYAANkEFtcEFtYEFdUEFdQEFdMEFdIEFdEEFdAEFc4EFc0EFeYFF+UFF+QFF+MFF+IFF+EFF+AFF98FF94FF90FF9sFFtoFFswEFcsEFcoEFckEFcgEFccEFMYEFMUEFMQEE8MEE8IEE8EEE8AEE78EE74EE70EE7wEE7sEE7oEE7kEE7cEErcEE7YEErUEErQEErMEErIEErEEErAEEq8EEq4EEq0EEawEEasEEZUDD5QDDpQDD5MDDpIDDpEDDpADDo8DDo4DDo0DDowDDosDDooDDYoDDokDDYgDDYcDDYYDDYUDDYQDDYMDDYIDDYEDDaoEEakEEagEEacEEaYEEKUEEKQEEKMEEKIEEKEEEKAEEJ8EEJ4ED54EEJ0ED5wED5sED5oED5kED5gED5cED5YED4ADDIADDX8DDH4DDH0DDHwDDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAAQDxAAAHzIALDAwNDQ4OD4kQixESEhMTFJIVFRYWAJgBmgIDAwQEBQUGBwilCacKFxcYGRoaGxyxHR4fHyAhISIjIyQkJSYnJygpKSoqLCwrLS4vLzAwMTIzMzQ1NTY2Nzc4UFFRUlJTVFRVVuZXV1hZWlpbW11cXl5fX2BhYWJiY2T8ZWU5O3bo4MGjRw8fCH/8AAIkiEMhQoZIJELRSJEjGJFoTMIxiRIlS0KGZMKkickmTlKmfMKS5ZkzZmKimUkzjc2bNtXo3Mlzjc+fQIMGAgA7) repeat-x 0 0;}
a{color:#ffc000;padding:0 .1em;}
a:hover{color:#7b030c;background:#ffc000;text-decoration:none;}
strong{background:#B30412;font-weight:500;padding:0 .1em;}
h1 a{font-size:1.4em;line-height:normal;color:#fff;text-decoration:none;text-transform:lowercase;font-weight:500;font-family:Arial,sans-serif;padding:0;}
h1 a:hover{color:#fff;background:none;}
h1{font-size:7vw;white-space:nowrap;}
@media screen and (min-device-width: 1024px){h1{font-size:72px}}
@media screen and (max-device-width: 320px){h1{font-size:22.4px}}
h1 strong{font-weight:700;font-family:'Arial Black',Arial,sans-serif;margin-left:-.34em;background:none;}
h1{margin:0 0 .33em;}
p{margin:.66em 0;}
.u-photo{width:1.2em;border-radius:1.2em;vertical-align:middle;position:relative;top:-0.1em}
.small{font-style:italic;font-size:.6em;margin:2em 0}
*{margin:0;padding:0}
html{background:#DEDEDE}
body{font-size:18px;line-height:1.5;text-align:left;font-family:"Helvetica neue",Helvetica,Arial,"MS Trebuchet",sans-serif;font-weight:300;color:#222}
body > .page{margin:10px auto 20px;max-width:600px;}
a,a.u-responses{color:#B82C2C}
a:hover{color:#912323}
a[lang="sv"]:before{content:"";width:21px;height:15px;margin-right:4px;display:inline-block;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="15" viewBox="0 0 21 15"><g fill="none" fill-rule="evenodd"><rect width="21" height="15" fill="%23157CBB" rx="2"/><path fill="%23FFD34D" d="M9 6V0H6v6H0v3h6v6h3V9h12V6H9z"/></g></svg>') no-repeat 0 0;text-indent:-5000em;vertical-align:-1px}
img{border:0}
h1{font-size:2.8em;line-height:1.2;padding:2px 20px;text-align:center;}
h1 a{color:#212121;text-shadow:#fff 0 1px 1px;text-decoration:none}
h1 a:hover{color:#212121}
h1 em{color:#d33;font-style:normal}
h2,h3,h4{font-size:1em;font-weight:500}
p,ul,ol,.e-content,.highlight,.webmention-mention,.webmention-facepile,.linklist,.h-entry .media .u-photo,.h-entry .media .u-video{margin-bottom:1em}
h2,h3{margin-bottom:5px}
li{margin-bottom:.25em}
ul,ol{padding-left:1.5em}
.highlight{font-size:18px;overflow:auto}
.subtitle{font-size:.8em;padding:0 20px;text-align:center;margin-bottom:15px}
body > .page > *:not(header):not(address){background:#fff;box-shadow:0 0 2px #444;padding:15px 20px;margin-bottom:8px}
address{font-style:normal;padding:0 10px 10px;text-align:center;font-size:.7em}
ul.posts{list-style:none;padding:0}
ul.posts time,ul.posts span.time-to-read,article footer,.webmention-footer,.u-responses{color:#aaa;font-size:.8em}
time a,.webmention-footer a{color:#aaa}
*{margin:0;padding:0}
html{background:#fff}
body{font-size:18px;font-family:"Helvetica neue", Helvetica, Arial, "MS Trebuchet", sans-serif;margin:10px auto;max-width:800px;color:#212121;font-weight:300}
a{color:rgb(22,160,133)}
img{border:0}
h1,h2,h3{font-family:'Faster One',sans-serif;font-weight:400}
h1{font-size:2.8em;padding:40px 20px 20px;text-align:center;}
h1 a{color:#212121;text-decoration:none}
h1 em{color:rgb(22,160,133);font-style:normal}
h2,h3{font-size:1.4em}
h4{font-size:1em;}
h2,h3,h4,p,li,#main .info{margin-bottom:20px}
ul{list-style:none}
.subtitle{font-size:.8em;padding:0 100px 40px;text-align:center;margin-bottom:15px}
.warning{color:#aa0;font-weight:700;}
.error{color:#A03B13}
#main > div{padding: 15px 20px;margin-bottom:8px}
address{font-style:normal;padding:0 10px 10px;text-align:center;font-size:.7em}
*{box-sizing: border-box;}
h1,p{margin:0}
html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:20px;line-height:1.2;font-style:italic;color:#fff;background:#070049;}
@media screen and (min-device-width: 1024px){html{font-size:24px}}
@media screen and (max-device-width: 400px){html{font-size:16px}}
@supports (font-size: min(max(4vw, 16px), 24px)) {
html{font-size: min(max(4vw, 16px), 24px)}
}
body{margin:0}
a{color:#FF2FA9;padding:0 .1em;}
a:hover{color:#070049;background:#FF2FA9;text-decoration:none;}
p{margin:0 0 1.2em}
.page{min-width:280px;max-width:600px;min-height:100vh;padding:3rem 1rem;margin: 0 auto;display:flex;flex-direction:column;justify-content:center}
.logo{margin:0;}
.logo__link,.logo__link svg{display:block;padding:0}
.logo__link:hover{background:transparent}
.page__logo{margin-bottom:3rem}
.page__content{text-align:center}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment