summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css274
1 files changed, 138 insertions, 136 deletions
diff --git a/style.css b/style.css
index 06d4796..ca2f022 100644
--- a/style.css
+++ b/style.css
@@ -1,11 +1,14 @@
body {
- margin: 0;
- padding: 0;
- background-color: white;
- font-family: sans-serif;
- font-size: 16px;
- line-height: 1.5;
- color: black;
+ margin: 0;
+ padding: 0;
+ background-color: white;
+ font-family: sans-serif;
+ font-size: 16px;
+ line-height: 1.5;
+ color: black;
+}
+a:hover {
+ color: #ff6347;
}
.responsive-image {
@@ -14,19 +17,19 @@ body {
}
.container {
- margin-left: auto;
- margin-right: auto;
- padding-left: 15px;
- padding-right: 15px;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 15px;
+ padding-right: 15px;
}
@media (min-width: 992px) {
- .container {
- width: 970px;
- }
+ .container {
+ width: 970px;
+ }
}
.row {
- display: grid;
- grid-template-columns: repeat(12, 1fr);
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
}
.darkgroup {
@@ -35,161 +38,160 @@ body {
margin-top: 20px;
padding-bottom: 30px;
}
-
.lightgroup {
margin-top: 20px;
padding-bottom: 30px;
}
#dhead {
- margin-top: 20px;
+ margin-top: 20px;
}
#dpic {
- grid-column: span 6;
- text-align: right;
+ grid-column: span 6;
+ text-align: right;
}
#ddesc {
- padding-top: 40px;
- padding-left: 20px;
- grid-column: span 6;
+ padding-top: 40px;
+ padding-left: 20px;
+ grid-column: span 6;
}
@media (max-width: 991px) {
- #dpic {
- grid-column: span 12;
- text-align: center;
- }
- #ddesc {
- grid-column: span 12;
- padding-top: 20px;
- text-align: center;
- }
+ #dpic {
+ grid-column: span 12;
+ text-align: center;
+ }
+ #ddesc {
+ grid-column: span 12;
+ padding-top: 20px;
+ text-align: center;
+ }
}
h1 {
- font-size: 34px;
- font-weight: normal;
- padding: 0;
- margin: 0;
+ font-size: 34px;
+ font-weight: normal;
+ padding: 0;
+ margin: 0;
}
h2 {
- font-weight: normal;
- font-style: italic;
- color: #385d24;
- font-size: 18px;
- padding: 0;
- margin: 5px 0 10px 0;
+ font-weight: normal;
+ font-style: italic;
+ color: #385d24;
+ font-size: 18px;
+ padding: 0;
+ margin: 5px 0 10px 0;
}
@media (min-width: 992px) {
- h2 {
- max-width: 300px;
- }
+ h2 {
+ max-width: 300px;
+ }
}
#dpic img {
- width: 240px;
- height: 240px;
- border-radius: 120px;
+ width: 240px;
+ height: 240px;
+ border-radius: 120px;
}
.iico {
- width: 40px;
- height: 40px;
+ width: 40px;
+ height: 40px;
+}
+.img-bg {
+ display: block;
+ max-width: 100%;
+ height: auto;
}
hr {
- height: 1px;
- background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
- background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
- background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
- background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
- padding: 0;
- margin: 20px 0px 20px 0px;
- border: 0;
+ height: 1px;
+ background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
+ background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
+ background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
+ background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
+ padding: 0;
+ margin: 20px 0px 20px 0px;
+ border: 0;
}
.ico {
- grid-column: span 1;
- vertical-align: top;
- border-left: 2px solid #385d24;
- position: relative;
+ grid-column: span 1;
+ vertical-align: top;
+ border-left: 2px solid #385d24;
+ position: relative;
}
.ico img {
- border-radius: 5px;
- width: 100%;
- max-width: 80px;
- margin-left: 10px;
+ border-radius: 5px;
+ width: 100%;
+ max-width: 80px;
+ margin-left: 10px;
}
.desc {
- grid-column: span 10;
- vertical-align: top;
- font-size: 17px;
- padding-left: 20px;
- padding-bottom: 20px;
-}
-.entry {
+ grid-column: span 10;
+ vertical-align: top;
+ font-size: 17px;
+ padding-left: 20px;
+ padding-bottom: 20px;
}
.entry-dot {
- position: absolute;
- top: 4px;
- left: -7px;
- width: 8px;
- height: 8px;
- border-radius: 10px;
- background-color: #385d24;
- border: 2px solid white;
+ position: absolute;
+ top: 5px;
+ left: -6px;
+ width: 8px;
+ height: 8px;
+ border-radius: 10px;
+ background-color: #385d24;
+ border: 1px solid white;
}
.timespan {
- grid-column: span 1;
- font-size: 14px;
- text-align: right;
- padding-right: 5px;
- color: #385d24;
-}
-.hassets {
- position: relative;
-}
-@media (max-width: 991px) {
- .hassets {
- display: none;
- }
-}
-.hasset {
- position: absolute;
- margin: 0;
- padding: 0;
+ grid-column: span 1;
+ font-size: 14px;
+ text-align: right;
+ padding-right: 5px;
+ color: #385d24;
}
.ctitle {
- font-size: 36px;
- margin-bottom: 20px;
- margin-top: 40px;
-}
-.card {
- grid-column: span 3;
- vertical-align: top;
- background-color: #385d24;
- border: 1px solid #385d24;
- border-radius: 3px;
- padding: 5px;
- background-color: white;
- padding-bottom: 10px;
+ font-size: 36px;
+ margin-bottom: 20px;
+ margin-top: 40px;
}
-@media (max-width: 991px) {
- .card {
- grid-column: span 6;
- }
- #featured-talks .row {
- grid-column-gap: 5px;
- grid-row-gap: 5px;
- }
-}
-.card img {
- border-radius: 5px;
- width: 100%;
-}
-.cdesc {
- height: 30px;
- vertical-align: top;
- margin-bottom: 10px;
- font-size: 15px;
-}
-@media (max-width: 768px) {
- .cdesc {
- font-size: 14px;
- padding-bottom: 10px;
- }
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #262a33;
+ color: white;
+ }
+ a {
+ color: #00ffff;
+ }
+ .darkgroup {
+ background-color: #657595;
+ color: black;
+ a {
+ color: #32CD32
+ }
+ a:hover {
+ color: #ff6347;
+ }
+ }
+ h1, h2, .timespan, .desc {
+ color: white;
+ }
+ .ico {
+ border-left: 2px solid #32CD32;
+ }
+ .entry-dot {
+ background-color: #32CD32;
+ }
+ .iico {
+ filter: invert(100%);
+ }
+ .img-bg {
+ background-color: white;
+ padding: 1px;
+ border-radius: 2px;
+ }
+ .responsive-image {
+ background-color: white;
+ padding: 1px;
+ border-radius: 2px;
+ }
+ hr {
+ background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
+ }
}