style: add reset.css to fix inconsistencies
This commit is contained in:
Ayo
parent
08b7c2db1b
commit
0b0656c961
5 changed files with 98 additions and 108 deletions
|
|
@ -7,8 +7,8 @@
|
|||
padding: 1em;
|
||||
"
|
||||
>
|
||||
<h2 style="font-weight: bold">Dear fellow human,</h2>
|
||||
<p>Welcome! I'm glad you are here.</p>
|
||||
<h2 style="font-weight: bold">Hello there, fellow human!</h2>
|
||||
<p>Welcome to my personal blog! Glad you are here.</p>
|
||||
<p>
|
||||
Like you, I have many areas of interest. And you will find here a collection
|
||||
of my posts on varying topics which are not confined to my "professional"
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
y.innerHTML = "« Read less...";
|
||||
} else {
|
||||
x.style.display = "none";
|
||||
y.innerHTML = "Read full message »";
|
||||
y.innerHTML = "Read the full message »";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -66,20 +66,19 @@ layout: default
|
|||
<a href="mailto:blog@ayco.io?subject=Re: {{page.title}}&body=%0A%0AResponse to: {{site.url}}{{page.url}}">Thoughts? Reply to this post by email</a>
|
||||
<style>
|
||||
#reply-by-email {
|
||||
margin: 2em 0;
|
||||
margin: 1em 0;
|
||||
}
|
||||
#reply-by-email a:hover {
|
||||
color: #ee4a03;
|
||||
border: 1px solid #ee4a03;
|
||||
}
|
||||
|
||||
#reply-by-email a {
|
||||
color: #bb4a03;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
width: calc(100% - 30px);
|
||||
padding: 0.5em;
|
||||
width: calc(100% - 1em);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
|
|
|
|||
|
|
@ -59,6 +59,4 @@ To cut the long story short, Github is a good place to start learning how to be
|
|||
|
||||
But before you hurry and join Github, there's another thing we need to talk about. You won't be able to get the most out of it without this... You actually need to learn how to use Git.
|
||||
|
||||
But that's for another weekend.
|
||||
|
||||
<!--a class="button up-next" href="#git-how-to">Up Next: Read How To Use Git</a-->
|
||||
But that's for another weekend.
|
||||
120
assets/main.scss
120
assets/main.scss
|
|
@ -3,6 +3,7 @@
|
|||
---
|
||||
|
||||
@import "minima";
|
||||
@import url(reset.css);
|
||||
|
||||
* {
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) !important;
|
||||
|
|
@ -22,7 +23,7 @@ body {
|
|||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
line-height: 1.5;
|
||||
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
||||
sans-serif !important;
|
||||
|
|
@ -140,9 +141,6 @@ caption {
|
|||
|
||||
.categories-card {
|
||||
width: 360px;
|
||||
/*
|
||||
margin-top: 450px;
|
||||
*/
|
||||
margin-top: 80px;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 5px !important;
|
||||
|
|
@ -189,28 +187,22 @@ caption {
|
|||
|
||||
#about-me::after {
|
||||
content: "";
|
||||
margin-left: -8px;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
border-bottom: 0 inset transparent;
|
||||
border-left: 8px inset transparent;
|
||||
border-right: 8px inset transparent;
|
||||
border-top: 8px solid #8dbf42;
|
||||
border-left: 10px inset transparent;
|
||||
border-right: 10px inset transparent;
|
||||
border-top: 10px solid #8dbf42;
|
||||
}
|
||||
|
||||
#donate-form {
|
||||
background-color: #80ae3c !important;
|
||||
height: 50px;
|
||||
padding: 30px 0 15px;
|
||||
}
|
||||
|
||||
#donate-form form {
|
||||
width: 145px;
|
||||
margin: 0 auto;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
|
|
@ -225,73 +217,6 @@ caption {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.post-thumb {
|
||||
width: 240px;
|
||||
margin: 29px 0 25px 25px;
|
||||
}
|
||||
|
||||
.up-next {
|
||||
background-color: #ee4a03;
|
||||
color: #ffffff !important;
|
||||
padding: 15px;
|
||||
display: inline-block;
|
||||
width: calc(100% - 30px);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
||||
sans-serif !important;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ee4a03;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subscription-message-text p {
|
||||
margin: 15px 5px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-rendering: optimizelegibility !important;
|
||||
}
|
||||
|
||||
.subscription-message-text {
|
||||
width: 220px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.subscription-message-div:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 20px solid transparent;
|
||||
border-bottom-color: #80ae3c;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
margin-left: -10px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.subscription-message-div {
|
||||
color: #ffffff;
|
||||
background-color: #80ae3c;
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
margin: 50px auto 0;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
border-bottom-left-radius: 2.5rem;
|
||||
border-top-left-radius: 2.5rem;
|
||||
border-bottom-right-radius: 2.5rem;
|
||||
border-top-right-radius: 2.5rem;
|
||||
}
|
||||
|
||||
.subscription-message-thumb {
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.subscription-message-thumb img,
|
||||
.ayo-thumb img {
|
||||
border-radius: 50%;
|
||||
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||
|
|
@ -314,11 +239,11 @@ main.page-content {
|
|||
|
||||
nav#side-nav {
|
||||
width: calc(30% - 10px);
|
||||
margin: 30px 0;
|
||||
margin: 1em 0;
|
||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 30px;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
.side-panel-top {
|
||||
|
|
@ -342,7 +267,7 @@ nav#side-nav {
|
|||
|
||||
.page-content .wrapper .post {
|
||||
background-color: white;
|
||||
margin: 15px 0 30px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.site-container {
|
||||
|
|
@ -379,8 +304,6 @@ table.image caption {
|
|||
|
||||
.blog-post {
|
||||
&__header {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&__category {
|
||||
span {
|
||||
a:hover {
|
||||
|
|
@ -489,7 +412,8 @@ table.image caption {
|
|||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
margin: 2em;
|
||||
margin: 1em auto;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
// #rss-sign-up a,
|
||||
|
|
@ -531,7 +455,7 @@ table.image caption {
|
|||
}
|
||||
&__description {
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -586,7 +510,7 @@ table.image caption {
|
|||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 1em);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
|
|
@ -667,24 +591,21 @@ table.image caption {
|
|||
}
|
||||
nav#side-nav {
|
||||
width: 100%;
|
||||
margin: 0 0 30px;
|
||||
margin: 0 0 1em;
|
||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||
}
|
||||
.side-panel {
|
||||
width: calc(100%-30px) !important;
|
||||
width: calc(100%-1em) !important;
|
||||
margin: 0 15px;
|
||||
}
|
||||
.post-thumb {
|
||||
width: 100%;
|
||||
margin: 0 0 25px 25px;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
background: rgba(141, 191, 66, 0.97) !important;
|
||||
width: 100%;
|
||||
box-shadow: 5px 25px 30px -25px rgba(34, 34, 34, 0.25);
|
||||
}
|
||||
.jumbotron-content {
|
||||
padding: 30px 0;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.post-list li h3 a {
|
||||
font-size: 31px;
|
||||
|
|
@ -701,6 +622,9 @@ table.image caption {
|
|||
background-color: rgba(141, 191, 66, 0.97) !important;
|
||||
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||
}
|
||||
.site-nav .menu-icon {
|
||||
width: 27px;
|
||||
}
|
||||
.site-nav .menu-icon > svg path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
|
|
|||
69
assets/reset.css
Normal file
69
assets/reset.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
1. Use a more-intuitive box-sizing model.
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*
|
||||
2. Remove default margin
|
||||
*/
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
/*
|
||||
3. Allow percentage-based heights in the application
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
/*
|
||||
Typographic tweaks!
|
||||
4. Add accessible line-height
|
||||
5. Improve text rendering
|
||||
*/
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
/*
|
||||
6. Improve media defaults
|
||||
*/
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/*
|
||||
7. Remove built-in form typography styles
|
||||
*/
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
/*
|
||||
8. Avoid text overflows
|
||||
*/
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/*
|
||||
9. Create a root stacking context
|
||||
*/
|
||||
#root,
|
||||
#__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
Loading…
Reference in a new issue