comparison app/views/tweets/index.html.erb @ 117:e3067b426b70

Improved style
author nanaya <me@myconan.net>
date Sun, 12 Feb 2017 17:20:58 +0900
parents 32c8c150cd80
children dc67a2f34fb7
comparison
equal deleted inserted replaced
116:32c8c150cd80 117:e3067b426b70
33 .main__content { 33 .main__content {
34 flex: 1; 34 flex: 1;
35 } 35 }
36 36
37 .main__footer { 37 .main__footer {
38 padding-bottom: 10px; 38 padding: 5px 0;
39 border-top: 1px solid #000;
39 } 40 }
40 41
41 .twitter-form { 42 .twitter-form {
42 width: 100%; 43 text-align: center;
43 display: flex; 44 background-color: #eee;
44 align-items: center; 45 border: 1px solid #ccc;
46 padding: 10px;
45 } 47 }
46 48
47 .twitter-form__input { 49 .twitter-form__input {
48 flex: 1; 50 width: 100%;
49 margin-right: 5px; 51 margin-right: 5px;
50 font-family: "Courier New", monospace; 52 font-family: "Courier New", monospace;
51 font-size: 16px; 53 font-size: 16px;
54 padding: 5px;
55 }
56
57 .twitter-form__button {
58 margin-top: 10px;
59 padding: 5px 30px;
52 } 60 }
53 </style> 61 </style>
54 </head> 62 </head>
55 <body class="main"> 63 <body class="main">
56 <div class="main__content"> 64 <div class="main__content">
59 Proxying any user's tweet for usage with RSS readers. 67 Proxying any user's tweet for usage with RSS readers.
60 Doesn't actually output <code>rss</code> but generates <code>atom</code> instead. 68 Doesn't actually output <code>rss</code> but generates <code>atom</code> instead.
61 Not that it matters because either way it works with any RSS readers. 69 Not that it matters because either way it works with any RSS readers.
62 </p> 70 </p>
63 71
64 <form class="js-twitter--form twitter-form"> 72 <form class="twitter-form">
65 <input 73 <input
66 name="id" 74 name="id"
67 type="text" 75 type="text"
68 placeholder="Enter Username" 76 placeholder="Enter Username"
69 class="js-twitter--input twitter-form__input" 77 class="twitter-form__input"
70 autofocus 78 autofocus
71 > 79 >
72 <button type="submit"> 80 <button type="submit" class="twitter-form__button">
73 Go 81 Go
74 </button> 82 </button>
75 </form> 83 </form>
76 </div> 84 </div>
77 <div class="main__footer"> 85 <div class="main__footer">
78 <hr>
79 <a href="https://bitbucket.org/nanaya1/rsstweet">Source</a> 86 <a href="https://bitbucket.org/nanaya1/rsstweet">Source</a>
80 </div> 87 </div>
81 </body> 88 </body>