PonyMirrors/Pony-Fusion
1
0
Fork 0
mirror of https://github.com/Tailszefox/Pony-Fusion.git synced 2024-11-27 07:57:58 +01:00
Code Issues Projects Releases Packages Wiki Activity

Time for some responsive design

Browse source
This commit is contained in:
Tailszefox 2015-04-03 14:40:48 +02:00
parent 721b2475e2
commit 907a94025d
3 changed files with 73 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
css/style-small.css Normal file
View file

@ -0,0 +1,65 @@
.fusionChoice
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
text-align: center;
}
#from
{
margin-left: 5%;
margin-right: 5%;
}
#to
{
margin-left: 5%;
margin-right: 5%;
}
#buttonSwap
{
margin-top: 10px;
margin-bottom: 10px;
}
.buttonsRandomize
{
width: 90%;
margin: 5px;
text-align: center;
}
.buttonsRandomize .topAndBottom
{
display: inline;
}
.buttonsRandomize .leftAndRight
{
display: none;
}
#buttonRandomizeFrom
{
margin-left: 5%;
margin-right: 5%;
}
#buttonRandomizeTo
{
margin-left: 5%;
margin-right: 5%;
}
#buttonRandomizeTo
{
margin-left: 5%;
margin-right: 5%;
}
#legal
{
position: static;
}

6
css/style.css
View file

@ -72,6 +72,11 @@ body
margin-right: 90px; margin-right: 90px;
} }
.buttonsRandomize .topAndBottom
{
display: none;
}
#buttonRandomizeTo #buttonRandomizeTo
{ {
margin-left: 90px; margin-left: 90px;
@ -101,7 +106,6 @@ body
#legal #legal
{ {
background-color: #e5e5e5; background-color: #e5e5e5;
height: 20px;
text-align: left; text-align: left;
margin: auto; margin: auto;
margin-left: 5px; margin-left: 5px;

4
index.php
View file

@ -45,8 +45,10 @@ else
<head> <head>
<title>Pony Fusion</title> <title>Pony Fusion</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen"> <link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/style-small.css" rel="stylesheet" media="screen and (max-width: 800px)">
</head> </head>
<body> <body>
<div id="faqWrapper"> <div id="faqWrapper">
@ -117,7 +119,7 @@ else
?> ?>
</select> </select>
</p> </p>
<p><button type="submit" class="btn btn-info" id="buttonRandomizeFrom">Randomize this one</button> <button type="submit" class="btn btn-info" id="buttonRandomize">Randomize both</button> <button type="submit" class="btn btn-info" id="buttonRandomizeTo">Randomize that one</button></p> <p><button type="submit" class="btn btn-info buttonsRandomize" id="buttonRandomizeFrom">Randomize <span class="leftAndRight">this one</span><span class="topAndBottom">top one</span></button> <button type="submit" class="btn btn-info buttonsRandomize" id="buttonRandomize">Randomize both</button> <button type="submit" class="btn btn-info buttonsRandomize" id="buttonRandomizeTo">Randomize <span class="leftAndRight">that one</span><span class="topAndBottom">bottom one</span></button></p>
<noscript><p><button type="submit" class="btn btn-primary">Fusion</button></p></noscript> <noscript><p><button type="submit" class="btn btn-primary">Fusion</button></p></noscript>
</form> </form>