Improve blog layout
This commit is contained in:
parent
1470eaab98
commit
2b25126576
|
@ -27,7 +27,7 @@
|
||||||
<main class="blog-container" id="container">
|
<main class="blog-container" id="container">
|
||||||
<header class="blog-header" id="header">...</header>
|
<header class="blog-header" id="header">...</header>
|
||||||
<article class="blog-content" id="content">
|
<article class="blog-content" id="content">
|
||||||
<h1>Blog Archive</h1>
|
<h1 class="blog__title">Blog Archive</h1>
|
||||||
<section class="blog-post-list" id="postlistdiv"></section>
|
<section class="blog-post-list" id="postlistdiv"></section>
|
||||||
</article> <!-- end of article id="content" -->
|
</article> <!-- end of article id="content" -->
|
||||||
<footer class="blog-footer" id="footer"></footer>
|
<footer class="blog-footer" id="footer"></footer>
|
||||||
|
|
|
@ -14,20 +14,110 @@
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* CSS RESET */
|
||||||
|
/* Box sizing rules */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove default margin */
|
||||||
|
body,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
p,
|
||||||
|
figure,
|
||||||
|
blockquote,
|
||||||
|
dl,
|
||||||
|
dd {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||||
|
ul[role='list'],
|
||||||
|
ol[role='list'] {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set core root defaults */
|
||||||
|
html:focus-within {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set core body defaults */
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
text-rendering: optimizeSpeed;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* A elements that don't have a class get default styles */
|
||||||
|
a:not([class]) {
|
||||||
|
text-decoration-skip-ink: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make images easier to work with */
|
||||||
|
img,
|
||||||
|
picture {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inherit fonts for inputs and buttons */
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html:focus-within {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* STYLING BEGINS */
|
||||||
|
/* General styles */
|
||||||
body {
|
body {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
background-image: url('../img/bg_space.png');
|
background-image: url('../img/bg_space.png');
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-size: contain;
|
background-size: cover;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-family: 'Nunito', Arial, sans-serif;
|
font-family: 'Nunito', Arial, sans-serif;
|
||||||
margin: 0;
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5 {
|
||||||
|
color: #5fc7cd;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 1.6em;
|
line-height: 1.6em;
|
||||||
|
padding: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
|
@ -79,10 +169,6 @@ a:hover {
|
||||||
background-color: #34220b;
|
background-color: #34220b;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
|
||||||
color: #5fc7cd;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border-width: 0.1rem 0 0 0;
|
border-width: 0.1rem 0 0 0;
|
||||||
border-style: dotted;
|
border-style: dotted;
|
||||||
|
@ -91,23 +177,20 @@ hr {
|
||||||
|
|
||||||
/* The rectangle that has contains everything but the background */
|
/* The rectangle that has contains everything but the background */
|
||||||
.blog-container {
|
.blog-container {
|
||||||
margin: 3em auto;
|
width: 95%;
|
||||||
width: 90%;
|
|
||||||
max-width: 68.75rem;
|
max-width: 68.75rem;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: #dddddd;
|
color: #dddddd;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 -2px 10px 0 #c7d8f4 inset;
|
box-shadow: 0 -2px 10px 0 #c7d8f4 inset;
|
||||||
}
|
margin: 1em 0;
|
||||||
|
padding: 1em 2em;
|
||||||
.blog-content {
|
|
||||||
padding: 0.5rem 5% 1rem 5%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HEADER STYLE */
|
/* HEADER STYLE */
|
||||||
.blog-header {
|
.blog-header {
|
||||||
padding: 0 5%;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-header ul {
|
.blog-header ul {
|
||||||
|
@ -119,18 +202,19 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-header li {
|
.blog-header li {
|
||||||
font-size: 1em;
|
font-size: 1.1em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
margin-top: 0.7em;
|
margin-bottom: 0.5em;
|
||||||
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-header li a {
|
.blog-header li a {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #1b548e;
|
background-color: #1b548e;
|
||||||
border-radius: 20rem;
|
border-radius: 25px;
|
||||||
border: 3px solid #7cd8ff;
|
border: 3px solid #7cd8ff;
|
||||||
padding: 0.4rem 2rem;
|
padding: 6px 30px;
|
||||||
box-shadow: 0 -2px 12px 0 #23a4f8 inset;
|
box-shadow: 0 -2px 12px 0 #23a4f8 inset;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -141,12 +225,6 @@ hr {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-header li a:active {
|
|
||||||
background-color: #8e8d74;
|
|
||||||
text-decoration: none;
|
|
||||||
box-shadow: 0 -2px 12px 0 #fe83ff inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* POST TITLE STYLE */
|
/* POST TITLE STYLE */
|
||||||
.blog__title,
|
.blog__title,
|
||||||
.blog-post__title {
|
.blog-post__title {
|
||||||
|
@ -156,9 +234,14 @@ hr {
|
||||||
/* POST DATE STYLE */
|
/* POST DATE STYLE */
|
||||||
.blog-post__date {
|
.blog-post__date {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
|
margin-bottom: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* POST LIST STYLE */
|
/* POST LIST STYLE */
|
||||||
|
.blog-recent-post-list {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.blog-post-list ul,
|
.blog-post-list ul,
|
||||||
.blog-recent-post-list ul {
|
.blog-recent-post-list ul {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
|
@ -179,7 +262,7 @@ hr {
|
||||||
/*NEXT AND PREVIOUS LINKS STYLE*/
|
/*NEXT AND PREVIOUS LINKS STYLE*/
|
||||||
.blog-nextprev {
|
.blog-nextprev {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 1.4em;
|
margin: 1.4em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* DISQUS STYLE */
|
/* DISQUS STYLE */
|
||||||
|
@ -190,5 +273,4 @@ hr {
|
||||||
/* FOOTER STYLE */
|
/* FOOTER STYLE */
|
||||||
.blog-footer {
|
.blog-footer {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
padding: 0 5% 0.5rem 5%;
|
|
||||||
}
|
}
|
Binary file not shown.
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
Loading…
Reference in New Issue