diff options
Diffstat (limited to 'assets/css/edwin.css')
-rw-r--r-- | assets/css/edwin.css | 187 |
1 files changed, 122 insertions, 65 deletions
diff --git a/assets/css/edwin.css b/assets/css/edwin.css index 0e03cc6..7247f79 100644 --- a/assets/css/edwin.css +++ b/assets/css/edwin.css @@ -1,47 +1,42 @@ +html { overflow-y: scroll; } +body { color: #fff; } + html, body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; -} - -html { margin: 0; width: 100%; - overflow-y: scroll; - background-color: #252b30; } -body { - color: #fff; - margin: 0; - min-height: 100%; - text-align: center; - width: 100%; +ul { padding: 0; } +li { list-style: none; } + +main, .contact, .container, .feedback { + min-height: 100vh; + min-height: calc(100vh - 10.625em); } main { - -webkit-align-items: center; align-items: center; display: flex; display: -ms-flexbox; display: -webkit-flex; + -webkit-align-items: center; -webkit-justify-content: center; justify-content: center; margin: 0 auto; - min-height: 100vh; - min-height: calc(100vh - 166px); - height: 360px; + height: 400px; } -.body-opaque { - background-color: #333b42; - background-image: url("/images/overlay.png"), linear-gradient(0deg, #333b42, #333b42); -} +/* body variants */ + +.body-opaque { background-color: #333b42; } .body-gradient { background-image: linear-gradient(180deg, #1B293A, #397382); } /*home page*/ -.intro { width: 100%; } +.intro { width: 100%; text-align: center; } .intro > h1 { color: #fff; @@ -72,13 +67,14 @@ main { width: 10vh; } -/*link colors*/ +/* link colors */ -a { color: #fff; text-decoration: none; } -a:hover { color: #f00 !important; } +a, a:hover { color: #46afff; text-decoration: none} -.topnav .active { color: red; } -.topnav a:hover { color: red; } +.topnav .active { color: white; text-shadow: 0 0 0 #fff; } +.topnav a:hover { background-color: #ffffff2b; border-radius: 3px; color: white; } + +.link__underline { border-bottom: 1px solid currentColor; } /* hashover comment section */ @@ -161,8 +157,6 @@ a:hover { color: #f00 !important; } .contact { height: 400px; max-width: 540px; - min-height: 100vh; - min-height: calc(100vh - 166px); padding-bottom: 0; padding-right: 16px; padding-top: 0; @@ -171,15 +165,11 @@ a:hover { color: #f00 !important; } } .contact-buttonPadding { padding-left: 0; } - .contact-maxWidth { width: 100% } - .contact-name { padding-right: 1em; } - .contact-email { padding-left: 1em; } .form-alert { color: #f00; } - .form { display: none; } /* feedback form */ @@ -187,8 +177,6 @@ a:hover { color: #f00 !important; } .feedback { height: auto; max-width: 540px; - min-height: 100vh; - min-height: calc(100vh - 206px); padding-bottom: 40px; padding-top: 0; text-align: justify; @@ -230,6 +218,10 @@ select[multiple], select[size] { height: 2.75em; } +input[type="text"], input[type="password"], input[type="email"], textarea { + box-sizing: content-box; +} + input[type="text"], input[type="password"], input[type="email"], select { height: 1.5rem; margin-bottom: 1.3em; @@ -240,13 +232,13 @@ input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hove } -input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus { +input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus { background: rgba(25, 25, 25, 0.35) none repeat scroll 0 0; border-color: #fff; box-shadow: 0 0 0 1px #fff; } -input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea { +input[type="text"], input[type="password"], input[type="email"], select, textarea { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -287,7 +279,7 @@ input[type="submit"], input[type="reset"], input[type="button"] { white-space: nowrap; } -/* inlineplayer.css */ +/* inline player */ ul.graphic p { display: inline; @@ -308,6 +300,7 @@ ul.graphic li a, ul.graphic li a.sm2_link { background-color: rgba(255, 50, 50, 0.65); border: 1px solid transparent; border-radius: 4px; + box-shadow: inset 0 1px rgba(255,255,255,.1),inset -1px 0 rgba(0,0,0,.1),inset 1px 0 rgba(0,0,0,.1),inset 0 -1px rgba(0,0,0,.6); color: #fff; display: inline-block; font-size: 14px; @@ -344,7 +337,7 @@ ul.graphic li a, ul.graphic li a.sm2_paused:hover, ul.graphic li a.sm2_link:hove ul.graphic li a.sm2_link:hover { background-color: rgba(40, 40, 40, 0.65); - color: #fff; + color: red; } ul.graphic li a.sm2_paused { @@ -455,9 +448,9 @@ body #sm2-container object, body #sm2-container embed { /* sidebar navigation */ -#main { - transition: margin-left .25s; -} +#main { transition: margin-left .25s; } + +.fa { box-sizing: content-box; } .sidenav { height: 100%; @@ -490,12 +483,13 @@ body #sm2-container object, body #sm2-container embed { .sidenav a {font-size: 18px;} } +.sidenav__landing { background-color: rgba(0, 0, 0, 0.2); } +.sidenav__landing .fa { background-color: rgba(255, 255, 255, 0.15); } +.sidenav__landing a.active { background-color: rgba(255, 255, 255, 0.15); } + /* navigation bar */ -nav { - background-color: #282e34; - margin-bottom: 2em; -} +nav { background-color: #282e34; height: 4.5em; margin-bottom: 2em; } .nav-transparent { background-color: #282e34; @@ -506,9 +500,10 @@ nav { border-radius: 0; border: none; background-color: transparent; - position: absolute; cursor: pointer; - top: 10px; + display: none; + position: absolute; + top: 12px; right: 10px; font-size: 19px !important; padding: 14px 20px !important; @@ -528,32 +523,19 @@ nav { .topnav-left a { color: #ffffff; -/* border-bottom: 1px solid transparent;*/ display: block; float: left; font-size: 18px; font-weight: 400; line-height: 1.4; - padding: 22px 16px; + margin: 12px 6px; + padding: 10px; text-align: center; text-decoration: none; } -/*.topnav-left a:hover { border-bottom: 1px solid currentColor; }*/ -.topnav-left a:nth-child(1) { display: none; } - .topnav-right a { float: right; } -/*.topnav-right a:hover { border-bottom: 1px solid transparent; }*/ -@media screen and (max-width: 768px) { - .fa { font-size: 1em; padding: 0.6em 0 0.6em 1em; background-color: #3B444C; border-radius: 3px; width: 2em; height: 1em; } - .topnav a.active { background-color: transparent; color: #fff !important; } - .topnav a { font-size: 20px; padding: 24px 16px; } - .topnav a:not(:first-child) { display: none; } - .topnav-left a:nth-child(1) { display: block; line-height: 1; } - .topnav-right a { display: none; } - .topnav .navicon { display: block; } -} /* footer */ @@ -561,7 +543,7 @@ nav { color: #ccc; margin: 0 auto; max-width: 1344px; - padding: 2em 2em; + padding: 2em; } .footer { @@ -577,15 +559,90 @@ nav { } .footer a { color: #ccc; } - .footer a:hover { color: #f00; } -@media screen and (max-width:768px) { +/* responsive desgin */ + +@media screen and (max-width: 768px) { + .fa { font-size: 1em; padding: 0.6em 0 0.6em 1em; background-color: #3B444C; border-radius: 3px; width: 2em; height: 1em; } + .topnav a.active {} + .topnav a { font-size: 14px; padding: 14px 4px; } + .topnav-right a { display: none; } + .topnav .navicon { display: block; } + nav { background-color: transparent; box-shadow: 0 0 12px 4px #0000004f; } + .nav-transparent { box-shadow: 0 0 12px 4px #0000004f; } + nav, .nav-transparent { padding: 0 4.8em 0 1em; } .footer { background-color: #282e34; background-color: rgba(0, 0, 0, 0); padding-left: unset; text-align: center; } - nav { background-color: rgba(0, 0, 0, 0); } } +@media screen and (max-width: 355px) { .topnav a { font-size: 14px; padding: 14px 0; margin: 12px 5px; } } + + /* error page */ .error__header { font-size: 8rem !important; } .error__lineHeight { line-height: 0; } + + +/* bootstrap override */ + +.paragraph__serif { + font-family: 'Georgia', 'Baskerville', 'TimesNewRoman', 'Times New Roman', 'Times', serif; + font-size: 20px; + line-height: 1.8; +} + +.paragraph__quote { + color: #ccc; + font-style: oblique; + padding: 1em; +} + +hr { + border-top: 1px solid rgb(40, 40, 40) !important; + border-top: 1px solid rgba(0, 0, 0, 0) !important; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.blog-post { font-size: 0.95rem; } +.blog-post-tags { display: none; } +.blog-post-categories { display: none; } +.blog__card { background-color: #434a51; border-radius: 3px; box-shadow: 3px 3px 0 #bababa; padding: 1em; } +.blog__recents { font-size: 0.95em; } + +.text-secondary { color: #eee !important; margin-bottom: 1em; } + +/* buttons */ + +.badge-primary { background-color: #d63d3d; } +.badge-primary[href]:focus, .badge-primary[href]:hover { background-color: #D50000; } + +/* paginator */ + +.page-item.active .page-link { + color: #000 !important; + border-color: #aaa !important; + background-color: #aaa !important; +} + +.page-link { + color: #000 !important; + background-color: #fff; +} + +/* image sizing */ + +.blog-post img { + max-width: 100%; +} + +.blog-header, .blog-post, .blog-pagination { + margin-bottom: 2rem; +} + +@media screen and (max-width: 768px) { + .blog-header, .blog-post, .blog-pagination { + max-width: 90vw; + } +} |