Emi/ELOS-License-Builder
1
0
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

Mobile optimization

Browse source
This commit is contained in:
Emi Simpson 2022-02-06 12:14:56 -05:00
parent 86f0b19e00
commit aa5bcf27b1
Signed by: Emi
GPG key ID: 45E9C6E81BD86E7C
2 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
site/index.html
View file

@ -5,6 +5,7 @@
<title>For Good, not Evil — An ELOS License Builder</title> <title>For Good, not Evil — An ELOS License Builder</title>
<script src="elm.min.js"></script> <script src="elm.min.js"></script>
<link rel="stylesheet" href="styles.css"/> <link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=736">
<meta property="og:description" content="The world of today is not the world our free software licenses were written for. The licenses we created to protect freedom are being taken advantage of by institutions like ICE and surveillance states to take away the freedom of others. It's time to reclaim our software in the name of freedom." /> <meta property="og:description" content="The world of today is not the world our free software licenses were written for. The licenses we created to protect freedom are being taken advantage of by institutions like ICE and surveillance states to take away the freedom of others. It's time to reclaim our software in the name of freedom." />
<style> <style>
@font-face { @font-face {

21
site/styles.scss
View file

@ -31,7 +31,7 @@ header {
font-size: 3.2rem; font-size: 3.2rem;
padding: 0px 49px; padding: 0px 49px;
width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
p { p {
@ -129,15 +129,21 @@ header {
#license-chooser { #license-chooser {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 0 50px;
#selected-license { #selected-license {
border: 60px solid; border: 60px solid;
border-image: url("/assets/cool-border.svg") 60; border-image: url("/assets/cool-border.svg") 60;
padding: 30px;
border-radius: 20px; border-radius: 20px;
white-space: pre-wrap; white-space: pre-wrap;
@media (min-width: 1000px) {
padding: 30px;
}
h2 { h2 {
margin-top: 0; margin-top: 0;
line-height: 120%;
} }
p { p {
margin-bottom: 0; margin-bottom: 0;
@ -180,11 +186,18 @@ header {
#modules { #modules {
display: grid; display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px; gap: 50px;
max-width: 1070px; max-width: 1070px;
margin: 0 auto; margin: 0 auto;
margin-bottom: 50px; margin-bottom: 50px;
padding: 0 50px;
@media (min-width: 968px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 968px) {
padding: 0 100px;
}
.module-button > div { .module-button > div {
box-sizing: border-box; box-sizing: border-box;
@ -231,7 +244,7 @@ header {
grid-template-columns: 1fr 0fr 1fr; grid-template-columns: 1fr 0fr 1fr;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
max-width: 900px; max-width: min(900px, 90vw);
gap: 50px; gap: 50px;
font-family: Resistance; font-family: Resistance;
color: #e1c0ed; color: #e1c0ed;