Browse Source

css return

mbarsky 1 year ago
parent
commit
adb988a9f6
2 changed files with 32 additions and 269 deletions
  1. 10 267
      css/style.css
  2. 22 2
      functions/index.html

+ 10 - 267
css/style.css

@@ -1,282 +1,25 @@
 html,body{margin:0;padding:0}
 body{font: 76% arial,sans-serif;display:flex;}
-body{height: 100vh; width:100vw;justify-content:center;align-items:center;}
+body{height: 100vh; width:100vw;justify-content:center;align-items:center}
 p{margin:0 10px 10px}
-a{padding:5px;}
-
-div#header h1 a:link{
-  text-decoration:none;
-  font-family:arial,serial;
-   text-decoration:underline;
-  font-weight:600;
-  color:#CD3333;
-  font-size:32px;
-  height:80px;
-  line-height:80px;
-  margin:0;
-  padding-left:10px;
-}
-
-div#header h1 a:active{
-  text-decoration:none;
-  font-family:arial,serial;
-  font-weight:600;
-  color:#CD3333;
-  font-size:32px;
-   text-decoration:underline;
-  height:80px;
-  line-height:80px;
-  margin:0;
-  padding-left:10px;
-}
-
-div#header h1 a:visited{
-  text-decoration:none;
-  font-family:arial,serial;
-  font-weight:600;
-  text-decoration:underline;
-  color:#CD3333;
-  height:80px;
-  line-height:80px;
-  font-size:32px;
-  margin:0;
-  padding-left:10px;
-}
-
-div#header h1 a:hover{
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
-	background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
-	background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
-	background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
-	background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
-	background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0);
-	background-color:#bc3315;
-	color:#FFFAFA;
-}
-
-div#header{
-	position:relative;
-	-moz-box-shadow: 0px 1px 0px 0px #fff6af;
-	-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
-	box-shadow: 0px 1px 0px 0px #fff6af;
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
-	background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
-	background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
-	background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
-	background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
-	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
-	background-color:#ffec64;
-	border:1px solid #ffaa22;
-	display:inline-block;
-	color:#333333;
-	font-family:Arial;
-	font-size:15px;
-	font-weight:bold;
-	padding:10px 2px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #ffee66;
-	width:103%;
-	left:-13px;
-	top:-10px;
-}
-
-.home{
-	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
-	box-shadow:inset 0px 1px 0px 0px #ffffff;
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
-	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
-	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
-	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
-	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
-	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
-	background-color:#ffffff;
-	-moz-border-radius:6px;
-	-webkit-border-radius:6px;
-	border-radius:6px;
-	border:1px solid #dcdcdc;
-	display:inline-block;
-	cursor:pointer;
-	font-family:Arial;
-	font-weight:bold;
-	padding:4px 12px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #ffffff;
-}
-
-.home:hover{
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
-	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
-	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
-	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
-	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
-	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
-	background-color:#f6f6f6;
-}
-
-.home:active {
-	position:relative;
-	top:1px;
-}
+a{padding:5px; }
+div#header{background-color:rgb(244,244,244);}
+div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
 div#container{text-align:left;padding:1em;}
 div#container{background:rgb(249,249,249);box-shadow:0 .5em 1em 0 rgba(0,0,0,0.1);}
