Skip to content

Commit

Permalink
Format some new instructions style.
Browse files Browse the repository at this point in the history
  • Loading branch information
@atom-box
atom-box committed Jan 28, 2020
1 parent 7aee294 commit 3b808ff
Showing 1 changed file with 260 additions and 0 deletions.
260 changes: 260 additions & 0 deletions sandwich.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,260 @@
<!--
This is an input sorter.
Original Goal:
https://leetcode.com/ says
A sandwich is two pieces of bread with something in between. Return the string that is between the first and last appearance of "bread" in the given string, or return the empty string "" if there are not two pieces of bread.
getSandwich("breadjambread") → "jam"
getSandwich("xxbreadjambreadyy") → "jam"
getSandwich("xxbreadyy") → ""
-->

<!DOCTYPE html>
<html>

<head>
<title>Sandwich</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="images/dryer.png" type="image/png">
<link rel="icon" href="images/dryer.png" type="image/png">
<script src="https://kit.fontawesome.com/c0497ccda4.js"></script>
<xscript src="https://unpkg.com/[email protected]/dist/react.js">
</script>
<xscript src="https://unpkg.com/[email protected]/dist/react-dom.js">
</script>
<xscript src="https://unpkg.com/[email protected]/babel.min.js">
</script>
<script type="text/babel">
// make array of objects to display
</script>
<script src="helpers/form__prefixes.js"></script>
<script>
</script>

<style type="text/css">
:root {
/* from https://creativexcorner.wordpress.com/2018/03/07/jean-michel-basquiat-one-of-the-last-natural-born-artists/ */
--vivid3: rgb(227, 191, 39);
--vivid1: rgb(29, 60, 171);
--vivid2: rgb(213, 90, 34 );
--dark1: rgb(7, 23, 53);
--light1: rgb(197, 190, 170);
--light2: rgb(222, 223, 223);
}
body {
margin: 0;
background-color: var(--light2);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

ul {
list-style-type: none;
height: 11rem;
width: 11rem;
background-color: black;
color: white;
}
li p:hover {
xfont-style: italic;
transform: scale(1.35);
}

.monde {
/*==f=i=l=l==s=c=r=e=e=n==================*/
background-color: #444;
min-height: 100%;
xmin-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
/*===c=e=n=t=e=r=i=n=g=================*/
display: flex; /*(1)VERT*/
flex-direction: row; /*(1)VERT*/
align-items: center; /*(1)VERT*/
justify-content: center; /*(2)HORIZ*/
}

.flex-column {
display: flex;
flex-direction: column; /*(1)VERT*/
xalign-items: center; /*(1)VERT*/
justify-content: center; /*(2)HORIZ*/
}

.flex-row {
display: flex;
flex-direction:row;
}

/*====r=e=s=p=o=n=s=i=b=i=l=i=t=y===========*/
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
.flex-row {
display: relative;
float: left;
}
}

/*=====f=o=n=t===&====t=e=x=t===============*/


.hover-grow:hover, .grow:focus {
transform: scale(1.35);
}


a {
color: rgb(117, 50, 52);
text-decoration: none;
background-color: yellow;
}

a:hover, a:active {
color:#fff;
text-decoration: underline;
transform: 1.3;
}


.highlight{
padding-left:0.15em;
padding-right:0.15em;
border: solid yellow;
}

.highlight:hover {
transform: scale(1.35);

}


.title__hoegarden {
color: var(--vivid1);
text-shadow: 1px 1px 2px white, 0 0 25px gray, 0 0 5px white;
font-weight: 500;
font-variant: small-caps;
}
.title__skinny {
font-weight: 100;
text-indent: 2.5rem;
line-height: 2.6rem;
}
.instructions {
font-family: monospace;
}

.indent {
padding-left: 3rem;
}
/*===d=i=v=s===&====b=o=u=n=d=s=======*/

.bpm {
margin: 0.5rem 2rem;
padding: 0.5rem;
text-align: center;
max-width: 80%;
}

.jumbo {
background-color: var(--vivid1);
color: white ;
}

.elShadow {
box-shadow: 0 7px 7px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border: 0.1rem hidden;
border-radius: 0.3rem;
}

.output {
background-color: var(--vivid2);
color: white;
border: dashed var(--vivid3) 0.2rem;
}
</style>
</head>

<body>
<div class="monde">


<div class="flex-row jumbo elShadow " id="exposed1">
<div class="col-3 elShadow bpm">
<h1 class="title__skinny">Look<span class="title__hoegarden "> inside</span> the sandwich.</h1>
<p>Evan<i class="fas fa-wave-square"></i>Genest</p>
</div>
<!-- left column end -->



<form class="col-9 flex-column" autocomplete="on" oninput="bottomOrange.value = munch(topOrange.value)">
<div class="elShadow xbpm instructions">Instructions:<br /><span class="indent">Type a string that has the same word repeated.</span><br /><br />Typing:<br /><span class="indent"> "xxbreadjambreadyy"</span><br /><br />should return<br /><span class="indent">"jam"</span></div>
<input class=" output elShadow bpm hover-grow" id="topOrange" type="textarea" placeholder="type here"></input>
<!-- out1 end -->
<output class=" output elShadow bpm hover-grow" name="bottomOrange" for="topOrange">see the output here</output>
<!-- out2 end -->
</form>
<!-- right column end -->





</div>
<!-- ROW END and blue block end -->



<ul>
<li type="button" onclick="goOrig()">
<p>Original Colors</p>
</li>
<li type="button" onclick="goDad()">
<p>Dad Colors</p>
</li>
<li type="button" onclick="goContrast()">
<p>Vision Impaired Colors</p>
</li>
<li type="button" onclick="goPrev()">
<p>Previous Colors</p>
</li>
</ul>




</div>
<div>
yes
</div>
<!-- world end -->
</body>

</html>

0 comments on commit 3b808ff

Please sign in to comment.