-
Notifications
You must be signed in to change notification settings - Fork 2
/
technomicon.css
69 lines (55 loc) · 4.85 KB
/
technomicon.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
h1 {font-family:'Montserrat',sans-serif; font-size:35px; font-weight:900; line-height:1; margin:0; padding:0; letter-spacing:-2px; text-decoration:underline;}
h2 {font-family:'Montserrat',sans-serif; font-size:26px; font-weight:300; line-height:1; margin:0; padding:0; letter-spacing:-1px;}
h3 {font-family:'Montserrat',sans-serif; font-size:14px; font-weight:400; font-style:italic; line-height:1.2; margin:0; padding:0;}
h4 {font-family:'Yuji Boku',serif; font-size:12px; font-weight:400; line-height:0.8; margin:0; padding:0; letter-spacing:-3px;}
p {font-family:'Montserrat',sans-serif; font-size:16px; font-weight:400; line-height:1.2; margin:0; padding:0;}
a {color:#fff; text-decoration:underline; text-decoration-thickness:1px;}
green{color:#33a02c;}
red{color:#D32F2F;}
hr {border:none; height:1px; background-color:#fff; width:100%; margin:20px 0; padding:0;}
.black a{color:#000;}
.black h1{color:#000;}
.black p{margin-top:5px;}
.white h1{text-shadow:2px 2px 2px #555;}
.white p{text-shadow:2px 2px 2px #555; margin-top:5px;}
body {color:#fff; background-color:#333; margin:0; padding:0; box-sizing:border-box; text-align:center;}
header {color:#fff; background-color:#333; display:flex; justify-content:space-between; align-items:center; padding:0 20px; position:fixed; height:40px; width:100%; top:0; z-index:1000; border-bottom: 1px solid #333;}
header h1{font-size:18px;}
.content{margin:0; padding:0 20px;}
.content p:not([class])::first-letter {font-size:45px; font-weight:900; float:left; margin:3px 5px 0 0; line-height:0.6;}
.content p.right{font-size:14px; text-align:right; font-style:italic;}
.container {margin:41px auto 0 auto; display:flex; flex-wrap:wrap; justify-content:space-around; padding:0; text-align:left;}
.box {flex:0 0 50%; margin:0; padding:0 0 20px 0; box-sizing:border-box;}
.box-wide {width:100%; margin:0; padding:0 0 20px 0; box-sizing:border-box; max-width:768px;}
.box-wide-title {width:100%; margin:0; padding:0 20px; box-sizing:border-box;}
nav {background-color:#333; display:none; flex-direction:column; align-items:flex-start; width:100%; position:absolute; right:0; top:41px; border-bottom: 1px solid #333; padding:15px 0 15px 20px; box-sizing:border-box;}
nav.show {display:flex;}
nav a {font-family:'Montserrat'; color:#fff; text-decoration:none; margin:5px 0; font-size:14px;}
nav p {font-family:'Montserrat'; color:#fff; margin:5px 0; font-size:10px;}
.menu-icon {display:block; cursor:pointer; font-size:20px; position:fixed; right:20px;}
@media only screen and (max-width: 768px) {
nav {background-color:#333; display:none; flex-direction:column; align-items:flex-start; width:100%; position:absolute; right:0; top:41px;}
nav.show {display:flex;}
.box {flex:0 0 100%;}
}
.image-container {display:flex; overflow:hidden; position:relative; height:auto; width:100%; max-width:768px; padding:0 20px; margin:0; align-items:center; justify-content:center; box-sizing:border-box;}
.image {display:block; width:100%; height:auto; max-height:100%; max-width:100%;}
.image-circle {display:block; width:50%; height:auto; max-height:100%; max-width:50%; border-radius:50%;}
.text-overlay {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; background:rgba(0,0,0,0); margin:0; padding:0; box-sizing:border-box; z-index:2; width:80%;}
.text-overlay h1{color:#000; font-size:50px; line-height:0.6;}
.text-overlay-left {position:absolute; top:15px; left:15px; color:'#333'; text-align:left; background:rgba(0,0,0,0); padding:0; box-sizing:border-box; z-index:2;}
.text-overlay-right {position:absolute; top:15px; right:15px; color:'#333'; text-align:right; background:rgba(0,0,0,0); padding:0; box-sizing:border-box; z-index:2;}
.tag-overlay {position:absolute; top:0%; left:100%; transform:translate(-100%,0%); color:#333; text-align:right; background:rgba(255,255,0,1); padding:0 3px; box-sizing:border-box; z-index:3;}
.text-background-brown {display:inline-block; background-color:#c3a76b; color:#fff; margin:5px auto; padding:2px 5px; font-size:9px; font-weight:600; border-radius:2px;}
.color-overlay {position:absolute; top:0; left:0; width:100%; height:100%; mix-blend-mode:multiply; z-index:1;}
.color-gradient {background:linear-gradient(to right,#ffb798,#ffe8cd);}
.transparent-gradient {background:linear-gradient(to bottom,#ffffff,transparent);}
.banner{box-sizing:border-box; text-align:left; padding:20px; margin:0; background-color:#333; color:#fff;}
.banner h4{color:#ff0000; font-size:25px; letter-spacing:0px;}
.banner p{font-size:12px;}
.footer {background-color:#333; color:#fff; padding:40px 20px 40px 20px; text-align:left;}
.footer a{color:#fff; text-decoration:underline;}
.footer h3{font-size:9px; font-weight:400; color:#666; padding-top:10px; letter-spacing:1px;}
.footer p{font-size:14px; font-weight:400; line-height:1.2; letter-spacing:0;}
.quote{width:70%; padding:0; margin:auto; text-align:center;}
.quote h4{font-weight:600;}