feat: initialize IoT Standards Lab website project with MAM skills & onboarding guide

ISL-2026/assets/main/css/custom.css

@@ -0,0 +1,233 @@
+body {
+  background: #f2f4f7;
+  -webkit-overflow-scrolling: touch;
+}
+
+.st_org.card-body {
+  background: lightgray;
+}
+
+.row.st_org img {
+  max-height: 260px;
+}
+
+@media (max-width: 400px) {
+  .navbar-brand.logo {
+    font-size: 1.3rem;
+  }
+}
+
+.portfolio-block .heading h2 {
+  font-size: 1.9rem;
+}
+
+.page-footer {
+  background: #44475a;
+}
+
+.page-footer a:hover {
+  color: skyblue;
+}
+
+.page-footer a {
+  color: white;
+  text-decoration: underline;
+}
+
+.portfolio-block.ccis {
+  padding-top: 45px;
+  padding-bottom: 0px;
+}
+
+.vlc {
+  margin-top: 70px;
+  margin-bottom: 70px;
+}
+
+.organization {
+  margin-top: 100px;
+}
+
+.container img {
+  width: 100%;
+  transition: width 1s;
+  -webkit-transition: all .2s ease-out;
+  -moz-transition: all .2s ease-out;
+  -ms-transition: all .2s ease-out;
+  transition: all .2s ease-out;
+}
+
+.godopu_description {
+  padding-top: 60px;
+}
+
+.float {
+  position: fixed;
+  width: 80px;
+  height: 80px;
+  bottom: 50px;
+  right: 50px;
+  background-color: lightcoral;
+  color: #FFF;
+  border-radius: 50px;
+  text-align: center;
+  padding-top: 14px;
+  font-size: 50px;
+  box-shadow: 2px 2px 3px #999;
+}
+
+.float:hover {
+  background: lightblue;
+}
+
+@media (max-width: 1200px) and (min-width:992px) {
+  .research-area.card-body {
+    height: 332.8px;
+  }
+}
+
+@media (max-width: 992px) and (min-width:768px) {
+  .research-area.card-body {
+    height: 480px;
+  }
+}
+
+@media (max-width: 800px) {
+  .float {
+    bottom: 23px;
+    right: 23px;
+    padding-top: 10px;
+    width: 60px;
+    height: 60px;
+    font-size: 35px;
+  }
+}
+
+.gcontainer {
+  max-width: 1140px;
+  display: flex;
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 10px;
+  font-size: 1.3rem;
+  width:100%
+}
+
+.gcontainer .card-img-top {
+  display: flex;
+  position: absolute;
+  margin-top: auto;
+  margin-bottom: auto;
+  vertical-align: middle;
+  width: calc(100% - 40px);
+  top: 0;
+  bottom: 0;
+  justify-content: center;
+  padding:20px;
+}
+.gcontainer .card-img-top img{
+  margin-top:auto;
+  margin-bottom:auto;
+  width : 100%;
+}
+
+@media (max-width: 1200px) and (min-width:768px) {
+  .gcontainer {
+    width: 965px;
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .gcontainer {
+    max-width: 630px;
+    padding : 10px;
+    display: inline-block;
+    text-align: center;
+  }
+}
+
+@media (max-width: 767px) {
+  .godopu_description {
+    padding-top: 10px;
+    text-align: center;
+    padding-bottom: 10px;
+    position: relative;
+    top: auto;
+    bottom: auto;
+    font-size: 1.2rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .gcontainer .col-sm-6 {
+    width: 100%;
+    padding : 0px;
+    position: relative;
+    max-width: 100%;
+    flex: inherit;
+  }
+}
+
+@media (max-width: 767px) {
+  .gcontainer .card-img-top {
+    position: relative;
+    padding:10px;
+    margin-right:auto;
+    margin-left:auto;
+    display:flex;
+    width: calc(100% - 20px);
+  }
+}
+
+.puscale-up-img{
+  transition: transform .5s ease;
+  border : none;
+}
+
+.puscale-up-img:hover{
+  box-shadow: 3px 3px 11px rgba(33,33,33,.2);
+  transform: scale(1.07);
+}
+
+.iots-frame-holder{
+  display : none;
+  width : 100%;
+  height : calc(100% - 60px);
+  position : fixed;
+  margin-top : 62px;
+  border : none;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  border : none;
+}
+
+.iots-frame-holder iframe{
+  width: 100%;
+  height:100%;
+  display:flex;
+  border: none;
+}
+
+@media(min-width:592px) {
+  .iots-frame-holder {
+    display : none;
+    width : 100%;
+    height : calc(100% - 80px);
+    position : fixed;
+    margin-top : 83px;
+  }
+
+  .iots-frame-holder iframe{
+    width: 100%;
+    height:100%;
+    display:flex;
+  }
+}
+
+@media(max-width:592px) {
+  .iots-frame-holder iframe{
+    -webkit-overflow-scrolling: touch;
+    overflow-y : scroll;
+  }
+}