diff --git a/BlogSimple.Web/wwwroot/ckeditor/sample/styles.css b/BlogSimple.Web/wwwroot/ckeditor/sample/styles.css index c8180cd..0c4e78d 100644 --- a/BlogSimple.Web/wwwroot/ckeditor/sample/styles.css +++ b/BlogSimple.Web/wwwroot/ckeditor/sample/styles.css @@ -4,14 +4,14 @@ */ :root { - --ck-sample-base-spacing: 2em; - --ck-sample-color-white: #fff; - --ck-sample-color-green: #279863; - --ck-sample-color-blue: #1a9aef; - --ck-sample-container-width: 1285px; - --ck-sample-sidebar-width: 350px; - --ck-sample-editor-min-height: 400px; - --ck-sample-editor-z-index: 10; + --ck-sample-base-spacing: 2em; + --ck-sample-color-white: #fff; + --ck-sample-color-green: #279863; + --ck-sample-color-blue: #1a9aef; + --ck-sample-container-width: 1285px; + --ck-sample-sidebar-width: 350px; + --ck-sample-editor-min-height: 400px; + --ck-sample-editor-z-index: 10; } /* --------- EDITOR STYLES ---------------------------------------------------------------------------------------- */ @@ -24,296 +24,297 @@ main .ck-editor[role='application'] .ck.ck-content, .ck.ck-editor__editable[role='textbox'], /* Inline & Balloon build. */ .ck.editor[role='textbox'] { - width: 100%; - background: #fff; - font-size: 1em; - line-height: 1.6em; - min-height: var(--ck-sample-editor-min-height); - padding: 1.5em 2em; + width: 100%; + background: #fff; + font-size: 1em; + line-height: 1.6em; + min-height: var(--ck-sample-editor-min-height); + padding: 1.5em 2em; } .ck.ck-editor__editable { - background: #fff; - border: 1px solid hsl(0, 0%, 70%); - width: 100%; + background: #fff; + border: 1px solid hsl(0, 0%, 70%); + width: 100%; } /* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */ .ck.ck-editor__editable { - position: relative; - z-index: var(--ck-sample-editor-z-index); + position: relative; + z-index: var(--ck-sample-editor-z-index); } .editor-container { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - position: relative; - width: 100%; - justify-content: center; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + position: relative; + width: 100%; + justify-content: center; } .editor-container--with-sidebar > .ck.ck-editor { - width: calc( 100% - var(--ck-sample-sidebar-width) ); + width: calc(100% - var(--ck-sample-sidebar-width)); } /* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/ -body[data-editor='DecoupledEditor'] .document-editor__toolbar { - width: 100%; -} - -body[data-editor='DecoupledEditor'] .collaboration-demo__editable, -body[data-editor='DecoupledEditor'] .row-editor .editor { - /* A pixel is added for each of the border. */ - width: calc(21cm + 2px); - min-height: calc(29.7cm + 2px); - /* To avoid having extra scrolls inside the editor container. */ - height: fit-content; - padding: 2cm 1.2cm; - margin: 2.5rem; - border: 1px hsl( 0, 0%, 82.7% ) solid; - background-color: var(--ck-sample-color-white); - box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 ); - box-sizing: border-box; -} - -body[data-editor='DecoupledEditor'] .row-editor { - display: flex; - position: relative; - justify-content: center; - overflow-y: auto; - background-color: #f2f2f2; - border: 1px solid hsl(0, 0%, 77%); - /* Limit the max-height of the editor to avoid scrolling from bottom to top to see the toolbar. */ - max-height: 700px; -} - -body[data-editor='DecoupledEditor'] .sidebar { - background: transparent; - border: 0; - box-shadow: none; +body[data-editor="DecoupledEditor"] .document-editor__toolbar { + width: 100%; +} + +body[data-editor="DecoupledEditor"] .collaboration-demo__editable, +body[data-editor="DecoupledEditor"] .row-editor .editor { + /* A pixel is added for each of the border. */ + width: calc(21cm + 2px); + min-height: calc(29.7cm + 2px); + /* To avoid having extra scrolls inside the editor container. */ + height: fit-content; + padding: 2cm 1.2cm; + margin: 2.5rem; + border: 1px hsl(0, 0%, 82.7%) solid; + background-color: var(--ck-sample-color-white); + box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1); + box-sizing: border-box; +} + +body[data-editor="DecoupledEditor"] .row-editor { + display: flex; + position: relative; + justify-content: center; + overflow-y: auto; + background-color: #f2f2f2; + border: 1px solid hsl(0, 0%, 77%); + /* Limit the max-height of the editor to avoid scrolling from bottom to top to see the toolbar. */ + max-height: 700px; +} + +body[data-editor="DecoupledEditor"] .sidebar { + background: transparent; + border: 0; + box-shadow: none; } /* --------- COMMENTS & TRACK CHANGES FEATURE ---------------------------------------------------------------------- */ .sidebar { - padding: 0 15px; - position: relative; - min-width: var(--ck-sample-sidebar-width); - max-width: var(--ck-sample-sidebar-width); - font-size: 20px; - border: 1px solid hsl(0, 0%, 77%); - background: hsl(0, 0%, 98%); - border-left: 0; - overflow: hidden; - min-height: 100%; - flex-grow: 1; + padding: 0 15px; + position: relative; + min-width: var(--ck-sample-sidebar-width); + max-width: var(--ck-sample-sidebar-width); + font-size: 20px; + border: 1px solid hsl(0, 0%, 77%); + background: hsl(0, 0%, 98%); + border-left: 0; + overflow: hidden; + min-height: 100%; + flex-grow: 1; } /* Do not inherit styles related to the editable editor content. See line 25.*/ -.sidebar .ck-content[role='textbox'], -.ck.ck-annotation-wrapper .ck-content[role='textbox'] { - min-height: unset; - width: unset; - padding: 0; - background: transparent; +.sidebar .ck-content[role="textbox"], +.ck.ck-annotation-wrapper .ck-content[role="textbox"] { + min-height: unset; + width: unset; + padding: 0; + background: transparent; } .sidebar.narrow { - min-width: 60px; - flex-grow: 0; + min-width: 60px; + flex-grow: 0; } .sidebar.hidden { - display: none !important; + display: none !important; } #sidebar-display-toggle { - position: absolute; - z-index: 1; - width: 30px; - height: 30px; - text-align: center; - left: 15px; - top: 30px; - border: 0; - padding: 0; - color: hsl( 0, 0%, 50% ); - transition: 250ms ease color; - background-color: transparent; + position: absolute; + z-index: 1; + width: 30px; + height: 30px; + text-align: center; + left: 15px; + top: 30px; + border: 0; + padding: 0; + color: hsl(0, 0%, 50%); + transition: 250ms ease color; + background-color: transparent; } #sidebar-display-toggle:hover { - color: hsl( 0, 0%, 30% ); - cursor: pointer; + color: hsl(0, 0%, 30%); + cursor: pointer; } #sidebar-display-toggle:focus, #sidebar-display-toggle:active { - outline: none; - border: 1px solid #a9d29d; + outline-color: transparent; + border: 1px solid #a9d29d; } #sidebar-display-toggle svg { - fill: currentColor; + fill: currentColor; } /* --------- COLLABORATION FEATURES (USERS) ------------------------------------------------------------------------ */ .row-presence { - width: 100%; - border: 1px solid hsl(0, 0%, 77%); - border-bottom: 0; - background: hsl(0, 0%, 98%); - padding: var(--ck-spacing-small); + width: 100%; + border: 1px solid hsl(0, 0%, 77%); + border-bottom: 0; + background: hsl(0, 0%, 98%); + padding: var(--ck-spacing-small); - /* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */ - box-shadow: 0 1px 0 0 hsl(0, 0%, 77%); + /* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */ + box-shadow: 0 1px 0 0 hsl(0, 0%, 77%); - /* Make `z-index` bigger than `.editor` to properly display tooltips. */ - z-index: 20; + /* Make `z-index` bigger than `.editor` to properly display tooltips. */ + z-index: 20; } .ck.ck-presence-list { - flex: 1; - padding: 1.25rem .75rem; + flex: 1; + padding: 1.25rem 0.75rem; } .presence .ck.ck-presence-list__counter { - order: 2; - margin-left: var(--ck-spacing-large) + order: 2; + margin-left: var(--ck-spacing-large); } /* --------- REAL TIME COLLABORATION FEATURES (SHARE TOPBAR CONTAINER) --------------------------------------------- */ .collaboration-demo__row { - display: flex; - position: relative; - justify-content: center; - overflow-y: auto; - background-color: #f2f2f2; - border: 1px solid hsl(0, 0%, 77%); + display: flex; + position: relative; + justify-content: center; + overflow-y: auto; + background-color: #f2f2f2; + border: 1px solid hsl(0, 0%, 77%); } -body[data-editor='InlineEditor'] .collaboration-demo__row { - border: 0; +body[data-editor="InlineEditor"] .collaboration-demo__row { + border: 0; } .collaboration-demo__container { - max-width: var(--ck-sample-container-width); - margin: 0 auto; - padding: 1.25rem; + max-width: var(--ck-sample-container-width); + margin: 0 auto; + padding: 1.25rem; } -.presence, .collaboration-demo__row { - transition: .2s opacity; +.presence, +.collaboration-demo__row { + transition: 0.2s opacity; } .collaboration-demo__topbar { - background: #fff; - border: 1px solid var(--ck-color-toolbar-border); - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 0; - border-radius: 4px 4px 0 0; + background: #fff; + border: 1px solid var(--ck-color-toolbar-border); + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 0; + border-radius: 4px 4px 0 0; } .collaboration-demo__topbar .btn { - margin-right: 1em; - outline-offset: 2px; - outline-width: 2px; - background-color: var( --ck-sample-color-blue ); + margin-right: 1em; + outline-offset: 2px; + outline-width: 2px; + background-color: var(--ck-sample-color-blue); } .collaboration-demo__topbar .btn:focus, .collaboration-demo__topbar .btn:hover { - border-color: var( --ck-sample-color-blue ); + border-color: var(--ck-sample-color-blue); } .collaboration-demo__share { - display: flex; - align-items: center; - padding: 1.25rem .75rem + display: flex; + align-items: center; + padding: 1.25rem 0.75rem; } .collaboration-demo__share-description p { - margin: 0; - font-weight: bold; - font-size: 0.9em; + margin: 0; + font-weight: bold; + font-size: 0.9em; } .collaboration-demo__share input { - height: auto; - font-size: 0.9em; - min-width: 220px; - margin: 0 10px; - border-radius: 4px; - border: 1px solid var(--ck-color-toolbar-border) + height: auto; + font-size: 0.9em; + min-width: 220px; + margin: 0 10px; + border-radius: 4px; + border: 1px solid var(--ck-color-toolbar-border); } .collaboration-demo__share button, .collaboration-demo__share input { - height: 40px; - padding: 5px 10px; + height: 40px; + padding: 5px 10px; } .collaboration-demo__share button { - position: relative; + position: relative; } .collaboration-demo__share button:focus { - outline: none; + outline-color: transparent; } .collaboration-demo__share button[data-tooltip]::before, .collaboration-demo__share button[data-tooltip]::after { - position: absolute; - visibility: hidden; - opacity: 0; - pointer-events: none; - transition: all .15s cubic-bezier(.5,1,.25,1); - z-index: 1; + position: absolute; + visibility: hidden; + opacity: 0; + pointer-events: none; + transition: all 0.15s cubic-bezier(0.5, 1, 0.25, 1); + z-index: 1; } .collaboration-demo__share button[data-tooltip]::before { - content: attr(data-tooltip); - padding: 5px 15px; - border-radius: 3px; - background: #111; - color: #fff; - text-align: center; - font-size: 11px; - top: 100%; - left: 50%; - margin-top: 5px; - transform: translateX(-50%); + content: attr(data-tooltip); + padding: 5px 15px; + border-radius: 3px; + background: #111; + color: #fff; + text-align: center; + font-size: 11px; + top: 100%; + left: 50%; + margin-top: 5px; + transform: translateX(-50%); } .collaboration-demo__share button[data-tooltip]::after { - content: ''; - border: 5px solid transparent; - width: 0; - font-size: 0; - line-height: 0; - top: 100%; - left: 50%; - transform: translateX(-50%); - border-bottom: 5px solid #111; - border-top: none; + content: ""; + border: 5px solid transparent; + width: 0; + font-size: 0; + line-height: 0; + top: 100%; + left: 50%; + transform: translateX(-50%); + border-bottom: 5px solid #111; + border-top: none; } .collaboration-demo__share button[data-tooltip]:hover:before, .collaboration-demo__share button[data-tooltip]:hover:after { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } .collaboration-demo--ready { - overflow: visible; - height: auto; + overflow: visible; + height: auto; } .collaboration-demo--ready .presence, .collaboration-demo--ready .collaboration-demo__row { - opacity: 1; + opacity: 1; } /* --------- PAGINATION FEATURE ------------------------------------------------------------------------------------ */ @@ -321,194 +322,197 @@ body[data-editor='InlineEditor'] .collaboration-demo__row { /* Pagination view line must be stacked at least at the same level as the editor, otherwise it will be hidden underneath. */ .ck.ck-pagination-view-line { - z-index: var(--ck-sample-editor-z-index); + z-index: var(--ck-sample-editor-z-index); } /* --------- REVISION HISTORY FEATURE ------------------------------------------------------------------------------ */ .revision-viewer-container { - display: none; - max-width: 100%; - word-wrap: break-word; + display: none; + max-width: 100%; + word-wrap: break-word; } .revision-viewer-sidebar { - position: relative; - min-width: 310px; - overflow: hidden; - background: var(--ck-color-toolbar-background); - border: 1px solid var(--ck-color-toolbar-border); - margin-left: -1px; + position: relative; + min-width: 310px; + overflow: hidden; + background: var(--ck-color-toolbar-background); + border: 1px solid var(--ck-color-toolbar-border); + margin-left: -1px; } /* A case when Pagination and Revision History features are enabled in the editor. */ /* Move the square with page number from the Pagination plugin to the left side, so that it does not cover the RH sidebar. */ -body[data-revision-history='true'] .ck.ck-pagination-view-line::after { - transform: translateX(-100%) !important; - left: -1px !important; - right: unset !important; +body[data-revision-history="true"] .ck.ck-pagination-view-line::after { + transform: translateX(-100%) !important; + left: -1px !important; + right: unset !important; } /* --------- DOCUMENT OUTLINE FEATURE ------------------------------------------------------------------------------ */ .document-outline-container { - max-height: 80vh; - overflow-y: auto; - margin-bottom: 1em; + max-height: 80vh; + overflow-y: auto; + margin-bottom: 1em; } .document-outline-container .ck.ck-document-outline { - min-height: 100%; - border: 1px solid var(--ck-color-base-border); - background-color: hsl(0, 0%, 96%); + min-height: 100%; + border: 1px solid var(--ck-color-base-border); + background-color: hsl(0, 0%, 96%); } /* --------- SAMPLE GENERIC STYLES (not related to CKEditor) ------------------------------------------------------- */ -body, html { - padding: 0; - margin: 0; +body, +html { + padding: 0; + margin: 0; - font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 16px; - line-height: 1.5; + font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 16px; + line-height: 1.5; } body { - height: 100%; - color: #2D3A4A; + height: 100%; + color: #2d3a4a; } body * { - box-sizing: border-box; + box-sizing: border-box; } a { - color: #38A5EE; + color: #38a5ee; } header .centered { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; - min-height: 8em; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + min-height: 8em; } header h1 a { - font-size: 20px; - display: flex; - align-items: center; - color: #2D3A4A; - text-decoration: none; + font-size: 20px; + display: flex; + align-items: center; + color: #2d3a4a; + text-decoration: none; } header h1 img { - display: block; - height: 64px; + display: block; + height: 64px; } header nav ul { - margin: 0; - padding: 0; - list-style-type: none; + margin: 0; + padding: 0; + list-style-type: none; } header nav ul li { - display: inline-block; + display: inline-block; } header nav ul li + li { - margin-left: 1em; + margin-left: 1em; } header nav ul li a { - font-weight: bold; - text-decoration: none; - color: #2D3A4A; + font-weight: bold; + text-decoration: none; + color: #2d3a4a; } header nav ul li a:hover { - text-decoration: underline; + text-decoration: underline; } main .message { - padding: 0 0 var(--ck-sample-base-spacing); - background: var(--ck-sample-color-green); - color: var(--ck-sample-color-white); + padding: 0 0 var(--ck-sample-base-spacing); + background: var(--ck-sample-color-green); + color: var(--ck-sample-color-white); } main .message::after { - content: ""; - z-index: -1; - display: block; - height: 10em; - width: 100%; - background: var(--ck-sample-color-green); - position: absolute; - left: 0; + content: ""; + z-index: -1; + display: block; + height: 10em; + width: 100%; + background: var(--ck-sample-color-green); + position: absolute; + left: 0; } main .message h2 { - position: relative; - padding-top: 1em; - font-size: 2em; + position: relative; + padding-top: 1em; + font-size: 2em; } .centered { - max-width: var(--ck-sample-container-width); - margin: 0 auto; - padding: 0 var(--ck-sample-base-spacing); + max-width: var(--ck-sample-container-width); + margin: 0 auto; + padding: 0 var(--ck-sample-base-spacing); } .row { - display: flex; - position: relative; + display: flex; + position: relative; } .btn { - cursor: pointer; - padding: 8px 16px; - font-size: 1rem; - user-select: none; - border-radius: 4px; - transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,opacity .2s ease-in-out; - background-color: var(--ck-sample-color-button-blue); - border-color: var(--ck-sample-color-button-blue); - color: var(--ck-sample-color-white); - display: inline-block; + cursor: pointer; + padding: 8px 16px; + font-size: 1rem; + user-select: none; + border-radius: 4px; + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, + border-color 0.2s ease-in-out, opacity 0.2s ease-in-out; + background-color: var(--ck-sample-color-button-blue); + border-color: var(--ck-sample-color-button-blue); + color: var(--ck-sample-color-white); + display: inline-block; } .btn--tiny { - padding: 6px 12px; - font-size: .8rem; + padding: 6px 12px; + font-size: 0.8rem; } footer { - margin: calc(2*var(--ck-sample-base-spacing)) var(--ck-sample-base-spacing); - font-size: .8em; - text-align: center; - color: rgba(0,0,0,.4); + margin: calc(2 * var(--ck-sample-base-spacing)) var(--ck-sample-base-spacing); + font-size: 0.8em; + text-align: center; + color: rgba(0, 0, 0, 0.4); } /* --------- RWD --------------------------------------------------------------------------------------------------- */ -@media screen and ( max-width: 800px ) { - :root { - --ck-sample-base-spacing: 1em; - } - - header h1 { - width: 100%; - } - - header h1 img { - height: 40px; - } - - header nav ul { - text-align: right; - } - - main .message h2 { - font-size: 1.5em; - } +@media screen and (max-width: 800px) { + :root { + --ck-sample-base-spacing: 1em; + } + + header h1 { + width: 100%; + } + + header h1 img { + height: 40px; + } + + header nav ul { + text-align: right; + } + + main .message h2 { + font-size: 1.5em; + } } diff --git a/BlogSimple.Web/wwwroot/css/card.css b/BlogSimple.Web/wwwroot/css/card.css index 622b9f0..295006d 100644 --- a/BlogSimple.Web/wwwroot/css/card.css +++ b/BlogSimple.Web/wwwroot/css/card.css @@ -1,301 +1,284 @@ - - -/* FEATURED STYLING */ +/* FEATURED STYLING */ /* FEATURED STYLING */ /* FEATURED STYLING */ .featured-post-card { - width: 100%; - max-width: 1000px; - display: flex; - flex-direction: column; - position: relative; - box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; - margin-bottom: 50px; + width: 100%; + max-width: 1000px; + display: flex; + flex-direction: column; + position: relative; + box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; + margin-bottom: 50px; } .featured-post-card-img { - width: 100%; - height: 500px; + width: 100%; + height: 500px; } .featured-post-card-body { - display: flex; - flex-direction: column; - text-align: left; - padding: 20px; + display: flex; + flex-direction: column; + text-align: left; + padding: 20px; } .featured-post-card-body-title { - font-size: 1.5rem; - margin-bottom: 15px; + font-size: 1.5rem; + margin-bottom: 15px; } .featured-post-card-body-title a { - text-decoration: none; - color: black; + text-decoration: none; + color: black; } .featured-post-card-body-description { - margin-bottom: 20px; + margin-bottom: 20px; } .featured-post-card-body-details { - display: flex; - flex-direction: row; - gap: 10px; - margin-bottom: 5px; - align-content: center; - justify-content: space-between; - align-items: center; + display: flex; + flex-direction: row; + gap: 10px; + margin-bottom: 5px; + align-content: center; + justify-content: space-between; + align-items: center; } .featured-post-card-body-details span { - display: flex; - flex-direction: row; - gap: 10px; - margin-bottom: 5px; - align-content: center; - align-items: center; + display: flex; + flex-direction: row; + gap: 10px; + margin-bottom: 5px; + align-content: center; + align-items: center; } .featured-post-card-body-details span span a { - text-decoration: none; + text-decoration: none; } - /* POST STYLING */ /* POST STYLING */ /* POST STYLING */ .post-container { - display: flex; - justify-content: space-between; - gap: 5px; - flex-wrap: wrap; + display: flex; + justify-content: space-between; + gap: 5px; + flex-wrap: wrap; } .post-card { - height: 100%; - width: 400px; - display: flex; - flex-direction: column; - position: relative; - box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; + height: 100%; + width: 400px; + display: flex; + flex-direction: column; + position: relative; + box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; } .post-card-img { - width: 100%; - height: 300px; + width: 100%; + height: 300px; } .post-card-body { - display: flex; - flex-direction: column; - text-align: left; - padding: 20px; + display: flex; + flex-direction: column; + text-align: left; + padding: 20px; } .post-card-body-title { - font-size: 1.5rem; - margin-bottom: 15px; - height: 55px; + font-size: 1.5rem; + margin-bottom: 15px; + height: 55px; } .post-card-body-title a:hover, .post-card-body-details span span a:hover, li.list-select a:hover { - color: #113946; + color: #113946; } .post-card-body-title a { - text-decoration: none; - color: black; + text-decoration: none; + color: black; } .post-card-body-details { - display: flex; - flex-direction: row; - justify-content: space-between; - margin-bottom: 5px; - align-content: center; - align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 5px; + align-content: center; + align-items: center; } - .post-card-body-details span { - display: flex; - flex-direction: row; - gap: 10px; - align-content: center; - align-items: center; + display: flex; + flex-direction: row; + gap: 10px; + align-content: center; + align-items: center; } .post-card-body-details span span a { - text-decoration: none; + text-decoration: none; } .post-creator-img { - height: 35px; - width: 35px; - border-radius: 50%; + height: 35px; + width: 35px; + border-radius: 50%; } - /* STANDARD STYLING */ /* STANDARD STYLING */ /* STANDARD STYLING */ .standard-card { - box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; + box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; } .standard-card-header { - padding: 8px 16px; - border-bottom: 1px solid rgb(0,0,0,0.2); - background-color: #113946; - color: white; + padding: 8px 16px; + border-bottom: 1px solid rgb(0, 0, 0, 0.2); + background-color: #113946; + color: white; } .standard-card-body { - padding: 8px 16px; + padding: 8px 16px; } .standard-card-body a { - text-decoration: none; - color: black; + text-decoration: none; + color: black; } .standard-card-body a:hover { - color: blue; + color: blue; } .standard-card-body div ul li { - margin: 5px 0; + margin: 5px 0; } - /* DASHBOARD POST STYLING */ /* DASHBOARD POST STYLING */ /* DASHBOARD POST STYLING */ .dashbboard-post-container { - display: flex; - justify-content: start; - gap: 20px; - flex-wrap: wrap; + display: flex; + justify-content: start; + gap: 20px; + flex-wrap: wrap; } - - /* POST WIDGET STYLING */ /* POST WIDGET STYLING */ /* POST WIDGET STYLING */ - .post-widget-container { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } - .post-widget-body { - display: flex; - justify-content: flex-start; - text-align: left; - align-items: center; + display: flex; + justify-content: flex-start; + text-align: left; + align-items: center; } .post-widget-body-title { - margin: 0 0 0 20px; + margin: 0 0 0 20px; } .post-widget-body h5 a { - color: #1853f7; + color: #1853f7; } .post-widget-img { - width: 75px; - height: 75px; + width: 75px; + height: 75px; } .post-widget-details { - display: flex; - flex-direction: column; - margin: 0 0 0 20px; + display: flex; + flex-direction: column; + margin: 0 0 0 20px; } .post-widget-details p { - margin:0px; - font-style:italic; + margin: 0px; + font-style: italic; } .post-widget-hr { - border: 1px solid rgb(0, 0, 0, 0.25); + border: 1px solid rgb(0, 0, 0, 0.25); } li.list-select a:hover { - color: blue; + color: blue; } - img.author-profile-pic-widget { - height: 75px; - width: 75px; + height: 75px; + width: 75px; } .search-btn { - background-color: #113946; - color: white; - border: none; - outline: none; - padding: 8px 16px; - border-radius: 0.375rem; - transition: all 50ms ease-in-out; + background-color: #113946; + color: white; + border: none; + outline-color: transparent; + padding: 8px 16px; + border-radius: 0.375rem; + transition: all 50ms ease-in-out; } .alt-search-btn { - background-color: #BCA37F; - color: white; - border: none; - outline: none; - padding: 8px 16px; - border-radius: 0.375rem; - transition: all 50ms ease-in-out; + background-color: #bca37f; + color: white; + border: none; + outline-color: transparent; + padding: 8px 16px; + border-radius: 0.375rem; + transition: all 50ms ease-in-out; } .search-btn:hover { - background-color: #BCA37F; + background-color: #bca37f; } - .ck-editor__editable_inline { - height: 100%; - min-height: 500px; - width: 100%; + height: 100%; + min-height: 500px; + width: 100%; } - - /* ACCOUNT CARD STYLING */ /* ACCOUNT CARD STYLING */ /* ACCOUNT CARD STYLING */ - - .account-card { - display: flex; - flex-direction: column; - background-color: #113946; - height: 100%; - box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; - padding: 20px; - margin: 10px 0; + display: flex; + flex-direction: column; + background-color: #113946; + height: 100%; + box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; + padding: 20px; + margin: 10px 0; } .account-card .card-body p { - margin: 20px 0; + margin: 20px 0; } - @media only screen and (max-width: 1000px) { .featured-post-card-img { height: 400px; @@ -316,4 +299,3 @@ img.author-profile-pic-widget { width: 100%; } } - diff --git a/BlogSimple.Web/wwwroot/css/header.css b/BlogSimple.Web/wwwroot/css/header.css index 3c27be0..743dd46 100644 --- a/BlogSimple.Web/wwwroot/css/header.css +++ b/BlogSimple.Web/wwwroot/css/header.css @@ -1,6 +1,4 @@ - - -/* NAV STYLING */ +/* NAV STYLING */ /* NAV STYLING */ /* NAV STYLING */ @@ -12,62 +10,63 @@ */ a.nav-brand-text { - color: white; + color: white; } .dash-menu-btn { - color: white; - border: none; - outline: none; - background-color: transparent !important; + color: white; + border: none; + outline-color: transparent; + background-color: transparent !important; } .navbar-toggler { - background-color: #BCA37F; + background-color: #bca37f; } a.nav-link { - color: white; - transition: all 50ms ease-in-out; + color: white; + transition: all 50ms ease-in-out; } - a.nav-link:hover { - color: #BCA37F; - } +a.nav-link:hover { + color: #bca37f; +} /* HEADER STYLING */ /* HEADER STYLING */ /* HEADER STYLING */ .hero { - background-color: #858585; - background-image: url("../images/blog-simple-hero-image.jpg"); - background-repeat: no-repeat; - background-size: cover; - background-blend-mode: multiply; - color: white; - padding: 200px 0; + background-color: #858585; + background-image: url("../images/blog-simple-hero-image.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-blend-mode: multiply; + color: white; + padding: 200px 0; } .hero-btn { - padding: 10px 16px; - outline: none; - border: none; - color: black; - background-color: #BCA37F; - border-radius: 5px; - transition: all 50ms ease-in-out; + padding: 10px 16px; + outline-color: transparent; + border: none; + color: black; + background-color: #bca37f; + border-radius: 5px; + transition: all 50ms ease-in-out; } a.hero-btn { - padding: 11px 16px; - background-color: white; - text-decoration: none; - color: black; - background-color: #BCA37F; - border-radius: 5px; - transition: all 50ms ease-in-out; + padding: 11px 16px; + background-color: white; + text-decoration: none; + color: black; + background-color: #bca37f; + border-radius: 5px; + transition: all 50ms ease-in-out; } - .hero-btn:hover, a.hero-btn:hover { - background-color: #EAD7BB; - } +.hero-btn:hover, +a.hero-btn:hover { + background-color: #ead7bb; +} diff --git a/BlogSimple.Web/wwwroot/css/site.css b/BlogSimple.Web/wwwroot/css/site.css index ee8eb53..592b7af 100644 --- a/BlogSimple.Web/wwwroot/css/site.css +++ b/BlogSimple.Web/wwwroot/css/site.css @@ -1,542 +1,547 @@ html { - font-size: 14px; + font-size: 14px; } @media (min-width: 768px) { - html { - font-size: 16px; - } + html { + font-size: 16px; + } } body { - font-family: 'Roboto', sans-serif !important; + font-family: "Roboto", sans-serif !important; } -.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; +.btn:focus, +.btn:active:focus, +.btn-link.nav-link:focus, +.form-control:focus, +.form-check-input:focus { + box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } html { - position: relative; - min-height: 100%; + position: relative; + min-height: 100%; } -nav, footer { - background-color: #113946 !important; +nav, +footer { + background-color: #113946 !important; } form { - max-width: 1000px; + max-width: 1000px; } a { - cursor: pointer; + cursor: pointer; } .grid-container { - display: grid; - grid-template-columns: auto auto auto; - padding: 10px; + display: grid; + grid-template-columns: auto auto auto; + padding: 10px; } .grid-item { - padding: 20px; - text-align: center; + padding: 20px; + text-align: center; } .home-index-row { - width: 100%; - --bs-gutter-x: 1.5rem; - display: flex; - flex-wrap: wrap; - margin-top: calc(-1 * var(--bs-gutter-y)); - margin-right: calc(-.5 * var(--bs-gutter-x)); - margin-left: calc(-.5 * var(--bs-gutter-x)); -} - - .home-index-row > * { - flex-shrink: 0; - width: 100%; - max-width: 100%; - padding-right: calc(var(--bs-gutter-x) * .5); - padding-left: calc(var(--bs-gutter-x) * .5); - margin-top: var(--bs-gutter-y); - } + width: 100%; + --bs-gutter-x: 1.5rem; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); + margin-right: calc(-0.5 * var(--bs-gutter-x)); + margin-left: calc(-0.5 * var(--bs-gutter-x)); +} + +.home-index-row > * { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * 0.5); + padding-left: calc(var(--bs-gutter-x) * 0.5); + margin-top: var(--bs-gutter-y); +} .blog-col { - width: 70%; + width: 70%; } .widget-col { - width: 30%; + width: 30%; } .widget-container-layout { - margin-top: 150px; + margin-top: 150px; } .text-left { - text-align: left; + text-align: left; } .validation-summary ul li { - list-style: none; + list-style: none; } .myprofile-img-container { - display: flex; - justify-content: center; - max-width: 1000px; + display: flex; + justify-content: center; + max-width: 1000px; } .myaccount-user-profile-img { - border-radius: 50%; - height: 150px; - width: 150px; - object-fit: cover; + border-radius: 50%; + height: 150px; + width: 150px; + object-fit: cover; } .user-profile-img { - border-radius: 50%; - height: 50px; - width: 50px; - object-fit: cover; + border-radius: 50%; + height: 50px; + width: 50px; + object-fit: cover; } .comment-content-container { - margin: 0 0 15px 15px; + margin: 0 0 15px 15px; } .comment-display-editform-dropdown-container { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .comment-name-date { - display: flex; + display: flex; } .comment-date { - margin-left: 5px; - font-style: italic; + margin-left: 5px; + font-style: italic; } .comment-textarea { - width: 100%; - outline: none; - background: transparent; - border: none; - border-bottom: 1px solid #000000; - resize: none; - overflow: hidden; - transition: 200ms; + width: 100%; + outline-color: transparent; + background: transparent; + border: none; + border-bottom: 1px solid #000000; + resize: none; + overflow: hidden; + transition: 200ms; } .comment-edit-display-section { - display: none; + display: none; } .reply-edit-display-section { - display: none; + display: none; } .comment-display-section { - text-align: left + text-align: left; } .reply-display-section { - text-align: left; - margin-left: 20px; + text-align: left; + margin-left: 20px; } textarea.comment-textarea:focus { - border-bottom: 2px solid #000000; + border-bottom: 2px solid #000000; } .reply-comment-btns-container { - display: flex; - height: 35px; - /*justify-content: flex-end;*/ + display: flex; + height: 35px; + /*justify-content: flex-end;*/ } .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; + display: inline-block; + width: auto; + vertical-align: middle; } .font-weight-bold { - font-weight: 700; + font-weight: 700; } .banner-tag { - width: 175px; - height: 45px; - position: absolute; - top: 5%; - clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 50%, 0% 0%); -} - - .banner-tag div { - height: 45px; - display: flex; - justify-content: flex-start; - align-items: center; - color: white; - margin-left: 5px; - } + width: 175px; + height: 45px; + position: absolute; + top: 5%; + clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 50%, 0% 0%); +} + +.banner-tag div { + height: 45px; + display: flex; + justify-content: flex-start; + align-items: center; + color: white; + margin-left: 5px; +} .technology { - background-color: #ff6a00; + background-color: #ff6a00; } .economy-finance { - background-color: #258cfb; + background-color: #258cfb; } .health-fitness { - background-color: #ffd800; + background-color: #ffd800; } .food { - background-color: #b200ff; + background-color: #b200ff; } .politics { - background-color: #4800ff; + background-color: #4800ff; } .travel { - background-color: #00ff21; + background-color: #00ff21; } .human-science { - background-color: #808080; + background-color: #808080; } .nature-science { - background-color: #ff0000; + background-color: #ff0000; } .other { - background-color: #000000; + background-color: #000000; } .bg-dark-light { - background-color: #343a40 !important; + background-color: #343a40 !important; } .dashboard-light-icon { - color: rgba(255, 255, 255, 0.5) !important; + color: rgba(255, 255, 255, 0.5) !important; } .loader { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background-color: #FFF2D8; - transition: opacity 750ms, visibility 750ms; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #fff2d8; + transition: opacity 750ms, visibility 750ms; } .loader-hidden { - opacity: 0; - visibility: hidden; + opacity: 0; + visibility: hidden; } .loader::after { - content: ""; - width: 75px; - height: 75px; - border: 15px solid #BCA37F; - border-top-color: #113946; - border-radius: 50%; - animation: loading 750ms ease infinite; + content: ""; + width: 75px; + height: 75px; + border: 15px solid #bca37f; + border-top-color: #113946; + border-radius: 50%; + animation: loading 750ms ease infinite; } @keyframes loading { - from { - transform: rotate(0turn); - } + from { + transform: rotate(0turn); + } - to { - transform: rotate(1turn); - } + to { + transform: rotate(1turn); + } } - - /* The hero image */ .hero-image { - background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/blog-simple-hero-image.jpg"); - /* Set a specific height */ - height: 50%; - /* Position and center the image to scale nicely on all screens */ - background-position: center; - background-repeat: no-repeat; - background-size: cover; - position: relative; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url("../images/blog-simple-hero-image.jpg"); + /* Set a specific height */ + height: 50%; + /* Position and center the image to scale nicely on all screens */ + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; } /* Place text in the middle of the image */ .hero-text { - text-align: center; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; } .comment-container { - width: 100%; - display: flex; - justify-content: space-between; - align-items: flex-start; + width: 100%; + display: flex; + justify-content: space-between; + align-items: flex-start; } .comment-content-container { - width: 100%; - flex-grow: 100; + width: 100%; + flex-grow: 100; } .svgButton { - display: flex; - align-items: center; - outline: none; - border: none; - border-radius: 50%; + display: flex; + align-items: center; + outline-color: transparent; + border: none; + border-radius: 50%; } - .svgButton:hover { - background-color: #FFF2D8; - } +.svgButton:hover { + background-color: #fff2d8; +} .replyBtn { - border-radius: 50%; - font-weight: 800; + border-radius: 50%; + font-weight: 800; } - .replyBtn:hover { - background-color: #FFF2D8; - } +.replyBtn:hover { + background-color: #fff2d8; +} .cmt { - flex-grow: 1; + flex-grow: 1; } .write-comment-container { - display: flex; + display: flex; } .write-reply-container { - display: none; + display: none; } .create-comment-form { - width: 100%; - margin-left: 10px; + width: 100%; + margin-left: 10px; } .create-comment-buttons { - display: none; - justify-content: flex-end; + display: none; + justify-content: flex-end; } .create-comment-btn { - padding: 5px 9px; - outline: none; - border: none; - color: black; - margin-left: 5px; - background-color: #BCA37F; - border-radius: 5px; - transition: all 50ms ease-in-out; + padding: 5px 9px; + outline-color: transparent; + border: none; + color: black; + margin-left: 5px; + background-color: #bca37f; + border-radius: 5px; + transition: all 50ms ease-in-out; } -input[type=file]::file-selector-button { - outline: none; - border: none; - color: black; - background-color: #EAD7BB; - cursor: pointer; - transition: all 50ms ease-in-out; +input[type="file"]::file-selector-button { + outline-color: transparent; + border: none; + color: black; + background-color: #ead7bb; + cursor: pointer; + transition: all 50ms ease-in-out; } -input[type=file].account-input::file-selector-button { - outline: none; - border: none; - color: white; - background-color: #113946; - cursor: pointer; - transition: all 50ms ease-in-out; +input[type="file"].account-input::file-selector-button { + outline-color: transparent; + border: none; + color: white; + background-color: #113946; + cursor: pointer; + transition: all 50ms ease-in-out; } - input[type=file].account-input::file-selector-button:hover { - background-color: #EAD7BB; - } +input[type="file"].account-input::file-selector-button:hover { + background-color: #ead7bb; +} -input[type=file]::file-selector-button:hover { - background-color: #BCA37F; +input[type="file"]::file-selector-button:hover { + background-color: #bca37f; } .checkbox-container { - display: block; - position: relative; - padding-left: 35px; - margin-bottom: 12px; - cursor: pointer; - font-size: 22px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - - .checkbox-container input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; - } + display: block; + position: relative; + padding-left: 35px; + margin-bottom: 12px; + cursor: pointer; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.checkbox-container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} /* Create a custom checkbox */ .checkmark { - position: absolute; - top: 0; - left: 0; - height: 25px; - width: 25px; - background-color: #EAD7BB; + position: absolute; + top: 0; + left: 0; + height: 25px; + width: 25px; + background-color: #ead7bb; } /* On mouse-over, add a grey background color */ .checkbox-container:hover input ~ .checkmark { - background-color: #BCA37F; + background-color: #bca37f; } /* When the checkbox is checked, add a blue background */ .checkbox-container input:checked ~ .checkmark { - background-color: #113946; + background-color: #113946; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { - content: ""; - position: absolute; - display: none; + content: ""; + position: absolute; + display: none; } /* Show the checkmark when checked */ .checkbox-container input:checked ~ .checkmark:after { - display: block; + display: block; } /* Style the checkmark/indicator */ .checkbox-container .checkmark:after { - left: 9px; - top: 5px; - width: 5px; - height: 10px; - border: solid white; - border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); + left: 9px; + top: 5px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } a.create-comment-btn { - padding: 6px 9px; - background-color: white; - text-decoration: none; - color: black; - background-color: #BCA37F; - border-radius: 5px; - transition: all 50ms ease-in-out; + padding: 6px 9px; + background-color: white; + text-decoration: none; + color: black; + background-color: #bca37f; + border-radius: 5px; + transition: all 50ms ease-in-out; } - .create-comment-btn:hover, a.create-comment-btn:hover { - background-color: #EAD7BB; - } +.create-comment-btn:hover, +a.create-comment-btn:hover { + background-color: #ead7bb; +} .create-reply-buttons { - display: flex; - justify-content: flex-end; + display: flex; + justify-content: flex-end; } .dropdown { - display: inline-block; - position: relative; + display: inline-block; + position: relative; } .dropdown-content { - display: none; - position: absolute; - width: 100%; - overflow: auto; - box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4); - z-index: 2; - background-color: white; + display: none; + position: absolute; + width: 100%; + overflow: auto; + box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4); + z-index: 2; + background-color: white; } - .dropdown-content a { - display: block; - color: #000000; - padding: 5px; - text-decoration: none; - } +.dropdown-content a { + display: block; + color: #000000; + padding: 5px; + text-decoration: none; +} - .dropdown-content a:hover { - color: #FFFFFF; - background-color: #00A4BD; - } +.dropdown-content a:hover { + color: #ffffff; + background-color: #00a4bd; +} .menu-icon { - cursor: pointer; + cursor: pointer; } .block { - display: block !important; + display: block !important; } .inline { - display: inline-block; + display: inline-block; } .hide { - display: none; + display: none; } .card-footer { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } - button:hover { - opacity: 1; + opacity: 1; } /* Float cancel and delete buttons and add an equal width */ -.cancelbtn, .deletebtn { - float: left; - width: 50%; +.cancelbtn, +.deletebtn { + float: left; + width: 50%; } /* Add a color to the cancel button */ .cancelbtn { - background-color: #ccc; - color: black; + background-color: #ccc; + color: black; } /* Add a color to the delete button */ .deletebtn { - background-color: #f44336; + background-color: #f44336; } /* Add padding and center-align text to the container */ @@ -544,121 +549,122 @@ button:hover { } .container { - text-align: center; + text-align: center; } /* The Modal (background) */ .delete-comment-modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 10000; /* Sit on top */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: #113946; - color: #FFF2D8; - /*padding-top: 50px;*/ + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 10000; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: #113946; + color: #fff2d8; + /*padding-top: 50px;*/ } /* #FFF2D8 #EAD7BB #BCA37F #113946 color:*/ .modal-content-container { - display: flex; - height: 100%; - flex-direction: column; - justify-content: center; - align-items: center; + display: flex; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; } /* The Modal (background) */ .delete-reply-modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 10000; /* Sit on top */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: #113946; - color: #FFF2D8; - /*padding-top: 50px;*/ + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 10000; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: #113946; + color: #fff2d8; + /*padding-top: 50px;*/ } /* Modal Content/Box */ .modal-content { - background-color: #fefefe; - margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ - border: 1px solid #888; - width: 80%; /* Could be more or less, depending on screen size */ - margin: auto; - height: 100%; + background-color: #fefefe; + margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ + margin: auto; + height: 100%; } /* Style the horizontal ruler */ hr { - border: 1px solid #f1f1f1; - margin-bottom: 25px; + border: 1px solid #f1f1f1; + margin-bottom: 25px; } /* The Modal Close Button (x) */ .close { - position: absolute; - right: 35px; - top: 15px; - font-size: 40px; - font-weight: bold; - color: #f1f1f1; + position: absolute; + right: 35px; + top: 15px; + font-size: 40px; + font-weight: bold; + color: #f1f1f1; } - .close:hover, - .close:focus { - color: #f44336; - cursor: pointer; - } +.close:hover, +.close:focus { + color: #f44336; + cursor: pointer; +} /* Clear floats */ .clearfix::after { - content: ""; - clear: both; - display: table; + content: ""; + clear: both; + display: table; } - - .hero-btn { - padding: 10px 16px; - outline: none; - border: none; - color: black; - background-color: #BCA37F; - border-radius: 5px; - transition: all 50ms ease-in-out; + padding: 10px 16px; + outline-color: transparent; + border: none; + color: black; + background-color: #bca37f; + border-radius: 5px; + transition: all 50ms ease-in-out; } a.hero-btn { - padding: 11px 16px; - background-color: white; - text-decoration: none; - color: black; - background-color: #BCA37F; - border-radius: 5px; - transition: all 50ms ease-in-out; + padding: 11px 16px; + background-color: white; + text-decoration: none; + color: black; + background-color: #bca37f; + border-radius: 5px; + transition: all 50ms ease-in-out; } - .hero-btn:hover, a.hero-btn:hover { - background-color: #EAD7BB; - } +.hero-btn:hover, +a.hero-btn:hover { + background-color: #ead7bb; +} @media screen and (max-width: 1000px) { - .blog-col, .widget-col { - width: 100%; - } + .blog-col, + .widget-col { + width: 100%; + } } /* Change styles for cancel button and delete button on extra small screens */ @media screen and (max-width: 300px) { - .cancelbtn, .deletebtn { - width: 100%; - } + .cancelbtn, + .deletebtn { + width: 100%; + } }