From 244b430ca8839a2b430b4fe36e2e7432a55a06af Mon Sep 17 00:00:00 2001 From: Emile Date: Sun, 3 Feb 2019 16:51:53 +0100 Subject: created a redesign --- src/css/custom.css | 158 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 src/css/custom.css (limited to 'src/css/custom.css') diff --git a/src/css/custom.css b/src/css/custom.css new file mode 100644 index 0000000..e070193 --- /dev/null +++ b/src/css/custom.css @@ -0,0 +1,158 @@ +/* stylelint-disable selector-list-comma-newline-after */ + +.blog-header { + line-height: 1; + border-bottom: 1px solid #e5e5e5; +} + +.blog-header-logo { + font-family: "Playfair Display", Georgia, "Times New Roman", serif; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", Georgia, "Times New Roman", serif; +} + +.display-4 { + font-size: 2.5rem; +} +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.nav-scroller .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; +} + +.card-img-right { + height: 100%; + border-radius: 0 3px 3px 0; +} + +.flex-auto { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +.border-top { border-top: 1px solid #e5e5e5; } +.border-bottom { border-bottom: 1px solid #e5e5e5; } + +.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); } + +.jumbotron-head { + background-image: url("../images/example_boxes_750x450.png"); +} + +.jumbotron-head h1 { + display: inline; + background-color: black; + padding: 0.5em 0.5em; + box-decoration-break: clone; +} + +.jumbotron-head p { + display: inline; + background-color: black; + padding: 0.5em 0.7em; + box-decoration-break: clone; +} + +.jumbotron-head a { + display: inline; + background-color: black; + padding: 0.5em 0.25em; + box-decoration-break: clone; +} + + +/* + * Blog name and description + */ +.blog-title { + margin-bottom: 0; + font-size: 2rem; + font-weight: 400; +} +.blog-description { + font-size: 1.1rem; + color: #999; +} + +@media (min-width: 40em) { + .blog-title { + font-size: 3.5rem; + } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} +.blog-pagination > .btn { + border-radius: 2rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-title { + margin-bottom: .25rem; + font-size: 2.5rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #999; +} + +/* + * Footer + */ +.blog-footer { + padding: 2.5rem 0; + color: #999; + text-align: center; + background-color: #f9f9f9; + border-top: .05rem solid #e5e5e5; +} +.blog-footer p:last-child { + margin-bottom: 0; +} \ No newline at end of file -- cgit 1.4.1