switched to flex layout

This commit is contained in:
Rudis Muiznieks 2023-03-09 09:04:31 -06:00
parent d16b33e521
commit cb1626bf95
Signed by: rudism
GPG Key ID: CABF2F86EF7884F9
5 changed files with 28 additions and 40 deletions

View File

@ -9,7 +9,6 @@ use LWP::UserAgent;
use Storable qw(store retrieve);
## CONFIG
my $icons_per_line = 6; # how many icons to put per line
my $debug_output = 0; # set to 1 to enable debug output
## END CONFIG
#
@ -52,7 +51,6 @@ close $link_template_file;
my $ua = LWP::UserAgent->new();
$ua->agent('Mozilla/5.0 (X11; Linux x86_64; rv:107.0) Gecko/20100101 Firefox/107.0');
my $link_counter = 0;
foreach my $link(@{$links}) {
if($link->{placeholder}) {
print_file($newtab, 'template/link_placeholder.html');
@ -95,11 +93,6 @@ foreach my $link(@{$links}) {
debug("Printing $link->{title} link to newtab.html.");
print $newtab $link_html;
if(++$link_counter == $icons_per_line) {
print_file($newtab, 'template/link_line_separator.html');
$link_counter = 0;
}
}
print_file($newtab, 'template/footer.html');

View File

@ -1,4 +1,3 @@
</ul>
</section>
<section>
<form id='sform' method='post' action='https://s.rdsm.ca/search'>

View File

@ -3,6 +3,7 @@
<head>
<title>New Tab</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<style>
html, body, main, section, ul, li, a, span, form, input {
border: none;
@ -18,38 +19,38 @@
align-items: center;
justify-content: center;
}
ul {
list-style-type: none;
overflow: auto;
}
li {
float: left;
margin: 5px 10px;
text-align: center;
}
li a {
a {
text-decoration: none;
color: #313244;
transition-property: color;
transition-duration: 500ms;
}
li a:hover {
a:hover {
color: #a6e3a1;
}
li a.placeholder:hover {
a.placeholder:hover {
color: #313244;
cursor: default;
}
li a span {
a span {
display: none;
}
li a svg {
a svg {
height: 64px;
width: 64px;
}
body {
background-color: #11111b;
}
#links {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 730px;
}
#links > a {
flex-basis: 64px;
}
input {
width: 100%;
background-color: #11111b;
@ -70,5 +71,4 @@
</head>
<body>
<main>
<section>
<ul>
<section id='links'>

View File

@ -1,8 +1,6 @@
<li>
<a href='{{url}}' title='{{title}}'>
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='{{viewBox}}'>
{{icon}}
</svg>
<span>{{title}}</span>
</a>
</li>
<a href='{{url}}' title='{{title}}'>
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='{{viewBox}}'>
{{icon}}
</svg>
<span>{{title}}</span>
</a>

View File

@ -1,8 +1,6 @@
<li>
<a class='placeholder' href='#' title='' onclick='return false;'>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834-1v1h.916v-1h-.916zm1.833 1h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
</svg>
<span></span>
</a>
</li>
<a class='placeholder' href='#' title='' onclick='return false;'>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834-1v1h.916v-1h-.916zm1.833 1h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
</svg>
<span></span>
</a>