codetologist.github.io/about.css at master · codetologist/codetologist.github.io · GitHub

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/******************************/
/******* About Section ********/
/******************************/

.about{
    /*padding: 0px 0px 25px 0px; */
    min-height: 50vh;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center ;
    justify-content: space-around;
}

.about img{
  max-width:350px;
  display: block;
  height: auto;
  border-radius: 50%;
  border-color: black;
  border-style: solid;
  padding : 0px;
}

.about .custom-text{
  /*font-size: 1.2em;*/
  color: white;
  padding: 0.5em;
  font-size: calc(16px + 1vw);
  line-height: calc(1.1em + 0.5vw);
}

.about .custom-button{
  background-color :#0F5B69 ;
  color: white;
  border-radius: 5px;
  font-size: calc(16px + 1vw);
  line-height: calc(1.1em + 0.5vw);
  padding: 16px 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.about .custom-button:hover {
  background-color: black;
  color: white;
}

.about figcaption{
  display: none;
}

.about figure{
  padding: 0.5em;
}

/**********************************/
/*Media Queries for responsive behavior*/
/**********************************/

@media only screen and (min-width: 600px) {
  /*.about {
    display: flex;
    flex-direction: row;
  }*/

  .about img{
    max-width:350px;
  }
}

@media only screen and (min-width: 640px){
  .about{
    display: none;
  }
}

/* ===== == = === Base Styles === = == ===== /


/ ===== == = === 20em (320px) === = == ===== /

@media only screen and (min-width : 20em) {
}

/ ===== == = === 30em (480px) === = == ===== /

@media only screen and (min-width : 30em) {
}

/ ===== == = === 37.5em (600px) === = == ===== /

@media only screen and (min-width: 37.5em) {
}

/ ===== == = === 48em (768px) === = == ===== /

@media only screen and (min-width : 48em) {
}

/ ===== == = === 56.25em (900px) === = == ===== /

@media only screen and (min-width : 56.25em) {
}

/ ===== == = === 68.75em (1100px) === = == ===== /

@media only screen and (min-width : 68.75em) {
}

/ ===== == = === 81.25em (1300px) === = == ===== /

@media only screen and (min-width : 81.25em) {
}