switched to flex layout
This commit is contained in:
parent
d16b33e521
commit
cb1626bf95
GPG key ID:
CABF2F86EF7884F9
5 changed files with 28 additions and 40 deletions
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<form id='sform' method='post' action='https://s.rdsm.ca/search'>
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Reference in a new issue