pxt-arcade 1.10.21 → 1.10.23

package/docs/static/hour-of-code/2022/styles.css

@@ -0,0 +1,386 @@
+
+
+@font-face {
+    font-family: 'InterBold';
+    src: url('Inter/static/Inter-Bold.ttf')
+        format('truetype');
+}
+
+
+@font-face {
+    font-family: 'NunitoRegular';
+    src: url('Nunito/static/Nunito-Regular.ttf')
+        format('truetype');
+}
+
+@font-face {
+    font-family: 'NunitoSemiBold';
+    src: url('Nunito/static/Nunito-SemiBold.ttf')
+        format('truetype');
+}
+
+@font-face {
+    font-family: 'NunitoBold';
+    src: url('Nunito/static/Nunito-Bold.ttf')
+        format('truetype');
+}
+
+@font-face {
+    font-family: 'NunitoExtraBold';
+    src: url('Nunito/static/Nunito-ExtraBold.ttf')
+        format('truetype');
+}
+
+body{
+
+    font-family: 'NunitoRegular', sans-serif;
+    font-size: 22px;
+    color: #ffffff;
+    margin: 0;
+    padding: 0;
+    background-color: #140083;
+    min-width: 1200px;
+}
+
+h2{
+    font-family: 'NunitoExtraBold';
+    font-style: normal;
+    font-weight: 800;
+    font-size: 87px;
+    background: linear-gradient(282.51deg, #F9CD03 38.08%, #F703C1 94.99%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin:0;
+    line-height: 87px;
+}
+
+h3{
+    color: #F9CD03;
+    font-size: 32px;
+    margin: 0;
+}
+
+section, footer{
+    background-color: #0000AA;
+}
+
+section{ 
+    display: flex;
+    justify-content: center;
+    /* padding-bottom: 50px; */
+}
+
+header{
+    background-color:rgb(20 0 133 / 80%);
+    padding: 20px; 
+    position: fixed;
+    top: 0px;
+    width: 100%;
+    z-index: 999;
+    display: flex;
+    gap:20px;
+}
+
+/* Nav */
+nav {
+    width: 100%;
+}
+
+nav a{
+    font-family: 'InterBold', sans-serif;
+    font-size: 18px;
+}
+
+
+
+a {
+    color: #FFBE00;
+    text-decoration: none; 
+}
+
+a:link{
+    color: #FFBE00
+}
+
+a:hover{
+    text-decoration: underline;   
+}
+
+p > a{
+    text-decoration: underline;
+}
+
+nav ul{
+    display: flex;
+    gap:20px;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    align-items: center;
+}
+
+nav ul li{
+    list-style: none;
+    /* margin-right: 1em; */
+    line-height: 10px;
+}
+
+/* HERO */
+#hero{
+    padding: 0;
+    margin-top: 60px;
+    text-align: center;
+    background-color: #140083;
+    background-image:  url("hoc202_heroImage_large.gif"), url("skyTile.png");
+    
+    /* background-image:  url("static/hour-of-code/2022/hoc202_heroImage_large.gif"), url("static/hour-of-code/2022/skyTile.png"); */
+    background-repeat: no-repeat, repeat-x;
+    background-position: center;
+    /* background-size: 1270px 416px, 416px;
+    height: 416px; */
+    background-size: 1500px 500px, 500px;
+    height: 500px;
+}
+
+#hero #logo {
+    margin-top: 100px;
+    width: 80%;
+}
+
+#hero h1{
+    font-family: 'NunitoBold', sans-serif;
+    font-weight: bold;
+    font-size: 147px;
+    margin: 0;
+    text-shadow:15px 0 0 red,0 15px 0 red,-15px 0 0 red,0 -15px 0 red;
+}
+
+#hero .header-title {
+    font-size: 52px;
+}
+
+#hero .header-tag{
+    /* font-weight: bold; */
+    width: 280px;
+    margin: auto;
+}
+
+/* Cards */
+.card{
+    position: relative;
+    padding: 20px;
+    margin: 10px 0 ;
+    background-color: #140083;
+    border-radius: 10px;
+    box-shadow: 0px 6.4px 14.4px rgba(0, 0, 0, 0.132), 0px 1.2px 3.6px rgba(0, 0, 0, 0.108);
+    transition: transform .15s, opacity .15s;
+}
+
+.card:hover{
+    box-shadow: 0px 3.4px 7.4px rgba(0, 0, 0, 0.132);
+    transform: scale(.98);
+    opacity: .8;
+}
+
+.card-item-title{
+    font-family: 'NunitoBold';
+}
+.card img.thumbnail{
+    width: 100%;
+}
+
+/* Featured */
+
+.featured-list{
+    margin: 0;
+    padding: 75px 75px 0px 75px;
+    background: linear-gradient(180deg, #1C7100 60%, #0000AA 50%);
+    display: flex;
+    justify-content: center;
+}
+
+.featured-list #startHere{
+    position: absolute;
+    left: -100px;
+    top: -100px;
+    width: auto;
+}
+
+.container-grid-btns button{
+    margin: auto;
+}
+
+.container-grid{
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+}
+
+.container-grid .card{
+    cursor: pointer;
+}
+
+.container{
+    max-width: 1270px;
+    padding:20px;
+}
+
+.featured-list .card .btn{
+    display: inline-block;
+    transform: translateX(-50%);
+    margin-top: -50px;
+    width: 230px;
+    position: absolute;
+    left: 50%;
+    
+}
+
+
+/* Feature Highlight */
+.col-2{
+    display: flex;
+}
+
+.col-2 img.rowImg{
+    width: 750px;
+}
+
+.mini-col-1{
+    text-align: center;
+    max-width: 400px;
+    padding:50px;
+}
+
+.mini-col-1 button{
+    display: inline-block;
+}
+
+/* UI */
+button, .btn{
+    display: flex;
+    gap: 10px;
+    color:#ffffff;
+    background: #DB00FF;
+    border: 3px solid #000000;
+    box-shadow: inset 0px -9px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    text-align: center;
+    /* height: 58px; */
+    font-size: 22px;
+    font-style: normal;
+    padding: 15px;
+    font-family: 'NunitoSemiBold';
+    /* font-weight: 500; */
+    /* display: flex;
+    align-items: center;
+    justify-content: center; */
+    letter-spacing: 0.035em;
+    transition: opacity .15s;
+    cursor: pointer;
+}
+
+button:hover, .btn:hover{
+    opacity: .8;
+}
+
+/* footer */
+
+footer{
+    text-align: center;
+    padding: 75px 0;
+}
+
+footer a:link, footer a{
+    color: #ffffff;
+    /* text-decoration: none; */
+}
+
+footer div {
+    padding: 20px;
+    /* display: flex;
+    gap: 20px; */
+}
+
+footer div img{
+    margin: 0 10px;
+}
+
+.hoc-statement{
+    margin:auto;
+    font-size: .9rem;
+    opacity: .9;
+    max-width: 600px;
+}
+
+#social img{
+    cursor: pointer;
+}
+
+#social img:hover{
+    opacity: .9;
+}
+
+
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+    body{
+        min-width: auto;
+    }
+
+    header{
+        display: block;
+        position: relative;
+    }
+
+    h2{
+        font-size: 65px;
+        line-height: 65px;
+    }
+
+    #hero{
+        background-size: 800px 300px, 300px;
+        height: 300px;
+        margin-top: 0px;
+    }
+
+    #hero .header-tag{
+        display:none;
+    }
+
+    section{
+        padding: 10px 10px 30px 10px
+    }
+
+    .container-grid{
+        display: block;
+    }
+
+    .featured-list {
+        padding: 0;
+    }
+
+    .featured-list #startHere{
+        left: -15px;
+        top: -120px;
+    }
+
+    .card {
+        margin: 50px 0;
+    }
+
+    .col-2 {
+        width: 100%;
+        display: block;
+    }
+
+    .rowImg{
+        display: none;
+    }
+
+    footer div img{
+        margin: 0 5px;
+        width: 50px;
+    }
+
+}