-div#content p{line-height:1.6;}
-div#mainnavigation li{
-	position:relative;
-	top:30px;
-	font-size:20px;
-	font-weight:bold;
-}
-
-div#mainnavigation li a{
-   position:relative;
-   top:-43px;
-   margin-left:2px;
-   background: #3D94F6;
-   background-image:-webkit-linear-gradient(top, #3D94F6, #1E62D0);
-   background-image:-moz-linear-gradient(top, #3D94F6, #1E62D0);
-   background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
-   background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
-   background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
-   -webkit-border-radius: 20px;
-   -moz-border-radius: 20px;
-   border-radius: 20px;
-   color: #FFFFFF;
-   font-family: Open Sans;
-   font-size: 23px;
-   font-weight: 100;
-   padding: 15px 35px;
-   box-shadow: 1px 1px 20px 0px #000000;
-   -webkit-box-shadow: 1px 1px 20px 0px #000000;
-   -moz-box-shadow: 1px 1px 20px 0px #000000;
-   text-shadow: 1px 1px 20px #000000;
-   border: solid #337FED 1px;
-   text-decoration: none;
-   display: inline-block;
-   cursor: pointer;
-   width:110%;
-}
-
-div#mainnavigation li a:hover{
-   background: #1E62D0;
-   background-image: -webkit-linear-gradient(top, #1E62D0, #3D94F6);
-   background-image: -moz-linear-gradient(top, #1E62D0, #3D94F6);
-   background-image: -ms-linear-gradient(top, #1E62D0, #3D94F6);
-   background-image: -o-linear-gradient(top, #1E62D0, #3D94F6);
-   background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
-   text-decoration: none;
-}
-
+div#content p{line-height:1.4}
 div#navigation{background:rgb(251,229,214);}
 div#navigation ul{margin:15px 0; padding:0; }
 div#navigation ol{margin:4ex; padding:0; }
-div#navigation li{
-	margin-bottom:3px;
-	font-size:13px;
-	font-weight:bold;
-}
-
-div#navigation a{
-	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
-	box-shadow:inset 0px 1px 0px 0px #ffffff;
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
-	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
-	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
-	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
-	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
-	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
-	background-color:#ffffff;
-	border:1px solid #dcdcdc;
-	display:inline-block;
-	cursor:pointer;
-	color:#666666;
-	font-family:Arial;
-	font-size:15px;
-	font-weight:bold;
-	padding:6px 24px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #ffffff;
-	text-align:center;
-	width:75%;
-}
-
-div#navigation a:hover{
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
-	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
-	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
-	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
-	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
-	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
-	background-color:#f6f6f6;
-}
-
-div#navigation li a{
-	-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
-	-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
-	box-shadow:inset 0px -3px 7px 0px #29bbff;
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
-	background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
-	background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
-	background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
-	background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
-	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
-	background-color:#2dabf9;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-	border-radius:3px;
-	border:1px solid #0b0e07;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-family:Arial;
-	font-size:15px;
-	font-weight:normal;
-	padding:6px 12px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #263666;
-	width: 120px;
-	text-align:left;
-}
-
-div#navigation li a:hover {
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
-	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
-	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
-	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
-	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
-	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
-	background-color:#0688fa;
-}
-div#navigation li a:active{
-	position:relative;
-	top:1px;
-}
-
-
+div#navigation li{margin-bottom:5px;}
 div#extra{background:rgb(51,63,80); color:rgb(251,229,214);}
 div#footer{background:rgb(244,244,244);}
 div#footer p{margin:0;padding:5px 10px}
 div#container{width:800px;margin:0 auto}
-div#content{float:left;width:600px;}
+div#content{float:left;width:600px}
 div#navigation{float:right;width:200px}
 div#mainnavigation{float:left;width:600px}
-div#extra{position:relative;top:-85px;float:right;clear:right;width:200px}
+div#extra{float:right;clear:right;width:200px}
 div#footer{clear:both;width:100%}
-button{
-	font-size:16px;
-	background:rgb(120,176,135)
-	}
-#completed{
-	font-size:16px;
-	background:rgb(255,193,179);
-	margin-left:3em;
-	}
+button{background:rgb(120,176,135)}
+#completed{background:rgb(255,193,179);margin-left:3em;}

+ 22 - 2
functions/index.html

@@ -28,6 +28,8 @@
   <div id="navigation"> 
   <a href="">Functions</a>
 			<ol>
+			<li><strong>Functions with numbers</strong>
+			<ul>
 			<li><a href="javascript:load_problem(0)">Number of cents</a>
 			</li>
 			<li><a href="javascript:load_problem(1)">Total slices</a>
@@ -36,22 +38,40 @@
 			</li>
 			<li><a href="javascript:load_problem(3)">Total seconds</a>
 			</li>
-			<!--<li><a href="javascript:load_problem(4)">Smaller name</a>
+			</ul>
+			</li>
+			
+			
+			<li><strong>Functions with strings</strong>
+			<ul><li><a href="javascript:load_problem(4)">Smaller name</a>
 			</li>
 			<li><a href="javascript:load_problem(5)">Format name</a>
 			</li>
 			<li><a href="javascript:load_problem(6)">Phonebook listing</a>
 			</li>
+			</ul>
+			</li>
+			
+			
+			<li><strong>Functions with IFs</strong>
+			<ul>
 			<li><a href="javascript:load_problem(7)">Ticket price</a>
 			</li>
 			<li><a href="javascript:load_problem(8)">Calculate grade</a> 
 			</li>
+			</ul>
+			</li>
+			
+			<li><strong>Functions returning Boolean</strong>
+			<ul>
 			<li><a href="javascript:load_problem(9)">Same abs</a>
 			</li>
 			<li><a href="javascript:load_problem(10)">Can vote</a>
 			</li>
 			<li><a href="javascript:load_problem(11)">Same ends</a>
-			</li>-->
+			</li>
+			</ul>
+			</li>
 			</ol>		
   </div>  
   <div id="footer">